I recently worked on a responsive design which required an image slider, with a toggle to “minimise” the block. Blueberry is a great responsive jQuery slider, keeping everything scaled correctly at any resolution I threw at it.

I needed to assign a slideToggle to the slider block, allowing the slider to be ‘minimised’. Unfortunately this exposes an issue where if you first minimise the slider, resize the browser window (causing ‘onresize’ to recalculate the slider dimensions), then slideToggle it back open, it will have calculated a zero height for the slider and will refuse to maximize until you resize the browser window again.

To trigger the slider’s size calculation, you need to trigger the ‘onresize’ event in the callback for slideToggle.

jQuery(button).click(function (e) {
	$this = jQuery(this);
	$this.toggleClass('slider-open');
	jQuery('.slides',$this.parent())
		.slideToggle(250,function() {
			jQuery(window).trigger('resize');
		}
	);	
});

This solution makes the transition noticeably less-smooth in the ‘opening’ toggle. It’s most likely down to the fact that the slider has zero height until after the transition, after which the resize kicks in and restores the slider to full size.

Michael is a Software Engineer working in the North West of England. Michael spends his days building hand-crafted PHP applications. Rumours of his super-hero status are currently unconfirmed. He savours his victories when solving difficult programming challenges; occasionally writing about them here, on his personal blog.