i (am) Blogger and U?

from X-periment to X-perience

Badge/Watermark Image Generator

Badge/Watermark Image Generator adalah aplikasi web yang digunakan untuk membuat badge/watermark atau penanda pada foto/gambar yang biasanya digunakan misalnya pada penanda foto produk [...]

Aplikasi Web: Custom Form

Aplikasi Web Custom Form, software berbasis web dengan fitur utama adalah pembuatan DYNAMIC FORM (form web dinamis). Form ini terdiri dari berbagai jenis field, seperti field input text [...]

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.

Online Shop Basic 2

Online Shop Basic 2 adalah paket minimalis aplikasi toko online instan yang dapat digunakan untuk menjalankan bisnis secara online. Aplikasi ini adalah aplikasi toko online yang "sudah [...]

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.

Aplikasi Web: WebReview-Series 1

Web Review-Series 1 adalah paket aplikasi web yang memfasilitasi Anda yang ingin membuat situs yang berisi review dari berbagai hal. Review tentang suatu produk, Review tentang suatu te [...]

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. <<