I’m building a site which features sidebars next to each post/article displaying random thumbnails linking to other posts.
Each sidebar should never be longer/bigger than the post it’s sitting next to.
Now of course the height of the posts vary and I want to find out/calculate the height of each post and then generate a sidebar with more or less thumbnails.
What would be the best way to make this happen?
Javascript?
Here’s a screenshot of the design/sketch (click to enlarge):
Here is a current live version, but a lot is still to be done, work in progress!
JavaScript is definitely the way to go. Have a look at jQuery’s height() and outerHeight() functions. outerHeight() includes margins and padding, height() doesn’t.
To keep this as simple as possible I would render a fixed-height sidebar initially (from WP/PHP) where the height is a sensible estimate of your longest post and then use JavaScript to reduce it in height to suit. If you don’t render the longest-possible sidebar first and then cut it to size you are going to have to use Ajax to go back to the server and fetch more sidebar content and that will be slower and result in more visual “pop-up” on the sidebar.
Make sure the sidebar is made up of elements (DIVs or LIs) that can be easily removed with a $().hide();
If you find that cutting the height of the sidebar gives a noticeable/annoying screen update then you could hide the entire scrollbar initially and only show the newly trimmed version – you’d still get a pop-up of sidebar but it would probably look a bit smoother to have nothing pop to a correct size scrollbar than to have a too-long scrollbar pop to a shorter one.
Nice typography on the site by the way. 🙂