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.
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.
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 <body>")
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.
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.
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.