Menu & Scroller Clash

Guest_imported · Apr 16, 2002

I need to place a text scroller and a drop-down menu on the same page.........They both work ok seperate but not on the same page together. When the <body onLoad="init();"> is deleted the scroller works but then the menu wont work without the onload command.....Can you Help????

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>New Page 1</title>

<LINK href="Scripts/webexplorer.css" rel=stylesheet type=text/css>

<style type="text/css">
#divUp {position:absolute; left:170px; top:190px;}
#divDown {position:absolute; left:170px; top:380px;}
#divScrollTextCont {position:absolute; left:170px; top:220px; width:300px; height:150px; clip:rect(0px 300px 150px 0px); overflow:hidden; visibility:hidden;}
#divText {position:absolute; left:0px; top:0px;}
</style>

<script language="JavaScript" type="text/javascript">
/**********************************************************************************
ScrollText
* Copyright (C) 2001 Thomas Brattli
* This script was released at DHTMLCentral.com
* Visit for more great scripts!
* This may be used and changed freely as long as this msg is intact!
* We will also appreciate any links you could give us.
*
* Made by Thomas Brattli
*
* Script date: 09/23/2001 (keep this date to check versions)
*********************************************************************************/
function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=(navigator.userAgent.indexOf("Opera&quot

>-1 && document.getElementById)?1:0
this.ie5=(this.ver.indexOf("MSIE 5&quot

>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6&quot

>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac&quot

>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
return this
}
var bw=lib_bwcheck()
/*****************

You set the width and height of the divs inside the style tag, you only have to
change the divScrollTextCont, Remember to set the clip the same as the width and height.
You can remove the divUp and divDown layers if you want.
This script should also work if you make the divScrollTextCont position:relative.
Then you should be able to place this inside a table or something. Just remember
that Netscape crash very easily with relative positioned divs and tables.

Updated with a fix for error if moving over layer before pageload.

****************/

//If you want it to move faster you can set this lower, it's the timeout:
var speed = 30

//Sets variables to keep track of what's happening
var loop, timer

//Object constructor
function makeObj(obj,nest){
nest=(!nest) ? "":'document.'+nest+'.'
this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;
this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight
this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight
this.up=goUp;this.down=goDown;
this.moveIt=moveIt; this.x=0; this.y=0;
this.obj = obj + "Object"
eval(this.obj + "=this&quot

return this
}

// A unit of measure that will be added when setting the position of a layer.
var px = bw.ns4||window.opera?"":"px";

function moveIt(x,y){
this.x = x
this.y = y
this.css.left = this.x+px
this.css.top = this.y+px
}

//Makes the object go up
function goDown(move){
if (this.y>-this.scrollHeight+oCont.clipHeight){
this.moveIt(0,this.y-move)
if (loop) setTimeout(this.obj+".down("+move+&quot

",speed)
}
}
//Makes the object go down
function goUp(move){
if (this.y<0){
this.moveIt(0,this.y-move)
if (loop) setTimeout(this.obj+".up("+move+&quot

",speed)
}
}

//Calls the scrolling functions. Also checks whether the page is loaded or not.
function scroll(speed){
if (scrolltextLoaded){
loop = true;
if (speed>0) oScroll.down(speed)
else oScroll.up(speed)
}
}

//Stops the scrolling (called on mouseout)
function noScroll(){
loop = false
if (timer) clearTimeout(timer)
}
//Makes the object
var scrolltextLoaded = false
function scrolltextInit(){
oCont = new makeObj('divScrollTextCont')
oScroll = new makeObj('divText','divScrollTextCont')
oScroll.moveIt(0,0)
oCont.css.visibility = "visible"
scrolltextLoaded = true
}
//Call the init on page load if the browser is ok...
if (bw.bw) onload = scrolltextInit

/***************
Multiple Scripts
If you have two or more scripts that use the onload event, probably only one will run (the last one).
Here is a solution for starting multiple scripts onload:
1. Delete or comment out all the onload assignments, onload=initScroll and things like that.
2. Put the onload assignments in the body tag like in this example, note that they must have braces ().
Example: <body onload="initScroll(); initTooltips(); initMenu();">
**************/
</script>

<STYLE>
#layer1 {
background-color : ;
layer-background-color : ;
border-width : 0px;
border-style : solid;
border-color : ;
width : 150px;
top : 50px;
left : 10px;
position : absolute;
z-index : 90;
visibility : hidden;
}

#layer2 {
background-color : #99CCCC;
layer-background-color : #99CCCC;
border-width : 1px;
border-style : solid;
border-color : #006666;
width : 150px;
top : 50px;
left : 50px;
position : absolute;
z-index : 90;
visibility : hidden;
}

#layer3 {
background-color : #99CCCC;
layer-background-color : #99CCCC;
border-width : 1px;
border-style : solid;
border-color : #006666;
width : 150px;
top : 50px;
left : 100px;
position : absolute;
z-index : 90;
visibility : hidden;
}

#layer4 {
background-color : #99CCCC;
layer-background-color : #99CCCC;
border-width : 1px;
border-style : solid;
border-color : #006666;
width : 150px;
top : 50px;
left : 140px;
position : absolute;
z-index : 90;
visibility : hidden;
}

#layer5 {
background-color : #99CCCC;
layer-background-color : #99CCCC;
border-width : 1px;
border-style : solid;
border-color : #006666;
width : 150px;
top : 50px;
left : 180px;
position : absolute;
z-index : 90;
visibility : hidden;
}

