PDA

View Full Version : Is there "cookies" version of the vertical CMotion Gallery 2 script?



BeachPack
08-03-2011, 07:11 PM
1) Script Title: CMotion Gallery 2

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

3) Describe problem: John posted a cookies-based version of his horizontal CMotion Gallery which enabled us remove our website from frames, and to switch from page to page without the gallery menu resetting back to it's default position each time.

We have another website, also in frames, which uses the vertical version of the CMotion gallery.

http://www.hometextilepackagedesign.com/TextileFrameSet.html

We'd like to also de-frame this site and was wondering if there was a similar cookies-based version of his vertically scrolling CMotion Gallery 2.

Thanks.

-Randy

vwphillips
08-04-2011, 11:36 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/

.examples {
position:relative;left:20px;top:0px;width:850px;height:380px;margin-Top:20px;border:solid red 1px;
}

.text {
position:absolute;left:20px;top:10px;width:820px;text-Align:center;
}

.horizontal {
position:absolute;left:20px;top:30px;width:400px;height:150px;background-Color:#FFCC66;border:solid red 1px;
}

.innerH {
position:absolute;left:0px;top:0px;background-Color:#FFCC66;
}

.innerH IMG{
width:200px;height:150px;float:left;margin-Left:5px; /* do not use margin-Right */
}

.step {
position:absolute;left:20px;top:80px;width:400px;height:130px;background-Color:#FFCC66;border:solid red 1px;
}

.stepinner {
position:absolute;left:0px;top:0px;background-Color:#FFCC66;
}

.stepinner IMG{
width:185px;height:130px;float:left;margin-Left:5px; /* do not use margin-Right */
}

.buttons {
position:absolute;left:20px;top:30px;width:400px;height:130px;text-Align:center;
}

.buttons INPUT{
width:70px;background-Color:#FFCC66;font-Size:12px;
}

.vertical {
position:absolute;left:440px;top:30px;width:185px;height:320px;background-Color:#FFCC66;border:solid red 1px;
}

.innerV {
position:absolute;left:0px;top:0px;
}

.innerV IMG {
width:185px;height:130px;float:left;margin-Top:5px; /* do not use margin-Bottom */
}

/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Multi Mode Scroller (17-July-2011)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/

/*
A scroller with options for 'Continuous', 'End Control' and 'Step' scroll applications
and with both 'Horizontal' and 'Vertical' modes of execution.
The scroll may be controlled by inline event calls.

Removed to allow posting
*/


// ****** Functional Code - NO NEED to Change.


function zxcMMScroller(o){
var oop=this,mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?['top','offsetTop','offsetHeight','height',1]:['left','offsetLeft','offsetWidth','width',0],obj=document.getElementById(o.ID),slide=obj.getElementsByTagName('*')[0],fst=slide.getElementsByTagName('*')[0],psz=obj[mde[2]],esz=o.EndSize,esz=typeof(esz)=='number'&&esz>0?esz:false,clds=slide.childNodes,lst=clds[clds.length-1],lst=lst.nodeType==1?lst:lst.previousSibling,ms=o.StepDuration,ctr=o.StepCenter,slider=document.createElement('DIV'),z0=0,spd=o.Direction,ssz=o.ParentSize,ss=o. StartScroll,nme=o.ID+'=',days=o.DaysPersistence,days=typeof(days)=='number'&&this.cookie?days:false;
obj.style.overflow='hidden';
slide.style.position='absolute';
slide.style[mde[3]]='10000px';
var sz=lst[mde[1]]+lst[mde[2]],nu=Math.ceil(psz/sz)+(ctr!=true?1:2);
slider.style.position='absolute';
slider.style[mde[0]]=-sz+'px';
obj.appendChild(slider);
for (;z0<nu;z0++){
slide=z0>0?slide.cloneNode(true):slide;
slide.style[mde[0]]=sz*z0-(ctr!=true?0:sz)+'px';
slider.appendChild(slide);
}
this.obj=obj;
this.mde=mde;
this.sz=sz;
this.slider=slider;
this.dly=null;
this.ary=false;
this.nowrap=typeof(o.Wrap)!='boolean'||o.Wrap?false:[-sz,-fst[mde[1]]-fst[mde[2]]];
this.mm=false;
this.end=false;
this.ms=this.ud=typeof(spd)=='number'?Math.abs(spd)*1000:10000;
this.ud=typeof(spd)=='number'&&spd<0?true:false;
this.days=days;
this.nme=nme;
this.now=this.ud?0:-sz;
if (typeof(ms)!='number'||!this.stepinit||esz){
if (esz&&this.endinit){
this.endinit(o,mde,obj,esz,spd,fst,lst,ss);
}
else if (typeof(ss)!='boolean'||ss==true){
this.Scroll();
}
}
else {
this.stepinit(o,mde,clds,sz,ctr,ms,ss);
}
}

zxcMMScroller.prototype={

Pause:function(){
clearTimeout(this.dly);
},


// Optional 'End Control' Code
endinit:function(o,mde,obj,esz,spd,fst,lst,ss){
var max=o.MaxEndSpeed,min=o.MinEndSpeed,now=this.days&&this.cookie()?this.cookie()*1:0;
this.nowrap=typeof(o.Wrap)!='boolean'||o.Wrap?false:[-lst[mde[1]]-lst[mde[2]]+obj[mde[2]],-fst[mde[1]]];
this.slider.style[mde[0]]=(this.nowrap?-fst[mde[1]]:0)+'px';
this.slider.style[this.mde[0]]=now+'px';
this.slider=[this.slider,now];
this.panends=[esz,obj[this.mde[2]]-esz];
this.ends=[-1,1];
this.min=typeof(min)=='number'?min:0;
this.maxspd=typeof(max)=='number'?max:spd;
this.inc=this.min;
this.addevt(obj,'mousemove','move');
this.addevt(obj,'mouseout','epause',obj);
if (ss){
this.escroll();
}
},

epause:function(obj){
var oop=this,e=window.event||arguments.callee.caller.arguments[0];
if (e.type=='mouseout'){
var eo=e.relatedTarget?e.relatedTarget:e.toElement;
if (eo){
while (eo.parentNode){
if (eo==obj){
return false;
}
eo=eo.parentNode;
}
}
}
this.inc=this.min;
this.Pause();
if (this.days){
this.cookieset(this.slider[1]);
}
this.dly=setTimeout(function(){ oop.escroll(); },25);
},

escroll:function(){
clearTimeout(this.dly);
var oop=this,slider=this.slider,ud=this.inc,sz=this.sz,min=this.min,min=ud!=0?Math.abs(min)*(ud>0?1:-1):min,nw=this.nowrap,now=slider[1]+ud;
slider[1]=!nw?((ud<0&&now<-sz)||(ud>0&&now>0)?ud<0?0:-sz:slider[1])+ud:(ud<0&&now<nw[0])||(ud>0&&now>nw[1])?nw[ud<0?0:1]:now;
slider[0].style[this.mde[0]]=slider[1]+'px';
this.min=min;
this.dly=setTimeout(function(){ oop.escroll(); },20);
},

addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e); }, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
},

move:function(x,e){
var mde=this.mde[4],x=this.mse(e)[mde]-this.pos(this.obj)[mde],ends=this.panends;
this.inc=(x>ends[1]?this.maxspd*((x-ends[1])/ends[0]):x<ends[0]?-this.maxspd*(1-x/ends[0]):0);
if (this.dly==null){
this.escroll();
}
},

mse:function(e){
if (window.event){
var docs=[document.body.scrollLeft,document.body.scrollTop];
if (!document.body.scrollTop){
docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
}
return [e.clientX+docs[0],e.clientY+docs[1]];
}
return [e.pageX,e.pageY];
},

pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},

// Optional 'Persistance' Code
cookie:function(){
var re=new RegExp(this.nme+'[^;]+','i');
if (document.cookie.match(re)){
return document.cookie.match(re)[0].split("=")[1];
}
return null
},

cookieset:function(v){
document.cookie=this.nme+v+';expires='+(new Date(new Date().getTime()+this.days*86400000).toGMTString())+';path=/';
}

}

/*]]>*/
</script>

<script type="text/javascript">
/*<![CDATA[*/

function Init(){


E5=new zxcMMScroller({
ID:'example5',
Mode:'Vertical',
Direction:1,
Wrap:false, //(optional) false = scroll will not wrap first to last or last to first. (boolean, default = true)
DaysPersistence:1,
StartScroll:false,
// End Scroller Options
EndSize:100, // the scroll is controlled by mousemove over the ends. (number)
MinEndSpeed:0, //(optional) the minimum scroll speed on mousemove over the ends. (number, default = 0)
MaxEndSpeed:-5 //(optional) the maximum scroll speed on mousemove over the ends. (number, default = option Speed)
});




}

if (window.addEventListener){
window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
window.attachEvent('onload',Init);
}

/*]]>*/
</script>

</head>

<body>
<div id="example5" class="vertical" >
<div class="innerV" >
<img alt="Egypt" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" />
<img alt="Egypt" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" />
<img alt="Egypt" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" />
<img alt="Egypt" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" />
<img alt="Egypt" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" />
</div>
</div>

</body>

</html>

BeachPack
08-04-2011, 10:09 PM
Thanks Vic, I gave your script a try, but although I got my menu positioned as I need it, I couldn't get it to scroll.

What I was hoping for was just to find a cookies-enable version of the vertical version of the motiongallery_cookie.js file that John had sent me for our horizontally scrolling web site...

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

I figure, having gotten that script working for one website, I probably shouldn't change horses now.

Thanks.

vwphillips
08-05-2011, 08:22 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#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 */
}

#statusdiv{
position: absolute;
padding: 2px;
left: -300px;
background-color: lightyellow;
border: 1px solid gray;
visibility: hidden;
}
/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/

/***********************************************
* CMotion Image Gallery II- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for source code
* Modified by jscheuer1 for vertical orientation, at 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 endofgallerymsg="<span style='font-size: 11px'>End of Gallery</span>" //3) message to show at end of gallery. Enter "" to disable message.

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 actualheight=''
var cross_scroll
var loadedyes=0

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

function creatediv(){
statusdiv=document.createElement("div")
statusdiv.setAttribute("id","statusdiv")
document.body.appendChild(statusdiv)
statusdiv=document.getElementById("statusdiv")
statusdiv.innerHTML=endofgallerymsg
}

function positiondiv(){
menuwidth=parseInt(crossmain.offsetWidth)
mainobjoffsetW=getposOffset(crossmain, "left")
statusdiv.style.left=mainobjoffsetW+(menuwidth/2)-(statusdiv.offsetWidth/2)+"px"
statusdiv.style.top=menu_height+mainobjoffset+10+"px"
}

function showhidediv(what){
if (endofgallerymsg!="")
statusdiv.style.visibility=what
}

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 moveup(){
if (loadedyes){
movestate="up"
if (iedom&&parseInt(cross_scroll.style.top)>(menu_height-actualheight)){
cross_scroll.style.top=parseInt(cross_scroll.style.top)-scrollspeed+"px"
showhidediv("hidden")
}
else
showhidediv("visible")
}
uptime=setTimeout("moveup()",10)
}

function movedown(){
if (loadedyes){
movestate="down"
if (iedom&&parseInt(cross_scroll.style.top)<0){
cross_scroll.style.top=parseInt(cross_scroll.style.top)+scrollspeed+"px"
showhidediv("hidden")
}
else
showhidediv("visible")
}
downtime=setTimeout("movedown()",10)
}

function motionengine(e){
var dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft;
var dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop;
var curposy=window.event? event.clientY : e.clientY? e.clientY: ""
curposy-=mainobjoffset-dsocy
var leftbound=(menu_height-restarea)/2
var rightbound=(menu_height+restarea)/2
if (curposy>rightbound){
scrollspeed=(curposy-rightbound)/((menu_height-restarea)/2) * maxspeed
if (window.downtime) clearTimeout(downtime)
if (movestate!="up") moveup()
}
else if (curposy<leftbound){
scrollspeed=(leftbound-curposy)/((menu_height-restarea)/2) * maxspeed
if (window.uptime) clearTimeout(uptime)
if (movestate!="down") movedown()
}
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.downtime) clearTimeout(downtime)
if (window.uptime) clearTimeout(uptime)
movestate=""
}
}

function fillup(){
if (iedom){
crossmain=document.getElementById? document.getElementById("motioncontainer") : document.all.motioncontainer
menu_height=parseInt(crossmain.style.height)
mainobjoffset=getposOffset(crossmain, "top")
cross_scroll=document.getElementById? document.getElementById("motiongallery") : document.all.motiongallery
actualheight=cross_scroll.offsetHeight

crossmain.onmousemove=function(e){
motionengine(e)
}

crossmain.onmouseout=function(e){
stopmotion(e)
showhidediv("hidden")
document.cookie='mycookie='+parseInt(cross_scroll.style.top)+';expires='+(new Date(new Date().getTime()+1*86400000).toGMTString())+';path=/';
}
}
var top=cookie()?cookie()*1:0;
cross_scroll.style.top=top+'px';
if (window.opera){
cross_scroll.style.top=menu_height-actualheight+'px'
setTimeout(function(){ cross_scroll.style.top=top; }, 10)
}
loadedyes=1
if (endofgallerymsg!=""){
creatediv()
positiondiv()
}
}

function cookie(){
var re=new RegExp('mycookie='+'[^;]+','i');
if (document.cookie.match(re)){
return document.cookie.match(re)[0].split("=")[1];
}
return null
}

window.onload=fillup

/*]]>*/
</script></head>

