Help moving a script from the html to a js file as an include

J

Jake j

To those of you who sent me working examples of js include routines,
much thanks. I see from them examples that what I'm trying to get to
requires a higher level of js knowledge than I've got. Here's what I'm
really trying to do:

I've been using a sliding banner javascript routine in several html
files and it works fine. Rather than duplicate the code in each file,
however, it would obviously be preferable to including the routine in a
js file. So, now, I'm asking how to do it with this particular code
which is different and more complicated than the simpler examples.

What this routine does is place a text message ("BannerText") on a web
page and reposition it as the page is scrolled so that the message does
not disappear from the window. The text is also linked to another page
(linkpage.htm). Here's the code. Please note that this works fine
within the html file. The help I need is in getting it to work by
putting as much of it as possible in a js file and using <script
type="text/javascript" src="slider.js"></script> and whatever else may
be necessary for this particular function to be implemented. (My feeble
attempt was: <a href="#" "positionit();"></a> but it's obviously more
complicated). Or, I need someone to tell me it can't be done.

<div id="staticbanner" style="position:absolute;">
<a href="linkpage.htm" target="_blank">BannerText</a>

</div>

<script>
//define universal reference to "staticbanner"
var crossobj=document.all? document.all.staticbanner :
document.getElementById?
document.getElementById("staticbanner") :
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+
if (document.all||document.getElementById){
crossobj.style.left=parseInt(dsocleft)+
parseInt(window_width)-40
crossobj.style.top=dsoctop+120
}
//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>

~ J
 
A

ASM

Jake said:
I'm asking how to do it with this particular code
which is different and more complicated than the simpler examples.

The complication has no importance

All JS code that is usually set in header (between <head> and </head>)
can be in an external JS

In your example (with a little modif) you can do it too

It's calling
<script type="text/javascript" src="slider.js"></script>
can be written in header

Didn't you try it ?
(My feeble
attempt was: <a href="#" "positionit();"></a> but it's obviously more
complicated). Or, I need someone to tell me it can't be done.

positionnit() is automaticly launched by this line :

setInterval("positionit()",200);

because this function actives an element of the page, it can't run
before this element is read by your browser
so
you have to put of this line above from your external and keep it in
separate JS at it's actualy right place

or have to change it with :

onload = function('setInterval("positionit()",200)');
 
J

Jake j

can be written in header
Didn't you try it ?

Yes, Stephane, of course. I'm also trying your suggestions. Here's
what I've got in my html file, as I understand your directions:

<html>
<head>
<setInterval("positionit()",200)');>
<script type="text/javascript" src="slider.js"></script>
</head>
</html>

If I've got it wrong, please correct me. Best of all would be if you
could try it to make sure it works, and send me the actual code for the
html file and for the js if you need to make any changes there. Thanks!

~ J
 
A

ASM

Jake said:
Yes, Stephane, of course. I'm also trying your suggestions. Here's
what I've got in my html file, as I understand your directions:

<html>
<head>
<setInterval("positionit()",200)');>
<script type="text/javascript" src="slider.js"></script>
</head>
</html>

If I've got it wrong, please correct me. Best of all would be if you
could try it to make sure it works, and send me the actual code for the
html file and for the js if you need to make any changes there. Thanks!

<html>
<head>
<script type="text/javascript" src="slider.js"></script>
</head>
<body>
<div id="staticbanner" style="position:absolute;">
<a href="linkpage.htm" target="_blank">BannerText</a>
</div>
<script type="text/javascript">
//define universal reference to "staticbanner"
var crossobj=document.all? document.all.staticbanner :
document.getElementById?
document.getElementById("staticbanner") :
document.staticbanner

setInterval("positionit()",200)');
</script>
<div id="content">
<p>Blah blah
<p>Bloh bloh
</div>
</html>

slider.js
contains the complet JS without the five 1st lines and without the last
line which are now inserted
as a JS command *AFTER* the div 'staticbanner'
because this command needs to have 'staticbanner' existing
As positionit() needs the variable 'crossobj'
and as this variable concern 'statichbanner' too
we can't (under this shape) insert all that in an external JS

notice :
setInterval("positionit()",200)');
means :
active the function positionit on every 200 milli secondes
and you'd understood that positionit() does something with
div 'staticbanner'
(doesn't it freeze the link somewhere in the window ?)

By the end, this JS code you gave isn't a good example of code
to be put 'as it' in an external code.


=== tested (not working with IE) ====
====== You could try that : ========

file 'sm_slider.js' :
function sm_slide(myDiv) {
//define universal reference to "staticbanner"
crossobj = document.all? document.all.myDiv :
document.getElementById?
document.getElementById(myDiv) :
document.myDiv;
setInterval("positionit()",200);
}
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+
if (document.all||document.getElementById){
crossobj.style.left=parseInt(dsocleft)+
parseInt(window_width)/2-40;
crossobj.style.top=dsoctop+120;
}
//else if the user is using NS 4
else if (document.layers){
crossobj.left=
dsocleft+window_width/2-60
crossobj.top=dsoctop+130
}
}
onload = Function('sm_slide("staticbanner")');

your file 'page.htm' :
<html>
<head>
<script type="text/javascript" src="sm_slider.js"></script>
</head>
<body>
<div id="content" style="position:relative;height:700px;border:1px
solid red;">
<p>Blah blah
<p>Bloh bloh
<p>Some space to test banner's effect when scrolling
</div>
<p style="color:red">End of file
<div id="staticbanner" style="position:absolute;">
<a href="linkpage.htm" target="_blank">BannerText</a>
</div>
</html>


Your div banner must be in end of page
 
J

Jake j

Stephane: Brilliant!

Got your solution to this and it works like a charm. Merci!
It shows that you just have to know what you're doing. I suspected that
part of it needed to be in the html code and even played around with the
div part, but as my js knowledge is so limited, couldn't solve it on my
own.

I owe you a beer, mon ami!

~ J
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,479
Members
44,899
Latest member
RodneyMcAu

Latest Threads

Top