#layer6 {
background-color : #99CCCC;
layer-background-color : #99CCCC;
border-width : 1px;
border-style : solid;
border-color : #006666;
width : 150px;
top : 50px;
left : 220px;
position : absolute;
z-index : 90;
visibility : hidden;
}

#layer7 {
background-color : #99CCCC;
layer-background-color : #99CCCC;
border-width : 1px;
border-style : solid;
border-color : #006666;
width : 150px;
top : 50px;
left : 270px;
position : absolute;
z-index : 90;
visibility : hidden;
}

#layer8 {
background-color : #99CCCC;
layer-background-color : #99CCCC;
border-width : 1px;
border-style : solid;
border-color : #006666;
width : 150px;
top : 50px;
left : 300px;
position : absolute;
z-index : 90;
visibility : hidden;
}
</STYLE>

<SCRIPT language=javascript>
var activeSub=0;
var SubNum=0;

function reDo(){ window.location.reload() }
window.onresize = reDo;

//Define global variables

var timerID = null;
var timerOn = true;
var timecount = 3000;
var what = null;
var newbrowser = true;
var check = true;

function init(){
// alert ("Running Init&quot

;
if (document.layers) {
// alert ("Running Netscape 4&quot

;
layerRef="document.layers";
styleSwitch="";
visibleVar="show";
screenSize = window.innerWidth;
what ="ns4";

}else if(document.all){
// alert ("Running IE&quot

;
layerRef="document.all";
styleSwitch=".style";
visibleVar="visible";
screenSize = document.body.clientWidth + 18;
what ="ie";

}else if(document.getElementById){
// alert ("Running Netscape 6&quot

;
layerRef="document.getElementByID";
styleSwitch=".style";
visibleVar="visible";
what="moz";

}else{
//alert("Older than 4.0 browser.&quot

;
what="none";
newbrowser = false;
}

window.status='status bar text to go here';
check = true;
}

