Conflicting Javascript Files

I have 2 javascript files that I am using on my website. I have attached both of the files below, I saved them as .txt because I wasnt able to upload .js files. I am using the following 2 calls to insert the code into my webpage.

<SCRIPT type="text/javascript" language="JavaScript" src="js/scroller.js"></SCRIPT>

<script type="text/javascript" src="HorzScroll.js"> </script>

What can I do to have both of them on the site without them conflicting. If I remove 1 than the other one works. I want both of them to work at the same time on the site.

Thanks for you help

What part's not working. Too much to read. Got a sample HTML page we can look at?

Try using Firefox's javascript debugging console.

If I have both of the lines of code that I had in my previous post

<SCRIPT type="text/javascript" language="JavaScript" src="js/scroller.js"></SCRIPT>

<script type="text/javascript" src="HorzScroll.js"> </script>

Only the Scroller works(scroller.js). If I remove scroller.js then the HorzScroll works correctly.

Course they conflict. They share variable names. scrollerheight and width are variables in each function. That can't happen unless they're declared entirely inside a function.

I have inserted a new News scroller, making sure there are no variables used multiple times, and still I get the same result, only one of the javascript codes runs. I am thinking that it has to do something with the following code

HTML Code:

---

<SCRIPT language="javascript">
// URLs of slides
var slideurl=new Array("fading/jumprope.jpg")

// targets of the links. Allowed values: "_parent", "_top", "_blank", "_self"
var slidetarget=new Array("_blank")

// the width of the slideshow (pixels)
var scrollerwidth= screen.availWidth - 250

// the height of the slideshow (pixels)
var scrollerheight=127

// width of the transparent zones (pixels)
var translayerszone=40

// font-attributes for the comments
var slidefont="Arial"
var slidefontcolor="blue"
var slidefontsize="2"

// do not edit below this line
var translayerswidth=1
var translayersmax=Math.floor(translayerszone/translayerswidth)
var translayersleftpos=0
var translayersopacity=100
var translayersfactor=100/translayersmax
var translayerswidthall=translayersmax*translayerswidth
var allpicturewidth
var distancepictopic=0
var scrollerleft=0
var scrollertop=0
var pause=10
var step=2
var newstep=step
var clipleft,clipright,cliptop,clipbottom
var i_picture=0
var timer
var picturecontent=""
var ns4=document.layers?1:0
var ns6=document.getElementById&&!document.all?1:0
var ie=document.all?1:0
var browserinfos=navigator.userAgent
var opera=browserinfos.match(/Opera/) 

var preloadedimages=new Array()
for (i=0;i<slideurl.length;i++){
        preloadedimages[i]=new Image()
        preloadedimages[i].src=slideurl[i]
}

function init() {
    if (ie) {
                allpicturewidth=document.all.picturediv.offsetWidth
                document.all.picturediv.style.posTop=scrollertop
        document.all.picturediv.style.posLeft=scrollerleft+scrollerwidth
                clipleft=0
                clipright=0
                cliptop=0
                clipbottom=scrollerheight
                document.all.picturediv.style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
                document.all.picturediv.style.visibility="visible"
                scrollpicture()
               
    }
        if (ns6) {
                allpicturewidth=document.getElementById('emptypicturediv').offsetWidth
                document.getElementById('picturediv').style.top=scrollertop
        document.getElementById('picturediv').style.left=scrollerleft+scrollerwidth
                clipleft=0
                clipright=0
                cliptop=0
                clipbottom=scrollerheight
                document.getElementById('picturediv').style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
                document.getElementById('picturediv').style.visibility="visible"
                scrollpicture() 
    }
        if (ns4) {
                allpicturewidth=document.roof.document.picturediv.document.width
                document.roof.document.picturediv.top=scrollertop
                document.roof.document.picturediv.left=scrollerleft+scrollerwidth
                document.roof.document.picturediv.clip.left=0
                document.roof.document.picturediv.clip.right=0
                document.roof.document.picturediv.clip.top=0
                document.roof.document.picturediv.clip.bottom=scrollerheight
                document.roof.document.picturediv.visibility="visible"
        scrollpicture()
    }
}

function scrollpicture() {
    if (ie) {
                if (document.all.picturediv.style.posLeft>=scrollerleft-allpicturewidth) {
                        document.all.picturediv.style.posLeft-=step
                        clipright+=step
                        if (clipright>scrollerwidth) {
                                clipleft+=step
                        }
                        document.all.picturediv.style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"               
                        var timer=setTimeout("scrollpicture()",pause)
                }
                else {
                        resetposition()
                }
        }
        if (ns6) {
                if (parseInt(document.getElementById('picturediv').style.left)>=scrollerleft-allpicturewidth) {
        document.getElementById('picturediv').style.left=parseInt(document.getElementById('picturediv').style.left)-step
                        clipright+=step
                        if (clipright>scrollerwidth) {
                                clipleft+=step
                        }
                        document.getElementById('picturediv').style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"               
                        var timer=setTimeout("scrollpicture()",pause)
                }
                else {
                        resetposition()
                }
        }
  if (ns4) {
                if (document.roof.document.picturediv.left>=scrollerleft-allpicturewidth) {
                        document.roof.document.picturediv.left-=step
                        document.roof.document.picturediv.clip.right+=step
                        if (document.roof.document.picturediv.clip.right>scrollerwidth) {
                                document.roof.document.picturediv.clip.left+=step
                        }
                        var timer=setTimeout("scrollpicture()",pause)
                }
                else {
                        resetposition()
                }
        }
}

function onmsover() {
        step=0
}
function onmsout() {
        step=newstep
}

function resetposition() {
        if (ie) {
        document.all.picturediv.style.posLeft=scrollerleft+scrollerwidth
                clipleft=0
                clipright=0
                document.all.picturediv.style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
        scrollpicture()
        }
        if (ns6) {
                allpicturewidth=document.getElementById('emptypicturediv').offsetWidth
        document.getElementById('picturediv').style.left=scrollerleft+scrollerwidth
                clipleft=0
                clipright=0
                document.getElementById('picturediv').style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
        scrollpicture()
        }
        if (ns4) {
                document.roof.document.picturediv.left=scrollerleft+scrollerwidth
                document.roof.document.picturediv.clip.left=0
                document.roof.document.picturediv.clip.right=0
        scrollpicture()
        }
}

picturecontent=""
picturecontent+="<table cellpadding=2 cellspacing=0>"
picturecontent+="<tr>"
for (i=0;i<=slideurl.length-1;i++) {
        picturecontent+="<td>"
        picturecontent+="<img src=\""+slideurl[i]+"\" border=0>"
        picturecontent+="</td>"
}
picturecontent+="</tr>"
picturecontent+="</tr></table>"

if (ie || ns6) {
        document.write('<div style="position:relative;width:'+scrollerwidth+'px;height:'+scrollerheight+'px;overflow:hidden">')
        document.write('<div id="picturediv" style="position:absolute;top:0px;left:0px;height:'+scrollerheight+'px;visibility:hidden">'+picturecontent+'</div>')
        if (ie && !opera) {
                for (i=0;i<=translayersmax;i++) {
                document.write('<span ID="trans'+i+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+scrollerheight+'px;filter:alpha(opacity='+translayersopacity+');overflow:hidden"> </span>')
                translayersleftpos+=translayerswidth
                translayersopacity-=translayersfactor
                }
                translayersleftpos=scrollerwidth-translayersleftpos
                for (ii=0;ii<=translayersmax;ii++) {
                document.write('<span ID="trans'+ii+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+scrollerheight+'px;filter:alpha(opacity='+translayersopacity+');overflow:hidden"> </span>')
                translayersleftpos+=translayerswidth
                translayersopacity+=translayersfactor
                }
        }
        if (ns6 && !opera) {
                for (i=0;i<=translayersmax-1;i++) {
                document.write('<span ID="transleft'+i+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+scrollerheight+'px;-moz-opacity:'+translayersopacity/100+';overflow:hidden"> </span>')
                translayersleftpos+=translayerswidth
                translayersopacity-=translayersfactor
                if (translayersopacity<0) {translayersopacity=0.001}
                }
                translayersleftpos=scrollerwidth-translayersleftpos
                translayersopacity=0.001
                for (i=0;i<=translayersmax-1;i++) {
                document.write('<span ID="transright'+i+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+scrollerheight+'px;-moz-opacity:'+translayersopacity/100+';"> </span>')
                translayersleftpos+=translayerswidth
                translayersopacity+=translayersfactor
                }
        }
        document.write('</div>')
        document.write('<div id="emptypicturediv" style="position:absolute;top:0px;left:0px;height:'+scrollerheight+'px;visibility:hidden">'+picturecontent+'</div>')

        window.onload=init
}

