More JS4 - Slide it down mate!

Here is an Image Slider script which you can use - say to show a, how should I put it, Different may be or Innovative or Whatever "Welcome Message". Let me explain how does it work.

To start with, because it's my welcome message, the Function gets activated when the Body is loaded i.e. - the script goes like this : <body onload="downslide()" ... dots are for you to specify the BGCOLOR, BACKGROUND, TEXT, LINKs etc - the usual HTML stuff ...>
But it need not be so! May be you wouldn't like to welcome your visitors, who knows OR may be you would like it to Slide Down only on Clicking a link (as I've done below for the purpose of this example). By all means, do remove the function onload call from within the opening Body tag, then.
Since this is a DHTML Script - the Fancy part of the "Graphic/Image" sliding down won't work on older browsers. So now you'll ask me "What happens to those good souls then?" Not to worry, it will be where you positioned it in your HTML document. For instance, the "Graphic" will be visible just below this Paragraph on older Browsers - but on 4th Generation or later ones, it won't be within the Screen area until the relevant link is clicked or the function call within the Body tag loads it automatically. You can TEST IT here.

Now, you would want to know how to position it according to YOUR page layout. I suggest, just scroll down a bit & take a look at the Script first. Then .. go over this bit!

If you remember your Geometry - then you would recall the vertical ordinate is known as the "Y" ordinate. Since it's a vertical slide, we'll have to refer to the Block position as "y"
At the Head section Script, the "function downslide()" must include the following:
- How far it will slide - expression <followed by a number. In this example it is 730. This is the final vertical position of the Image block - or - how far down will the function continue to work.
- The step of the slide action - expression += followed by a number. In this example I've specified it as 30. REMEMBER - whatever the step numerical may be - the total distance to travel should be divisible by this number.
- Finally, set a Timeout. This is what starts the loop. Every that many milli-seconds, the function step will be executed. Effectively, these two in combination sets the speed of slide.
Then comes the Script bit within the Body section. Nothing much to it. I think the Script itself will be sufficient explanation. Few hints, though.
- If you want the Block originally hidden then the start position should be negative with a value Equalling to OR Greater than the Height of the Image. In this example - the Height of the TEST BLOCK I have used is 30. Likewise the original position is (-)30.
- If you want the function to start on page load then choose Option:1, otherwise Option:2. Both are detailed in the Script below.

The script for Vertical Slide

Paste this section within the HEAD tags & change the Distance to travel, Step & setTimeout as explained above

ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false

function init() {
if(ns4||ie4){
if (ns4) block = document.example
if (ie4) block = example.style
block.y = parseInt(block.top)
}
}
function downslide() {
if(ns4||ie4){
if (block.y < 780) {
block.y +=30
block.top = block.y
setTimeout("downslide()",50)
}
}
}
//--end hide>
</script>

Paste this part within the OPENING Body tag for Auto execute

<BODY onload="init();downslide()" background="" bgcolor="" .....>
// Fill in the Background Image URL, BG color etc as normal
// THEN, in the actual Body -

Otherwise this - for "onClick" execution.

<BODY onload="init();" background="" bgcolor="" .....>
// Fill in the Background Image URL, BG color etc as normal
// THEN, in the actual Body as before -

//Finally, a link

<a href="javascript:downslide()">TEST IT or Whatever You Wish</a>