◄ Min  Size Fonts: + | - | ± Color: Max ►

Make Iframe Preloader using JavaScript or jQuery

Langkah bijaksana adalah salah satu sikap menuju ke tingkat kedewasaan. Berhentilah makan sebelum kenyang, belilah sesuatu menurut keperluan. Begitu juga dengan blog, pasanglah widget/gadget sesuai kebutuhan, pasang snippet/hack script ke dalam template juga menurut fungsi. Tanya dan lihat apakah kita memerlukan itu semua!!! Jika kalian pasang di blog apakah memang layak? Satu contoh kasus begini, sobat tahu fitur recent comment! Bagi blogger seperti gue yg saban hari bisa online, belum perlu memasang hal itu karena masih bisa terlacak langsung pada sesi dashboard. Jadi intinya
Pasang or buatlah segala sesuatu itu berguna bagi diri sendiri dan orang lain, tanpa menghilangkan nilai tujuan misi & visi mereka berada di blog kita. Begitu kira-kira :dBeben Koben
Koben sekarang mau berbagi cerita mengenai iframe preloader. Mungkin sudah banyak yg membuat artikel ini, tapi di sini saatnya langkah optimasi and permudahan :p Kenapa gue mengangkat tema ini, karena fungsinya yaitu membuka hal tanpa mesti meninggalkan blog si pemilik. Secara garis besar ada dua jenis yakni iframe preloader using jquery & iframe preloader using javascript! Untuk versi JavaScript gue comot dari master Zhinto. Kenapa versi ini dipilih, karena dapat memanggil variable iframe lebih dari satu b-) Silahkan kunjungi link iframe preloader javascript + css3 dan ikuti instruksi yg ada. Berikut optimasi kode yg gue buat, kalian tinggal melakukan edit/tambahkan variabel sesuai dgn keperluan!
#bungkuy {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
}
#bungkuy iframe {
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 0;
width: 100%;
height: 100%;
position: absolute;
}
#bungkuy .hilang {
left: 0;
bottom: 0;
content: '';
color: #f00;
width: 25px;
height: 23px;
z-index: 999;
position: fixed;
cursor: pointer;
background: #333;
text-align: center;
}
.tampil {
opacity: 1;
visibility: visible;
}
.hiddne {
opacity: 0;
visibility: hidden;
}
.awal {
display: none
}
.lanjut {
display: block
}
Letakan planing HTML berikut tepat di bawah kode <body><div id='bungkuy' class='hiddne'>
<div class='hilang' onclick='sembunyi();'>X</div>
<iframe id="iprame" class="awal"></iframe>
</div>
Bumbu JavaScript taruh diatas tag penutup </body> Bila gagal coba taro sebelum tag penutup </head>
<script>//<![CDATA[
function tampil(obj){var p=document.getElementById('bungkuy'),b=document.getElementById('iprame');p.className='tampil';b.className='lanjut';b.src=obj.href;}function sembunyi(){var p=document.getElementById('bungkuy'),b=document.getElementById('iprame');b.className='awal';b.src='';p.className='hiddne';}window.onload=function(){var p=document.getElementsByClassName('kotax');for(var i=0;i<p.length;i++){p[i].onclick=function(){tampil(this);return false;}}}//]]></script>
Pemakaiannya pakai syntax begini<a class="kotax" href="http://www.blogger.com/">Link 1</a>
<a class="kotax" href="http://www.bing.com/">Link 2</a>
<a class="kotax" href="http://www.wikipedia.com/">Link 3</a>
Tinggal menambahkan atribut class="kotax" pada link.
Beres versi JavaScript sekarang giliran jQuery version. Gue jatuhkan pilihan dari master Taufik Nurrohman. Tengok artikelnya iframe preloader used jQuery Seperti biasa bloglang bagian optimasi dan penyederhanaan coding ;))
#kotak-dialog {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
display: none;
position: fixed;
}
#kotak-dialog .title {
color: #fff;
height: 20px;
text-align: left;
padding: 8px 10px;
background-color: #3B5998;
}
#kotak-dialog .title a {
top: 9px;
right: 15px;
color: #fff;
position: absolute;
}
#dialog-overlay {
display: none;
}
#iframeContainer iframe {
top: 35px;
left: 0px;
right: 0px;
bottom: 0px;
border: none;
opacity: 0.1;
position: absolute;
}
#iframeContainer:hover iframe {
opacity: 1;
}
Taruh script jQuery diatas tag </body> (rekomendasi), kalau tidak jalan di bawah jQuery script inti!<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'>
</script>
<script>//<![CDATA[
$(document).ready(function(){
$('.open-dialog').click(function() {
$('#kotak-dialog').show().find('#iframeContainer').html('<iframe src="' + this.href + '" width="100%" height="100%"></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;
});
});//]]></script>
Letakan planing HTML tepat di bawah kode <body><div id="kotak-dialog">
<div class="title">Kotak Dialog<a href="#" class="close">X
</a></div>
<div id="iframeContainer"></div>
</div>
<div id="dialog-overlay"></div>
Cara aturan main<a class="open-dialog" href="http://www.blogger.com/">Link 1</a>
<a class="open-dialog" href="http://www.bing.com/">Link 2</a>
<a class="open-dialog" href="http://www.wikipedia.com/">Link 3</a>
Tinggal pakek atribut class="open-dialog" pada syntax link.
Demikian kisah dua type iframe preloader pilihan Beben Koben si Bloglang anu Ganteng Kalem Tea. Ingat pada awal paragraf, pasang & pakai snippet coded sesuai dengan keperluan ;) Mau full stylish, pakek banyak script >:)
project.mahemoff.com/jquery-iframe
Happy script \m/
Loading...
XMake Iframe Preloader using JavaScript or jQuery
Membuat iframe preloader menggunakan javascript atau jquery.
Subscribe my posts Register For Free!

2 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE