Link to home
Start Free TrialLog in
Avatar of azyet24
azyet24Flag for United States of America

asked on

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>
Avatar of Dennis Maeder
Dennis Maeder
Flag of United States of America image
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>
Avatar of Dennis Maeder
Dennis Maeder
Flag of United States of America image
This also works for different intervals, but may show some interference
<body onLoad='animate; setInterval("nextstep()",2000);setInterval("getthedate()",1000);'>
Avatar of azyet24
azyet24
Flag of United States of America image

ASKER

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
ASKER CERTIFIED SOLUTION
Avatar of Dennis Maeder
Dennis Maeder
Flag of United States of America image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of azyet24
azyet24
Flag of United States of America image

ASKER

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>
Avatar of Dennis Maeder
Dennis Maeder
Flag of United States of America image
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