if (ns4) {
        document.write('<ilayer name="roof" width='+scrollerwidth+' height='+scrollerheight+'>')
        document.write('<layer name="picturediv" width='+scrollerwidth+' height='+scrollerheight+' visibility=hide>'+picturecontent+'</layer>')
        document.write('</ilayer>')
        window.onload=init
}


</script>

---

because I dont see anything wrong with the following

HTML Code:

---

<html>
<head>

<SCRIPT language="javascript">// news ticker function

var newslist=new Array();
var cnt=0;                                        // current news item
var curr = "";
                // the char displayed at the end of the item
var changenews=5000          // the time in milliseconds each item stays
var speed=25                                // the speed the text is typed - higher number = slower type
var z=-1;                                        // current letter being typed

// Enter the news items you want to display here...
newslist[0]=new Array("Remember to include the onload='newsticker()' tag in the &lt;body&gt;")
newslist[1]=new Array("This newsticker code was downloaded from <a href='http://www.planetsourcecode.com/'>Planet Source Code</a>!, This newsticker code was downloaded from <a href='http://www.planetsourcecode.com/'>Planet Source Code</a>!")

function newsticker()
{
        // next character of current item
        if (z < newslist[cnt][0].length - 1)
        {
                z++;
                temp1 = newslist[cnt][0];       
                temp1 = temp1.split('');       
                  curr = curr+temp1[z];
                temp2 = newslist[cnt][1];       
                  mtxt.innerHTML = ""+curr;
                  setTimeout('newsticker()',speed)
                return;
        }

        // new item
        z = -1; curr = "";
        if (cnt<newslist.length-1)
                cnt++;
        else
                cnt=0;
        setTimeout('newsticker()',changenews)

}

</SCRIPT>



</head>

<body onload="newsticker()">


        <table width="100%" border="0" cellspacing="1" cellpadding="4">
          <tr>
          <td width="125" nowrap>News at a Glance:</td>
          <td valign="top">
                    <Span Id="mtxt">
                                </Span>
          </td>
                  </tr>
        </table>
 
</body>

</html>

---

Like mendhak said, that's a lot of code to look at, and we're lazy, and we can't always be on hand to solve your problems, so let me point you to an excellent Javascript tool: Firebug. It has a built in debugger which allows you to place break points in the code and step through whilst watching the variables. This way you can see what is going on and will probably find the error very quickly.

Quote:

---

Originally Posted by penagate

Like mendhak said, that's a lot of code to look at, and we're lazy, and we can't always be on hand to solve your problems, so let me point you to an excellent Javascript tool: Firebug. It has a built in debugger which allows you to place break points in the code and step through whilst watching the variables. This way you can see what is going on and will probably find the error very quickly.

---

Like Visual Studio's JavaScript debugger?

Better. I could never get the VS one to work very well and it isn't integrated into IE as well as this is with Fx (being an extension). Result being whenever I refreshed the page I had to reattach the debugger. Firebug does a pretty good job of retaining things like breakpoints etc. (by line, so if you add/remove code linees the positions will be out). Plus it adds the console object which you can use in your code.

Yeah, it's been impossible to attach firefox.exe to Visual Studio and actually debug anything, have you seen the amount of libraries it loads? :sick:

This'll be useful (I hope) for FF debugging, I guess. Better two tools than none.