Two Javascripts interferring with each other, why?

I am using two javascripts that I found on dynamicdrive.com that unfortunatly conflict with each other.  Each will work perfectly until I add the other to the page.  I've insured that both have opening and closing script tags but they still will not work.  I even tried seperating them into external files and then calling them into the page and that didn't work either.

Live Date Script:
<script>

/*
Live Date Script-
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions, 100's more DHTML scripts, and Terms Of Use,
visit http://www.dynamicdrive.com
*/


var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")

function getthedate(){
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var hours=mydate.getHours()
var minutes=mydate.getMinutes()
var seconds=mydate.getSeconds()
var dn="AM"
if (hours>=12)
dn="PM"
if (hours>12){
hours=hours-12
}
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
//change font size here
var cdate="<small><font color='000000' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn
+"</b></font></small>"
if (document.all)
document.all.clock.innerHTML=cdate
else if (document.getElementById)
document.getElementById("clock").innerHTML=cdate
else
document.write(cdate)
}
if (!document.all&&!document.getElementById)
getthedate()
function goforit(){
if (document.all||document.getElementById)
setInterval("getthedate()",1000)
}

</script>
<span id="clock"></span>



News Alert:

 <script language="JavaScript1.2">
<!--

/*
Typing Scroller
Submitted by bengaliboy00@hotmail.com (hp: http://www.angelfire.com/nt/bengaliboy/)
With modifications by Dynamicdrive.com
For full source code, usage terms, and 100s more scripts, visit http://dynamicdrive.com
*/

//Secify scroller contents
var line=new Array()
line[1]="This is an awsome script"
line[2]="It brings up the text you want..."
line[3]="One letter at a time"
line[4]="You can add and subtract lines as you like."
line[5]="It\'s very cool and easy to use"

//Specify font size for scoller
var ts_fontsize="10px"

//--Don't edit below this line

var longestmessage=1
for (i=2;i<line.length;i++){
if (line[i].length>line[longestmessage].length)
longestmessage=i
}

//Auto set scroller width
var tscroller_width=line[longestmessage].length

lines=line.length-1 //--Number of lines

//if IE 4+ or NS6
if (document.all||document.getElementById){
document.write('<form name="bannerform">')
document.write('<input type="text" name="banner" size="'+tscroller_width+'"')
document.write('  style="background-color:#333333; color:white; font-family: verdana; font-size: '+ts_fontsize+'; font-weight:bold; border: medium none" onfocus="blur()">')
document.write('</form>')
}

temp=""
nextchar=-1;
nextline=1;
cursor="_"
function animate(){
if (temp==line[nextline] & temp.length==line[nextline].length & nextline!=lines){
nextline++;
nextchar=-1;
document.bannerform.banner.value=temp;
temp="";
setTimeout("nextstep()",2000)}
else if (nextline==lines & temp==line[nextline] & temp.length==line[nextline].length){
nextline=1;
nextchar=-1;
document.bannerform.banner.value=temp;
temp="";
setTimeout("nextstep()",2000)}
else{
nextstep()}}

function nextstep(){

if (cursor=="_"){
cursor="_"}
else if (cursor=="_"){
cursor="_"}
else if (cursor=="_"){
cursor="_"}
else if (cursor=="_"){
cursor="_"}


nextchar++;
temp+=line[nextline].charAt(nextchar);
document.bannerform.banner.value=temp+cursor
setTimeout("animate()",50)}

//if IE 4+ or NS6
if (document.all||document.getElementById)
window.onload=animate
// -->
</script>
azyet24Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dennis MaederCommented:
OK the problemis duelling SetTimeOut and SetInterval called in the animate and goforit functions.
SetTimeout sets a delay not an interval
Work around:- use SetInterval just once and call both routines that need updating. See working code below.
D


<script>

/*
Live Date Script-
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions, 100's more DHTML scripts, and Terms Of Use,
visit http://www.dynamicdrive.com
*/


var dayarray   =new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray =new Array("January","February","March","April","May","June","July","August","September","October","November","December")



