Log in

View Full Version : Cant combine two scripts... works fine individually.


bellbell
09-30-2008, 05:21 PM
1) Script Title: Manual Scroller and CMotion Image Gallery Viewer II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex2/manualscroll.htm and http://www.dynamicdrive.com/dynamicindex4/cmotiongallery2.htm

3) Describe problem: I can use one or the other, but when I combine them the Cmotion doesn't work... any thoughts?

See code below.



<head>
<script type="text/javascript" src="thumbnailviewer2.js" defer="defer">

</script><link rel="stylesheet" href="gallerystyle2.css" />
<script type="text/javascript" src="motiongallery2.js">
</script>
<script LANGUAGE="JavaScript">
<!--
function maximizeWin() {
if (window.screen) {
var aw = screen.availWidth;
var ah = screen.availHeight;
window.moveTo(0, 0);
window.resizeTo(aw, ah);
}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
//-->
</script>
<link href="brooker.css" rel="stylesheet" type="text/css" />
</head>

<body bgcolor="#DCDCDC" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="fillup();MM_preloadImages('images/thehand_on.jpg','images/firsttime_on.jpg','images/deathsentence_on.jpg','images/nopicture_on.jpg','images/landscapes_on.jpg','images/chicken_on.jpg','images/artist_on.gif','images/films_on.gif','images/contact_on.gif','images/home_on.gif')">

<table id="fullheight" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td><table width="1024" align="center" cellpadding="0" cellspacing="0" id="wrapper">
<tr>
<td width="280" align="right" valign="top"><img src="images/spacer.gif" alt="" width="280" height="70" border="0" /><img src="images/philipbrooker.gif" alt="philip brooker" width="240" height="44" vspace="0" border="0" />
<p><a href="artist.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','images/artist_on.gif',1)"><img src="images/artist.gif" alt="the artist" name="Image13" width="67" height="21" border="0" id="Image13" /><br />
</a><a href="films.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','images/films_on.gif',1)"><img src="images/films.gif" alt="films" name="Image14" width="67" height="21" vspace="8" border="0" id="Image14" /></a><br />
<a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','images/contact_on.gif',1)"><img src="images/contact.gif" alt="contact" name="Image15" width="67" height="21" border="0" id="Image15" /></a><br />
<a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image29','','images/home_on.gif',1)"><img src="images/home.gif" alt="home" name="Image29" width="67" height="21" vspace="8" border="0" id="Image29" /></a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="intro">
<script language="JavaScript1.2" type="text/javascript">

//Manual Scroller- &copy; Dynamic Drive 2001
//For full source code, visit http://www.dynamicdrive.com

//specify speed of scroll (greater=faster)
var speed=2

iens6=document.all||document.getElementById
ns4=document.layers

if (iens6){
document.write('<div id="container" style="position:relative;width:225px;height:250px;overflow:hidden;border:0px">')
document.write('<div id="content" style="position:absolute;width:225px;left:0px;top:0px">')
}
</script>
<ilayer name="nscontainer" width=225 height=250 clip="0,0,225,250" left="75"> <layer name="nscontent" width=225 height=250 visibility=hidden>
<!--INSERT CONTENT HERE-->
<h3>the silent pool</h3>
</strong> <span class="introtype">In fall 2007, I was given the opportunity to use a very powerful new scanner from Germany for a few days. Without getting technical, this scanner takes a series of photos from above at high magnification &mdash; essentially, it&rsquo;s a camera and scanner combined. </span>
<!--END CONTENT-->
</layer></ilayer>
<script language="JavaScript1.2" type="text/javascript">
if (iens6){
document.write('</div></div>')
var crossobj=document.getElementById? document.getElementById("content") : document.all.content
var contentheight=crossobj.offsetHeight
}
else if (ns4){
var crossobj=document.nscontainer.document.nscontent
var contentheight=crossobj.clip.height
}

function movedown(){
if (window.moveupvar) clearTimeout(moveupvar)
if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
crossobj.top-=speed
movedownvar=setTimeout("movedown()",20)
}

function moveup(){
if (window.movedownvar) clearTimeout(movedownvar)
if (iens6&&parseInt(crossobj.style.top)<=0)
crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"
else if (ns4&&crossobj.top<=0)
crossobj.top+=speed
moveupvar=setTimeout("moveup()",20)
}
/*function movedown(){
if (window.moveupvar) clearTimeout(moveupvar)
if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
crossobj.style.top=parseInt(crossobj.style.top)-40+"px"
else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
crossobj.top-=40
}

function moveup(){
if (window.movedownvar) clearTimeout(movedownvar)
if (iens6&&parseInt(crossobj.style.top)<0)
crossobj.style.top=parseInt(crossobj.style.top)+40+"px"
else if (ns4&&crossobj.top<=0)
crossobj.top+=40
}*/

function stopscroll(){
if (window.moveupvar) clearTimeout(moveupvar)
if (window.movedownvar) clearTimeout(movedownvar)
}

function movetop(){
stopscroll()
if (iens6)
crossobj.style.top=0+"px"
else if (ns4)
crossobj.top=0
}

function getcontent_height(){
if (iens6)
contentheight=crossobj.offsetHeight
else if (ns4)
document.nscontainer.document.nscontent.visibility="show"
}
window.onload=getcontent_height
</script>
<div style="margin-top:8px; padding-top:1px"><a href="javascript:void(0);" onmouseover="movedown()" onmouseout="stopscroll()"><img src="images/down.gif" border="0" /></a> <a href="javascript:void(0);" onmouseover="moveup()" onmouseout="stopscroll()"><img src="images/up.gif" border="0" /></a> </div>
</div></td>
<td width="94" align="right" valign="top"><img src="images/spacer.gif" width="94" height="70" /><div style="overflow:hidden;">
<div id="motioncontainer" style="position:relative ;width:94px; height:580px; overflow:hidden;">
<div id="motiongallery" style="position:absolute; left:36px; top:0;">


<!--Gallery Contents below-->
<div id="thumbs"><a href="images/P1.jpg" rel="enlargeimage::click" rev="loadarea"><img src="images/P1-DETAIL.jpg" width="57" height="57" border="0" /></a>
<a href="images/P2.jpg" rel="enlargeimage::click" rev="loadarea"><img src="images/P2-DETAIL.jpg" alt="" width="57" height="57" border="0" /></a><br />
<a href="images/P3.jpg" rel="enlargeimage::click" rev="loadarea"><img src="images/P3-DETAIL.jpg" alt="" width="57" height="57" border="0" /></a>
<a href="images/P4.jpg" rel="enlargeimage::click" rev="loadarea"><img src="images/P4-DETAIL.jpg" alt="" width="57" height="57" border="0" /></a>
<a href="images/P5.jpg" rel="enlargeimage::click" rev="loadarea"><img src="images/P5-DETAIL.jpg" alt="" width="57" height="57" border="0" /></a>
<a href="images/P6.jpg" rel="enlargeimage::click" rev="loadarea"><img src="images/P6-DETAIL.jpg" alt="" width="57" height="57" border="0" /></a>
<a href="images/P7.jpg" rel="enlargeimage::click" rev="loadarea"><img src="images/P7-DETAIL.jpg" alt="" width="57" height="57" border="0" /></a>
<a href="images/P8.jpg" rel="enlargeimage::click" rev="loadarea"><img src="images/P8-DETAIL.jpg" alt="" width="57" height="57" border="0" /></a>
<a href="images/P9.jpg" rel="enlargeimage::click" rev="loadarea"><img src="images/P9-DETAIL.jpg" alt="" width="57" height="57" border="0" /></a>
<a href="images/P10.jpg" rel="enlargeimage::click" rev="loadarea"><img src="images/P10-DETAIL.jpg" alt="" width="57" height="57" border="0" /></a>
<a href="images/P11.jpg" rel="enlargeimage::click" rev="loadarea"><img src="images/P11-DETAIL.jpg" alt="" width="57" height="57" border="0" /></a>
<a href="images/P12.jpg" rel="enlargeimage::click" rev="loadarea"><img src="images/P12-DETAIL.jpg" alt="" width="57" height="57" border="0" /></a></div>
<!--End Gallery Contents-->
</div>
</div>
</div></td>
<td valign="top"><img src="images/spacer.gif" width="650" height="70" />
<div id="loadarea" style="width:650px; height: 580px; overflow: hidden;"><img src="images/P1.jpg" width="500" height="580"/></div></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
jscheuer1
10-02-2008, 03:19 PM
These two scripts are in conflict in two important ways:


They both use the window.onload event:

window.onload=fillup - for motiongallery2.js
window.onload=getcontent_height - for Manual Scroller

They share at least two function names in common:

moveup()
movedown()

But these each perform different actions in the two scripts.


There could be other issues, these are just the ones I saw right away, and appear to be the only ones after a bit more investigation. The first problem can be fixed by changing the second onload (the one in Manual Scroller) to:


window.onload = function(){
fillup();
getcontent_height();
}

Technically the first onload should be removed, but as long as you keep the scripts in the same order as they currently are, it should be fine to leave it in for pages using only the first one (should there be any that do, possible since the first is external and could be used by several pages).

The second problem can probably be fixed by doing a global search and replace (case sensitive, whole words only) on the motiongallery2.js file, changing these two function names wherever they are used in that file to something more unique. For example, change all:

moveup

to

mgmoveup

and all:

movedown

to

mgmovedown

Leave them alone in the Manual Scroller script.
bellbell
10-02-2008, 03:33 PM
Thanks J!
I'll try this now.

B.