I'm looking for a short jQuery snippet to count how many divs I can have horizontally in my browser window. Basically, I'm using a fluid layout, like this:

<div id="wrapper">
    <div id="content">
        <div class="foo" />
        <div class="foo" />

Wrapper is 100% width, and foo about 250px wide. What's the simplest way to determine how many there can be in a single row? I prefer flexibility. If wrapper is changed to some fixed width in CSS, it should still work.

Recommended Answers

Not sure maybe this could work

$(document).ready(function(){
  var $target = $(event.target);
  if ( $target.is("div").css('display','inline') ) {
    $(this).length
  }
});
Jump to Post

All 2 Replies

Not sure maybe this could work

$(document).ready(function(){
  var $target = $(event.target);
  if ( $target.is("div").css('display','inline') ) {
    $(this).length
  }
});

Found what I was looking for:

var count = Math.floor($('#wrapper').innerWidth() / $('.foo').outerWidth(true));

The true parameter for outerWidth takes the margin into consideration.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.21 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.