StayPut

I know you've seen them before... Those images and menus that are always on the screen, no matter where the user scrolls... Like so many other things, they can make for some incredibly useful navigation systems, or some extremely annoying advertising and branding.

When I decided that I wanted to include something like this in a site I was building, I did what so many others have done before me... I went trolling around the net looking for a script to do it with. To my surprise, there weren't many of them out there. Even worse, the ones that did exist either only worked on one browser, or were so tied into other applications that it was impractical to use them in anything else.

All I wanted was a simple container that would hold whatever I put into it on the screen all the time. So I sat down and wrote StayPut. I wanted something simple and flexible enough that I could just plug it in to other scripts as needed. Something I could position anywhere on the screen, and something with enough room to be customized easily to fit just about any use I could imagine. OH... and it had to work on ALL popular browsers! Is that asking too much?

StayPut is exactly that. Simple, flexible, customizable, and universal. This is a pretty "no frills" script. It "just works", and that's what I like best about it. I hope you find it as useful as I have.

Using StayPut

Using StayPut is also pretty simple. You start off by inserting the following code into your document:

<SCRIPT Language="Javascript1.2">
<!--

//These are the setup variables. Positioning variables are the bare minimum, but you can add others as well.
var offsetleft=10;
var offsettop=90;

//This is an EXTREMELY simple browser check. Feel free to use whatever type of check you need for your scripts.
var ns4=document.layers?1:0;
var ie4=document.all?1:0;
var ns6=document.getElementById&&!document.all?1:0;

//This is the function that does it all. Basically it just dynamically resets the the position of a container called "stayPut"
function StayPut()
    {
    if (ie4)
        {
        stayPut.style.pixelTop=document.body.scrollTop+offsettop;
        stayPut.style.pixelLeft=document.body.scrollLeft+offsetleft;
        }
    else if (ns6)
        {
        document.getElementById("stayPut").style.top=window.pageYOffset+offsettop;
        document.getElementById("stayPut").style.top=window.pageXOffset+offsetleft;
        }
   else if (ns4)
        {
        eval(document.stayPut.top=eval(window.pageYOffset+offsettop));
        eval(document.stayPut.top=eval(window.pageXOffset+offsetleft));
        }
   setTimeout("StayPut()",0);
   }

//This function just makes sure the script degrades nicely for other browsers.
function Init()
   {
   if (ns6||ie4||ns4)
   StayPut();
   }

//This starts the script when the page loads.
window.onload=Init;

//-->

</SCRIPT>

In the spirit of customization, you can inset this scrip snippet anywhere in your page, whether that is within the <body> tags of your document, or in a separate .js file along with other scripts you use.

The flexibility continues with the next step... Basically you just need to create the container in your document, and name it "stayPut". You can use <div> tags, <span> tags, or <layer> tags, as long as you name it "stayPut", just about any container will work. The biggest advantage of this is that it allows you to put anything into it that you would normally be able to put into an HTML document: images, links, tables, other scripts, you name it! It also make sit very simple to include StayPut as part of another script, whether is is for a dynamic menu, or an animation, a clock, a calculator, or whatever.

<!-- Here is an example container -->
<div id="stayPut" style="background-color:white; position:absolute;">
Put your own content here!<br>
Only $19.95/mo.<br>
W.A.C.
</div>

I used a <div> container on this page. Advantages: it works on all browsers, it allows the page background to show through if you want it to, and it's shorter to type than either <span> or <layer> :-) As for the <span> tag, it could be a very good choice. You can set all kinds of style attributes, it works on all browsers... But technically it is not meant to hold anything other than text. As for the <layer> tag, the only thing going against it is that it is for Netscape browsers only... D'OH! You could also use a script to choose the appropriate code and use "document.write()" statements... There are plenty of ways you could use StayPut. The choice is yours.

Thank You!

Joel Carnes-JJoelC Design
jjoelc@netzero.net