Iframe Preloader
Saya ingin membahas mengenai pertanyaan dari The7Bloggers tentang bagaimana caranya menampilkan iframe pada kotak dialog, tapi isi dari iframe tersebut harus dimuat hanya saat kotak dialog ditampilkan:
The7Bloggers pada Alam Perwira di Membuat Kotak Dialog dengan jQuery:
Mas gimana kalau buat iframe, tapi waktu blognya load iframenya ndak ikut load?
Loadnya itu ketika tombol pembuka jQuery-nya di klik?
Pertanyaan bagus. Ini mengenai efisiensi muat halaman. Katakanlah, kita memiliki widget Buku Tamu tersembunyi di sidebar yang terbuat dari elemen <iframe>
. Tapi kita harap kita bisa menunda pemuatan buku tamu tersebut sampai seorang pengunjung mengeklik tombol pembuka, tautan atau apapun yang menjadi pemicu tampilnya buku tamu tersebut.
Untuk memuat iframe pada saat suatu pemicu diklik dapat dilakukan dengan dua metode. Pertama, kita bisa membuat elemen <iframe>
dengan atribut src
kosong, lalu kita set nilai atribut src
kosong tersebut saat sebuah tombol diklik:
HTML
<button>Klik!</button>
<iframe id='dynamicFrame' src=''><iframe>
jQuery
$('button').click(function() {
$('iframe#dynamicFrame').attr('src', 'http://www.namasitus.com');
});
Ke dua, kita bisa menyisipkan elemen <iframe>
pada sebuah kontainer (katakanlah #frameContainer
) saat sebuah tombol diklik:
HTML
<button>Klik!</button>
<div id='frameContainer'><div>
jQuery
$('button').click(function() {
$('#frameContainer').html('<iframe id="dynamicFrame" src="//www.namasitus.com"></iframe>');
});
Saya rasa metode yang ke dua ini lebih baik. Karena setidaknya, saat kita ingin membatalkan proses muat iframe, kita bisa melakukannya dengan cara menghilangkan elemen tersebut seperti ini:
$('button#batal').click(function() {
$('iframe#dynamicFrame').remove();
});
Membatalkan proses muat iframe pada metode pertama sebenarnya juga bisa dilakukan dengan cara menghapus atribut src
pada elemen tersebut:
$('button#batal').click(function() {
$('iframe#dynamicFrame').removeAttr('src');
});
Tapi terkadang metode itu tidak bekerja dengan baik dan iframe masih tetap akan melanjutkan proses muat meskipun tombol pembatal sudah diklik.
Memadukan Konsep jQuery Dialog dengan Iframe Preloader
Sekarang kita akan meletakkan iframe tersebut ke dalam kotak dialog. Di sini Saya tidak akan mencari bahan terlalu jauh. Kita gunakan saja jQuery Dialog yang pernah Saya buat di posting ini untuk kemudian akan kita isi dengan elemen <iframe>
di dalamnya.
Pertama-tama kita harus memodifikasi kerangkanya menjadi seperti ini:
<!-- Start Dialog Box -->
<div id="kotak-dialog">
<h3 class="title">Kotak Dialog<a href="#" class="close">×</a></h3>
<div class="isi-dialog"><div id="iframeContainer"></div> <div class="button-wrapper">
<button class="close">Tutup Kotak Dialog</button>
</div>
</div>
</div>
<div id="dialog-overlay"></div>
<!-- End Dialog Box -->
Pada kode di atas bisa Anda melihat bahwa Saya menyisipkan elemen #iframeContainer
. Kita akan menggunakan itu sebagai tempat iframe
yang akan kita sisipkan dengan jQuery. Berikutnya perhatikan kode ini:
//Tampilkan kotak dialog saat .open-dialog diklik
$('.open-dialog').click(function() {
$('#kotak-dialog').show();
$('#dialog-overlay').fadeTo("normal", 0.4);
return false;
});
Kode tersebut hanya berfungsi untuk menampilkan kotak dialog dan overlay saat tombol pemicu (.open-dialog
) diklik. tapi yang kita harapkan adalah setelah kotak dialog tampil, jQuery akan mencari elemen #iframeContainer
di dalamnya dan setelah itu akan menyisipkan elemen <iframe>
pada elemen tersebut. Itu bisa dilakukan dengan memodifikasi kodenya menjadi seperti ini:
$('.open-dialog').click(function() {
$('#kotak-dialog').show().find('#frameContainer').html('<iframe src="' + this.href + '"></iframe>');
$('#dialog-overlay').fadeTo("normal", 0.4);
return false;
});
this.href
adalah objek yang menyatakan nilai atribut href
pada tautan yang diklik. Kita akan mengunakan pemicu berupa tautan agar kita bisa menyimpan URL iframe pada tautan tersebut, sehingga dengan satu kotak dialog saja, kita bisa membuka lebih banyak halaman di dalam iframe.
Untuk membatalkan proses muat tidak berbeda dari apa yang sudah Saya nyatakan di atas. Saat tombol .close
diklik, sembunyikan kotak dialog dan singkirkan iframe:
// Saat tombol penutup diklik...
$('#kotak-dialog .close').click(function() {
// Hilangkan kotak dialog dengan efek fade-out
$('#kotak-dialog').fadeOut('normal', function() {
// Setelah itu singkirkan iframe di dalamnya
$('iframe', this).remove();
});
// Sembunyikan overlay
$('#dialog-overlay').hide();
return false;
});
Kode Selengkapnya
HTML
<!-- Start Dialog Box -->
<div id="kotak-dialog">
<h3 class="title">Kotak Dialog<a href="#" class="close">×</a></h3>
<div class="isi-dialog">
<div id="iframeContainer"></div>
<div class="button-wrapper">
<button class="close">Tutup Kotak Dialog</button>
</div>
</div>
</div>
<div id="dialog-overlay"></div>
<!-- End Dialog Box -->
CSS
#kotak-dialog {
position:absolute;
top:20%;
left:50%;
margin:0px 0px 0px -200px;
width:400px;
height:auto;
background-color:#fff;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
z-index:1000;
display:none;
}
#kotak-dialog *:focus {
outline:none;
}
#kotak-dialog h3.title {
background-color:#3B5998;
padding:10px 15px;
color:#fff;
font:normal 16px Arial,Sans-Serif;
margin:0px 0px 0px 0px;
position:relative;
}
#kotak-dialog h3.title a {
position:absolute;
top:10px;
right:15px;
color:#fff;
text-decoration:none;
cursor:pointer;
}
#kotak-dialog .isi-dialog {
margin:15px;
font:normal 12px Arial,Sans-Serif;
}
#kotak-dialog .button-wrapper {
padding:10px 15px 0px;
border-top:1px solid #ddd;
margin-top:15px;
}
#kotak-dialog .button-wrapper button {
background-color:#FF0C39;
border:none;
font:bold 12px Arial,Sans-Serif;
color:#fff;
padding:5px 10px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
cursor:pointer;
}
#kotak-dialog .button-wrapper button:hover {
background-color:#aaa;
}
#dialog-overlay {
position:fixed !important;
position:absolute;
z-index:999;
top:0px;
right:0px;
bottom:0px;
left:0px;
background-color:#000;
display:none;
}
/* Iframe */
#iframeContainer iframe {
width:100%;
height:300px;
border:none;
background-color:#ccc;
overflow:auto;
}
jQuery
//<![CDATA[
$(function() {
$('.open-dialog').click(function() {
$('#kotak-dialog').show().find('#iframeContainer').html('<iframe src="' + this.href + '"></iframe>');
$('#dialog-overlay').fadeTo(400, 0.8);
return false;
});
$('#kotak-dialog .close').click(function() {
$('#kotak-dialog').fadeOut('normal', function() {
$('iframe', this).remove();
});
$('#dialog-overlay').hide();
return false;
});
});
//]]>
Elemen pemicu dibuat dengan sebuah elemen tautan yang memiliki kelas .open-dialog
seperti ini:
<a class="open-dialog" href="//www.namasitus.com">Buka Kotak Dialog</a>
44 Komentar
Putra
nah, maksud saya itu ini mas ^_^
saya jga pernah nanya di lightbox, tp gak tau mau ngoomongnya gmn :D
mas, kalu mau 2 iframe jadi satu kayak di cbox itu gmn?? kan kalau di cbox ada kotak form sama kotak main, thanks sebelumnya mas udah banyak mbantu :) \o/ \o/
#desain alert emotnya kereeen \o/ \o/
Unknown
Desain kotak Komentar Tambah Edan, pantes gak pernah nongol sekarang TOmbol Balasnya pun udah edan haduh bang bang kapan aku bisa kayak gini xixixixixi share bang kapan2 nih style kotak komenX biar gak capek2 Ngelayani popUp komen :D
Taufik Nurrohman
@Alam Perwira Saya sempat mengecek situsnya, di situ perbedaannya cuma ada di
&sec=form
dan&sec=main
. Sebenarnya ini cukup rumit, tapi semoga saja bisa dipahami perlahan-lahan.URL yang akan kita ambil nantinya cuma sampai di awal
&sec=main
atau&sec=form
seperti ini:Setelah itu kita buat dua buah
iframe
di dalam JQuery.html()
. Tapi, supaya lebih mudah lebih baik didefinisikan terlebih dahulu di dalam variabel:&sec=main
dan&sec=form
Saya taruh belakangan di dalam elemen<iframe>
Kira-kira begitu <=)
Taufik Nurrohman
@system of blog Susah mas, soalnya ini benar-benar harus menyesuaikan diri (kreasi sendiri). Kalau Saya ingin melakukan seperti ini, maka yang Saya lakukan ini cuma berlaku untuk blog ini saja. Jadi kalau misalnya Saya mencoba membuat tutorial mengenai fasilitas thread comment modifikasi ini untuk diterapkan pada blog lain secara universal akan sangat sulit.
Saya cuma akan memberi satu rahasia: Mengenai pop-up formulir komentar yang muncul sebenarnya tidak ada gunanya sama sekali. Karena inti cara kerja sistem thread commenting versi ini (Saya masih menggunakan versi yang sama) hanya mendeteksi karakter balasan yang notabene terdiri dari karakter-karakter
@Nama Pengguna
Pada prinsipnya, JavaScript cuma mengambil karakter ID dari tautan nama orang tersebut (dalam hal ini misalnya
#c8238749066890392459
) setelah itu script tersebut akan melakukan tugasnya dengan menyesuaikan ID masing-masing komentar balasan yang ditemukan :WIntinya adalah, cari tahu bagaimana cara mendapatkan userID tanpa harus membuka pop-up window :)
[note]Baca: Kumpulan Blogger Thread-Comment Hack[/note]
Unknown
@Taufik Nurrohman Oohhh iya iya kapan2 aku liat2 tapi belum ngerti JS juga si masalahx hehehee iya bang memang susah kalau ngasi tutorial karena kadang kode template berbeda, sip deh kalau begitu
Putra
@Taufik Nurrohman wiiw kaget bgt pas mbls comment nya, kayak vanaluv, tpi kalau ini harus dicopas dahulu ^_^ \o/ \o/
singkatnya saja mas, kalau semisal dilebarin begitu saya masih bingung, wajar masih belom begitu bisa jquery, bisanya cmn ngubah value nya :D
Taufik Nurrohman
@Alam Perwira Untuk menyesuaikan lebar kotak dialog ada di dua bagian ini:
Sesuaikan nilai
width
, kemudian yang margin negatif itu nilainya adalah setengah dariwidth
. Tujuannya supaya posisinya tepat di tengah.Putra
@Taufik Nurrohmanbukan gtu maksudnya, kalau yg konten ditengah saya sudah baca postingan mas taufik yg dulu :)
caranya masang nya wae yg dibls :D tpi tadi saya coba gabungkaan sama script jquery diatas gak work itu mas?? :(
Taufik Nurrohman
@Alam Perwira Haduhh... mulai puyeng ini :-a
Putra
@Taufik Nurrohmanyaudahlah mas, udah bisa kok, tpi pakek web cbox yg khusus bwt chat ^_^ tekape http://al4m-blog.blogspot.com/ :D \o/ \o/
Taufik Nurrohman
@Alam Perwira Biar lebih mantap bisa ditambah lagi dengan gambar animasi loading di belakang buku tamu :-bd
Anonim
Mas aku udah terapin nih, heheheh mantap. Berhasil tapi aku pkek plugin lightbox. Coba mas cek di blog aku? :D
Taufik Nurrohman
@The7Bloggers Pemicu memakai slideshow, Iframe menggunakan plugin. Cerdas! :-bd
Anonim
@Taufik Nurrohman Terima kasih mas, oy saya mau tanya gimana caranya buat search box kayak punya kamu tuh? Aku dari tadi inspect elemen blog kamu dan aku peljari kok kagak bisa2 mas?
Anonim
@The7Bloggers Oy mas apakah jQuery ama blogger thread comment.js itu konflik?
Taufik Nurrohman
@The7Bloggers Search Box... itu membuatnya memakai Google Custom Search: http://www.google.co.id/cse/
Tidak juga kok. Di sini Saya juga sudah memodifikasinya dengan memadukan JQuery untuk efek animasi dan pengambilan data.
Putra
@Taufik Nurrohman wiw, sudah saya terapkan mas, saya gak terpikirkan kyk gtu :D
Beben Koben
hati-hati saja penggunaan script yg lumayan banyak memang di pakai jg oleh pihak blogger. conto variabel iframe nih. blogger banyak menanamkan pemanggilan² melalui script mereka!
kalo dah bentrok, dan kita nggak ngerti, itu yg repot...hehehe
nice plugin
Anonim
@Taufik Nurrohman Ya mas, aku coba dulu.
Oya mas, NivoSlider di blog aku kan menggunakan script dari kamu, terus aku sekarang lagi modifikasi NivoSlider aku, tapi kenapa ya tag ini
udah aku tambahin kode css ni:
Tapi kalau dibuka di browser/komputer aku efeknya ndak kelihatan, sedangkan kalau dibuka di komputer lain kelihatan efeknya.
Terus sekarang saya mau menambahkan kode css diatas pada script dari kamu, tapi dibagian mana ya?
Ni script dari kamu
Taufik Nurrohman
@Beben Koben Hehe.. ini bukan plugin. Cuma konsep :) Kalau plugin bentuknya seperti ini kang:
Blogger memang sangat identik dengan Iframe, tapi setidaknya mereka memiliki ID sendiri-sendiri, jadi tidak perlu khawatir :-d
Taufik Nurrohman
@Beben Koben [note]Baca JQuery Documentation: Plugins/Authoring[/note]
Taufik Nurrohman
@The7Bloggers Melihat caption-nya pakai apa? Pakai inspect element ya? :) Elemen asli di bagian dalam sebenarnya tidak ada atribut inline-style seperti itu, tapi karena sudah diset oleh JavaScript di bagian opsi, jadinya browser akan mengeset
opacity
pada elemen.nivo-caption
menggunakan atributstyle=""
:Saya kemarin sudah lihat ada efek gradiasinya kok. Mungkin versi browsernya yang harus diperbaharui karena biasanya ini karena browser tidak mendukung CSS3 Gradient.
Meletakkan CSS bagaimana ya? Setahu Saya sama saja seperti yang lain :-bd
Untuk menulis kode panjang letakkan di dalam
<i rel="pre"> ... </i>
[note]Artikel terkait: Konfigurasi JQuery NivoSlider[/note]
Anonim
@Taufik Nurrohman Aku pkek browser google chrome 19 mas, hehehehe ya pkek inspect elemen. Wkwkwkwk.
Owh gitu ya. Trims deh mas Infonya. :-bd
Anonim
@The7Bloggers Oy mas, aku udah coba ke google Custom Search. Tapi itu kan buat untuk di page ajah search boxnya kyak ni.
http://the7bloggers.blogspot.com/2012/02/the7bloggers-custom-search.html
Yan aq maksud ntu gimana cara membuatnya terpisah mas kyak di blog kamu ini. Apalagi yang aku bingung adalah ni.
Yang aku bingung dapet value value ntu dari mana.
Tolong dijelasin ya cara misahinnya....? heheheheh :-D
Taufik Nurrohman
@The7Bloggers Cek halaman ini: http://www.google.com/cse/tools/create_onthefly :yaya:
Beben Koben
@Taufik Nurrohman saya mah kagak tau script...
tapi kalau di tanya perpustakaan mengenai script and khususnya jQuery, jangan tanya...hsuahsuahushauhsuahuah
Anonim
@Taufik Nurrohman Mas saya masih ndak mengerti nih, saya udah baca url dari mas terus aku terapin tuh kode. Kenapa kok ndak muncul ya efeknya....?
Terus yang dibagian statis page kamu yang ini /p/cari-artikel.html itu diisi apa ya...? Kok ada script ini:
Bngung aku mas? :P Hehehehehe
Taufik Nurrohman
@The7Bloggers Ya, itu untuk meload/memuat halaman Google ke dalam posting. ID halaman Google berbeda-beda, dan itu bisa diset di bagian ini:
Terus, mengenai nilai
action
pada<form>
itu diisi URL halaman yang ada script di atas.Bayu Handono
nah bisa ga yah kalo trik ini digunakan buat alamat ini http://ampatico.com/Facebook/iGoogle/7/index
jadi dalam framenya ada isi tampilan facebooknya
Taufik Nurrohman
@Bayu Handono Hmmm... nggak ada isinya T_T Adanya cuma ini:
Bayu Handono
kalo pengen bikin halaman ini iframe nya kaya gmana mas??
maaf banyak nanya, sering ngerepotin. hehe :(
Bayu Handono
@Bayu Handono http://sekaratmutlak.blogspot.com/2012/01/animasi-loading-dengan-jquery-bagian-2.html :p
Taufik Nurrohman
@Bayu Handono Ganti saja latarnya: http://jsfiddle.net/tovic/6jBH7/36/
zamaludin abdulah
@Taufik Nurrohmanterima kasih gan atas pencerahannya, sekarang searchnya bisa di halaman sendiri :D
bila berkenan kunjungi blog saya ya ;)
http://zamal-tkj.blogspot.com
iLab
mas taufik kok overlay nya gak jalan yaa , iframe udah jalan sempurna nih mohon bimbingan nya
Taufik Nurrohman
Coba ganti
.fadeTo()
jadi.fadeIn()
Unknown
Maaf mas, mau tanya, kalo ini kan script buat iframe preloader. gimana caranya kalo untuk embed object preloader yang bekerja sama seperti diatas (diklik baru diload dan dijalankan). misal kode kita adalah < object >< embed scr= blablablab.swf flashvars= blablabla dst >< / object >
Taufik Nurrohman
Demo: http://jsfiddle.net/tovic/43eG7/59/
kd
hi hompimpa,
iframeContainer tidak fixed ketika tombol open-dialog ditekan...
Awak tahu cara penyelesaiannya?
jsfiddle - http://jsfiddle.net/6jBH7/76/
Taufik Nurrohman
Just replace
position:absolute
withposition:fixed
. Should works fine:Unknown
~x( X@ 7:O :'( :Ozz bingung, coba diterapin ndak berubah
mungkin masih salah naruh kode-kode nya x@
Unknown
permisi. mas... saya mo tanya .. kok iframe lightbox nya gak kluar.. malah langsung buka link situsnya.. .. :-bd
Unknown
Permisi mas,,, saya juga mau nanya,,, kenapa iframe lightbox ini tidak berfungsi jika pemuatan halaman belum selesai total,,, Jika diklik pasti langsung menuju link situsnya,, tapi klo proses load halaman sudah selesai lightboxnya berfungsi.... mohon dibalas ea mas taufiq yang ganthenk... :D
Taufik Nurrohman
⇒ /2013/08/memahami-domcontentloaded.html