Calculating $ (this) .css ("width") _correctly_ in Safari
Asked this question earlier today, but I think I got the correct answer too early. I am trying to figure out how to grab css the length and width of an anchor element from jquery in Safari. But I keep getting "0" and I was told that this is because the javascript runs 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 fully 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 for the page to be full, then get these 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 for "0" it still comes back to Safari. Am I going about this wrong, or is there some other reason in the game?
Thank!
source to share
Colin is right. The reason it returns 0 is because anchors don't 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 the anchor to determine the width of the popup it invokes doesn't seem like good practice to me. why do you want to do this? Setting the CSS anchor that has nothing to do with the anchor presentation seems to be kind of the opposite, just set it in javascript to search for a.popup.large and set a specific width / height for the popup. Otherwise find a.popup and set different height and width.
source to share