CMotion and FiF issue

**jscheuer1** · 05-01-2006, 05:04 AM

I had made this (horizontal continuous) one up a bit ago, it is probably in another thread somewhere but, I just added a few more options, so use this one:

Code:

<!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">
body {
background-color:violet;
}

#motioncontainer {
background-color:purple;
border:2px solid purple;
}

#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 looping motion by jscheuer1
* as first seen in http://www.dynamicdrive.com/forums
***********************************************/

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.
var running=0  //3) Set to 1 for default scrolling onmouseout except for when gallery is already stopped.
var defaultspeed=2 //4) if running=1 set to default speed for mouseout scrolling.

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 (running){
if (scrollspeed<2)
return;
scrollspeed=defaultspeed
return;
}
else {
if (window.lefttime) clearTimeout(lefttime)
if (window.righttime) clearTimeout(righttime)
movestate=""
}
}
}

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
if (running){
scrollspeed=defaultspeed
moveleft()
}
}
if ( typeof window.addEventListener != "undefined" )
    window.addEventListener( "load", fillup, false );
else if ( typeof window.attachEvent != "undefined" )
    window.attachEvent( "onload", fillup );
else {
    if ( window.onload != null ) {
        var oldOnload = window.onload;
        window.onload = function ( e ) {
            oldOnload( e );
            fillup();
        };
    }
    else
        window.onload = fillup;
}
</script>
</head>
<body><center>
<div id="motioncontainer" style="position:relative;width:400px;height:225px;overflow:hidden;">
<div id="motiongallery_0" style="position:absolute;left:0;top:0;white-space: nowrap;">

<nobr id="trueContainer">&nbsp;<a href="javascript:enlargeimage('../thumb2/photo1.jpg')"><img src="../thumb2/photo1.jpg" border=1></a> <a href="javascript:enlargeimage('../thumb2/photo2.jpg', 300, 300)"><img src="../thumb2/photo2.jpg" border=1></a> <a href="http://www.dynamicdrive.com"><img src="../thumb2/photo3.jpg" border=1></a> <a href="#"><img src="../thumb2/photo4.jpg" border=1></a> <a href="#"><img src="../thumb2/photo5.jpg" border=1></a> <a href="#"><img src="../thumb2/photo6.jpg" border=1></a> <a href="#"><img src="../thumb2/photo7.jpg" border=1></a> <a href="#"><img src="../thumb2/photo8.jpg" border=1></a> <a href="#"><img src="../thumb2/photo9.jpg" border=1></a></nobr>

</div>
</div></center>
</body>
</html>

**jennwee83** · 05-02-2006, 11:40 AM

Hi John,

Thanks for your code and reply...

However, when i applied it into my website...it was not workable...But i'm not sure where is wrong....
I will try to check where goes wrong...
Thanks very much!!!

**jennwee83** · 05-02-2006, 02:19 PM

Hi John,

The code u provided above doesn't automatic scrolling when we load the page.

But the code you provided before (vertical continues) is a very good example...
Thanks

Regards
Jenn Wee

**jscheuer1** · 05-02-2006, 03:47 PM

Originally Posted by jennwee83

Hi John,

The code u provided above doesn't automatic scrolling when we load the page.

But the code you provided before (vertical continues) is a very good example...
Thanks

Regards
Jenn Wee

I had no way of knowing if you wanted it to start scrolling onload or not. That, and the fact that I wanted this to be an option in general for the script, is why the configuration area of the above script has these options:

Originally Posted by myself

Code:

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.
var running=0  //3) Set to 1 for default scrolling onmouseout except for when gallery is already stopped.
var defaultspeed=2 //4) if running=1 set to default speed for mouseout scrolling.

If you set the 'running' variable to 1, it will scroll onload and onmouseout. Onmouseout scrolling will not resume if the most recent hover position of the mouse has stopped the scrolling.

**pingeyeg** · 06-23-2006, 10:35 PM

I am not sure why this is happening, but for some reason when certain people run the script the slideshow will stop and then disappear. Why would this happen. It doesn't happen to everyone only to some people. Is there a fix for this?

**Lenz** · 10-24-2007, 07:56 PM

Excuse my English, this translated to google.
I was reading the list of messages, but I failed to function "CMontion" in Firefox.
The gallery is functioning properly, but it opens the console errors by clicking on each image.

I hope I can help.

Link to site.

http://www.susanacoletti.com.ar/coleccion.htm

**jscheuer1** · 10-24-2007, 08:48 PM

Originally Posted by Lenz

Excuse my English, this translated to google.
I was reading the list of messages, but I failed to function "CMontion" in Firefox.
The gallery is functioning properly, but it opens the console errors by clicking on each image.

I hope I can help.

Link to site.

http://www.susanacoletti.com.ar/coleccion.htm

FF error console with strict reporting on:

Warning: deprecated arguments usage
Source File: http://www.susanacoletti.com.ar/layers.html
Line: 299

relevant code:

Code:

<script type="text/JavaScript">
<!--
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;
}
var ant;
ant = -1;
function MM_showHideLayers() { //v6.0

//Layer0.style.visibility =  "hide" ; 

  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
   obj.visibility=v; }
	if (ant!=-1)
	{
		ant.visibility='hidden';
	}
	ant = obj;

}

There are other errors. The entire script block is antiquated, as are others on the page. There are also repetitive functions. None of this has to do with the DD script.

If you are lucky, changing:

var i,p,v,obj,args=MM_showHideLayers.arguments;

to:

var i,p,v,obj,args=arguments;

will take care of it

**Lenz** · 10-25-2007, 12:39 PM

The code is armo another person, so that version will not be used.
Today I am going to test the changes you suggest me.

Thanks very much

**transcribe** · 07-21-2011, 10:58 AM

All the posts here a slightly old but I try:

I've used the Cmotion continuous in a page I'm building and it's cool.
My only problem (beside my non-pro coding) is that in IE the Cmotion and the Omni Slide Menu script I'm using are very saccaded and slow.

This doesn't occur in Safary of Firefox.
I'm wondering if anyone here including jscheuer1 would be able to fix this.

I've looked into getting the right Doctype, and so far the "xhtml1-transitional.dtd" seem to do it better than the "html4/loose.dtd"... but maybe there is a better one to use.

thanks in advance...