i (am) Blogger and U?

from X-periment to X-perience

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.

One-Page Portofolio / Gallery 2

One-Page Portofolio / Gallery 2 memiliki fitur-fitur yang sama persis dengan One-Page Portofolio / Gallery 1 tapi dengan theme/template yang berbeda (theme yang dipakai pada versi ini a [...]

Online Shop Basic 1

Online Shop Basic 1 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: WebReview-Series 2

Web Review-Series 2 memiliki fitur-fitur yang sama persis dengan Web Review-Series 1 tapi dengan theme/template yang berbeda (theme yang dipakai pada versi ini adalah theme yang respons [...]

Template Toko Online: Shopper Variant

SHOPPER-Variant adalah HTML template (menggunakan Bootstrap 3.3.6) yang ditujukan untuk toko online. Template ini terdiri dari 6 halaman siap pakai yaitu home, product lists, shopping c [...]

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