Categories:

Keeping an element static on the page

Since DSOC always returns the VISIBLE upper-left coordinates of the document as seen in the browser window, it allows us to position an element in a way so it's always visible to the user. And since we can also determine the exact dimensions of the browser window, we can display this static element at any one of the four corners of the window, or anywhere else inside the window, for that matter.

The three steps to rendering an element static are:

1) Define an absolutely positioned <div> or <span>.
2) Use DSOC and the Window Dimension Properties to reposition the element so it's visible on the screen
3) Call step 2 above repeatedly (using either setInterval() or setTimeout()) inside script to make the element always visible

The static content you see on the upper-left corner of this page is created by following the above procedures. Here is the source:

<div id="staticcontent" style="position:absolute; border:1px solid black; background-color: lightyellow; width: 135px;">
This content stays afloat and always in view, even if you scroll the page.
</div>

<script type="text/javascript">
    //define universal reference to "staticcontent"
    var crossobj=document.all? document.all.staticcontent : document.getElementById("staticcontent")
    //define reference to the body object in IE
    var iebody=(document.compatMode && document.compatMode != "BackCompat")? document.documentElement : document.body
    function positionit(){
    	//define universal dsoc left point
    	var dsocleft=document.all? iebody.scrollLeft : pageXOffset
    	//define universal dsoc top point
    	var dsoctop=document.all? iebody.scrollTop : pageYOffset
    	//if the user is using IE 4+ or Firefox/ NS6+
    	if (document.all||document.getElementById){
    		crossobj.style.left=parseInt(dsocleft)+5+"px"
    		crossobj.style.top=dsoctop+5+"px"
    	}
    }
    setInterval("positionit()",100)
</script>

Let's quickly run down the important points:

  • We define an absolutely positioned <div>, and assign to it an "id" attribute (for reference in your script). The content to be statically displayed is placed inside this <div>

  • In function positionit(), we use parseInt() on all the DSOC and Window Dimension properties of IE 4+/Firefox.

  • To position the <div> at the upper left edge of the browser, we assign the X coordinate of the DSOC plus 10 pixels for some padding to "style.left" of the DIV object. Similar concept for "style.top."

  • setInterval() is used to call positionit() repeatedly, and thus keeping the <div> visible constantly.

There's a much easier way to staticaly position content on the page, and that is using CSS. The catch is that as of IE6, this isn't supported, though Firefox does.

This content stays afloat and always in view, even if you scroll the page.