Home/ Questions/Q 301829
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T07:02:31+00:00

I have a piece of code which runs on window resize. I am pulling

  • 0

I have a piece of code which runs on window resize. I am pulling the width, and the outerWidth of a input text element.

This process works fine in every browser, except Webkit, which returns the proper result from outerWidth, but the result from width never changes from the on load original.

This is actual console output from my script when resizing the browser window (This is Chrome, but the same happens in Safari 4):

outerWidth: 772
width: 772
outerWidth: 773
width: 772
outerWidth: 773
width: 772
outerWidth: 794
width: 772
outerWidth: 794
width: 772
outerWidth: 815
width: 772
outerWidth: 815
width: 772
outerWidth: 820
width: 772
outerWidth: 837
width: 772

Has anyone experienced this before? Do you know why it happens? And most importantly, do you know how to work around it? 🙂

Thank you.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here is my test case. Both seem to work as expected (Safari 4).

    <html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <style type="text/css">
    input {
      width: 50%;
      height: 2em;
      font-size: 1em;
    }
  </style>
</head>
<body>
  <p>
    <input type="text" id="w" />
  </p>
  <p>
    <input type="text" id="ow" />
  </p>
  <script type="text/javascript">
    function init(){
      $('#w').val($('#w').width());
      $('#ow').val($('#ow').outerWidth());
    }
    $(function(){
      init();

      $(window).resize(function(){
        init();
      });
    });
  </script>
</body>
</html>
    • 0