Technically Feasible

Blueberry Slider with slideToggle workaround

Likeness of Michael Oldroyd
Michael Oldroyd
⚠️ This content was imported from a previous incarnation of this blog, and may contain formatting errors

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.

Image of me

Michael Oldroyd

Michael is a Software Engineer working in the North West of England.