$ (this) .css ("width") doesn't work on ancohor tags in Safari
I am using a CSS selector to create custom popups for web templates - basically some some vendors don't like JS and I need an easy way to set popup sizes etc. m are not very interested in the merits of this approach, but rather want to understand why jquery cannot seem to get the width and height as defined in the CSS for snapping in Safari.
See: http://f1shw1ck.com/jquery_sandbox/csspops.html
The meat of my question:
For selector a.popup {width: 800px;height: 560px;}
and binding <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)</a>
why
if ($(this).css("width")) {
windowParams.width = $(this).css("width");
}
if ($(this).css("height")) {
windowParams.height = $(this).css("height");
}
both properties returned as zero in Safari?
onclick popup warning in other browsers: toolbar = no, directories = no, location = no, resize = yes, menu - no, scrollbars = yes, status = no, width = 800px, height = 560px, top = 20, left = 240
alert in Safari: toolbar = no, directories = no, location = no, changed = yes, menubar = no, scrollbars = yes, status = no, width = 0px, height = 0px, top = 20, left = 640
Thanks for helping me understand.
source to share
Andy is right. Here's a suggested solution:
Get the real width and height of an image using JavaScript? (in Safari / Chrome)
source to share
It also doesn't work in Chrome.
From this link and this other answer , it looks like the reason is that Webkit browsers are reporting "0" or "unknown" as size before full load, which may be too late.
As Mika notes, this is due to the fact that Javascript and CSS are loaded in parallel, which means that the style cannot be fully applied by the time the scripts are run.
source to share