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?
 
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>
0
 
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>
0
 
Dennis MaederCommented:
This also works for different intervals, but may show some interference
<body onLoad='animate; setInterval("nextstep()",2000);setInterval("getthedate()",1000);'>
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
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
0
 
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>
0
 
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
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.