DHTML Ticker Tape

**DLF** · Feb 7, 2001 11:52

Hi,

I hope someone might be able to help me. I have used the Hierarchical Menus from www.dhtml.com the new version. In my web page design.

I have been trying to include Mike's DHTML scroller from www.dynamicdrive.com my problem being is that when I add the scroller the menus dissapear.

I would be really gratful for any help as I have tried placing the script in different parts of the code and still can't get it to work. Either one works and the other doesn't perhaps its something I am not aware of if anyone can offer advice please do.

Here is a sample of the code:

<HTML>
<HEAD>
<TITLE>Scottish Leadership Foundation - Home Page</TITLE>

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

</SCRIPT>

<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">

</SCRIPT>

</HEAD>

<BODY bgcolor="#FFFFFF" LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0" BACKGROUND="Div2.gif" onLoad="MM_preloadImages('tn2.gif','tn4.gif','tn6.gif','tn8.gif')">

<SCRIPT LANGUAGE="JavaScript1.2" SRC="HM_Loader.js" TYPE='text/javascript'></SCRIPT>

<a NAME="top"></a>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" HEIGHT="50">
<tr BGCOLOR="#FFFFFF">

<td width="63%"> <font FACE="Arial, Helvetica, sans-serif" SIZE="+1" COLOR="#FFFFFF"><img SRC="log.gif" WIDTH="48" HEIGHT="48" ALIGN="LEFT" border="0"><font COLOR="#000066"><b>
<br>
Scottish Leadership Foundation</b></font></font></td>
<td width="37%">
<div ALIGN="RIGHT"><img SRC="lib.jpg" WIDTH="300" HEIGHT="50" border="0"></div>
</td>
</tr>
</table>
<table WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<tr>

<td>
<table width="100%" border="0" cellspacing="1" cellpadding="0" height="20" bgcolor="#336699">
<tr bgcolor="#336699">
<td> <img src="Clear.gif" width="148" height="1" border="0"><a href="sample2.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image18','','tn2.gif',1)"><img name="Image18" border="0" src="tn1.gif" width="120" height="22"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image16','','tn4.gif',1)"><img name="Image16" border="0" src="tn3.gif" width="120" height="22"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image17','','tn6.gif',1)"><img name="Image17" border="0" src="tn5.gif" width="120" height="22"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image19','','tn8.gif',1)"><img name="Image19" border="0" src="tn7.gif" width="120" height="22"></a></td>
</tr>
</table>
</td>
</tr>
</table>
<table WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<tr>
<td WIDTH="150"><img src="Clear.gif" width="150" height="1" border="0"></td>
<td WIDTH="25"><img SRC="Clear.gif" WIDTH="25" HEIGHT="1" BORDER="0"></td>

<td COLSPAN="2" VALIGN="TOP"> <br>
<br>
<table border="1" cellpadding="0" cellspacing="0" bordercolor="#000000" align="CENTER">
<tr>
<td valign="TOP"><a href="news.htm" onMouseOver="hiLiteOn('News'); switchIcon('News'); window.status= 'The latest news from PBDH';return true"
onMouseOut="hiLiteOff('News'); switchIcon('PBDH'); window.status= ' ';return true"><img
src="images/e1.jpg" width="120" height="120" alt="e-learning" border="0"
name="News"></a></td>
<td valign="TOP"><a href="people.htm" onMouseOver="hiLiteOn('People'); switchIcon('People'); window.status= 'Meet the people here at PBDH';return true"
onMouseOut="hiLiteOff('People'); switchIcon('PBDH'); window.status= '';return true"><img
src="images/part1.jpg" width="120" height="120" alt="Partnerships" border="0"
name="People"></a></td>
<td valign="TOP"><a href="portfolio/portfolio.htm" onMouseOver="hiLiteOn('port'); switchIcon('cat2'); window.status= 'Browse though our work';return true"
onMouseOut="hiLiteOff('port'); switchIcon('PBDH'); window.status= '';return true"><img
src="images/port1.jpg" width="120" height="120" alt="Research" border="0"
name="port"></a></td>
<td valign="TOP"><a href="news.htm" onMouseOver="hiLiteOn('swen'); switchIcon('cat1'); window.status= 'The latest news from PBDH';return true"
onMouseOut="hiLiteOff('swen'); switchIcon('PBDH'); window.status= ' ';return true"><img
src="images/led1.jpg" width="120" height="120" alt="Leadership" border="0"
name="swen"></a></td>
</tr>
<tr>
<td valign="TOP"><a href="portfolio/portfolio.htm" onMouseOver="hiLiteOn('Portfolio'); switchIcon('Portfolio'); window.status= 'Browse though our work';return true"
onMouseOut="hiLiteOff('Portfolio'); switchIcon('PBDH'); window.status= '';return true"><img
src="images/man1.jpg" width="120" height="120" alt="Management" border="0"
name="Portfolio"></a> </td>
<td colspan="2" valign="top"><img src="images/pbdhicon.gif" width="240" height="120" border="0"
name="Icon"> </td>
<td valign="TOP"><a href="people.htm" onMouseOver="hiLiteOn('peop'); switchIcon('cat3'); window.status= 'Meet the people here at PBDH';return true"
onMouseOut="hiLiteOff('peop'); switchIcon('PBDH'); window.status= '';return true"><img
src="images/peop1.jpg" width="120" height="120" alt="Analysis" border="0"
name="peop"></a></td>
</tr>
<tr>
<td valign="TOP" colspan="4" bgcolor="#EEEEEE"> <a href="people.htm" onMouseOver="hiLiteOn('peop'); switchIcon('cat3'); window.status= 'Meet the people here at PBDH';return true"
onMouseOut="hiLiteOff('peop'); switchIcon('PBDH'); window.status= '';return true">
</a>
<script language="JavaScript" src="dhtmllib.js"></script>
<script language="JavaScript" src="scroller.js"></script>
<script language="JavaScript">

</script>
<div id="placeholder" style="position:relative; width:350px; height:32px;"></div>
<script language="JavaScript">var myScroller1 = new Scroller(0,0, 350,32, 1,6);
myScroller1.setColors("#000000", "#EEEEEE", "#EEEEEE");
myScroller1.setFont("Verdana,Arial,Helvetica", -2);
myScroller1.addItem("<b>Click here for <a href='http://dynamicdrive.com'>News & Events</a> happening near you.</b>");
myScroller1.addItem("<b>Visit <a href='http://www.brainjar.com'>Leadership</a> the new way forward.</b>");
myScroller1.addItem("<b>Looking for membership <a href='http://wsabstract.com'>click here.</a>");
myScroller1.addItem("<b>Current events and news in our <a href='http://news.com'>Newsletter.</a></b>");

function runmikescroll() {

var layer;
var mikex, mikey;

// Locate placeholder layer so we can use it to position the scrollers.

layer = getLayer("placeholder");
mikex = getPageLeft(layer);
mikey = getPageTop(layer);

// Create the first scroller and position it.

myScroller1.create();
myScroller1.hide();
myScroller1.moveTo(mikex, mikey);
myScroller1.setzIndex(100);
myScroller1.show();
}

window.onload=runmikescroll
</script>
</td>
</tr>
<tr>
<td valign="TOP" colspan="4" bgcolor="#336699">
<p align="center"><font size="-2" face="Verdana, Arial, Helvetica, sans-serif" color="#666666">
<br>
<font color="#FFFFFF">© 2001 Copyright Scottish Leadership Foundation,
All Rights Reserved</font><br>
<br>
</font></p>
</td>
</tr>
</table>
<p> </p>
<p> </p>
<p> </p>
</td>
<td WIDTH="25"><img SRC="Clear.gif" WIDTH="25" HEIGHT="1" BORDER="0"></td>
</tr>
</table>
</BODY>
</HTML>

Thanks,

Donna_F

BC · Feb 7, 2001 17:45

Donna, it will most probably be the two scripts having one or two of the same 'variable' or 'function' names which are conflicting with each other. As a result one will work (when the DHTML code is parsed) and the other one won't (as the other one is loaded first, the second one will be relegated to the dustbin).

When I get some time I'll have a good look through the two scripts and find the exact cause...

**DLF** · Feb 8, 2001 03:07

Thanks,

I would be really grateful for your help. I have a feeling it might be the fact that the two scripts may require to run on the page load at the same time.

The menus are generated during page load I think the ticker needs to work at the same time.

Perhaps this is not possible!

BC · Feb 8, 2001 05:02

Hmmm..... I was close. Wasn't necessarily the same variable/function name (though this could still be the case); the problem is with this :

Code:

<BODY bgcolor="#FFFFFF" LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0" BACKGROUND="Div2.gif" onLoad="MM_preloadImages('tn2.gif','tn4.gif','tn6.gif','tn8.gif')">

and in the scroller code to activate the scroller:

Code:

 myScroller1.show();
}

window.onload=runmikescroll
</script>

Basically the onLoad calls are conflicting with each other, so you would need to call both at the same time like :

Code:

<BODY bgcolor="#FFFFFF" LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0" BACKGROUND="Div2.gif" onLoad="MM_preloadImages('tn2.gif','tn4.gif','tn6.gif','tn8.gif');runmikescroll">

and remove the

window.onload=runmikescroll

from the other script; or write a JScript function to call both scripts at the same time. This tutorial from WSAbstract (DynamicDrive's sister site) explains the problem with running multiple scripts.

Unfortunately because you're basically running 3/4 JavaScripts at the same time (rollovers, DHTML menu + the scroller) it's immensely complicated and what I supplied above may not necessarily work. Come back if it doesn't work and I'll keep plugging further (and other JScript gurus, if you can help separate the muck it would be much appreciated).

The very best of luck.

**DLF** · Feb 8, 2001 05:36

Hi again,

I did try that but unfortunatly it didn't work. I will agree my code is a bit messy. I have included rollovers but as you can see I also use the Dreamweaver rollovers option as well.

When I did this the menus came back and the ticker dissapeared.

Not having any luck here! sorry to trouble you with this.

I plan to clean the code up a bit if I can get these working together but it may not be possible to get them working together.

**Vman** · Feb 8, 2001 10:32

Wow - you are not going to believe this. As much as I hate javascript, I love a good mystery. Thanks to BC I was able to figure it out.

First off your body should be like this:
<BODY bgcolor="#FFFFFF" ...... onLoad="MM_preloadImages('tn2.gif','tn4.gif','tn6.gif','tn8.gif');HM_f_StartIt();runmikescroll()">

Now the HM_f_StartIt is the call for the menu script and it has an onload call at the bottom of 3 files: HM_ScriptDOM.js, HM_ScriptIE4.js, HM_ScriptNS4.js. I just commented these out.

Once you have all of the onload funcion calls in the one line, it works fine. At least in IE 5.5. I did notice that there are a few function names that are the same, though it doesn't seem to be a problem.

Hope this helps.

BC · Feb 8, 2001 17:39

Ahhhhhhhh, bugger it! Thank you VMan, I forgot to check the hierarchial menus for the startup function. That should be it.

Donna, test it out and let us know how it goes.

**DLF** · Feb 9, 2001 04:00

Hi Guys,

I will try this out over the weekend. I tried it yesterday but I still couldn't get it to work. I think you said to comment out the onload events within the JS files is that correct?

I will certainly try this out thanks very much for all your help.

BC · Feb 9, 2001 04:14

That's correct.

User Tag List

Thread: DHTML Ticker Tape

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions