Explanation
Some time back, I had written & put in a DHTML Image Scroller example (and of course, the "Script"). Recently, a few of my visitors requested for a script that'll scroll a Text Line accross the Full Width of the Screen - not withstanding what the Viewer's Screen resolution is set to. Idea is for the script to check it automatically.
- So first job is to get the script to check the Screen Width. As you'll see in the Script below - this is achieved through creating a "variable" - which I have called viewable_width. For Internet Explorers, this is read as "document.body.clientWidth" while Netscapes consider this as "innerWidth".
- Having done this, we must get the browser (the script actually, that the browser has already read) to check the viewer's screen width. I'm not going to go into much details on this - this was explained at length under Animated DHTML Divider.
- If you take little time out to read the explanation for the above script, you'll understand the rest.
- Just one point though - Okay, we got the Scroller to start from the right margin - but how far to the left? That really depends on the Length of the Text - which again remains fixed because we have set the font size to a certain pixels. In this example, it scrolls upto -600 (That's MINUS 600 Or 600 pixels beyond left margin. Change it whatever figure you wish!!
The script
| Paste this section within the HEAD tags
<script language="javascript">
<!-- hide from old browsers
// Script by - Shivaji Basu
// check out free Javascript Menubars collection
// at http://www.shivbasu.com/jsdzigns.html
// copyright & disclaimer 1999 - 2000
// To use this script, you MUST leave this as it is.
ns4up = (document.layers)? true:false
ie4up = (document.all)? true:false
function init() {
if(ns4up){
viewable_width=innerWidth;
blocktxt = document.textrow;
}
else
if (ie4up) {
viewable_width=document.body.clientWidth;
blocktxt = textrow.style;
}
animateit()
}
function animateit() {
if(ns4up||ie4up){
blocktxt.left = parseInt(blocktxt.left)-3;
if (parseInt(blocktxt.left) <-600)
{ blocktxt.left =viewable_width }
setTimeout("animateit()",50);
}
}
//-->
</script>
<!--This is what ensures that the font size remains fixed, therefore the width -
as well as sets the Font Family, Colour Etc. -->
<style type="text/css">
<!--
.txt{color:#004000;font-size:11px;font-family:tahoma,helvetica,arial;}
-->
</style>
Paste this part within the OPENING Body tag for Auto execute
<BODY onload="init()" background="" bgcolor="" .....>
// Fill in the Background Image URL, BG color etc as normal
Create & Paste the DIV tag as below, right at the bottom of the page.
Change the Actual Text, the Top Position, The Final Left Position etc as needed.
<div id="textrow" style="position:absolute; top:5; left:-600; visibility:visible; z-index:100">
<table border=0><tr><td nowrap class="txt">Example of a "Full Width" DHTML Text Scroller. Written & Created on Visitor's Request.</td></tr></table></div>
|
Copyright DBS © 1998-2003. All Rights Reserved |
|
