Dynamic Drive DHTML Scripts- Popup box

FF1+ IE5+ Opr7+

Popup Box (DHTML Announcement Box)

Author: Jim Silver

Description: Use this custom DHTML "widget" to uniquely present new or notable pieces of information to your visitors. The interface is cross browser compatible, and can be dragged/ hidden freely by the user. Now that's something new in itself!

Demo: (Hold your mouse down over the title bar of the box to drag it).

Directions:

Step 1: Add the following script to the <HEAD> section of your page:

Select All
<script type="text/javascript"> /****************************************** * Popup Box- By Jim Silver @ jimsilver47@yahoo.com * Visit http://www.dynamicdrive.com/ for full source code * This notice must stay intact for use ******************************************/ var ns4=document.layers var ie4=document.all var ns6=document.getElementById&&!document.all //drag drop function for NS 4//// ///////////////////////////////// var dragswitch=0 var nsx var nsy var nstemp function drag_dropns(name){ if (!ns4) return temp=eval(name) temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP) temp.onmousedown=gons temp.onmousemove=dragns temp.onmouseup=stopns } function gons(e){ temp.captureEvents(Event.MOUSEMOVE) nsx=e.x nsy=e.y } function dragns(e){ if (dragswitch==1){ temp.moveBy(e.x-nsx,e.y-nsy) return false } } function stopns(){ temp.releaseEvents(Event.MOUSEMOVE) } //drag drop function for ie4+ and NS6//// ///////////////////////////////// function drag_drop(e){ if (ie4&&dragapproved){ crossobj.style.left=tempx+event.clientX-offsetx crossobj.style.top=tempy+event.clientY-offsety return false } else if (ns6&&dragapproved){ crossobj.style.left=tempx+e.clientX-offsetx+"px" crossobj.style.top=tempy+e.clientY-offsety+"px" return false } } function initializedrag(e){ crossobj=ns6? document.getElementById("showimage") : document.all.showimage var firedobj=ns6? e.target : event.srcElement var topelement=ns6? "html" : document.compatMode && document.compatMode!="BackCompat"? "documentElement" : "body" while (firedobj.tagName!=topelement.toUpperCase() && firedobj.id!="dragbar"){ firedobj=ns6? firedobj.parentNode : firedobj.parentElement } if (firedobj.id=="dragbar"){ offsetx=ie4? event.clientX : e.clientX offsety=ie4? event.clientY : e.clientY tempx=parseInt(crossobj.style.left) tempy=parseInt(crossobj.style.top) dragapproved=true document.onmousemove=drag_drop } } document.onmouseup=new Function("dragapproved=false") ////drag drop functions end here////// function hidebox(){ crossobj=ns6? document.getElementById("showimage") : document.all.showimage if (ie4||ns6) crossobj.style.visibility="hidden" else if (ns4) document.showimage.visibility="hide" } </script>

Step 2: Insert the below HTML code to the BOTTOM of your page, right above the </BODY> tag itself:

Select All
<div id="showimage" style="position:absolute;width:250px;left:250px;top:250px;z-index:100"> <table border="0" width="250" bgcolor="#000080" cellspacing="0" cellpadding="2"> <tr> <td width="100%"><table border="0" width="100%" cellspacing="0" cellpadding="0" height="36px"> <tr> <td id="dragbar" style="cursor:hand; cursor:pointer" width="100%" onMousedown="initializedrag(event)"><ilayer width="100%" onSelectStart="return false"><layer width="100%" onMouseover="dragswitch=1;if (ns4) drag_dropns(showimage)" onMouseout="dragswitch=0"><font face="Verdana" color="#FFFFFF"><strong><small>Announcement Box</small></strong></font></layer></ilayer></td> <td style="cursor:hand"><a href="#" onClick="hidebox();return false"><img src="close.gif" width="16px" height="14px" border=0></a></td> </tr> <tr> <td width="100%" bgcolor="#FFFFFF" style="padding:4px" colspan="2">  Testing 1 2 3  </td> </tr> </table> </td> </tr> </table> </div>

You may also want to grab this image, and upload to your webpage directory:

Viola.

Configuring the script

All modifications to the script are done in the code of Step 2 only.

1) To customize the displayed content, change the part where the HTML comments are located.

2) To configure the initial location of the box on the page, change the "left" and "top" attributes of the <div> tag.

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post