Creating a Static Link

Have you ever thought about how useful it would be to have something appear in a static/fixed position in the browser window regardless of how the page is scrolled or resized? Well using the DOM and a few feature sensing routines we can easily do this. For the purpose of this tutorial I am going to assume that you want to place a link (or whatever you want) close to the bottom right corner of the browser window - like the link in the bottom corner of this page that will take you back to the top of the page. If you want to position the object in a different place on the window then the logic is similar but you need to calculate the position appropriately.

All of the following Javascript code needs to go into the <head> section of your web page or in an external file linked from there. The first code that we need is to determine which of the three DOMs that the browser is using. I have already covered this on my page Which DOM to Use so I wont repeat that information here.

There are three pairs of information that we need in order to position something on the screen. These are:

  1. the browser window size
  2. the scroll position of the page in the window
  3. the size of the object to be placed

The different browsers use one of two or three different methods to identify these values so we can set up some feature sensing routines that will supply us with whichever of the values that the given browser understands. The code that we need looks like this:

function findLivePageHeight() {
return window.innerHeight != null?
window.innerHeight: document.body.clientHeight != null?
document.body.clientHeight:null;}
 
function findLivePageWidth() {
return window.innerWidth != null?
window.innerWidth: document.body.clientWidth != null?
document.body.clientWidth:null;}
 
function findObjHeight(s) {
return s.offsetHeight?
s.offsetHeight:s.document.height?
s.document.height:null;}
 
function findObjWidth(s) {
return s.offsetWidth?
s.offsetWidth:s.document.width?
s.document.width:null;}
 
function posX() {return typeof window.pageXOffset != 'undefined' ?
window.pageXOffset:document.documentElement.scrollLeft?
document.documentElement.scrollLeft:document.body.scrollLeft?
document.body.scrollLeft:0;}
 
function posY() {return typeof window.pageYOffset != 'undefined' ?
window.pageYOffset: document.documentElement.scrollTop?
document.documentElement.scrollTop: document.body.scrollTop?
document.body.scrollTop:0;}

In each case for both the width and height (or X and Y offsets) we have basically the same function call just substituting the values that we require into a compound if statement that uses the condition?true:false notation (because it is shorter than the if (condition) then true else false notation). We have two if statements nested with the first testing for one of the possible values and the second testing for the second possible value.

The effect of the above code is that we can now access each of these six attributes by a single name within the code that follows.

So far we have just been setting up the commands that we need to access the appropriate DOM using a single piece of code. Now it is time to move on to the code itself. Here is the code that we need with comments alongside (or under) each line to tell you what the line does. because we have already defined routines to give us a single value for each field irrespective of which of the three DOMs is being used the code we need is relatively short.

function initStat(){
stobj=findDOM("st",0);
// attach stobj to the screen object with id="st"
if (!stobj) return;
// if the screen object wasn't found or the browser doesn't support a DOM then exit
stobjs=findDOM("st",1);
// attach stobjs to the screen object with id="st" so that we can reference styles
stw=findObjWidth(stobj) + 30;
// get the width of the object and add the offset from the right border
sth=findObjHeight(stobj) + 30;
// get the height of the object and add the offset from the bottom border
setInterval("posStat()",50);
// call (and keep calling) the routine to place the object in the required fixed position
}
 
function posStat(){
stobjs.left=(posX()+findLivePageWidth()-stw)+'px';
// set the left position of the object
stobjs.top=(posY()+findLivePageHeight()-sth)+'px';
// set the top position of the object
stobjs.visibility="visible";
// make the object visible
}
 
window.onload=initStat;
// run initStat when the page is first loaded

While it would be possible to combine all of the above code so as to produce the same effect for about half the amount of code, most of the routines that we have are completely reusable for other dynamic effects that we may want to use which would not be the case if we did not separate out these routines.

This script works in Internet Explorer 4+, Netscape 4/6+, and Opera 6+. Some functionality was deliberately moved inside of the positioning loop in order that the script can handle when the window is resized.

All that is left to do now is to define the field that is to be displayed in the static position. As we are only displaying a single image link this code too (which goes immediately after the <body> tag is also very short.

<span id="st" style="position:absolute;left:0;top:0;visibility:hidden">
<p><a href="#top"><img src="img/top.gif" border="0"
width="33" height="16" alt="go to top" /></a></p></span>

This places the image in an absolute position on the page (initially the extreme top left corner) and hides it. We rely on the javascript code above to reset the position to the bottom right corner and make it visible.

In this particular case we also need to put <a id="top"></a> immediately after the above code to define the top of page anchor to which the image will link.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate