Want to add a short sound effect to your page for certain actions, such as when the user moves the mouse over a link? This is a simple yet versatile script that lets you do just like! Relying on IE's BGSOUND attribute (and hence IE5+ only), the script can easily add a sound effect to a single item (ie: 1 link), or thanks to a helper function, all items of the specified element (ie: all <a> tags). This makes it very easy to add a sound effect to an entire menu's links, for example. <bgsound src="#" id="soundeffect" loop=1 autostart="true" /> <script type="text/javascript"> var soundfile="sidebar.wav" //path to sound file, or pass in filename directly into playsound() function playsound(soundfile){ if (document.all && document.getElementById){ document.getElementById("soundeffect").src="" //reset first in case of problems document.getElementById("soundeffect").src=soundfile } } function bindsound(tag, soundfile, masterElement){ if (!window.event) return var source=event.srcElement while (source!=masterElement && source.tagName!="HTML"){ if (source.tagName==tag.toUpperCase()){ playsound(soundfile) break } source=source.parentElement } } </script>
Read More..
2008-03-03
2008-03-01
This function is about : Certain situations call for the refreshing of the webpage every few seconds/ minutes (such as a webcam page). Use Brett's script to carry out this task in a graceful, "visual" manner. Step : Copy Paste into your HTML code <script language="JavaScript"> //configure refresh interval (in seconds) var countDownInterval=60; //configure width of displayed text, in px (applicable only in NS4) var c_reloadwidth=200 </script> <ilayer id="c_reload" width=&{c_reloadwidth}; ><layer id="c_reload2" width=&{c_reloadwidth}; left=0 top=0></layer></ilayer> <script> var countDownTime=countDownInterval+1; function countDown(){ countDownTime--; if (countDownTime <=0){ countDownTime=countDownInterval; clearTimeout(counter) window.location.reload() return } if (document.all) //if IE 4+ document.all.countDownText.innerText = countDownTime+" "; else if (document.getElementById) //else if NS6+ document.getElementById("countDownText").innerHTML=countDownTime+" " else if (document.layers){ //CHANGE TEXT BELOW TO YOUR OWN document.c_reload.document.c_reload2.document.write('Next <a href="javascript:window.location.reload()">refresh</a> in <b id="countDownText">'+countDownTime+' </b> seconds') document.c_reload.document.c_reload2.document.close() } counter=setTimeout("countDown()", 1000); } function startit(){ if (document.all||document.getElementById) //CHANGE TEXT BELOW TO YOUR OWN document.write('Next <a href="javascript:window.location.reload()">refresh</a> in <b id="countDownText">'+countDownTime+' </b> seconds') countDown() } if (document.all||document.getElementById) startit() else window.onload=startit </script>
Read More..2008-02-27
Create DHTML ToolTips
Follow my step belows to create cool DHML Tooltips :
- Tooltips create > Step One : Insert the following stylesheet into <head> the section of your page: <style type="text/css"> #dhtmltooltip{ position: absolute; width: 150px; border: 2px solid black; padding: 2px; background-color: lightyellow; visibility: hidden; z-index: 100; /*Remove below line to remove shadow. Below line should always appear last within this CSS*/ filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135); } </style>
- Insert the below code into the <body> section of your page, outside any other tags, especially relatively or absolutely positioned elements: <div id="dhtmltooltip"></div> <script type="text/javascript"> var offsetxpoint=-60 //Customize x offset of tooltip var offsetypoint=20 //Customize y offset of tooltip var ie=document.all var ns6=document.getElementById && !document.all var enabletip=false if (ie||ns6) var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : "" function ietruebody(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function ddrivetip(thetext, thecolor, thewidth){ if (ns6||ie){ if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px" if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor tipobj.innerHTML=thetext enabletip=true return false } } function positiontip(e){ if (enabletip){ var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft; var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop; //Find out how close the mouse is to the corner of the window var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20 var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20 var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000 //if the horizontal distance isn't enough to accomodate the width of the context menu if (rightedge<tipobj.offsetWidth) //move the horizontal position of the menu to the left by it's width tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px" else if (curX<leftedge) tipobj.style.left="5px" else //position the horizontal position of the menu where the mouse is positioned tipobj.style.left=curX+offsetxpoint+"px" //same concept with the vertical position if (bottomedge<tipobj.offsetHeight) tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px" else tipobj.style.top=curY+offsetypoint+"px" tipobj.style.visibility="visible" } } function hideddrivetip(){ if (ns6||ie){ enabletip=false tipobj.style.visibility="hidden" tipobj.style.left="-1000px" tipobj.style.backgroundColor='' tipobj.style.width='' } } document.onmousemove=positiontip </script>
- Finally, add the following inside any link or page element that will contain a tooltip: onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300)"; onMouseout="hideddrivetip()" The key here is function ddrivetip(), which you should understand how it works: ddrivetip('TEXT TO DISPLAY', 'OPTIONAL BACKGROUND COLOR', OPTIONAL TIP WIDTH) The last two parameters are optional, and not specifying them causes the script to default to the settings within your CSS file. With that in mind, here are a few actual usage examples: <a href="http://www.yahoo.com" onMouseover="ddrivetip('Visit Yahoo.com')"; onMouseout="hideddrivetip()">Search Engine</a> <DIV onMouseover="ddrivetip('This DIV has a tip!', '#EFEFEF')"; onMouseout="hideddrivetip()">Some text here. Some text here.</div> <a href="http://yahoo.com" onMouseover="ddrivetip('Yahoo\'s Site', 'yellow', 250)"; onMouseout="hideddrivetip()">Yahoo</a>
Free Download Latest Firefox
Recent Articles
