PDA

View Full Version : Resolved newbie, height of scroll doesn't extend with extend/collapse div



hiro
04-11-2012, 02:40 PM
Hi guys,

I'm actually a newbie about js and the best I can do is making a collage of codes to reach my final goal.
So, here I am asking for your help. I used the javascript code (thanks a lot for your job!!) I fount on this site to scroll vertically my div. It worked perfectly.
Then I placed inside the scroller some other div with the expand/collapse property (with overflowing property: hidden). It seemed be working when I realized that the total scroll height does not stretch when I extend a div. The height is always the same to it "cover" some of the latest div when others are "open". How can I solve this problem? Is it related to overflowing property?
the javascript code for the scroller is the same I downloaded (i didn't touch it at all) here (http://www.dynamicdrive.com/dynamicindex4/cmotiongallery2.htm).

Please, if I was not clear tell me! I will try to explain my problem better! :)

thanks a lot for your help!

vwphillips
04-11-2012, 05:04 PM
try


<!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[*/

#tst {
position:absolute;left:100px;top:300px;width:200px;height:400px;border:solid red 1px;
}

#tstH {
position:absolute;left:100px;top:100px;width:400px;height:150px;border:solid red 1px;
}

.slide IMG {
float:left;
}
/*]]>*/
</style></head>

<body>

</body>
<div id="tst" >
<div class="slide" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="img" />
</div>
</div>
<div id="tstH" >
<div class="slide" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="img" />
</div>
</div>

<script type="text/javascript">
/*<![CDATA[*/
// by Vic Phillips(11-April-2012) - http://www.vicsjavascripts.org.uk/

zxcCrawler={

init:function(o){
var op=this,mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='H'?['left','offsetWidth','offsetLeft',0,'width']:['top','offsetHeight','offsetTop',1,'height'],obj=document.getElementById(o.ID),slide=obj.getElementsByTagName('DIV')[0],lst=slide.lastChild;lst=lst.nodeType==1?lst:lst.previousSibling,end=o.EndSize,mspd=o.MaxSpeed;
obj.style.overflow='hidden';
slide.style.position='absolute';
slide.style[mde[4]]='30000px';
slide.style[mde[0]]='0px';
var oop={
mde:mde,
obj:obj,
slide:slide,
lst:lst,
end:typeof(end)=='number'?end:obj[mde[1]]/3,
mspd:typeof(mspd)=='number'?mspd:5,
spd:0
}
setInterval(function(){ op.scroll(oop); },20);
this.addevt(obj,'mousemove','end',oop);
this.addevt(obj,'mouseover','end',oop);
this.addevt(obj,'mouseout','stop',oop);
},

stop:function(e,oop){
oop.spd=0;
},

end:function(e,oop){
var obj=oop.obj,end=oop.end,mde=oop.mde,sz=obj[mde[1]]-end,mse=this.mse(e)[mde[3]]-this.pos(obj)[mde[3]];
oop.spd=(mse<end?1-mse/end:mse>sz?-(mse-sz)/end:0)*oop.mspd;
},

scroll:function(oop){
oop.slide.style[oop.mde[0]]=Math.max(Math.min(parseInt(oop.slide.style[oop.mde[0]])+oop.spd,0),oop.obj[oop.mde[1]]-(oop.lst[oop.mde[1]]+oop.lst[oop.mde[2]]))+'px';
},

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;
},

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

}

zxcCrawler.init({
ID:'tst', // the unique ID name of the parent DIV. (string)
Mode:'Vertical', //(optional) the mode of execution, 'Vertical' or 'Horizontal'. (string, default = 'Vertical')
EndSize:50, //(optional) the distance from the ends to activate scroll. (number, default = parent size/3)
MaxSpeed:5 //(optional) the maximum scroll speed. (number, default = 5)
});

zxcCrawler.init({ID:'tstH',Mode:'Horizontal'});
/*]]>*/
</script>

</html>

hiro
04-12-2012, 08:52 AM
thank you so much!!! it works perfectly!

BryantS87
04-16-2012, 03:53 PM
vwphillips, you are genius bro..
Very quickly and professional! I really hope to become someone like you..


Cialis (http://www.rxonepharmacy.com)