Results 1 to 9 of 9

Thread: Conflicting Javascript Files

  1. #1

    Thread Starter
    Hyperactive Member
    Join Date
    Apr 2002
    Posts
    492

    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
    Attached Files Attached Files

  2. #2
    I'm about to be a PowerPoster! mendhak's Avatar
    Join Date
    Feb 2002
    Location
    Ulaan Baator GooGoo: Frog
    Posts
    38,170

    Re: Conflicting Javascript Files

    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.

  3. #3

    Thread Starter
    Hyperactive Member
    Join Date
    Apr 2002
    Posts
    492

    Re: Conflicting Javascript Files

    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.

  4. #4
    PowerPoster JPnyc's Avatar
    Join Date
    Oct 2002
    Location
    Manhattan
    Posts
    3,015

    Re: Conflicting Javascript Files

    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.

  5. #5

    Thread Starter
    Hyperactive Member
    Join Date
    Apr 2002
    Posts
    492

    Re: Conflicting Javascript Files

    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>

  6. #6
    I'm about to be a PowerPoster!
    Join Date
    Jan 2005
    Location
    Everywhere
    Posts
    13,647

    Re: Conflicting Javascript Files

    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.

  7. #7
    I'm about to be a PowerPoster! mendhak's Avatar
    Join Date
    Feb 2002
    Location
    Ulaan Baator GooGoo: Frog
    Posts
    38,170

    Re: Conflicting Javascript Files

    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?

  8. #8
    I'm about to be a PowerPoster!
    Join Date
    Jan 2005
    Location
    Everywhere
    Posts
    13,647

    Re: Conflicting Javascript Files

    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.

  9. #9
    I'm about to be a PowerPoster! mendhak's Avatar
    Join Date
    Feb 2002
    Location
    Ulaan Baator GooGoo: Frog
    Posts
    38,170

    Re: Conflicting Javascript Files

    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?

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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width