How can I tell when an SVG is finished rendering - svg

I have an SVG which takes a short time to load (about 2-3) seconds. During that time, it looks a little funny. Is there anyway to tell when an SVG is done rendering so I can put up a spinner or hide it or something else?

You can't tell. The restriction is to safeguard user's security. See https://bugzilla.mozilla.org/show_bug.cgi?id=608030 for a more detailed explanation of when this was considered for Firefox but other UAs will come to the same conclusion so you're unlikely to be able to do this in any UA ever.
From the referenced bug...
Doing anything conditionally on the visitedness of a link seems dangerous. I haven't tried this, but suppose the attacker wants to know if the user has been to example.com. An attacker could set the href of a hyperlink to example.com, then navigate to example.com in a hidden iframe. If a MozAfterPaint event fires on the document where the hyperlink lives, you'd know the user hasn't been to www.example.com yet. Otherwise, they have.

Related

Is there a way to not require a favicon?

Is there a way, to take out the HTML link and provide a favicon or alternatively, not let it be requested - perhaps using .htaccess?
<link rel=icon href=icon>
For instance, when a user opens a [.pdf] or otherwise, there is no icon - displaying 'nothing' or at least it is transparent. The purpose, is to minimise the number of HTTP requests. You see, I do not want to have [the HTML link] at all - so a data URI is not necessarily an option. In other words, I wish to remove this HTML tag - displaying nothing like a [.pdf] file, in the browser.
If you don't have a tag specifying the url of a favicon, most browsers will just send a blind request to www.yourdomain.com/favicon.ico and hope for the best (thanks to w3d for pointing this out). This isn't something you can prevent them from doing.
Although, from what I know, favicons are cached in the clients browser, so they won't even be sending requests for it on every page-load.

How to detect the current browser

Question: Is there a easy way to detect the browser of the user ?
Details: I would like to change for example the value of background-color of body. I've already see something like <!--[if !IE]>.
Edit:
Okay, I agree, browser detect is bad (Link taken from #TylerH), and should not be used. Thank I take note. And If someone really still want to use them, I've found a good website with a list of browser detection hack.
I think there is no way to do it with HTML or CSS (I don't like hacks).
But you could check the user agent string with JS.
See here: How to make CSS visible only for Opera

Top part of webpage stays the same

I want to create my webpage so that a part at the top that says "Welcome!" and a "main part" below that. When a user clicks on a link in the main part (say, it links to www.example.com), the main part should change to the content of www.example.com, but the top part should remain the same. How can I achieve that?
In ye olde days, this was done using frames, but for many reasons, they are going out of use. Try taking a look at iframes.
I believe you're looking for the
<frameset>
tag: http://www.w3schools.com/tags/tag_frameset.asp
The <frameset> tag is not supported in HTML5. Although <iframe> works, it will impact your page's searchability (SEO), and setting up the page to scroll properly will be a hassle because the "top" part of the page will be like a page of itself.
Instead of using (i)frames, if you have PHP enabled on the server, you should store the "top" of your webpage as a separate file like "top.php", and in every page, include that with
include_once("top.php")

Content scripts on prerendered pages?

Are Content Scripts (http://code.google.com/chrome/extensions/content_scripts.html) injected into prerendered pages (document.webkitVisibilityState== 'prerender') ?
I’ve been reading https://developers.google.com/chrome/whitepapers/prerender and https://developers.google.com/chrome/whitepapers/pagevisibility, and am trying to figure out how Content Scripts work with page prerendering/prefetching.
Thanks
TheZ, tomdemuyt: I’m afraid you guys are missing the point. ‘run_at’ specifies whether the content script is injected before or after the DOM is constructed.
However, I am talking about document.webkitVisibilityState, which can be ‘prerender’ (when the page is in a background/invisible tab), ‘hidden’, or ‘visible’. Note that webkitVisibilityState can transition from ‘prerender’ to ‘hidden’ or ‘visible’, or back and forth between ‘hidden’ and ‘visible’, without any changes being made to the DOM. (In order to better understand this, read the articles linked in my original post.)
I think I’ve been able to determine that content scripts ARE injected into prerendered pages. Here’s the problem, however: let’s say my content script does something that should not occur on a prerendered page. For instance, it does pageview count, or adds animation, neither of which should begin until the user is actually viewing the page. So it seems that my content script should do something like what’s shown in the code examples on https://developers.google.com/chrome/whitepapers/pagevisibility - check document.webkitVisibilityState, and also listen to the ‘webkitvisibilitychange’ event, and only do pageview count/start the animation when document.webkitVisibilityState is, or has transitioned to, ‘visible’.
I may have just answered my own question, but I just wanted to make sure that I was on the right track.
Thanks
As TheZ mentioned, you should ues the run_at setting.
Link to docs : http://code.google.com/chrome/extensions/content_scripts.html#registration

Disappearing form fields on IE?

I have been working on this site for some time and just launched it for a client.
People have actually had trouble beleiving I had done it on WordPress, though I don't see why...
Anyway, I suddenly see that the form fields of one of the forms on the site (Newsletter Registration) disappear while on IE, you get to see them for a second and puff, they're gone. I did check this previously on IE and it worked, I especially used CSS3 PIE to get the rounded effect for the fields on IE...
Link to website: http://www.doritsivan.com (hope this isn't considered promotion, not my intention)
site is based on WordPress and jQuery.
resolved the issue, thank you all. it was a bad case of relative vs. absolute positioning and the fields decided to go away (literaly)
A bunch of debugging with firebug-lite (btw was real to get it to work on my IE, kept on crashing or refusing to load altogether combined with IE popup and security issues) and I understoid that this was the issue, then some pixel fiddling and all was good. rechecked in Chrome, saw that result was exactly the same. job done

Resources