Explanation
Here's yet another, what I think, a bit Different or Innovative way to dynamically show a "Welcome Message" or even a "Notice". If you are using a Fourth Generation (or Higher) Browser, you must have seen the little pop-up screen that was there on Body load but vanished after sometime.
Let me explain how does it work.
- To start with, the message gets written only when the page is loaded, that too, if the Browser is NS4 or IE4/5. This is what one calls "Creating a Document ON-THE-FLY". The advantage is that, older browsers will show nothing - which, to me, is better than a plain text message! The full script is given below. Point to remember is that, if the message is long, the "document.write" part of the script should be broken down into a number of lines as I have done.
- As with "Slide a graphic" script, the Function gets activated when the Body is loaded i.e. - the script goes like this : <body onload="init(); timer()" ... dots are for you to specify the BGCOLOR, BACKGROUND, TEXT, LINKs etc - the usual HTML stuff ...>
- So once the script is written according to the "style" you have specified, it remains visible until, the "timer" function activates yet another function, (Function back in this case), which in turn, moves "popup" block up beyond the visible height of the screen. I have specified this position as "-400"
- "How long it should remain visible on-screen" really depends on you. I have set it at 6 seconds (setTimeout 6000 milliseconds).
- Finally, as you will see in the script, in the Style specification, besides the normal Text Color, Font, Block width, Border, Position etc, I have also included an "Image Background" (bg5.gif in this case). As a back up measure, just in case the Image does not load, a Background color has also been specified.
The script
| Paste this section within the HEAD tags & change the setTimeout as explained above
<script language="javascript">
<!-- hide from old browsers
// Written & created by Shivaji Basu
// Copyright www.shivbasu.com
// Use this script at your own risk
// To use his script, you MUST leave this disclaimer & credit as it is
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
function init() {
if(ns4||ie4){
if (ns4) {
popup = document.notice
}
if (ie4) {
popup = notice.style
}
popup.y = parseInt(popup.top)
}
}
function back(){
if(ns4||ie4){
popup.y = -400
popup.top = popup.y
}
}
function timer(){
if(ns4||ie4){
setTimeout("javascript:back()",6000)
}
}
//--end hide>
</script>
// Next comes the Style description part
<style type="text/css">
<!--
#notice{border-color:#000000; border-width:4px; border-style:solid; background-image:url(bg5.gif);
layer-background-image:url(bg5.gif); background-color:#ffbb00; layer-background-color:#ffbb00; color:#ffffcc;
font-size:12px; font-family:tahoma,verdana; padding:2px; width:240;
position:absolute;top:72;left:0; text-align:justify;
}
-->
</style>
Paste this part within the OPENING Body tag for Auto execute
<BODY onload="init();timer()" background="" bgcolor="" .....>
// Fill in the Background Image URL, BG color etc as normal
Create the Document on the fly - Paste this in the main Body
<script language="javascript">
<!--
//Creating the document on the fly
//Alter the "message" text as you wish
if(ns4||ie4){
document.write('<div id="notice">These Pages are best viewed at');
document.write(' 800 x 600 screen resolution. ');
document.write('Also, this script works only on ');
document.write('4th Generation or higher Browsers.</div>');
}
//-->
</script>
|
Copyright DBS © 1998-2003. All Rights Reserved |
|
