Calling a .js script for sliding a text banner

[Jakej]

I've been using a javascript in an html file for a banner slider, and
it works as desired. But I'd like to use it on more than one page and
it would be great if I could transfer the code to a .js file and call
it with the
<script src="filename.js"></script> tags as I do for many other .js
files. But, when I try to do that way, it doesn't work right. It will
display the banner text, but only on the 0,0 page coordinate and
doesn't slide.

The script employs a function called positionIt() which determines the
window size, left and top points. Is the problem that it's running in
a called script and therefore doesn't have reference to the html page,
or is it likely to be some other reason? Does it need values passed to
it by the <Script> statement? Clues or guidance?

- Jakej

 

[RobG]

I've been using a javascript in an html file for a banner slider, and
it works as desired. But I'd like to use it on more than one page and
it would be great if I could transfer the code to a .js file and call
it with the
<script src="filename.js"></script> tags as I do for many other .js
files. But, when I try to do that way, it doesn't work right. It will
display the banner text, but only on the 0,0 page coordinate and
doesn't slide.

The script employs a function called positionIt() which determines the
window size, left and top points. Is the problem that it's running in
a called script and therefore doesn't have reference to the html page,
or is it likely to be some other reason? Does it need values passed to
it by the <Script> statement? Clues or guidance?

Without seeing the code or HTML it relates too, it's a tad difficult to
say. If you want speculation, then likely the structure of your HTML
is a little different on the extra pages and your script is not getting
the co-ords right.

Here is some stuff from Quirksmode on position of elements in the
page:

<URL:http://www.quirksmode.org/js/findpos.html>

 

[Jake j]

Rob: Thanks for your reply and reference to quirksmode. Here's the code
I'm using. Perhaps you can see where the problem lies. I have tried
this within a "normal" page and a test page that has no other html
code-- with the same result, namely that the banner text appears at 0,0.
This, of course, is when I call the code with <script
"src=filename.js"></script>. When the javascript is in the html doc, it
works fine.

