Results 1 to 4 of 4

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

  1. #1
    Join Date
    Apr 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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!
    Last edited by hiro; 04-12-2012 at 09:53 AM.

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,814
    Thanks
    2
    Thanked 424 Times in 418 Posts

    Default

    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>
    Last edited by vwphillips; 04-12-2012 at 09:47 AM.
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Apr 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thank you so much!!! it works perfectly!

  4. #4
    Join Date
    Apr 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    vwphillips, you are genius bro..
    Very quickly and professional! I really hope to become someone like you..


    Cialis
    Last edited by BryantS87; 04-22-2012 at 03:56 PM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •