PDA

View Full Version : CMotion constant scroll left/right



simpleuser
01-03-2010, 02:01 AM
Came across the cmotion script and was wondering if it possible to modify the script so that is has a constant scroll no matter what way is scrolls onmouse over left/right or right/left I have seen the conveyerbelt script but that only goes oneway and help be great...oh and if I have posted in wrong section apoligies..

jscheuer1
01-03-2010, 03:03 AM
See:

http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm

and:

http://home.comcast.net/~jscheuer1/side/lightbox2.04a/jq_imagemotion.htm

both of which can do that and at least several other things.

Any questions, just let me know.

simpleuser
01-03-2010, 03:49 PM
Very much obliged they both look great thanks If I have any other questions I will ask...

simpleuser
01-12-2010, 04:23 PM
Hi again John I have also found this script by yourself and really like this as well planning to using this along with lightbox but I do have one other question is there anyway to add a left/right pause start buttons like what you describe in link below I have tried to add this to what I already have but the buttons dont seem to control the movement I think it has to do with the mouseover used...not the greatest myself in javascript so confused any help be greatful once again thank you providing great scripts for us "simpleusers":confused:

http://www.dynamicdrive.com/forums/showthread.php?t=8922

http://home.comcast.net/~jscheuer1/side/cmotion_continuous.htm

jscheuer1
01-12-2010, 04:41 PM
I've substituted text for the images only because I don't have any images handy for this (additions to script and markup highlighted):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- saved from url=(0014)about:internet -->
<!-- this and above comment should be removed for live, non-demo use -->
<head>
<title>Cmotion Continuous</title>
<style type="text/css">
#motioncontainer a img{ /*image border color*/
border: 1px solid #ccc;
}

#motioncontainer a:hover img{ /*image border hover color*/
border: 1px solid navy;
}

#motioncontainer a:hover{
color: red; /* Dummy definition to overcome IE bug */
}

</style>
<script type="text/javascript">
/***********************************************
* CMotion Image Gallery- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for source code
* Last updated Mar 15th, 04'. Added "End of Gallery" message.
* This copyright notice must stay intact for legal use
* Modified here for continuous motion by jscheuer1
***********************************************/

var restarea=6 //1) width of the "neutral" area in the center of the gallery in px
var maxspeed=7 //2) top scroll speed in pixels. Script auto creates a range from 0 to top speed.

function enlargeimage(path, optWidth, optHeight){ //function to enlarge image. Change as desired.
var actualWidth=typeof optWidth!="undefined" ? optWidth : "600px" //set 600px to default width
var actualHeight=typeof optHeight!="undefined" ? optHeight : "500px" //set 500px to default height
var winattributes="width="+actualWidth+",height="+actualHeight+",resizable=yes"
window.open(path,"", winattributes)
}

////NO NEED TO EDIT BELOW THIS LINE////////////

var iedom=document.all||document.getElementById
var scrollspeed=0
var movestate=""

var actualwidth=''
var cross_scroll_0, cross_scroll_1, ns_scroll
var loadedyes=0

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}


function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft: what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function moveleft(){
if (iedom&&loadedyes){
movestate="left"
if (parseInt(cross_scroll_0.style.left)<(-actualwidth))
cross_scroll_0.style.left=parseInt(cross_scroll_1.style.left)+actualwidth+"px"
if (parseInt(cross_scroll_1.style.left)<(-actualwidth))
cross_scroll_1.style.left=parseInt(cross_scroll_0.style.left)+actualwidth+"px"
cross_scroll_0.style.left=parseInt(cross_scroll_0.style.left)-scrollspeed+"px"
cross_scroll_1.style.left=parseInt(cross_scroll_1.style.left)-scrollspeed+"px"
//showhidediv("visible")
}
lefttime=setTimeout("moveleft()",10)
}

