i (am) Blogger and U?

from X-periment to X-perience

Starter: Anime/Movie Sharing

Produk yang satu ini adalah aplikasi web yang dikhususkan bagi Anda yang ingin memiliki situs/web yang dengan fasilitas untuk menampilkan anime/movie dan dapat ditonton oleh para pengun [...]

WP Plugins: RSS to Post

RtoP adalah WordPress Plugins yang memudahkan untuk membuat post yang content-nya berasal dari blog/web lain dalam hal ini dengan memanfaatkan RSS. RtoP dapat menyimpan banyak RSS da [...]

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

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

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

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

Tips Responsive CLEditor

Category: Web DevelopmentDate:
Sunday, 20 Apr 2014

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