jQuery .width() detection

Question

I'm just wondering if there is a better way to detect the width for each of these .modal elements (there could be N number of them in that markup).

With the way I've got this figured now, it seems to only be using the .width() of the first .modal in the markup.

<script type="text/javascript">
    $(document).ready(function() {
        $(".modal").hide();
        $(".modal-links a").each(function(i,o){
          $(this).click(function(popUp){
            var modalWidth = $(".modal").width();
            var modalHeight = $(".modal").height();
            $(".modal").css({
             "margin-left":-(modalWidth/2) 
            });
            $(".modal:eq("+i+")").show().siblings(".modal").hide();
          });
        });
    });</script>

Nick Craver · Accepted Answer · 2010-11-09 00:43:01Z

1

You want to get the .modal you want to deal with at the beginning of the .click(), like this:

$(document).ready(function() {
    $(".modal").hide();
    $(".modal-links a").each(function(i){
      $(this).click(function(popUp){
        var modal = $(".modal").eq(i),
            modalWidth = modal.width(),
            modalHeight = modal.height();
        modal.css({ "margin-left":-(modalWidth/2) })
             .show().siblings(".modal").hide();
      });
    });
});

Without doing this, you're correct it'll get the .height() and .width() of the first .modal element.

answered Nov 9, 2010 at 0:43

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yi Jiang Over a year ago

Awww... slow and wrong. Sometimes I just hate you @NickCraver :D But yeah, that was a pretty dumb mistake.

Fuego DeBassi Over a year ago

This works, but it seems like it might be calculating the width before the contents of the .modal div's are fully loaded (and therefore not the true width). Oh, and thanks BTW!

Collectives™ on Stack Overflow

jQuery .width() detection

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related