Sabtu, 04 Desember 2010

Javascript Pop Over Division

Masih mengenai javascript dari artikel remote images with ajax, 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 blogger sentral ;) 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:
  1. Script warna biru
  2. Jika mau menambahkan lebar warna background (tp kayaknya tidak usah)
  3. Script warna merah tua
  4. Untuk menambah jika warna background kurang menutupi semua tampilan template blog/web sobat.
  5. Script warna hijau pias
  6. Jika papan info ketinggian dari tab windows.
  7. Script warna ungu tua
  8. Jika papan info kurang kekanan posisinya
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/

Tidak ada komentar:

Posting Komentar