WebmasterOnline.biz

Get free Java Script tutorials, references, code, menus, calendars, popup windows, demo with source code with examples

Flying Images

Images flying  on Web Pages

Rain Fall Effect

Example of Rain Fall

Swirling Cursor

Swirling Cursor around mouse Pointer

Slide Down Menu

Menu Slide Down on Mouse click

Scrolling Vertical Box

Vertical Scrolling Box

Fire on Click

Fire effect on mouse click

Text Follows

Text follows mouse pointer

Message Display 

Messages display like  & Scrolling Add

Find A Day

Find any day by just inputs dates

Timer

Timer Messages

Bird Follows Mouse

Bird follows mouse points

Mouse Run With Trail

A trail of images run with mouse

Snow Fall at Night effect

Snow fall like effects

Know Your Relation

Know relationship with other

 Click Here for Demo on separate window

<script language="JavaScript"> function goToURL() { history.go(-1); } </script> <style> <!-- .menu { background-color:#98A2C3; border:1px solid green; width:220px; font-size:11px; font-family:verdana; position: absolute; font:bold; color: #800000; cursor: hand; } .item_panel { width:220px; border-left:1px solid green; border-right:1px solid green; clip:rect(0,150,0,0); position:absolute; } .item_panel a { text-decoration:none; color:black; cursor:hand; } .item { background-color: #808880; width: 218px; font-size: 10px; font-family: verdana; } --> </style> <script language="JavaScript"> <!-- visit http://www.geocities.com/mobinlodhia for more JavaScripts, GIFs, Jokes & much more var height = 25; // height of the menu headers var iheight = 20; // height of the menu_items var bgc = "#E9F0F8" // background color of the item var tc = "black" // text color of the item var over_bgc = "yellow"; var over_tc = "#994891"; var speed = 1; var timerID = ""; var N = (document.all) ? 0 : 1; var width =515; var self_menu = new Array(); function write_menu() { smc = 0; // count the position of the self_menu document.write("<div style='position:absolute'>"); mn = 0; mni = 1; start = -1; for(i=0;i<Link.length;i++) { la = Link[i].split("|"); if (la[0] == "0") { if(start == 0) { document.write("</div>"); h = csmc * iheight; tmn = mn; //-h self_menu[smc] = new Array(tmn,h,0,-2); smc++; mn--; } csmc = 0; document.write("<div class='menu' style='top:"+mn+";height:"+height+"' id='down"+smc+"' onclick='pull_down("+smc+","+mni+")'> "+ la[1] + "</div>"); self_menu[smc] = new Array(mn,height,0,mni); smc++; mni++; mn+=height; start = 1; } else { if(start == 1) { if(N)mn+=2; document.write("<div class='item_panel' id='down"+smc+"' style='top:"+mn+"'>"); start = 0; } document.write("<a href='"+la[2]+"'"); if (la[3] != "") document.write(" target='" + la[3] + "' "); document.write("><div class='item' id='d"+i+"' style='height:"+iheight); if (N) document.write(";width:150"); document.write("' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'> "+ la[1] + "</div></a>"); csmc++; } } if (start == 0) { document.write("</div>"); h = csmc * iheight; tmn = mn + 5; //-h self_menu[smc] = new Array(tmn,h,0); name = "down" + (self_menu.length-1); obj = document.getElementById(name); obj.style.borderBottomColor = "darkblue"; obj.style.borderBottomWidth = 1; obj.style.borderBottomStyle = "solid"; } document.write("</div>");} function color(obj) { document.getElementById(obj).style.backgroundColor = over_bgc; document.getElementById(obj).style.color = over_tc } function uncolor(obj) { document.getElementById(obj).style.backgroundColor = bgc; document.getElementById(obj).style.color = tc } function pull_down(nr,c) { if (timerID == "") { to = self_menu[nr+1][1] begin = nr + 2; if (timerID != "") clearTimeout(timerID); if (self_menu[nr+1][2] == 0) { self_menu[nr+1][2] = 1; if(nr == self_menu.length-2) {to++;} epull_down(begin,to,0); } else { to = 0; self_menu[nr+1][2] = 0; name = "down"+(nr+2); open_item = 0; for(i=0;i<nr;i++) { if(self_menu[i][2] == 1) {open_item += self_menu[i][1]; } } if (N == false) {open_item-= (c*1)}; if (nr== self_menu.length-2) {val = self_menu[self_menu.length-1][1];to=-1;} else val = parseInt(document.getElementById(name).style.top) -(open_item)-(c*height); epull_up(begin,to,val); } } } function epull_down(nr,to,nowv) { name = "down" + (nr-1); obj = document.getElementById(name).style.clip = "rect(0,"+width+","+(nowv+1)+",0)"; for (i=nr;i<self_menu.length;i++) { name = "down" + i; obj = document.getElementById(name); obj.style.top = parseInt(obj.style.top)+1; } nowv++; if(nowv < to) timerID = setTimeout("epull_down("+nr+","+to+","+nowv+")",speed); else timerID = ""; } function epull_up(nr,to,nowv) { name = "down" + (nr-1); obj = document.getElementById(name).style.clip = "rect(0,"+width+","+nowv+",0)"; for (i=nr;i<self_menu.length;i++) { name = "down" + i; obj = document.getElementById(name); obj.style.top = parseInt(obj.style.top)-1; } nowv--; if(nowv > to) timerID = setTimeout("epull_up("+nr+","+to+","+nowv+")",speed); else timerID = ""; } function startup(nr) { write_menu(); if (nr != 0) { for(i=0;i<self_menu.length;i++) { if(self_menu[i][3] == nr) pull_down(i,nr) i==self_menu.length; } } } --> </script> <table align=left width=55> <tr> <td> <div align="center" > <script language="JavaScript"> //Link[nr] = "position [0 is menu/1 is item],Link name,url,target (blank|top|frame_name)" var Link = new Array(); Link[0] = "0|My Name & Surname"; Link[1] = "1|Mobin Lodhia|http://www.geocities.com/mobinlodhia|"; Link[2] = "0|Adress"; Link[3] = "1|AMAN,Virdi Plot,Porbandar(INDIA)|http://www.geocities.com/mobinlodhia/selfintro.htm|"; Link[4] = "0|Telephone"; Link[5] = "1|0286 2213406|http://www.geocities.com/mobinlodhia/selfintro.htm|"; Link[6] = "0|Web Site"; Link[7] = "1|http://www.geocities.com/mobinlodhia|http://www.geocities.com/mobinlodhia"; Link[8] = "0|E-Mail"; Link[9] = "1|mobinlodhia@cheerful.com|http://www.geocities.com/mobinlodhia/email.htm|"; Link[10] = "1|mobinlodhia@hotmail.com|http://www.geocities.com/mobinlodhia/email..htm|"; Link[11] = "0|Your Place on My Site"; Link[12] = "1|You may added|http://pub18.bravenet.com/guestbook/show.php?usernum=1470072250&cpv=1|"; startup(1); </script>