// Turns the layers on and off
function showLayer(layerName){
if(check){
if (what =="none&quot

{
return;
}
else if (what == "moz&quot

{
document.getElementById(layerName).style.visibility="visible";
}
else{
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"');
}
}
else {// alert ("Please wait for the page to finish loading.&quot

;
return;}
}

function hideLayer(layerName){
if(check){
if (what =="none&quot

{
return;
}
else if (what == "moz&quot

{
document.getElementById(layerName).style.visibility="hidden";
}
else{
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"');
}

}
else {// alert ("Please wait for the page to finish loading.&quot

;
return;}
}

function hideAll(){
hideLayer('layer1');
hideLayer('layer2');
hideLayer('layer3');
hideLayer('layer4');
hideLayer('layer5');
hideLayer('layer6');
hideLayer('layer7');
hideLayer('layer8');
}

function startTime() {
if (timerOn == false) {
timerID=setTimeout( "hideAll()" , timecount);
timerOn = true;

}

}

function stopTime() {
if (timerOn) {
clearTimeout(timerID);
timerID = null;
timerOn = false;
}
}

function onLoad(){
init();

}
</SCRIPT>

</head>

<body onLoad="init();">

<div id="divUp">
<a href="#" onmouseover="scroll(-2)" onmouseout="noScroll()" onclick="return false">[Up]</a>
</div>

<div id="divDown">
<a href="#" onmouseover="scroll(2)" onmouseout="noScroll()" onclick="return false">[Down]</a>
</div>

<div id="divScrollTextCont">
<div id="divText" style="width: 300; height: 548">
<p>News: <br>

http://www.bratta.com/dhtml

- Have you ever experienced DHTML is now updated
with more script, demos and how to's then ever. Visit now!
Also added: The DHTML Scriptomania, a new and better interface
to browser the scripts, demos and how to's.</p>
<p>
test text test text test text test text test text test text<br><br>
test text test text test text test text test text test text<br>
test text test text test text test text test text test text<br>
test text test text test text test text test text test text<br>
test text test text test text test text test text test text<br></p>
<p>
test text test text test text test text test text test text<br>
test text test text test text test text test text test text<br>
test text test text test text test text test text test text<br><br>
test text test text test text test text test text test text<br>
test text test text test text test text test text test text - END</p>
</div>
</div>

<table border="0" cellpadding="10" width="150" cellspacing="0">
<tr>
<td><a href="#" onMouseOver="hideAll(); showLayer('layer1'); stopTime()" onMouseOut="startTime();">link</a></td>
<td><a href="#" onMouseOver="hideAll(); showLayer('layer2'); stopTime()" onMouseOut="startTime();">link</a></td>
<td><a href="#" onMouseOver="hideAll(); showLayer('layer3'); stopTime()" onMouseOut="startTime();">link</a></td>
<td><a href="#" onMouseOver="hideAll(); showLayer('layer4'); stopTime()" onMouseOut="startTime();">link</a></td>
<td><a href="#" onMouseOver="hideAll(); showLayer('layer5'); stopTime()" onMouseOut="startTime();">link</a></td>
<td><a href="#" onMouseOver="hideAll(); showLayer('layer6'); stopTime()" onMouseOut="startTime();">link</a></td>
<td><a href="#" onMouseOver="hideAll(); showLayer('layer7'); stopTime()" onMouseOut="startTime();">link</a></td>
<td><a href="#" onMouseOver="hideAll(); showLayer('layer8'); stopTime()" onMouseOut="startTime();">link</a></td>
</tr>
</table>

<div id="layer1" onMouseOver="stopTime();" onMouseOut="startTime();">
<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" bgcolor="#CCCCCC">Text</td>
</tr>
<tr>
<td align="center" bgcolor="#CCCCCC">Text</td>
</tr>
<tr>
<td align="center" bgcolor="#CCCCCC">Text</td>
</tr>
<tr>
<td align="center" bgcolor="#CCCCCC">Text</td>
</tr>
<tr>
<td align="center" bgcolor="#CCCCCC">Text</td>
</tr>
<tr>
<td align="center" bgcolor="#CCCCCC">Text</td>
</tr>
</table>
</center>
</div>
</div>

<div id="layer2">
<a href="#" onMouseOver="stopTime();" onMouseOut="startTime();">nav item</a><br>
<a href="#" onMouseOver="stopTime();" onMouseOut="startTime();">nav item</a><br>
<a href="#" onMouseOver="stopTime();" onMouseOut="startTime();">nav item</a><br>
</div>

<div id="layer3">
<a href="#" onMouseOver="stopTime();" onMouseOut="startTime();">nav item</a><br>
<a href="#" onMouseOver="stopTime();" onMouseOut="startTime();">nav item</a><br>
<a href="#" onMouseOver="stopTime();" onMouseOut="startTime();">nav item</a><br>
</div>

<div id="layer4">
<a href="#" onMouseOver="stopTime();" onMouseOut="startTime();">nav item</a><br>
<a href="#" onMouseOver="stopTime();" onMouseOut="startTime();">nav item</a><br>
<a href="#" onMouseOver="stopTime();" onMouseOut="startTime();">nav item</a><br>
</div>

<div id="layer5">
<a href="#" onMouseOver="stopTime();" onMouseOut="startTime();">nav item</a><br>
<a href="#" onMouseOver="stopTime();" onMouseOut="startTime();">nav item</a><br>
<a href="#" onMouseOver="stopTime();" onMouseOut="startTime();">nav item</a><br>
</div>

<div id="layer6">
<a href="#" onMouseOver="stopTime();" onMouseOut="startTime();">nav item</a><br>
<a href="#" onMouseOver="stopTime();" onMouseOut="startTime();">nav item</a><br>
<a href="#" onMouseOver="stopTime();" onMouseOut="startTime();">nav item</a><br>
</div>

<div id="layer7">
<a href="#" onMouseOver="stopTime();" onMouseOut="startTime();">nav item</a><br>
<a href="#" onMouseOver="stopTime();" onMouseOut="startTime();">nav item</a><br>
<a href="#" onMouseOver="stopTime();" onMouseOut="startTime();">nav item</a><br>
</div>

<div id="layer8">
<a href="#" onMouseOver="stopTime();" onMouseOut="startTime();">nav item</a><br>
<a href="#" onMouseOver="stopTime();" onMouseOut="startTime();">nav item</a><br>
<a href="#" onMouseOver="stopTime();" onMouseOut="startTime();">nav item</a><br>
</div>

</body>

</html>

Guest_imported · Apr 16, 2002

Hi Guys.........Just wondering if someone can help me with this problem........it's an urgent one.....Thanks

xso · Apr 16, 2002

Hello PageDev,

The problem is that you must have multiple calls in the onload attribute for 2 different scripts. You cannot suppress the call to the init function, else the 2nd script won't work. So, you have to put multiple calls in the same onload attribute (in the body tag). As mentioned in the 1st script, in your case, you have to:

1. Delete or comment out all the onload assignments, onload=initScroll and things like that IN THE 1ST SCRIPT (the one for the scroller).
2. Put the onload assignments in the body tag like in this example, note that they must have braces ().
Example: <body onload="initScroll(); initTooltips(); initMenu();">

In case this works, could you please let me know because I'm interested in the results. Thanks in advance ;->

I hope this helps and cheers,

xso

Guest_imported · Apr 17, 2002

Hey thanks xso.......I should have picked that one up.....Must need a good sleep......I added the code into the body onload section and it works great........are u interested in the scripts??

xso · Apr 17, 2002

Hi PageDev,

Good to hear it's now working. Yes if you don't mind, I would be interested in the scripts. They look great indeed!
Thanks and cheers,
xso

Guest_imported · Apr 17, 2002

Go for it.........They are both free scripts......work in IE & netscape as well...i didn't have to delete or comment out any code.........just added

<body onLoad="scrolltextInit(); init();">

and it worked like a treat.

Thanks for you help

xso · Apr 17, 2002

Many thanks! Happy programming today and cheers!
xso

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Menu & Scroller Clash

Guest_imported

New member

Guest_imported

New member

xso

Programmer

Guest_imported

New member

xso

Programmer

Guest_imported

New member

xso

Programmer

Similar threads

Part and Inventory Search

Sponsor

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Menu &amp; Scroller Clash

Guest_imported

New member

Guest_imported

New member

xso

Programmer

Guest_imported

New member

xso

Programmer

Guest_imported

New member

xso

Programmer

Similar threads

Log in

Part and Inventory Search

Sponsor

Menu & Scroller Clash