Forums

TheGaber

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

Mottie

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:

<style>
/* prevent FOUC - https://github.com/ProLoser/AnythingSlider/wiki/FAQ */
#slider1 {
  height: 240px;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>
<script type="text/javascript">
$(function(){

  var baseHeight = 240; // height of two closed accordion buttons (approx)

  $('#slider1').anythingSlider({
    easing: "easeInOutExpo",
    height: baseHeight,
    autoPlay: false,
    animationTime: 1000,
    hashTags: true,
    buildNavigation: false,
    infiniteSlides: false,
    onInitialized: function(e, slider){
      slider.$el.css('height','auto'); // allow height to change
    },
    onSlideInit: function(e, slider){
      // animate the slider height to match the active accordion height
      var ht, newHt = 0,
      tar = slider.$targetPage, // target page
      num = tar.index(), // target page index
      opened = tar.find('.boot-container .on'); // opened accordion?
      if (opened.length) {
        hts = opened.next().children().map(function(i,e){
          return parseInt($(e).css('height'),10);
        }).get();
        newHt = Math.max.apply(this, hts);
      }
      slider.panelSize[num][1] = baseHeight + newHt;
      $('.anythingSlider, .anythingWindow, .panel').animate({ height: baseHeight + newHt }, 1000);
    },
    onSlideComplete: function(slider){
      // update nav buttons when changing the slider using the keyboard
      var slide = slider.currentPage - 1,
      newclass = ['trail-active', 'end-active', 'ther-active'][slide];
      $('#cats-nav li').removeClass()
      .eq(slide).addClass(newclass);
    }
  });

  $('#trail-riding, #endurance, #therapy').click(function(){
    var indx = $(this).index();
    $('#slider1').anythingSlider(indx + 1);
    $('#cats-nav li').removeClass();
    $(this).addClass(['trail-active', 'end-active', 'ther-active'][indx]);
  });

  // ACCORDION
  $(".accordionContent").children().each(function(){
    $(this).css("height", $(this).height());
  });
  $('.accordionContent').hide();

  $('.accordionButton').click(function(){
    $('.accordionButton').removeClass('on');
    $('.accordionContent').slideUp('normal');
    var hts, newHt;
    if($(this).next().is(':hidden')) {
      hts = $(this)
      .addClass('on')
      .next().slideDown('normal')
      // get each accordion content height
      .children().map(function(i,e){
        return parseInt($(e).css('height'),10);
      }).get();
      // find tallest accordion section
      newHt = Math.max.apply(this, hts);
    } else {
      newHt = 0;
    }
    // animate wrapper, window and panel
    $('.anythingSlider, .anythingWindow, .activePage').animate({ height: baseHeight + newHt }, 'normal');
  });

  $('.accordionButton')
    .mouseover(function() {
      $(this).addClass('over');
    })
    .mouseout(function() {
      $(this).removeClass('over');
    });
});
</script>

TheGaber

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!

Mottie

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).

TheGaber

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.

Mottie

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):

<script type="text/javascript">
$(function(){
	// adjust height of AnythingSlider to match the accordion height
	var adjustHt = function(tar) {
		// adding a little padding to make it purdy
		var newHt = 0,
		// target page index
		num = tar.index();
		// get height of each button and open content
		tar.find('.accordionButton').each(function(){
			var bt = $(this);
			// add 20 to include padding from boot-container
			newHt += 20 + parseInt( bt.attr('data-height'), 10) + ( bt.is('.on') ? parseInt( bt.next().attr('data-height')) : 0 );
		});
		// change height for plugin to prevent height jumping when changing slides
		$('#slider1').data('AnythingSlider').panelSize[num][1] = newHt;
		// animate height of slider, window and panel
		$('.anythingSlider, .anythingWindow, .panel').animate({
			height: newHt
		}, 600);
	},

	// ACCORDION
	// save button and content heights
	ht = $('.accordionButton:first').outerHeight(); // first button/default height

	$('.accordionButton, .accordionContent').each(function(){
		var h = $(this).outerHeight();
		// buttons in other panels returns height of UL (because the css makes them float left)
		if (h > 500 && $(this).is('.accordionButton')) { h = ht; }
		$(this).attr("data-height", h);
	});

	$('.accordionContent').hide();

	// open/close accordion content
	$('.accordionButton').click(function(){
		var hts, newHt, panel = $(this).closest('.panel');
		panel.find('.accordionButton').removeClass('on');
		panel.find('.accordionContent').slideUp('normal');
		if($(this).next().is(':hidden')) {
			$(this)
				.addClass('on')
				.next().slideDown('normal');
		}
		adjustHt( $(this).closest('.panel') );
	});

	$('.accordionButton')
		.mouseover(function() {
			$(this).addClass('over');
		})
		.mouseout(function() {
			$(this).removeClass('over');
		});

	$('#trail-riding, #endurance, #therapy').click(function(){
		$('#slider1').anythingSlider($(this).index() + 1);
	});

	$('#slider1').anythingSlider({
		easing: "easeInOutExpo",
		height: 250, // starting height, shouldn't need to change this
		autoPlay: false,
		animationTime: 1000,
		hashTags: true,
		buildNavigation: false,
		infiniteSlides: false,
		onInitialized: function(e, slider){
			slider.$el.css('height','auto'); // allow height to change
			adjustHt(slider.$currentPage);
			// make sure correct nav button is highlighted
			$('#cats-nav li').eq(slider.currentPage - 1).trigger('click');
		},
		onSlideInit: function(e, slider){
			adjustHt(slider.$targetPage);
		},
		onSlideComplete: function(slider){
			// update nav buttons when changing the slider using the keyboard
			var slide = slider.currentPage - 1,
				newclass = ['trail-active', 'end-active', 'ther-active'][slide];
			$('#cats-nav li').removeClass().eq(slide).addClass(newclass);
			slider.setHash(slide + 1);
		}
	});

});
</script>

Mottie

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

TheGaber

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.

TheGaber

FYI I used your new code on this page:
http://easycare2.vision7.com/our_boots/our-boots-2.aspx

TheGaber

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. :)

treehouse : what would you like to learn today?

Forums

Accordion within Anything Slider - height issues