Results 1 to 6 of 6

Thread: Problem combining Accordion Content script v1.9 with Scrollable Content II

  1. #1
    Join Date
    Oct 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Problem combining Accordion Content script v1.9 with Scrollable Content II

    I just noticed the sticky that discouraged asking about multiple scripts. Apologies if my request ruffled any feathers.

    1) Script Title:
    Accordion Content script v1.9
    Scrollable content II

    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...daccordion.htm
    http://www.dynamicdrive.com/dynamicindex11/scrollc2.htm

    3) Describe problem:

    I have been using the Scrollable Content II script with great success in many of my pages, but there are some cases where I have an exorbitant amount of text to scroll through.

    My idea was to combine that scrollable functionality with a script that would collapse portions of the text, as desired/needed.

    I chose the Accordion Content script v1.9, and for the most part, I got the functionality I was looking for except for one problem.

    For some inexplicable reason, when I expand a long portion of text, I am not able to scroll through it all.

    Moreover, the further down the list of headers I go, the less text I am able to see.

    I have set up a mockup at the following url:

    www.emeraldsentinel.com/test/index.html

    (For the sake of reference this page is designed to fit in an IFRAME the size of one of the squares in the background. Everything about the layout is the way I want it except for the aforementioned problem.)

    Any help that you could provide would be very much appreciated.

    Thank you

    peter
    Last edited by emeraldsentinel; 10-29-2010 at 09:47 PM. Reason: apology

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,794
    Thanks
    2
    Thanked 419 Times in 413 Posts

    Default

    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[*/
    .mypets{ /*header of 1st demo*/
    cursor: hand;
    cursor: pointer;
    padding: 2px 5px;
    border: 1px solid gray;
    background: #E1E1E1;
    }
    
    .openpet{ /*class added to contents of 1st demo when they are open*/
    background: yellow;
    }
    
    #outer {
      position:relative;width:300px;height:200px;border:solid black 1px;
    }
    
    .inner {
      position:absolute;left:0px;top:0px;width:300px;
    }
    /*]]>*/
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
    <script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex17/ddaccordion.js">
    
    /***********************************************
    * Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
    * This notice must stay intact for legal use
    ***********************************************/
    
    </script>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    ddaccordion.init({
    	headerclass: "mypets", //Shared CSS class name of headers group
    	contentclass: "thepet", //Shared CSS class name of contents group
    	revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover"
    	mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
    	collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
    	defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
    	onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
    	animatedefault: false, //Should contents open by default be animated into view?
    	persiststate: false, //persist state of opened contents within browser session?
    	toggleclass: ["", "openpet"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    	togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
    	animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
    	oninit:function(expandedindices){ //custom code to run when headers have initalized
    		//do nothing
    	},
    	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
    		//do nothing
    	}
    })
    
    /*]]>*/
    </script>
    
    </head>
    
    <body>
    
    <div id="outer" >
    <div class="inner" >
    <h3 class="mypets">Dogs</h3>
    <div class="thepet">
    <img src="http://www.dynamicdrive.com/dynamicindex17/dog.jpg" style="float:right; margin: 5px" />
    The dog is a domestic subspecies of the wolf, a mammal of the Canidae family of the order Carnivora. The term encompasses both feral and pet varieties and is also sometimes used to describe wild canids of other subspecies or species. The domestic dog has been (and continues to be) one of the most widely-kept working and companion animals in human history, as well as being a food source in some cultures.<br style="clear:right" />
    </div>
    
    <h3 class="mypets">Cats</h3>
    <div class="thepet">
    The Cat, also known as the Domestic Cat or House Cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years.
    </div>
    
    <h3 class="mypets">Rabbits</h3>
    <div class="thepet">
    Rabbits are small mammals in the family Leporidae of the order Lagomorpha, found in several parts of the world. There are seven different genera in the family classified as rabbits, including the European rabbit (Oryctolagus cuniculus), cottontail rabbit (genus Sylvilagus; 13 species), and the Amami rabbit (Pentalagus furnessi, endangered species on Amami O-shima, Japan). There are many other species of rabbit, and these, along with cottontails, pikas, and hares, make up the order Lagomorpha. Rabbits generally live between four and twenty years.
    </div>
    </div>
    </div>
    <img id="down" src="http://www.dynamicdrive.com/dynamicindex11/down.gif" />
    <img id="up" src="http://www.dynamicdrive.com/dynamicindex11/up.gif" />
    <script> vic=0; </script>
    <form name=Show id=Show style="position:absolute;visibility:visible;top:420px;left:0px;" >
    <input size=100 name=Show0 >
    <input size=10 name=Show1 >
    <input size=10 name=Show2 >
    <input size=10 name=Show3 >
    <input size=10 name=Show4 >
    <input size=10 name=Show5 >
    <input size=10 name=Show6 >
    <input size=10 name=Show7 >
    <input size=10 name=Show8 >
    <input size=10 name=Show9 ><br>
    <textarea name=TA rows=1 cols=100 ></textarea>
    </form>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Scroller(o){
     var obj=document.getElementById(o.ID);
     obj.style.overflow='hidden';
     this.height=obj.offsetHeight;
     this.scrollobj=obj.getElementsByTagName('DIV')[0];
     var ud=o.Speed||1;
     this.to=null;
     var oop=this;
     var up=document.getElementById(o.UpID);
     if (up){
      this.addevt(up,'mousedown','scroll',-ud);
      this.addevt(up,'mouseup','reset');
      this.addevt(up,'mouseout','reset');
     }
     var down=document.getElementById(o.DownID);
     if (up){
      this.addevt(down,'mousedown','scroll',ud);
      this.addevt(down,'mouseup','reset');
      this.addevt(down,'mouseout','reset');
     }
     this.ms=o.ddaccordionSpeed||500;
     this.to2=null;
     var headers=this.bycls(o.HeaderClassName,this.scrollobj);
     for (var z0=0;z0<headers.length;z0++){
      this.addevt(headers[z0],'mouseup','cktop',headers[z0]);
     }
    }
    
    Scroller.prototype={
    
     scroll:function(ud){
      this.reset();
      var oop=this,sheight=this.scrollobj.offsetHeight,min=-sheight+this.height,top=this.scrollobj.offsetTop;
      this.scrollobj.style.top=Math.min(Math.max(top+ud,min),0)+'px';
      this.to=setTimeout(function(){ oop.scroll(ud); },50);
     },
    
     reset:function(obj){
      clearTimeout(this.to);
      clearTimeout(this.to2);
     },
    
     cktop:function(obj){
      var oop=this;
      this.to2=setTimeout(function(){
       var objtop=obj.offsetTop,scroll=oop.scrollobj.offsetTop
       if (scroll+objtop<0){
        oop.scrollobj.style.top=-objtop+'px';
       }
       },this.ms);
     },
    
     bycls:function(nme,el,tag){
      for (var reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
       if(reg.test(els[z0].className)) ary.push(els[z0]);
      }
      return ary;
     },
    
     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); });
     }
    
    
    
    
    }
    
    
    S1=new Scroller({
    ID:'outer',
    UpID:'up',
    DownID:'down',
    Speed:2,
    HeaderClassName:'mypets',
    ddaccordionSpeed:500
    });
    /*]]>*/
    </script>
    
    </body>
    
    </html>
    Last edited by vwphillips; 10-30-2010 at 10:43 AM. Reason: to account for accordian scroll top and speed
    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. The Following User Says Thank You to vwphillips For This Useful Post:

    emeraldsentinel (10-31-2010)

  4. #3
    Join Date
    Oct 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Vic,

    Thank you for your assistance.

    Please forgive my limited Javascript knowledge, but was that code intended to be a fully functional page?

    If so, the accordion part works, but the scroll part is not functional.

    I tried it in Firefox and Safari to no avail.

    Am I missing something obvious?

    peter

  5. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,794
    Thanks
    2
    Thanked 419 Times in 413 Posts

    Default

    I have retested with IE and FF and it works for me
    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/

  6. #5
    Join Date
    Oct 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    hmmm.

    i wonder if it's a mac versus pc thing or if it is something simple that i am missing.

    i tried it again on my mac in firefox, safari and opera, and still no scrolling.

    in any case, i appreciate your assistance. in the short term, i figured out an alternate solution.

    i will keep trying and report back any progress if things change.

    thanks again though.

    peter

  7. #6
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,794
    Thanks
    2
    Thanked 419 Times in 413 Posts

    Default

    I tried it with safari on my PC and it works, I do not have a mac

    if you have made any modifications post a link to your page, I could look at that
    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/

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
  •