i (am) Blogger and U?

from X-periment to X-perience

Anime/Movie Community Sharing (FullCustom)

Produk ini adalah aplikasi web full-custom yang diperuntukkan bagi Anda yang ingin membuat situs/web yang dapat menampilkan anime/movie dan dapat ditonton oleh para pengunjung. Video an [...]

Web Profil / Portofolio Basic 2

Web Profil/Portofolio Basic 2 memiliki fitur-fitur yang sama persis dengan Web Profil/Portofolio Basic 1 tapi dengan theme/template yang berbeda.

Profile / Portofolio Pro 1

Aplikasi Profil / Portofolio Pro 1, software berbasis web untuk pengelolaan portofolio atau untuk menampilkan profil baik perusahaan maupun perseorangan. Selain itu software ini dapat p [...]

Aplikasi Web: Online Shop PRO 1

Toko Online Pro 1 adalah paket full-features aplikasi toko online yang dapat digunakan untuk menjalankan bisnis Anda secara online. Aplikasi ini memiliki fitur-fitur unggulan dan lengk [...]

Aplikasi Web: Online Shop PRO 2

Toko Online Pro 2 memiliki fitur-fitur yang sama persis dengan Toko Online Pro 1 tapi dengan theme/template yang berbeda.

One-Page Portofolio / Gallery 3

One-Page Portofolio / Gallery 3 memiliki fitur-fitur yang sama persis dengan One-Page Portofolio / Gallery 1 tapi dengan theme/template yang berbeda.

2014
20Apr

Tips Responsive CLEditor

Post category: Web Development

Saat menggunakan CLEditor (editor berbasis web sebagaimana TinyMCE, CKeditor dkk), ada masalah pada saat "responsive layout" yakni ukuran CLEditor tidak mengikuti ukuran layar. Setelah diselidiki, ternyata karena CLEditor menggunakan "fix-width" sehingga ketika ukuran layaran berubah (menjadi lebih kecil dari yang ditentukan), maka CLEditor akan "melayang".


Saya kemudian mengubah sedikit javascript yang digunakan untuk eksekusi cleditor menjadi kira-kira seperti ini:
Misalkan textarea yang digunakan menggunakan id="texteditor" dan berada dalam div dengan id="input"

<script type="text/javascript">
$(document).ready(function(){
var w = $("div#input").width();
$("#texteditor").cleditor({width:w,height:403});
});
</script>


CLEditor akan menggunakan width yang sama dengan div#input (diasumsikan div#input memiliki width:100% dalam css-nya atau sudah "responsive-ready").


Apabila CLEditor masih "terlalu lebar", maka lebarnya dikurangi, misalnya dikurangi 15px:
var w = $("div#input").width() - 15;

Perlu diingat bahwa "solusi ini" belum mengakomodasi event ketika misalnya layar berubah dari "landscape menjadi portrait" dan sebaliknya.


No comments...
>> Comments closed. <<