Grow your CSS skills. Land your dream job.

Accordion within Anything Slider – height issues

  • # June 23, 2011 at 5:52 pm

    I’m running up against a problem..

    I’m using the Anything Slider to display some content, and each slide is going to have items organized into a jqeury accordion system. The problem is with the height of the slider, and the fact that when the accordion items are opened, the contet below them overflows into invisibility.

    Is there a way to let the slides expand to accommodate the content?

    Example work in progress here.

    I’ve also got a FOUC problem, but I’ll try to figure that out later…

    # June 24, 2011 at 1:45 am

    Hi TheGaber!

    Wow, I never knew horse shoes have changed so much :P

    To fix the FOUC you can set a height of the slider UL and hide the overflow. I actually described two methods on the Wiki FAQ page.

    As for the resizing of the slider to match the accordion content, I had to add a few callback functions and change a bit of the code around. There is probably a more efficient way to do this, but it’s almost 1am and I just wanna go to bed LOL.

    Here is a demo (it’s just temporary) and the code I used:



    # June 24, 2011 at 1:50 am

    Dude, you rock. Thank you! It’s only 11pm here but I really wanna go to bed, too. A teething baby will do that to a fella…

    Anyway, I’ll dig into this when I’m back at the steady day job next week. Hoof boots be payin’ my bills, yo!

    # June 24, 2011 at 1:50 am

    Oh and I forgot to mention, that the styling of the cloned panels wasn’t being applied so I set AnythingSlider to not have infinite slides and I added a extra bit of code to update the three big buttons at the top when the slider changed (look in the “onSlideComplete” function).

    # June 28, 2011 at 4:59 pm

    Thanks again for your excellent help. The new code you gave me works pretty well.

    I have run into a couple of issues, though, and being the script n00b that I am, I can’t quite see how to adapt what you’ve done to fit what I need.

    Issue #1: Now that all of the regular and dummy content is in, the first slide is much taller than the others, since so many boots are in that category. Problem is, If I set the height to that slide it doesn’t shrink to the others’ heights.

    Issue #2: I’m having trouble with the bottom border getting cut off of the slides. No matter what height I set in the CSS or the script it seems to clip of the extra 2px that the border adds. I’ve tried adding padding here and there, but to no avail.

    Icing on the cake issues: it would be awesome to add hash tags to the url for each slide, so coming back to the page would show whatever one was active at the time. I set hashtags: true, in the script, but it doesn’t seem to do anything. And it would be way cool to have whichever accordion section was open still be open also, but I’m not sure if I’m asking for miracles there.

    Work in progress still here.

    Thank you thank you thank you.

    EDIT: Looks like the FOUC is back, too…weird. It was gone until I started working on this thing…I have the height and overflow settings on the UL.

    # June 30, 2011 at 12:50 pm

    Hi TheGaber!

    I fixed issue #1 & #2 and got the hash tags working, but I didn’t get a chance to get the code to save which accordions are open…. if you need it and when I get back I’ll look into adding it, but it’ll make your url end with “#&panel1-1-1-1-1″ or maybe “#&panel1-1-abc” or maybe I need to figure out how to use local storage.

    Anyway try this (demo):

    # June 30, 2011 at 12:51 pm

    Oh and the “Old Mac’s G2″ button is too tall, it’ll need some of text rearranged/removed.

    # June 30, 2011 at 1:13 pm

    Awesome! thank you so much for taking the time.

    One thing I am noticing is that some of the time when switching slides the height changes, but the slide does not…is it getting ahead of itself somehow?

    Other thing is that each of those accordionButton divs looks like it is the rendering the same height in Firebug (105px + 10px top padding +10px bottom padding + 4px bottom margin + 1px bottom border = 130px each). So I don’t see why it is overflowing on the bottom…hmm.

    I would like to repay your generosity somehow…I don’t have a lot to give monetarily, but can do that if you like. If you like art I am a photographer with some good landscape/travel stuff in my library, along with some macro plant & insect stuff. I have a few nice lightning shots as well. Unfortunately no online portfolio for that yet…but I can send some samples to you and if you want to pick something out I can have it printed out for you at mpix.com or something. Just a thought.

    Thanks again.

    # June 30, 2011 at 1:23 pm

    FYI I used your new code on this page:

    http://easycare2.vision7.com/our_boots/our-boots-2.aspx

    # June 30, 2011 at 1:52 pm

    I noticed that the height being applied to anythingWindow and the slides was 1000, and it needed to be 1040 to fir the first slide completely in. (total height of each accordionButton is 130 x 8 =1040).

    I changed the newHt += 20 to newHt += 25 (the missing 40px/8 = 5) and it seemed to fix the overflow problem. I don’t know why it works but it does…that’s usually my process when finding solutions in jQuery. Don’t know exactly why it works, but it does. :)

    # November 29, 2013 at 2:35 am

    I am using accordion inside the slide. I have set resizeContent equal to true. It is setting the height of panel to the height of all hidden divs in accordion..

    That means height of panel = height of all hidden divs of accordion…

    I don’t want like this. I want when I am expanding a div inside accordion then panel height should get set.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".