?
Solved

Two Javascripts interferring with each other, why?

Posted on 2006-03-20
6
Medium Priority
?
273 Views
Last Modified: 2012-06-21
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>
0
Comment
Question by:azyet24
  • 4
  • 2
6 Comments
 
LVL 10

Expert Comment

by:Dennis Maeder
ID: 16241828
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
 
LVL 10

Expert Comment

by:Dennis Maeder
ID: 16242271
This also works for different intervals, but may show some interference
<body onLoad='animate; setInterval("nextstep()",2000);setInterval("getthedate()",1000);'>
0
 

Author Comment

by:azyet24
ID: 16242404
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 10

Accepted Solution

by:
Dennis Maeder earned 2000 total points
ID: 16243296
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
 

Author Comment

by:azyet24
ID: 16251299
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
 
LVL 10

Expert Comment

by:Dennis Maeder
ID: 16252567
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

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question