I need to get the height of a Meta Slider container once it is displayed. The slider has a width of 100% and keeps the defined aspect ratio, hence the height is dynamic. You can however assume that all individual slides will have the same height.
On jQuerys $(document).ready()
$('.slider_wrapper').height()
still returns 0
.
Attaching $('.slider_wrapper img').on('load', function() { ... })
on .ready()
is not triggering consistently for me. And even if it does, it's still just before the element updates it's height. I could simply use setTimeout
but it's never nice to rely on timing.
I'm looking for a simple clean solution that will trigger as soon as the element has it's final height.
Example markup for slider:
<div style="width: 100%;" class="metaslider metaslider-nivo metaslider-356 ml-slider">
<div id="metaslider_container_356">
<div class='slider-wrapper theme-default'>
<div class='ribbon'></div>
<div id='metaslider_356' class='nivoSlider'>
<img src="slide1-1910x560.jpg" height="560" width="1910" alt="" class="slider-356 slide-512" />
<img src="slide2-1910x560.jpg" height="560" width="1910" alt="" class="slider-356 slide-491" />
<!-- etc. -->
</div>
</div>
</div>
<script type="text/javascript">
var metaslider_356 = function($) {
$('#metaslider_356').nivoSlider({
// options...
});
};
var timer_metaslider_356 = function() {
var slider = !window.jQuery ? window.setTimeout(timer_metaslider_356, 100) : !jQuery.isReady ? window.setTimeout(timer_metaslider_356, 1) : metaslider_356(window.jQuery);
};
timer_metaslider_356();
</script>
</div>
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire