Twitter Bootstrap is awesome. The amount of grunt work that Bootstrap makes easy is amazing. One of Bootstrap’s great features is animated carousels; they are a nice way to display a lot of information without taking up a lot of vertical height. With Bootstrap, we just wrap our content in a couple of divs, and before we know it we have a nice scolling carousel.
One thing that I don’t like about Bootstrap’s carousel implementation is that it dynamically resizes the carousel’s height based on the size of the content currently being displaying. If all your content is exactly the same height this isn’t such a big deal, but if it’s not you end up with page elements below the carousel jumping around as the carousel resizes. This seems like terrible UX to me.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
Call that in a document.ready block:
[Edit: Calling this on window.onload will wait until all the assets have been loaded so a maximum height can be calculated correctly.]
1 2 3
and your page elements will stop jumping around.