PDA

View Full Version : Conflicting scrollers



gisjmae
09-03-2007, 11:45 AM
Hi

The page in question is here:

http://www.helevalley.co.uk/newsite3/index2.aspx

I am having problems as i am using two types of scroller, downloaded from dynamicdrive.com

One is Image 'Thumbnail Viewer II', which scrolls the thumbnails below the main pic and the other is 'Manual Scroller', which is working and located on the right hand side.

Thumbnail Viewer II is used in conjunction with CMotion Image Gallery, which is used to create the changing main pic fade effect when you hover over the thumbnails.

All is working apart from the scrolling left or right for the thumbnails. i guess there is a conflict between this Thumbnail Viewer II and the other scroller script Manual Scroller.

I have attached the code for Thumbnail Viewer II and Manual Scroller just in case anyone has any ideas how this might be resolved.

Thank you.

gisjmae
09-03-2007, 12:00 PM
The Thumbnail Viewer II script (function that isn't working because of conflict):


// -------------------------------------------------------------------
// Image Thumbnail Viewer II- By Dynamic Drive, available at: http://www.dynamicdrive.com
// Last updated: Feb 5th, 2007
// -------------------------------------------------------------------

var thumbnailviewer2={
enableTitle: true, //Should "title" attribute of link be used as description?
enableTransition: true, //Enable fading transition in IE?
hideimgmouseout: false, //Hide enlarged image when mouse moves out of anchor link? (if enlarged image is hyperlinked, always set to false!)

/////////////No need to edit beyond here/////////////////////////

iefilterstring: 'progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)', //IE specific multimedia filter string
iefiltercapable: document.compatMode && window.createPopup? true : false, //Detect browser support for IE filters
preloadedimages:[], //array to preload enlarged images (ones set to display "onmouseover"
targetlinks:[], //array to hold participating links (those with rel="enlargeimage:initType")
alreadyrunflag: false, //flag to indicate whether init() function has been run already come window.onload

loadimage:function(linkobj){
var imagepath=linkobj.getAttribute("href") //Get URL to enlarged image
var showcontainer=document.getElementById(linkobj.getAttribute("rev").split("::")[0]) //Reference container on page to show enlarged image in
var dest=linkobj.getAttribute("rev").split("::")[1] //Get URL enlarged image should be linked to, if any
var description=(thumbnailviewer2.enableTitle && linkobj.getAttribute("title"))? linkobj.getAttribute("title") : "" //Get title attr
var imageHTML='<img src="'+imagepath+'" style="border-width: 0" />' //Construct HTML for enlarged image
if (typeof dest!="undefined") //Hyperlink the enlarged image?
imageHTML='<a href="'+dest+'">'+imageHTML+'</a>'
if (description!="") //Use title attr of the link as description?
imageHTML+='<br />'+description
if (this.iefiltercapable){ //Is this an IE browser that supports filters?
showcontainer.style.filter=this.iefilterstring
showcontainer.filters[0].Apply()
}
showcontainer.innerHTML=imageHTML
this.featureImage=showcontainer.getElementsByTagName("img")[0] //Reference enlarged image itself
this.featureImage.onload=function(){ //When enlarged image has completely loaded
if (thumbnailviewer2.iefiltercapable) //Is this an IE browser that supports filters?
showcontainer.filters[0].Play()
}
this.featureImage.onerror=function(){ //If an error has occurred while loading the image to show
if (thumbnailviewer2.iefiltercapable) //Is this an IE browser that supports filters?
showcontainer.filters[0].Stop()
}
},

hideimage:function(linkobj){
var showcontainer=document.getElementById(linkobj.getAttribute("rev").split("::")[0]) //Reference container on page to show enlarged image in
showcontainer.innerHTML=""
},


cleanup:function(){ //Clean up routine on page unload
if (this.featureImage){this.featureImage.onload=null; this.featureImage.onerror=null; this.featureImage=null}
this.showcontainer=null
for (var i=0; i<this.targetlinks.length; i++){
this.targetlinks[i].onclick=null
this.targetlinks[i].onmouseover=null
this.targetlinks[i].onmouseout=null
}
},

addEvent:function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
},

init:function(){ //Initialize thumbnail viewer script
this.iefiltercapable=(this.iefiltercapable && this.enableTransition) //True or false: IE filters supported and is enabled by user
var pagelinks=document.getElementsByTagName("a")
for (var i=0; i<pagelinks.length; i++){ //BEGIN FOR LOOP
if (pagelinks[i].getAttribute("rel") && /enlargeimage:/i.test(pagelinks[i].getAttribute("rel"))){ //Begin if statement: Test for rel="enlargeimage"
var initType=pagelinks[i].getAttribute("rel").split("::")[1] //Get display type of enlarged image ("click" or "mouseover")
if (initType=="mouseover"){ //If type is "mouseover", preload the enlarged image for quicker display
this.preloadedimages[this.preloadedimages.length]=new Image()
this.preloadedimages[this.preloadedimages.length-1].src=pagelinks[i].href
pagelinks[i]["onclick"]=function(){ //Cancel default click action
return false
}
}
pagelinks[i]["on"+initType]=function(){ //Load enlarged image based on the specified display type (event)
thumbnailviewer2.loadimage(this) //Load image
return false
}
if (this.hideimgmouseout)
pagelinks[i]["onmouseout"]=function(){
thumbnailviewer2.hideimage(this)
}
this.targetlinks[this.targetlinks.length]=pagelinks[i] //store reference to target link
} //end if statement
} //END FOR LOOP


} //END init() function

}


