i (am) Blogger and U?

from X-periment to X-perience

One-Page Portofolio / Gallery 1

One-Page Portofolio/Gallery adalah paket aplikasi web yang memfasilitasi Anda baik perseorangan maupun korporat yang ingin menampilkan/memajang portofolio/hasil karya/gallery kegiatan/p [...]

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

Belajar Online: E-learning - Kuis & Soal

"Belajar Online: E-learning - Kuis & Soal", Software/aplikasi e-learning berbasis web yang dapat digunakan oleh pengajar/guru/pembimbing atau perorangan untuk membuat soal/kuis atau per [...]

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: URL Shortener Complete 1

URL Shortener Complete 1 adalah aplikasi yang membantu Anda untuk menjalankan situs/web yang memiliki fasilitas URL shortener. Pemendek URL sesuai namanya berfungsi untuk memangkas alam [...]

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

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