Rabu, 19 Juni 2013

Update 2 Iframe Preloader Javascript Css3


Baiklah setelah seharian pusing berkoding akhirnya kelar juga memperbaiki masalah javascript pada posting Iframe preloader Sebelumnya, aku juga kok baru kepikiran kalau menggunakan ID pasti cuman bisa 1 link saja yang bekerja, sebelumnya terima kasih untuk masukan komentarnya teman-teman. baiklah kali ini hanya saya update saja kodenya menjadi lebih praktis jadi kita hanya perlu menambahkan class saja pada linknya maka otomatis linknya akan terbuka pada iframe.

<script type="text/javascript">
//<![CDATA[
// ZTO CREATION
// http://zhinto.blogspot.com/
function tampil(obj){
var p = document.getElementById('bungkus'), //bungkus iframe
b = document.getElementById('iframe'); //Iframe
p.className = 'tampil';
b.className = 'lanjut';
b.src = obj.href;
}
function sembunyi(){
var p = document.getElementById('bungkus'), //bungkus iframe
    b = document.getElementById('iframe'); //Iframe
b.className = 'awal';
b.src = '';
p.className = 'hidden';
}
window.onload = function(){
var p = document.getElementsByClassName('k');
for(var i = 0; i < p.length; i++){
p[i].onclick = function(){
tampil(this);
return false;
}
}
}
//]]>
</script>

Simpan javascriptnya diatas </body> atau </head>

<div id='bungkus' class='hidden'>
<div class='hilang' onclick='sembunyi();'>&#171;</div>
<iframe id="iframe" class="awal"></iframe>
</div>

Simpan kode HTML dibawah <body>

#bungkus {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
    z-index: 99999
    }

#bungkus iframe {
    border: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%
    }
#bungkus .hilang {
    cursor: pointer;
    background: #252424;
    color: #E00;
    width: 15px;
    position: absolute;
    height: 100%;
    text-indent: 1px;
    z-index: 999;
    font: normal 19px/500px Arial, sans-serif
    }
/* CSS Transfer */
.tampil {
    visibility: visible;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: scale(1);
     -moz-transform: scale(1);
      -ms-transform: scale(1);
       -o-transform: scale(1); 
          transform: scale(1);
    }

.hidden {
    visibility: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: scale(0);
     -moz-transform: scale(0);
      -ms-transform: scale(0);
       -o-transform: scale(0); 
          transform: scale(0);
    }

.awal {
    display: none
    }

.lanjut {
    display: block
    }
/* Batas Css Transfer */

Simpan kode cssnya diatas ]]></b:skin>

<a class='k' href="http://zhinto.blogspot.com/">Cek</a>

Jadi ketika kita ingin menambah link yang terbuka pada iframe kita tinggal tambahkan saja class='k' beres deh.