function moveright(){
if (iedom&&loadedyes){
movestate="right"
if (parseInt(cross_scroll_0.style.left)>0)
cross_scroll_1.style.left=parseInt(cross_scroll_0.style.left)-actualwidth+"px"
if (parseInt(cross_scroll_1.style.left)>0)
cross_scroll_0.style.left=parseInt(cross_scroll_1.style.left)-actualwidth+"px"
cross_scroll_0.style.left=parseInt(cross_scroll_0.style.left)+scrollspeed+"px"
cross_scroll_1.style.left=parseInt(cross_scroll_1.style.left)+scrollspeed+"px"
}
righttime=setTimeout("moveright()",10)
}

function motionengine(e){
var dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft;
var dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop;
var curposy=window.event? event.clientX : e.clientX? e.clientX: ""
curposy-=mainobjoffset-dsocx
var leftbound=(menuwidth-restarea)/2
var rightbound=(menuwidth+restarea)/2
if (curposy>rightbound){
scrollspeed=Math.floor((curposy-rightbound)/((menuwidth-restarea)/2) * maxspeed)
if (window.righttime) clearTimeout(righttime)
if (movestate!="left") moveleft()
}
else if (curposy<leftbound){
scrollspeed=(leftbound-curposy)/((menuwidth-restarea)/2) * maxspeed
if (window.lefttime) clearTimeout(lefttime)
if (movestate!="right") moveright()
}
else
scrollspeed=0
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function stopmotion(e){
if ((window.event&&!crossmain.contains(event.toElement)) || (e && e.currentTarget && e.currentTarget!= e.relatedTarget && !contains_ns6(e.currentTarget, e.relatedTarget))){
/*if (window.lefttime) clearTimeout(lefttime)
if (window.righttime) clearTimeout(righttime)
movestate=""*/
scrollspeed = 1;
}
}

function fillup(){
if (iedom){
crossmain=document.getElementById? document.getElementById("motioncontainer") : document.all.motioncontainer
menuwidth=parseInt(crossmain.style.width)
mainobjoffset=getposOffset(crossmain, "left")
cross_scroll_0=document.getElementById? document.getElementById("motiongallery_0") : document.all.motiongallery_0
cross_scroll_1=document.createElement('div')
cross_scroll_1.style.position='absolute'
cross_scroll_1.style.whiteSpace='nowrap'
extra=document.createElement('nobr')
extra.innerHTML=document.all? document.all['trueContainer'].innerHTML : document.getElementById("trueContainer").innerHTML
cross_scroll_1.appendChild(extra)
crossmain.appendChild(cross_scroll_1)
actualwidth=document.all? cross_scroll_0.offsetWidth : document.getElementById("trueContainer").offsetWidth
cross_scroll_1.style.left=actualwidth+'px'
crossmain.onmousemove=function(e){
motionengine(e)
}

crossmain.onmouseout=function(e){
stopmotion(e)
}
}
loadedyes=1
scrollspeed = 1;
moveleft();
}
window.onload=fillup

function move(dir){
if (window.lefttime)
clearTimeout(lefttime);
if (window.righttime)
clearTimeout(righttime);
scrollspeed=1
if (dir=='left')
moveleft();
if (dir=='right')
moveright();
}
</script>
</head>
<body>
<div id="motioncontainer" style="position:relative;width:400px;height:150px;overflow:hidden;">
<div id="motiongallery_0" style="position:absolute;left:0;top:0;white-space: nowrap;">

<nobr id="trueContainer"><a href="javascript:enlargeimage('dynamicbook1.gif')"><img src="dynamicbook1.gif" border=1></a> <a href="javascript:enlargeimage('dynamicbook1.gif', 300, 300)"><img src="dynamicbook1.gif" border=1></a> <a href="http://www.dynamicdrive.com"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a></nobr>

</div>
</div>
<div style="width:400px;text-align:center;">
<a onclick="return false;" href="javascript:moveleft();" onmouseover="move('left');">Left Arrow</a> |

<a onclick="return false;" href="javascript:stop();" onmouseover="move('stop');">Stop Button</a> |

<a onclick="return false;" href="javascript:moveright();" onmouseover="move('right');">Right Arrrow</a></div>
</body>
</html>