computing $(this).css(”width”) _correctly_ in Safari

Question

Asked this question earlier today, but I think I awarded a correct answer too early. I'm trying to figure out how to grab the css length and width of an anchor element with jquery in Safari. But I keep getting "0" returned, and I was told that this was because the javascript is firing before the css is rendered - a quirk of Webkit browsers.

Here is the original page: http://f1shw1ck.com/jquery_sandbox/csspops-orig.html

However, I wrote a little test, telling jquery to wait until everything is completely rendered before grabbing the css. http://f1shw1ck.com/jquery_sandbox/csspops.html

For selector

a.popup {
       width: 800px;
       height: 560px;
      }

and html

<a href="http://www.metmuseum.org/toah/hd/apol/hd_apol.htm" class="popup">African Rock Art: Apollo 11 Cave Stone (c. 25,500 - 23,500 BCE); Wonderwerk Cave Stones (c. 8000 BCE)</a>

wait until the page is completely, then get those dimensions:

$(document).ready(function () {
       if (jQuery.browser.safari && document.readyState != "complete"){
           //console.info('ready...');
           setTimeout( arguments.callee, 5000 );
           return;
         }
       alert($("a.popup").css("width"));
     });

Except "0" is still getting returned in Safari. Am I going about this the wrong way, or is there some other cause at play?

Thanks!

Answer 1

Tried adding display: block to a.popup?

That will force the link to be 800px wide, if you want to get its auto width then try

alert($("a.popup").width());

Answer 2

Colin is correct. The reason that it is returning 0 is because the anchors do not have an effective CSS width according to Safari because they are inline elements. This is probably a bug in jQuery for Safari.

Unrelated to the bug, setting the width of an anchor to define the width of the popup that it triggers does not seem like good practice to me. Why do you want to do this? Setting the CSS of an anchor that has nothing to do with the presentation of the anchor seems kind of backwards, just set it in the javascript to look for a.popup.large and set a certain width/height for the popup. Else, look for a.popup and set a different height and width.