document.write(" <!-- new script: static slider -->")
document.write("<div id='staticbanner' style='position:absolute;'>")
document.write("<a href='linkpage.htm?adslider'
target=_blank>BannerText</a>")
document.write(" </div>")
document.write(" <script>")
document.write(" //define universal reference to
'staticbanner'")
document.write(" var crossobj=document.all?
document.all.staticbanner :")
document.write(" document.getElementById?")
document.write("
document.getElementById('staticbanner') :")
document.write(" document.staticbanner")
document.write(" function positionit(){")
document.write(" //define universal dsoc left point")
document.write(" pageXOffset")
document.write(" //define universal dsoc top point")
document.write(" var dsoctop=document.all?
document.body.scrollTop :")
document.write(" pageYOffset")
document.write(" //define universal browser window
width")
document.write(" var window_width=document.all?
document.body.clientWidth")
document.write(" : window.innerWidth")
document.write(" //if the user is using IE 4+ or NS6+")
document.write(" if
(document.all||document.getElementById){")
document.write("
crossobj.style.left=parseInt(dsocleft)+")
document.write(" parseInt(window_width)-70")
document.write(" crossobj.style.top=dsoctop+120")
document.write(" }")
document.write(" //else if the user is using NS 4")
document.write(" else if (document.layers){")
document.write(" crossobj.left=")
document.write(" dsocleft+window_width-60 ")
document.write(" crossobj.top=dsoctop+130 ")
document.write(" }")
document.write(" }")
document.write(" setInterval('positionit()',200)")
document.write(" </script>")

 

[RobG]

Rob: Thanks for your reply and reference to quirksmode. Here's the code
I'm using. Perhaps you can see where the problem lies. I have tried
this within a "normal" page and a test page that has no other html
code-- with the same result, namely that the banner text appears at 0,0.
This, of course, is when I call the code with <script
"src=filename.js"></script>. When the javascript is in the html doc, it
works fine.

When you put this in the page, is the following script inside another
element that is relatively positioned?

The generated 'staticbanner' div is absolutely positioned, so unless it
is constrained inside a relatively positioned element it will go to
0,0.

A bigger issue is: why use a script to write a script? Also, why
restrict it to only browsers that know document.all?

All of the script could be written with a single document.write call:

document.write(" <!-- new script: static slider -->")
document.write("<div id='staticbanner' style='position:absolute;'>")
document.write("<a href='linkpage.htm?adslider'

document.write(
" <!-- new script: static slider -->",
"<div id='staticbanner' style='position:absolute;'>",
"<a href='linkpage.htm?adslider' target=_blank>BannerText</a>",
...
);

target=_blank>BannerText</a>")
document.write(" </div>")
document.write(" <script>")

This script element should have a type attribute

document.write(" //define universal reference to
'staticbanner'")

When posting code, use 2 or 4 spaces for indents and manually wrap code
so that it can be cut and pasted, then run without errors.

document.write(" var crossobj=document.all?
document.all.staticbanner :")
document.write(" document.getElementById?")
document.write("
document.getElementById('staticbanner') :")
document.write(" document.staticbanner")
document.write(" function positionit(){")
document.write(" //define universal dsoc left point")
document.write(" pageXOffset")

Something is missing here...

[...]

document.write(" </script>")

When using </ inside document.write, the slash should be quoted:

document.write(" <\/script>")

Put 'staticbanner' inside another div that is relatively positioned and
you're fixed (I think...).

Oh, and your position units should have 'px' appended (I've deleted
that line of code somehwere...)

<div style="position: relative; border: 1px solid red; height: 2em;">
<div id="staticbanner" style="position: absolute;">
<a href="linkpage.html?adslider" target="_blank">BannerText</a>
</div>

<script type="text/javascript">
//define universal reference to 'staticbanner'
var crossobj;
if ( document.getElementById ) {
crossobj = document.getElementById('staticbanner');
} else if (document.all) {
crossobj = document.all['staticbanner'];
} else if ( document.layers ) {
crossobj = document.staticbanner;
}

function positionit(){
//define universal dsoc left point
var dsocleft = document.all? document.body.scrollLeft : pageXOffset;

//define universal dsoc top point
var dsoctop = document.all? document.body.scrollTop : pageYOffset;

//define universal browser window width
var window_width = document.all?
document.body.clientWidth : window.innerWidth;

// if the user is using IE 4+ or NS6+
// Append a unit (say 'px') to top & left
if ( document.all || document.getElementById ){
crossobj.style.left = parseInt(dsocleft)
+ parseInt(window_width) - 70 +'px';
crossobj.style.top = dsoctop + 120 + 'px';
}
//else if the user is using NS 4
else if (document.layers){
crossobj.left = dsocleft + window_width - 60;
crossobj.top = dsoctop + 130;
}
}
setInterval('positionit()',200);
</script>
</div>

 

[Jake j]

Rob: I tried your revision but it doesn't work any better than the
original. The manner in which you put 'staticbanner' inside another div
that is relatively positioned doesn't seem to be the fix. Just to be
clear: the banner text does appear, but at 0,0 on the page, and it
doesn't slide for relative positioning. If you can think of anything
else to try...?

BTW, I'm beginning to wonder if this has to do with the conventions of
calling javascript code in a .js file from an html file. I use many
such calls successfully, but with .js files that have just html text and
tags. The only ones that don't work are the ones with code. Is there
something that needs to be declared in the html file in addition to
<script src=file.js></script>? Is it necessary to remove the
<script></script> tags within the .js file because of the duplication?
I've tried a few variations but haven't hit on anything that makes this
or simpler javascripts work.

Can you (or anyone else reading this) try it with a simple piece of code
and give me the relevant lines in the calling html file and the .js file
that is called?

~ J

 

[RobG]

Rob: I tried your revision but it doesn't work any better than the
original. The manner in which you put 'staticbanner' inside another div
that is relatively positioned doesn't seem to be the fix. Just to be
clear: the banner text does appear, but at 0,0 on the page, and it
doesn't slide for relative positioning. If you can think of anything
else to try...?

The static banner sits where it's told to, inside the relatively
positioned div. I have no idea where the sliding banner goes, you
didn't post the code for it.

BTW, I'm beginning to wonder if this has to do with the conventions of
calling javascript code in a .js file from an html file.

No difference.

[...]

Is there
something that needs to be declared in the html file in addition to
<script src=file.js></script>? Is it necessary to remove the
<script></script> tags within the .js file because of the duplication?

No and 'WTF'? :-o

There should not be any script tags inside the .js file. They are for
the HTML file to tell the browser to create a script element. A js file
should only contain the contents of the element (in other words, don't

 

[Jake j]

There should not be any script tags inside the .js file. They are for

the HTML file to tell the browser to create a script element. A js file
should only contain the contents of the element (in other words, don't
have any '<script...>' tags in the js file).

Rob: But you have the tags in your js file code:
'<script type="text/javascript">'
and then '</script>' at the end. These are what I referred to when I
asked:

I have no idea where the sliding banner goes, you
didn't post the code for it.

The sliding banner code is the positionit() function. As I've said,
this works perfectly when the code is in the html file.

~ J

 

[RobG]

Rob: But you have the tags in your js file code:
'<script type="text/javascript">'
and then '</script>' at the end. These are what I referred to when I
asked:

'Is it necessary to remove the <script></script> tags within the .js
file because of the duplication?'

The original script, as posted, did not work at all in any browser I
tried it in, it was missing a line of code. So I've mucked around to
get it going how I think you wanted it...

If what you mean by 'sliding banner' is that it stays at some offset
from the top of the page regardless of scrolling, and the text stays on
the right, then the following is all you need. It sets anything inside
'staticbanner' to right-align so you don't need anything to do with left
scrolling, window width or left positioning, it all happens 'cause of
CSS. Just set some right padding on the enclosed A to keep it away from
the right edge (I've used 10px).

Your banner can be any size and will just sit in the 'right' place... ha
ha.

The script is hugely simplified and should use far less resources than
what was originally posted.

Note that you should be using HTML 4 strict, which affects positioning
and you must add units to style measurements (e.g. using 'px' when
setting 'crossobj.style.top').

It is tested in Firefox and IE, I can't test in old Netscape. I got the
code for scrollT() from Quirksmode, it should work in any IE or 'zilla
based browser.

<URL:http://www.quirksmode.org/index.html?/js/display.html>

If you want the script in the page, paste the contents of the script
between the script tags and remove the src attribute.

The HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>slider play</title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<style type="text/css">
body { margin: 0; padding: 0;}
</style>
</head>
<body>
<div style="height: 150px; background-color: #ddddff;"></div>

<!-- static slider -->
<div id="staticbanner"
style="position:absolute; top: 120px;
width: 100%; text-align: right;">
<a href="linkpage.htm?adslider" target="_blank"
style="padding: 0 10px 0 0;">BannerText</a>
</div>

<!-- Insert script element -->
<script type="text/javascript" src="slider.js"></script>

<div style="height: 1000px;">Make space for scrolling</div>

</body></html>


The script 'slider.js'

// Get a reference to 'staticbanner'
var crossobj = document.getElementById?
document.getElementById('staticbanner'): document.all?
document.all.staticbanner : document.staticbanner;

// Keeps the banner 120px from top
function positionit(){
// If browser supports style
if ( crossobj.style ) {
crossobj.style.top = scrollT() + 120 + 'px';
}
// If browser supports layers
else if ( document.layers ){
crossobj.top = scrollT() + 130 + 'px';
}
}

// Returns the number of pixels the page has scrolled down
function scrollT() {
if (self.pageYOffset) return self.pageYOffset;
if (document.documentElement
&& document.documentElement.scrollTop)
return document.documentElement.scrollTop;
if (document.body) return document.body.scrollTop;
}

// Start the timer
setInterval('positionit()',200)