function getthedate(){
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000) year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10) daym="0"+daym
var hours=mydate.getHours()
var minutes=mydate.getMinutes()
var seconds=mydate.getSeconds()
var dn="AM"
if (hours>=12) dn="PM"
if (hours>12){
  hours=hours-12
}
if (hours==0) hours=12
if (minutes<=9) minutes="0"+minutes
if (seconds<=9) seconds="0"+seconds
//change font size here
var cdate="<small><font color='000000' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn +"</b></font></small>"
if (document.all)
  document.all.clock.innerHTML=cdate
else if (document.getElementById)
  document.getElementById("clock").innerHTML=cdate
else
  document.write(cdate)
}
if (!document.all&&!document.getElementById) getthedate()

function goforit(){
//  if (document.all||document.getElementById)  //setInterval("getthedate()",1000)
}

</script>





<script language="JavaScript1.2">
<!--

/*
Typing Scroller
Submitted by bengaliboy00@hotmail.com (hp: http://www.angelfire.com/nt/bengaliboy/)
With modifications by Dynamicdrive.com
For full source code, usage terms, and 100s more scripts, visit http://dynamicdrive.com
*/

//Secify scroller contents
var line = new Array()
line[1]="This is an awsome script"
line[2]="It brings up the text you want..."
line[3]="One letter at a time"
line[4]="You can add and subtract lines as you like."
line[5]="It\'s very cool and easy to use"

//Specify font size for scoller
var ts_fontsize="10px"

//--Don't edit below this line

var longestmessage=1
for (i=2;i<line.length;i++){
  if (line[i].length>line[longestmessage].length)
  longestmessage=i
}

//Auto set scroller width
var tscroller_width=line[longestmessage].length

lines=line.length-1 //--Number of lines

//if IE 4+ or NS6
if (document.all||document.getElementById){
  document.write('<form name="bannerform">')
  document.write('<input type="text" name="banner" size="'+tscroller_width+'"')
  document.write('  style="background-color:#333333; color:white; font-family: verdana; font-size: '+ts_fontsize+'; font-weight:bold; border:medium none" onfocus="blur()">')
  document.write('</form>')
}

temp="";
nextchar=-1;
nextline=1;
cursor="_";

function animate(){
if (temp==line[nextline] & temp.length==line[nextline].length & nextline!=lines){
  nextline++;
  nextchar=-1;
  document.bannerform.banner.value=temp;
  temp="";
  //setTimeout("nextstep()",2000)
  }
else if (nextline==lines & temp==line[nextline] & temp.length==line[nextline].length){
  nextline=1;
  nextchar=-1;
  document.bannerform.banner.value=temp;
  temp="";
  //setTimeout("nextstep()",2000)}
  //setInterval("nextstep()",2000)
  }
else{
  nextstep()
}
}


function nextstep(){
if (cursor=="_"){
  cursor="_"}
else if (cursor=="_"){
  cursor="_"}
else if (cursor=="_"){
  cursor="_"}
else if (cursor=="_"){
  cursor="_"}

  nextchar++;
  temp+=line[nextline].charAt(nextchar);
  document.bannerform.banner.value=temp+cursor
  setTimeout("animate()",50)
}

//if IE 4+ or NS6
// if (document.all||document.getElementById) //window.onload=animate


// -->
</script>
<body onLoad='animate; setInterval("nextstep();getthedate()",1000)'>
<span id="clock"></span>
<br>
News Alert:
</body>
Dennis MaederCommented:
This also works for different intervals, but may show some interference
<body onLoad='animate; setInterval("nextstep()",2000);setInterval("getthedate()",1000);'>
azyet24Author Commented:
How do I call the news alert into my page.  In your example, the news elert is actually before the text News Alert.  I would like to put this into a div so I can position it where I want on the page.

Thanks,
Bobby
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Dennis MaederCommented:
You will find some changes in the second script block and also a new style block. This is where you change position for a div.
The CSS looks like this
<style>
/*contains the whole banner and associated labels etc*/
#mynews {
  position: absolute;  left: 50pt;  Top: 200pt;
}

/*style for the banner text*/
#banner {
  background-color:#333333; color:white;
  font-family:verdana;  font-size: '+ts_fontsize+';  font-weight:bold;  border:medium none }

D

