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.

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

Code:

<!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

Thread: newbie, height of scroll doesn't extend with extend/collapse div

Thread Tools

Search Thread

newbie, height of scroll doesn't extend with extend/collapse div

Bookmarks

Bookmarks

Posting Permissions