Trik Komputer: Javascript Pop Over Division

Sabtu, 04 Desember 2010

Javascript Pop Over Division

Masih mengenai javascript dari artikel , www.rodsdot.com. Biasa hasil ngacak² dapat deh "Advertising Pop-Over Division" Dimana saat akan memasuki blog/web langsung terpampang papan informasi advertise :D Mungkin mirip dengan aksi pada postingan point ke-2 diblog ;) Saran Beben si bloglang ganteng anu kalem tea, trik ini cocok bagi blognya yg masih ringan (cepat diloadingnya/dibukanya) Soalnya javascript nih ;;)
Details original post here: http://www.rodsdot.com/javascript/Advertising-Pop-Over-Division.asp

Javascript

Letakan diatas/sebelum tag </head>

<script type="text/javascript">
//<![CDATA[
function loadOverlay() {
var top=0;
var left=0;
var scrollTop = 0;
document.getElementById('glass').style.display='block';
document.getElementById('glass').style.width=(document.documentElement.clientWidth+10)+'px';
document.getElementById('glass').style.left='0px';
document.getElementById('glass').style.height=(document.documentElement.clientHeight+2000)+'px';
document.getElementById('glass').style.top='0px';
document.getElementById('ad').style.display='block';

// The pop-over division is 262px high by 375px wide
// We need to know where the top of the document is...and
scrollTop = (document.documentElement.scrollTop) ? document.documentElement.scrollTop : window.pageYOffset;

// if top is set at the clientHeight minus the division height divided by 2 plus the scrollTop it will be in the middle;
top = ((document.documentElement.clientHeight-185)/2)+scrollTop;

// if left = the clientWidth minus the division width divided by two is the division will center.
left = (document.documentElement.clientWidth-275)/2;
document.getElementById('ad').style.top=(top)+'px';
document.getElementById('ad').style.left=(left)+'px';
}
function clickad() {
document.getElementById('ad').style.display='none';
document.getElementById('glass').style.display='none';
return false;
}
//]]>
</script>

Keterangan:

Script warna biru
Script warna merah tua
Script warna hijau pias
Script warna ungu tua

Cari tag <body> dan masukan HTML berikut...

<div id="glass"></div>
<div id="ad">
<p>Blah bleh bloh your notes.</p>
<p>Put your says here, for greetings notes!!!</p>
<input type="button" value="Close" onclick="clickad();">
</div>

Cari kembali tag </body> dan letakan javascript pemanggil berikut...<script type="text/javascript">loadOverlay();</script>Save. Good luck and happy Javascript Pop Over Division \m/

Trik Komputer

Sabtu, 04 Desember 2010

Javascript Pop Over Division

Javascript

Tidak ada komentar:

Posting Komentar