Always on top content - JavaScript Made Easy: Free JavaScripts Tutorials Example Code

Metachecker.net

|

TrafficChecker.net

|

RankChecker.net

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial


Always on top content

"Emphasize" and make particular content on your page stand out by keeping them always visible on the visitor's browser screen, with this advanced DHTML script! Anything (HTML code, JavaScript etc) that's placed inside the script's "content box" will be kept static on the screen, with the ability to drag and toggle on/off this box. Furthermore, thanks to IE 5's conditional comments technology, all other browsers will simply see nothing. Wow!


Insert into <HEAD>
<!--[if IE]> <style> <!-- .drag{position:relative;cursor:hand } #scontentmain{ position:absolute; width:150px; } #scontentbar{ cursor:hand; position:absolute; background-color:green; height:15; width:100%; top:0; } #scontentsub{ position:absolute; width:100%; top:15; background-color:lightyellow; border:2px solid green; padding:1.5px; } --> </style> <script language="JavaScript1.2"> <!-- //Drag and drop engine for static content //© Dynamic Drive (www.dynamicdrive.com) var dragapproved=false var zcor,xcor,ycor function movescontentmain(){ if (event.button==1&&dragapproved){ zcor.style.pixelLeft=tempvar1+event.clientX-xcor zcor.style.pixelTop=tempvar2+event.clientY-ycor leftpos=document.all.scontentmain.style.pixelLeft-document.body.scrollLeft toppos=document.all.scontentmain.style.pixelTop-document.body.scrollTop return false } } function dragscontentmain(){ if (!document.all) return if (event.srcElement.id=="scontentbar"){ dragapproved=true zcor=scontentmain tempvar1=zcor.style.pixelLeft tempvar2=zcor.style.pixelTop xcor=event.clientX ycor=event.clientY document.onmousemove=movescontentmain } } document.onmousedown=dragscontentmain document.onmouseup=new Function("dragapproved=false") //--> </script> <![endif]-->

Insert into <BODY>
<!--[if IE]> <div id="scontentmain"> <div id="scontentbar" > <img align="right" src="barbutton.gif" onClick="onoffdisplay()"> </div> <div id="scontentsub"> <p align="center"><br> <a href="http://wsabstract.com"><img src="http://wsabstract.com/wabutton5.gif" border="1" alt="Click here for Website Abstraction"></a><br> <font face="Arial"><small><small>While we didn't invent JavaScript, we sure as hell created the best site on IT. <a href="http://wsabstract.com">Website Abstraction</a> is considered by many online as the definitive JavaScript technology site on the internet. Online since December, 1997, <a href="http://wsabstract.com">Website Abstraction</a> features over 300+ original scripts, 100+ tutorials on JavaScript programming and web design, and a highly active programming forum where developers from all over meet and share ideas on their latest projects. Click <b><a href="http://wsabstract.com">HERE</a></b> for JavaScript!</small></small></font></p> </div> </div> </div> <script language="JavaScript1.2"> /* Always On Top Content Script- © Dynamic Drive (www.dynamicdrive.com) For full source code, installation instructions, 100's more DHTML scripts, and Terms Of Use, visit dynamicdrive.com */ //configure the below two variables to determine where the static content will initially be positioned when the document loads, in terms of X and Y cooridinates, respectively var w=document.body.clientWidth-195 var h=50 ////Do not edit pass this line/////////// w+=document.body.scrollLeft h+=document.body.scrollTop var leftpos=w var toppos=h scontentmain.style.left=w scontentmain.style.top=h function onoffdisplay(){ if (scontentsub.style.display=='') scontentsub.style.display='none' else scontentsub.style.display='' } function staticize(){ w2=document.body.scrollLeft+leftpos h2=document.body.scrollTop+toppos scontentmain.style.left=w2 scontentmain.style.top=h2 } window.onscroll=staticize </script> <![endif]-->

Other Options
Step 3: Finally, you'll need a small image to be used as the toggle on/off button. You may use the one we created: (Right click your mouse and choose save as) Or, if you wish, create your own. Just save the image as "barbutton.gif", and upload it along with the rest of the page. Configuring the script We tried to make the script as easy and straightforward to configure and customize as possible, and it is. The thing to understand are these: 1) The code in Step 1 controls the style of the static box (background color, border color, width, etc). -To change the background color, change the keyword "lightyellow" to another color's name. -To change the border color, change all instances of the keyword "green" to another color's name. -Finally, to change the physical width of the static box, change "150px" to another valid value. 2) The code in Step 2 controls the rest (the actual content to be shown, where the static box will initially be positioned when the document loads). -Insert any content (HTML, JavaScript) you wish to be shown inside <div id="scontentsub">. This is the content that will be kept static on the surfer's screen. -To configure where the static box will initially be positioned when the document loads, change the variables "w" and "h" to contain valid values, where "w" controls the x coordinates, and "h" controls of y coordinates of the static box respectively. Before you run along with this new DHTML toy, there's one more important thing to mention. While you're free to insert ANY HTML or JavaScript content into the static box, you may not insert HTML comments. By doing so, it will defeat the conditional comments feature of IE 5, and all browsers will see this content, although definitely not the way you want them to! Just remember- no HTML comments. Enjoy the script!