Ask your JavaScript questions! Pay money and get answers fast! (more info)

How does the Javascript re-style elements in Bootstrap? JavaScript

  • SOLVED

I want to imitate the fluid and responsive design on display on certain sites that use the Twitter framework [[LINK href="http://twitter.github.com/bootstrap/"]]Bootstrap[[/LINK]]. I am looking at sites like this to get some sense of how this works:

[[LINK href="http://openlastminute.it/"]]http://openlastminute.it/[[/LINK]]

When I open this page in FireFox, and examine it in FireBug, I realize that many of the elements have some inline styles that are being assigned via Javascript.

Look at the attached screenshot.

There is, for example, in FireBug there is this element:

<ul id="masonry" class="masonry" style="position: relative; height: 2405px;">

If I do view source and look at this element, all I see is:

<ul id="masonry">

But how is the Javascript triggered on this page? Where is the starting point? I tried to imitate this, but merely adding the Bootstrap CSS and Javascript to my design is not enough to get the responsiveness that this page demonstrates.

I'm curious about where the starting point for the Javascript is. Is there some event that is triggered by any resizing of the veiwport? How is this normally done with Twitter Bootstrap?

And also, they footer of the page stays down at the bottom like it should, and yet I do not see why it stays down at the bottom. The footer does not have a "clear" attached to it, and the body of the page is a bunch of LI elements set to float (and fetched via Ajax). What do they do to keep the footer at the bottom of the page?

Answers (1)

2013-01-10

Christianto answers:

Hi,

Its not a bootstrap plugin, but simple calculation of element width paired with [[LINK href="http://masonry.desandro.com/"]]jQuery masonry[[/LINK]].

Basically, the function bind on screen resize, each time its run, it will calculate screen width, define how many column on certain width (for example if the screen width < 724, only use 1 column), after that set the width of each block (class=".item") based how many column, and then the dynamic layout function run (masonry).

The masonry plugin only to fill the gap so the layout r will appear continuously.

On the site, function look like this:

<script type="text/javascript">
function onScreenResize() {
var w = jQuery("#contentbody").width(),
spacer = 17,
border = 0,
w >= 1170 ? col = 4 : w == 940 ? col = 3 : w == 724 ? col = 2 : col = 1,
glutter = col - 1,
item_width = (w - glutter * spacer) / col,
li_width = item_width - border * 2;

// set width
jQuery("#itemlist li.item").width(li_width),
jQuery("#itemlist li.item").css("margin-bottom", spacer);

var t = jQuery("#masonry");
t.masonry({
itemSelector: ".item",
columnWidth: item_width,
gutterWidth: spacer
});
}

jQuery(window).bind("resize", function () {
onScreenResize();
});
</script>


fetch via ajax function on the site is using [[LINK href="http://www.infinite-scroll.com/"]]infinite scroll[[/LINK]], to pair it with masonry we can see on [[LINK href="http://masonry.desandro.com/demos/infinite-scroll.html"]]this page[[/LINK]]

<blockquote>And also, they footer of the page stays down at the bottom like it should, and yet I do not see why it stays down at the bottom. The footer does not have a "clear" attached to it, and the body of the page is a bunch of LI elements set to float (and fetched via Ajax). What do they do to keep the footer at the bottom of the page?</blockquote>

I check the html structure, although <footer> doesn't have "clear" element, it will stay on the bottom since the <li> element/content added via ajax is inside a <div class="container myapp" /> and it doesn't float so it isn't necessary to have a clear element.