<body>
<div style="overflow:hidden;">
<div id="motioncontainer" style="width:150px; height:300px; overflow:hidden; position: relative;">
<div id="motiongallery" style="position:absolute; left:0; top:0;">

<!--Gallery Contents below-->

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

<!--End Gallery Contents-->


</div>
</div>
</div>
</body>

</html>

BeachPack
08-05-2011, 07:40 PM
Vic, Thank you so much. I will give this a try tonight. -Randy

BeachPack
08-15-2011, 05:06 PM
I've been struggling with this but have not been able to solve it. Using the code above I was able to set up a vertically scrolling menu on the right of my page...
http://www.hometextilepackagedesign.com/packagedesignportfolio3.html

But the minute I add any other divs or tables to the page, I immediately break it and the scrolling no longer works...
http://www.hometextilepackagedesign.com/packagedesignportfolio4.html

Can anyone tell me what I'm doing wrong?

Thanks.

vwphillips
08-16-2011, 12:23 PM
the body onload is overriding the window onload

use




<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="MM_preloadImages('navmenu/home-down.gif','navmenu/home-over.gif','navmenu/work-up.gif','navmenu/aboutus-down.gif','navmenu/aboutus-over.gif','navmenu/contact-down.gif','navmenu/contact-over.gif','navmenu/work-over.gif');fillup();">

BeachPack
08-16-2011, 07:57 PM
Thanks Vic!

That bit of code removed a huge stumbling block and I've finally been making some progress.

Now I'm wondering if there's anything I can do to solve another problem...

Originally, the reason I request a "cookies" version of the Cmotion2 script was so that the image menu on the right would remain in position as the html pages changed...

http://www.hometextilepackagedesign.com/package-design-temp/table-cloth.html

The CMotion2 menu now scrolls and the pages change, but there's a jerky flash when the menu resets, which is a problem that (for the most part) is not occurring on a similar site with the horizontal CMotion script...

http://www.beachpackagingdesign.com/package-design/foodstar-frozen-foods.html

Is there anything I can do to make the transition from page to page smoother?

Thanks.

vwphillips
08-17-2011, 07:27 AM
the only 'jerky flash ' I can see is the first time the page loads

which is due to the main image loading.

Is this what you are refering to?

BeachPack
08-17-2011, 01:40 PM
Hi Vic,

Thanks for taking a look at this. In the earlier "horizontal" web site, I was able to switch pages and have only the main image "flash" when the page loaded. (The horizontally "scrolling menu" remained unchanged.)

http://www.beachpackagingdesign.com/

With this new "vertical" web site...

http://www.hometextilepackagedesign.com/package-design-temp/blanket.html

...what I'm seeing, in Firefox, is that, if I click on one of the pictures in the vertically scrolling menu, when the new page loads, the CMotion2 menu appears to also reload and then sort of "scramble back" into its previous position. (The horizontal scrolling menu doesn't do this.)

Something else I'm noticing today is that, in Safari and in Chrome, many (but not all) of the images in the vertical menu a very distorted and stretched out. (I guess I need to figure out what's causing that too.)

Thanks for you help.