Getting width of div's children to create horizontal slider

Question

I've been trying to get this working for the past hour and I'm completely stuck; the below only returns the width of the first child, the rest of the children return a width of "0" when logged.

JS

function getWidth() {
    var $item = $('#image-inner-wrap .project-item'),
        width = 0;

    $item.each(function() {
        width += $(this).width();
    });

    return width;
}

HTML The last three elements are imgs:

<section id="image-wrap">
    <div id="image-inner-wrap">
        <div id="client-title" class="project-item">
            <h1>Ink</h1>
        </div>
        <img class="project-item" src="https://m1.behance.net/rendition/modules/159185859/hd/e73f3ac14e59899ad4488cfad44a5af8.jpg">
        <img class="project-item" src="https://m1.behance.net/rendition/modules/159183497/hd/d93ad4f39d67c0627e33e88ac4a417c6.jpg">
        <img class="project-item" src="https://m1.behance.net/rendition/modules/159183473/hd/6397ae0edc996e6db3e85e824b21e79e.jpg">
    </div>
</section>

CSS

#image-wrap {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 90%;
    padding: 60px 60px 60px;
    box-sizing: border-box;
    z-index: 10;
}
#client-title, 
#image-wrap img {
    float: left;
    height: 100%;
    margin-right: 60px;
}
#client-title {
    display: table;
    width: 12%;
}
#client-title h1 {
    display: table-cell;
    vertical-align: middle;
    font-size: 60px;
    text-align: center;
}
#image-inner-wrap {
    height: 100%;
}

I originally thought it could be because the images aren't being loaded fast enough, but even with a setTimeout wrapping the each function it's not working. Any pointers?

All the Jquery is currently wrapped inside an `.ready()` function using the shorthand `$(function() {...})` — user3586963, Mar 27 '15 at 09:51
Please call function when document completely loads. call inside $(document).ready(function(){ // here your code }); — Sagar Devkota, Mar 27 '15 at 09:52
$(function) only guarantees that the DOM is loaded, it doesn't guarantee images are loaded. — timothyclifford, Mar 27 '15 at 10:11

timothyclifford · Accepted Answer · 2015-03-27T10:09:34.197

$(function) executes when HTML-Document is loaded and DOM is ready. Images may not necessarily be loaded at this time, particularly large images such as these you're referencing here.

$(window).load which executes when the page is fully loaded, including all frames, objects and images.

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
    <section id="image-wrap">
        <div id="image-inner-wrap">
            <div id="client-title" class="project-item">
                <h1>Ink</h1>
            </div>
            <img class="project-item" src="https://m1.behance.net/rendition/modules/159185859/hd/e73f3ac14e59899ad4488cfad44a5af8.jpg">
            <img class="project-item" src="https://m1.behance.net/rendition/modules/159183497/hd/d93ad4f39d67c0627e33e88ac4a417c6.jpg">
            <img class="project-item" src="https://m1.behance.net/rendition/modules/159183473/hd/6397ae0edc996e6db3e85e824b21e79e.jpg">
        </div>
    </section>
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script>
    function getWidth() {
        var $item = $('#image-inner-wrap .project-item'),
            width = 0;
        $item.each(function() {
            width += $(this).width();
        });
        return width;
    }
    $(window).load(function() {
        getWidth();
    });
    </script>
</body>
</html>

You could also include the width and height attributes for your images which will force the browser to render everything even before the images are loaded. The space required for each image will be reserved while the images load.

Added some extra context – timothyclifford Mar 27 '15 at 10:05 — timothyclifford, Mar 27 '15 at 10:05

score 0 · Answer 2 · answered Mar 27 '15 at 10:07

The code seems to work for me in chrome 41.

Added a button to run your code and set its text to the width.

Try it out:

function getWidth() {
  var $item = $('#image-inner-wrap .project-item'),
    width = 0;

  $item.each(function() {
    width += $(this).width();
  });

  return width;
}

$(document).ready(function() {
  $('.calcwidth').click(function() {
    $(this).html("Widht of your elements is: " + getWidth());
  });
});

#image-wrap {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90%;
  padding: 60px 60px 60px;
  box-sizing: border-box;
  z-index: 10;
}
#client-title,
#image-wrap img {
  float: left;
  height: 100%;
  margin-right: 60px;
}
#client-title {
  display: table;
  width: 12%;
}
#client-title h1 {
  display: table-cell;
  vertical-align: middle;
  font-size: 60px;
  text-align: center;
}
#image-inner-wrap {
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button class="calcwidth">TEST!</button>

<section id="image-wrap">
  <div id="image-inner-wrap">
    <div id="client-title" class="project-item">
      <h1>Ink</h1>
    </div>
    <img class="project-item" src="https://m1.behance.net/rendition/modules/159185859/hd/e73f3ac14e59899ad4488cfad44a5af8.jpg">
    <img class="project-item" src="https://m1.behance.net/rendition/modules/159183497/hd/d93ad4f39d67c0627e33e88ac4a417c6.jpg">
    <img class="project-item" src="https://m1.behance.net/rendition/modules/159183473/hd/6397ae0edc996e6db3e85e824b21e79e.jpg">
  </div>
</section>

Thanks for doing that, big help. The issue was solved by just using `$(window).load(function() {...})` to wrap all the jQuery in — user3586963, Mar 27 '15 at 10:19
Yh javascript starts when you start your page not when the rendering is done. Its better to use the load function then the document ready: http://stackoverflow.com/questions/3698200/window-onload-vs-document-ready :P My bad — Persijn, Mar 27 '15 at 10:41

Getting width of div's children to create horizontal slider

2 Answers2