<script>
/*
Live Date Script-
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions, 100's more DHTML scripts, and Terms Of Use,
visit http://www.dynamicdrive.com
*/
var dayarray   =new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray =new Array("January","February","March","April","May","June","July","August","September","October","November","December")
function getthedate(){
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000) year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10) daym="0"+daym
var hours=mydate.getHours()
var minutes=mydate.getMinutes()
var seconds=mydate.getSeconds()
var dn="AM"
if (hours>=12) dn="PM"
if (hours>12)  hours=hours-12
if (hours==0) hours=12
if (minutes<=9) minutes="0"+minutes
if (seconds<=9) seconds="0"+seconds
//change font size here
var cdate="<small><font color='000000' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn +"</b></font></small>"
if (document.all)
  document.all.clock.innerHTML=cdate
else if (document.getElementById)
  document.getElementById("clock").innerHTML=cdate
else
  document.write(cdate)
}
if (!document.all&&!document.getElementById) getthedate()
</script>


<script language="JavaScript1.2">
<!--
/*
Typing Scroller
Submitted by bengaliboy00@hotmail.com (hp: http://www.angelfire.com/nt/bengaliboy/)
With modifications by Dynamicdrive.com
For full source code, usage terms, and 100s more scripts, visit http://dynamicdrive.com
*/

//Specify scroller contents
var line = new Array()
line[1]="This is an awsome script"
line[2]="It brings up the text you want..."
line[3]="One letter at a time"
line[4]="You can add and subtract lines as you like."
line[5]="It\'s very cool and easy to use"

//Specify font size for scoller
var ts_fontsize="10px"

//--Don't edit below this line

var longestmessage=1
for (i=2;i<line.length;i++){
  if (line[i].length>line[longestmessage].length)
  longestmessage=i
}

//Auto set scroller width
var tscroller_width=line[longestmessage].length

lines=line.length-1 //--Number of lines
temp="";
nextchar=-1;
nextline=1;
cursor="_";

function animate(){
if (temp==line[nextline] & temp.length==line[nextline].length & nextline!=lines){
  nextline++;
  nextchar=-1;
  document.bannerform.banner.value=temp;
  temp="";
  //setTimeout("nextstep()",2000)
  }
else if (nextline==lines & temp==line[nextline] & temp.length==line[nextline].length){
  nextline=1;
  nextchar=-1;
  document.bannerform.banner.value=temp;
  temp="";
  //setTimeout("nextstep()",2000)}
  //setInterval("nextstep()",2000)
  }
else{
  nextstep()
}
}

function nextstep(){
if (cursor=="_"){
  cursor="_"}
else if (cursor=="_"){
  cursor="_"}
else if (cursor=="_"){
  cursor="_"}
else if (cursor=="_"){
  cursor="_"}

  nextchar++;
  temp+=line[nextline].charAt(nextchar);
  document.bannerform.banner.value=temp+cursor
  setTimeout("animate()",50)
}

//if IE 4+ or NS6
if (document.all||document.getElementById){
  document.write('<div id=mynews>News Alert:<br><form name="bannerform">')
  document.write('<input id=banner type="text" name="banner" size="'+tscroller_width+'"')
  document.write(' onfocus="blur()">')
  document.write('</form></div>')
animate;
setInterval("nextstep()",2001);setInterval("getthedate()",1000);
}
</script>
<style>
#mynews {
  position: absolute;  left: 50pt;  Top: 200pt;
}
#banner {
  background-color:#333333; color:white;
  font-family:verdana;  font-size: '+ts_fontsize+';  font-weight:bold;  border:medium none }
</style>



<body>
<span id="clock"></span>
</body>

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
azyet24Author Commented:
First of all, your code works but I can't get it to work with my page.  So if you don't want to proceed any further that's fine, you've earned the points.  But if you have the time, can you look over my code and see why this isn't working.  

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>
<!-- TMPL_VAR NAME="title"-->
Associate Resources</title>
<link href="../stylesheet-RealtySouth.css" rel="stylesheet" type="text/css">
<!-- (c) 2005, Deluxe-Menu.com -->
<script type="text/javascript" language="JavaScript1.2">var dmWorkPath="/menu.html.files/";</script>
<script type="text/javascript" language="JavaScript1.2" src="/menu.html.files/dmenu.js"></script>
<!-- (c) 2005, Deluxe-Menu.com -->

<script>
/*
Live Date Script-
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions, 100's more DHTML scripts, and Terms Of Use,
visit http://www.dynamicdrive.com
*/
var dayarray   =new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray =new Array("January","February","March","April","May","June","July","August","September","October","November","December")
function getthedate(){
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000) year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10) daym="0"+daym
var hours=mydate.getHours()
var minutes=mydate.getMinutes()
var seconds=mydate.getSeconds()
var dn="AM"
if (hours>=12) dn="PM"
if (hours>12)  hours=hours-12
if (hours==0) hours=12
if (minutes<=9) minutes="0"+minutes
if (seconds<=9) seconds="0"+seconds
//change font size here
var cdate="<small><font color='000000' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn +"</b></font></small>"
if (document.all)
  document.all.clock.innerHTML=cdate
else if (document.getElementById)
  document.getElementById("clock").innerHTML=cdate
else
  document.write(cdate)
}
if (!document.all&&!document.getElementById) getthedate()
</script>


<script language="JavaScript1.2">
<!--
/*
Typing Scroller
Submitted by bengaliboy00@hotmail.com (hp: http://www.angelfire.com/nt/bengaliboy/)
With modifications by Dynamicdrive.com
For full source code, usage terms, and 100s more scripts, visit http://dynamicdrive.com
*/

//Specify scroller contents
var line = new Array()
line[1]="This is an awsome script"
line[2]="It brings up the text you want..."
line[3]="One letter at a time"
line[4]="You can add and subtract lines as you like."
line[5]="It\'s very cool and easy to use"

//Specify font size for scoller
var ts_fontsize="10px"

//--Don't edit below this line

var longestmessage=1
for (i=2;i<line.length;i++){
  if (line[i].length>line[longestmessage].length)
  longestmessage=i
}

//Auto set scroller width
var tscroller_width=line[longestmessage].length

lines=line.length-1 //--Number of lines
temp="";
nextchar=-1;
nextline=1;
cursor="_";

function animate(){
if (temp==line[nextline] & temp.length==line[nextline].length & nextline!=lines){
  nextline++;
  nextchar=-1;
  document.bannerform.banner.value=temp;
  temp="";
  //setTimeout("nextstep()",2000)
  }
else if (nextline==lines & temp==line[nextline] & temp.length==line[nextline].length){
  nextline=1;
  nextchar=-1;
  document.bannerform.banner.value=temp;
  temp="";
  //setTimeout("nextstep()",2000)}
  //setInterval("nextstep()",2000)
  }
else{
  nextstep()
}
}

function nextstep(){
if (cursor=="_"){
  cursor="_"}
else if (cursor=="_"){
  cursor="_"}
else if (cursor=="_"){
  cursor="_"}
else if (cursor=="_"){
  cursor="_"}

  nextchar++;
  temp+=line[nextline].charAt(nextchar);
  document.bannerform.banner.value=temp+cursor
  setTimeout("animate()",50)
}

//if IE 4+ or NS6
if (document.all||document.getElementById){
  document.write('<div id=mynews><form name="bannerform">')
  document.write('<input id=banner type="text" name="banner" size="'+tscroller_width+'"')
  document.write(' onfocus="blur()">')
  document.write('</form></div>')
animate;
setInterval("nextstep()",2001);setInterval("getthedate()",1000);
}
</script>
<style>
#mynews {
  position: absolute;  left: 248px;  Top: 80px;
}
#banner {
  background-color:#333333; color:white;
  font-family:verdana;  font-size: '+ts_fontsize+';  font-weight:bold;  border:medium none }
</style>


<script type="text/javascript">
<!--
function breadCrumbs(delimiterStr) {
loc2 = window.location.toString();
loc = loc2.toLowerCase();
subs = loc.substr(7).split("/"); // Makes the assumption that the first7 characters are "HTTP://"
     document.write("<a href=\"" + getLoc(subs.length - 1) + "\">Home</a> " +
     delimiterStr + " ");
     a = (loc.indexOf('index.') == -1) ? 1 : 2;
     if (subs[subs.length-1].length == 0) {
     a++;
}
for (i = 1; i < (subs.length - a); i++) {
     subs[i] = makeCaps(unescape(subs[i]));
     document.write("<a href=\"" + getLoc(subs.length - i - 2) + "\">" +
     subs[i] + "</a> " + delimiterStr + " ");
}
document.write(document.title);
}
function makeCaps(a) {
     g = a.split("_");
     for (l = 0; l < g.length; l++) {
     g[l] = g[l].toUpperCase().slice(0, 1) + g[l].slice(1);
}
return g.join(" ");
}
function getLoc(c) {
     var d = "";
     if (c > 0) {
     for (k = 0; k < c; k++) {
     d = d + "../";
     }
}
return d;
}
//-->
</script>
</head>

<body>
<div id="body" style="position:absolute; width:100%; height:100%; z-index:1; left: 0; top: 0;">
  <table width="790" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td colspan="2"><img src="../images/header.jpg" width="790" height="80"></td>
          <td width="3" rowspan="4" valign="top" style="background: url(/images/devel/right_edge2.gif); background-repeat:repeat-y" >&nbsp;</td>

    </tr>
    <tr>
      <td colspan="2" bgcolor="#333333"><!-- TMPL_IF NAME="name" --><span class="verdana-12pt-white"><b>&nbsp;Welcome Back <!-- TMPL_VAR NAME="name" --> !</b></span><!-- /TMPL_IF -->
        
        <div id="Layer3" style="position:absolute; width:322px; height:24px; left: 177px; top: 82px;"><span class="verdana-10pt-wht"><b>News Alert:</b></span></div>
        <div id="Layer4" style="position:absolute; width:322px; height:24px; left: 248px; top: 80px;">
          </div>
</td>
    </tr>
    <tr>
      <td height="5" colspan="2" valign="top" background="../images/cell_back3.gif"></td>
    </tr>
    <tr>
      <td width="150" valign="top" background="../images/cell_back2.gif"><table width="150"  border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>            
            <!-- Deluxe Menu -->
<noscript><a href=http://deluxe-menu.com/>Associate Resources Menu</a></noscript>
      <script language=JavaScript1.2 type="text/javascript" src="deluxe.cgi"></script>
<!-- (c) 2005, Deluxe-Menu.com, http://deluxe-menu.com -->
      </td>
      </tr>
        <tr>
          <td width="150" valign="top"><script language=JavaScript1.2 type="text/javascript" src="qsearch.cgi"></script></td>
        </tr>
    </table>      
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p></td>
      <td width="640" rowspan="2" valign="top" bgcolor="#FFFFFF"><p><br>
      </p>
        <p>&nbsp;              </p>
        <p class="style36">&nbsp;</p>
       
               <p>&nbsp;</p>
               <div id="Layer2" style="position:absolute; width:230px; height:21px; z-index:2; left: 562px; top: 82px;">
        <span id="clock"></span></div>        
               <div id="Layer1" style="position:absolute; width:600px; height:18px; z-index:1; left: 152px; top: 104px;">You Are Here:
                   <script type="text/javascript">breadCrumbs(">");</script>
               </div>               <p><br>
                  </p></td>
    </tr>
    <tr>
      <td valign="top" background="../images/cell_back2.gif">&nbsp;</td>
      <td valign="top" style="background: url(/images/devel/right_edge2.gif); background-repeat:repeat-y" >&nbsp;</td>
    </tr>
    <tr>
    <td height="6" colspan="3" style="background: url(/images/devel/bottom_edge2.gif); background-repeat:repeat-x"><div align="right"><img src="/images/devel/corner_edge2.gif" width="6" height="6"></div></td>

    </tr>
  </table>
  <div id="Layer1" class="style35" style="position:absolute; width:185px; height:53px; z-index:1; left: 598px; top: 22px;">
  <p>&nbsp;</p>
  </div>
</div>
</body>
</html>
Dennis MaederCommented:
Took a look - there is a problem with your breadcrumbs call which causes interference - it writes several times - suppressing it shows the banner, so thats where you need to look.
D
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.