Well,I had done that work for a mu server but I did it for free. The code is not mine but the graphics are ;) So I guess I have all the rights to make a guide about that since the code is free! :P
step 1.
You must add the following line in the HEAD tag of your mainpage:
Code:<head> ....blah blah blah... <script type="text/javascript" src="YOUR_PATH_HERE/votebox.js"></script> </head>
step 2.
save the following code as a file with name "votebox.js" and put it in the folder you named as YOUR_PATH_HERE ( you get what i mean. I hope.. :p )
Code:/****************************************** * 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" }
Now the system knows WHERE the file is and knows WHAT to do. But it does not know HOW and WHEN to do it. so we go to step 3.
Step 3.
Add right after the BODY tag of your html page (or the index.php page you have) the following code:
Code:<div id="showimage" style="position:absolute;width:300px;left:90px;top:370px"> <table border="0" width="1000px" height="300px" bgcolor="#453734" cellspacing="0" cellpadding="2"> <tr> <td width="100%"> <table border="0" width="100%" height="100%" cellspacing="0" cellpadding="0" height="25px"> <tr> <td id="dragbar" style="cursor:hand; cursor:pointer" width="100%" height ="22px" 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" size="4" color="#d9952b"><strong><small>Vote for us - If you experience problem of black page, download and run Firefox Browser</small></strong></font></layer></ilayer></td> <td style="cursor:hand" height ="25px" ><a href="#" onClick="hidebox();return false"><img src="http://img214.imageshack.us/img214/2522/closeox4.gif" width="21px" height="21px" border="0px"></a></td> </tr> <tr> <td width="100%" align="center" valign="middle" bgcolor="#eeeedd" style="padding:4px" colspan="2"> <!-- PUT YOUR CONTENT BETWEEN HERE --> <center> <IFRAME SRC="http://digg.com" WIDTH="1000" HEIGHT="300"></IFRAME> <!-- END YOUR CONTENT HERE --> <!-- Credits for the layout and graphics: Laseen @ ragezone, mail: Caveman_gr@yahoo_REMOVETHIS.com --> </td> </tr> </table> </td> </tr> </table> </div>
Tadaaa! You are done! Instead of IFRAME you may add anything you want. Internet explorer freaks out with the IFRAME so you'd better use firerox of opera if you use that tag.
Now there is another tweak you must do if you have flash in your page. If there is flash loaded with the EMBED tag your votebox will not be drag-able. That happens because EMBED is not standard HTML. You have 2 choises:
1)either use standard XHTML for loading the flash objects you have
OR
2)make a quick&addition to the embed tag like that:
the extra addition is the wmode="transparent" part that makes your flash object go to the bottom layer of the browser's render ;)Code:<embed name="movie" wmode="transparent" swliveconnect="true" src="YOUR_SWF_SOURCE" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" height="YOUR_HEIGHT" width="YOUR_WIDTH"></embed>
If you dont use flash then obviously you dont have to make any flash-tweaking :P
Credits for the layout and graphics:
Laseen @ ragezone,
mail: Caveman_gr@yahoo_REMOVETHIS.com
Credits for code as referred in the votebox.js:
* Popup Box- By Jim Silver @ jimsilver47@yahoo.com
* Visit Dynamic Drive DHTML(dynamic html) & JavaScript code library for full source code
* This notice must stay intact for use
Reply With Quote
Originally Posted by Laseen
