1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

MooTools Accordion Sliding Incorrectly

Discussion in 'JavaScript' started by cesarcesar, Oct 26, 2008.

  1. #1
    My issue is that I am using nested accordions and the second accordion in my nested list will not push the outer div down. The nested accordion slides beneath the main div container.

    Another way to put it, if i load the page, then click on "Meeting 2" it accordions correctly. But when i click on "Task 2.1", that accordion for that section opens, but hides behind the containing div. Now if I then click "Meeting 1", everything opens fine, and then if i click "Meeting 2" again, the contents of "Task 2.1" show correctly in full.

    Any Ideas? Thanks for the help.

    Here is some code i think may be useful.

    Moo 1.2 used with this addEvent Javascript:
    Code (Text):
    1.  
    2. window.addEvent('domready', function() {
    3.     var meetingAccordion = new Accordion($$('.meeting_toggler'),$$('.meeting_element'),{
    4.  
    5.         opacity: false,
    6.         show : -1,
    7.  
    8.         onComplete:function(el){
    9.             if(el.getSize().y>0){
    10.                 el.setStyle('height','auto');
    11.             }
    12.         },
    13.  
    14.         onBackground:function(toggler,el){
    15.             el.setStyle('height',el.getSize().y);
    16.         }
    17.  
    18.     });
    19.     var taskAccordion = new Accordion($$('.task_toggler'),$$('.task_element'),{
    20.  
    21.         opacity: false,
    22.         show : -1,
    23.  
    24.         onComplete:function(el){
    25.             if(el.getSize().y>0){
    26.                 el.setStyle('height','auto');
    27.             }
    28.         },
    29.  
    30.         onBackground:function(toggler,el){
    31.             el.setStyle('height',el.getSize().y);
    32.         }
    33.  
    34.     });
    35.  
    36. });
    37.  
    html
    Code (Text):
    1.  
    2. <div style="border:1px solid green">
    3.  
    4.     <div class="meeting_toggler">Meeting 1</div>
    5.  
    6.     <div class="meeting_element">
    7.  
    8.         <div class="task_toggler">Task 1.1</div>
    9.  
    10.         <div class="task_element">
    11.             Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.
    12.         </div>
    13.  
    14.         <div class="task_toggler">Task 1.2</div>
    15.  
    16.         <div class="task_element">
    17.             Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.
    18.         </div>
    19.  
    20.     </div>
    21.  
    22.     <div class="meeting_toggler">Meeting 2</div>
    23.  
    24.     <div class="meeting_element">
    25.  
    26.         <div class="task_toggler">Task 2.1</div>
    27.  
    28.         <div class="task_element">
    29.             Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.
    30.         </div>
    31.  
    32.         <div class="task_toggler">Task 2.2</div>
    33.  
    34.         <div class="task_element">
    35.             Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.
    36.         </div>
    37.  
    38.     </div>
    39.  
    40. </div>
    41.  
    cesarcesar, Oct 26, 2008 IP
  2. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #2
    erm. odd. never liked accordion.js - the problem seems to be that it constantly resetting the height and overflow

    try overriding it - add some debugging on the onComplete for the tasks...
    PHP:
    1.         onComplete:function(el){
    2.             console.log(el, el.getParent());
    3.             // if(el.getSize().y>0){
    4.             el.getParent().setStyles({
    5.                 overflow: "none",
    6.                 height: "auto"
    7.             });
    8.            
    9.         },
    it's gonna be easier to code this by hand tbh. 30 min job tops...
    dimitar christoff, Oct 27, 2008 IP
  3. cesarcesar

    cesarcesar Peon

    Messages:
    188
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    thanks Dimitar but it didn't fix anything
    cesarcesar, Nov 4, 2008 IP
  4. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #4
    its not a fix, it is just a way for you to monitor how/when accordion resets the height of elements so that you can override it.

    http://groups.google.com/group/mootools-users?hl=en

    this is the official mootools support mail list. post there if you are looking for a solution. i built your accordion locally and was not able to fix it within 15 mins so i gave up, sorry - no time.
    dimitar christoff, Nov 4, 2008 IP