if (document.addEventListener) //Take advantage of "DOMContentLoaded" event in select Mozilla/ Opera browsers for faster init
thumbnailviewer2.addEvent(document, function(){thumbnailviewer2.alreadyrunflag=1; thumbnailviewer2.init()}, "DOMContentLoaded") //Initialize script on page load
else if (document.all && document.getElementsByTagName("a").length>0){ //Take advantage of "defer" attr inside SCRIPT tag in IE for instant init
thumbnailviewer2.alreadyrunflag=1
thumbnailviewer2.init()
}
thumbnailviewer2.addEvent(window, function(){if (!thumbnailviewer2.alreadyrunflag) thumbnailviewer2.init()}, "load") //Default init method: window.onload
thumbnailviewer2.addEvent(window, function(){thumbnailviewer2.cleanup()}, "unload")

gisjmae
09-03-2007, 12:00 PM
The Manual Scroller script (which is working):


<table width="233" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="/newsite3/images/rightbox-top.gif" alt="" width="233" height="19" /></td>
</tr>
<tr>
<td class="bgrightbox">
<p align="center" class="rightboxhead">The Latest </p>
<p class="rightboxsmall" align="center">
<strong>scroll:</strong> <a href="javascript:movedown()">down</a> | <a href="javascript:stopscroll()">stop</a> | <a href="javascript:moveup()">up</a> |
<a href="javascript:movetop()">top</a>

<br /><br />
</p>

<SCRIPT language="JavaScript1.2">

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

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

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

if (iens6){
document.write('<div id="container" style="position:relative;width:230px;height:160px;overflow:hidden;border:0px ridge white">')
document.write('<div id="content" style="position:absolute;width:230px;left:0px;top:0px">')
}
</script>

<ilayer name="nscontainer" width=230 height=160 clip="0,0,230,160">
<layer name="nscontent" width=230 height=160 visibility=hidden>

<!--INSERT CONTENT HERE-->
<ul>
<li class="rightboxlist">
<p>laundrette</p>
</li>
<li class="rightboxlist">
<p>two children's play areas<br />
</p>
</li>
<li class="rightboxlist">
<p>public telephone <br />
</p>
</li>
<li class="rightboxlist">
<p>information and internet services <br />
</p>
</li>
<li class="rightboxlist">
<p>Nearby is an 18-hole golf course<br />
</p>
</li>
<li class="rightboxlist">
<p>riding stables<br />
</p>
</li>
<li class="rightboxlist">
<p>an indoor heated swimming pool<br />
</p>
</li>
<li class="rightboxlist">
<p>two public houses in Hele Bay itself...</p>
</li>
</ul>
<!--END CONTENT-->

</layer>
</ilayer>

<script language="JavaScript1.2">
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 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>
<br />
<p align="center" class="rightboxheadsub">CALL US NOW ON</p>
<p align="center" class="rightboxhead">01271 862460</p>
<p align="center" class="rightboxnormal"><img src="/newsite3/images/homepage-logos.gif" alt="Icons" width="163" height="239" /></p>

</td>
</tr>
<tr>
<td><img src="/newsite3/images/rightbox-bottom.gif" alt="" width="233" height="19" /></td>
</tr>
</table>

gisjmae
09-03-2007, 12:17 PM
I just tried to follow an earlier posts fix, but not for the same scripts, but for onload conflicts, but didn't work.

I deleted window.onload=getcontent_height on Manual Scroller and put onload into body tag on index2.aspx <body onload="getcontent_height();">

uploaded files, no luck...

gisjmae
09-03-2007, 01:29 PM
Further to above

when i take out the below bit of code for Manual Scroller, the Thumbnail Viewer does start working then, so this is the conflict.


window.onload=getcontent_height

gisjmae
09-04-2007, 04:09 PM
UPDATE!

i would like to put onload for both scripts in the body of index2.aspx

The manual scroller would be 'getcontent_height' - however, it is not as clear to see what the onload would be for the Thumbnail Viewer script

can anyone advise?