jQuery width function returning 0 on text

Question

$(window).load(function() {
  $("img").each(function() {
    $(this).after("<div id='watermark'>Hello</div>");
    var width = $('#watermark').eq(0).width();
    //This outputs 0s
    console.log(width);
    $("#watermark").css("margin-left", "-" + width.toString() + "px");
  });


  $("img").click(function() {
    setTimeout(function() {
      $("img").each(function() {
        //this outputs 37
        console.log($('#watermark').eq(0).width());
        $(this).after("<div id='watermark'>Hello</div>");
      });
    }, 500);
  });

});

I am trying to get the width of the watermark I insert over images so that I can center the watermark by subtracting half the width from the left margin. However, for some reason, I am getting 0s from the .width() function even though I know that the div exists because I had already inserted the div in the previous line. Also, in the second part of the code, you'll see that when the image is clicked, the width is returned properly. Why am I getting 0s in the first half?

Edit: Here is the CSS on Watermark:

#watermark {
  opacity: 0.5;
  z-index: 99;
  position: absolute;
  color: white;
  top: 50%;
  left: 50%;
  text-align: center;
}

Is position: absolute causing a problem?

Can't duplicate ID's in page...they are unique by definition. Need to see css used on watermark. Suspect it is position:absolute and you haven't used adequate css and the text is overflowing the element — charlietfl
– charlietfl, Commented Jun 4, 2016 at 22:12
It appears to be "working" for me - in that I can see a number greater than zero output to the console: jsbin.com/yumozojiqo Ditto what @charlietfl says about duplicate IDs. Hard to say without seeing the markup you are using. — Mike Moore
– Mike Moore, Commented Jun 4, 2016 at 22:15
@MikeMoore but watermark would usually layer over image which is why I suspect position:absolute without enough properties to give it any width — charlietfl
– charlietfl, Commented Jun 4, 2016 at 22:17

charlietfl · Accepted Answer · 2016-06-04 22:28:19Z

2

Based on css update an absolute position element has no width unless you either declare width or set both left and right.

In your css rule try including either width:100% or right:0 and then run your code and you will have some width value

answered Jun 4, 2016 at 22:28

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

1 Comment

charlietfl Over a year ago

Important to understand that what you visibly see is a zero width container with it's content overflowing it

Michael Gaskill · Accepted Answer · 2016-06-04 22:31:13Z

1

I have added the code here in a snippet, and it seems to work, both initially and in the img click handler. Here is the snippet:

$(window).load(function() {
  $("img").each(function() {
    $(this).after("<div id='watermark'>Hello</div>");
    var width = $('#watermark').eq(0).width();
    console.log("Initial width: ", width);
//        $("#watermark").css("margin-left", "-" + width + "px");
  });

  $("img").click(function() {
    setTimeout(function() {
      $("img").each(function() {
        console.log("Handler width: ", $('#watermark').eq(0).width());
        $(this).after("<div id='watermark'>Hello</div>");
      });
    }, 500);
  });
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
#watermark {
  opacity: 0.5;
  z-index: 99;
  position: absolute;
  color: white;
  width: 100%;
  top: 50%;
  left: 50%;
  text-align: center;
}
</style>
<img src="http://www.va.gov/OSDBU/images/business.png">

Now, I had to add some HTML to work with, since none was provided. From what I could discern from the Javascript code, this was all that was needed. If there's something missing, please show the details (e.g. the actual code).

edited Jun 4, 2016 at 22:31

answered Jun 4, 2016 at 22:14

Michael Gaskill

8,06210 gold badges40 silver badges46 bronze badges

1 Comment

Mike Moore Over a year ago

This is pretty much what I was going to say

Collectives™ on Stack Overflow

jQuery width function returning 0 on text

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related