I often find myself showing/hiding elements with jQuery, for example a simple tabbed content area where the first tab is visible and the others are not until they are displayed with the javascript. I know it's not good practice to hide the initially hidden ones using CSS (display: none) and then showing the correct ones with JS as non-JS users will never see a thing. So by default I show all and then hide the relevant ones with JS.
In doing this though, the hidden elements will load and then only hide when document is ready. How can I stop this happening? Is there a way of doing this in a way that will degrade gracefully but also not have elements appearing whilst loading, and then promptly disappearing as this looks a bit shoddy.
Unfortunately, the way that Javascript works, this doesn't seem to be possible. There will always be a fraction of a second between the first rendered frame and by the time the JavaScript to hide the element gets executed I was wrong about that, jQuery seems to be able to do that. So, CSS is the best means for this. Luckily, you can add an alternate CSS stylesheet within an infamous <noscript> tag:
<style type="text/css">
#jquery-thing {
display: none;
}
</style>
<noscript>
<style type="text/css">
#jquery-thing {
display: block !important;
}
</style>
</noscript>
Here's the JSFiddle link:
http://jsfiddle.net/kylewlacy/dbWuc/
a few thoughts...
If you don't mind jQuery being littered all over the page as opposed to being all in a separate file, you can call $('#divToHide').hide(); immediately after the element appears. Not very good practice though. Although it depends on the use case, if you are largely a designer/themer creating a 5 page brochure site, you should choose what is right for you!
Or if you're a bit more of a techie, you might like to mess around with .live()/.livequery() and catch the element's insertion with JS and hide is straight away. See this post Is there a jquery event that fires when a new node is inserted into the dom?
Related
Normally css files are put inside <head></head>, what if I put it inside <body></body>, what difference will it make?
Just to add on to what jdelStrother has mentioned about w3 specs and ARTstudio about browser rendering.
It is recommended because when you have the CSS declared before <body> starts, your styles has actually loaded already. So very quickly users see something appear on their screen (e.g. background colors). If not, users see blank screen for some time before the CSS reaches the user.
Also, if you leave the styles somewhere in the <body>, the browser has to re-render the page (new and old when loading) when the styles declared has been parsed.
The most recent versions of the HTML spec now permits the <style> tag within body elements. https://www.w3.org/TR/html5/dom.html#flow-content
Also the scoped attribute which used to be prerequisite to have a style tag in the body is now obsolete.
This means, that you can use the style tag everywhere you want, the only implications are decreased page performance due to possible reflows/repaints once the browser hits styles further down in the page tree.
Obsolete answer:
The <style> tag isn't allowed within <body> according to the w3 specs. (You can, of course, apply inline styles via <div style="color:red"> if necessary, but it's generally considered poor separation of style & content)
Putting CSS in body means it is loaded later. It is a technique some use to let the browser start drawing the interface faster (i.e., it removes a blocking step). This is important for user experience on SmartPhones.
I do my best to keep one small css on the <head> and I move the rest at the bottom. For example, if a page uses JQuery UI CSS, I always move it at the bottom of the <body>, just before the links to JQuery javascript. At least, all the non Jquery item can already be drawn.
Head is designed for (Quoting the W3C):
"information about the current
document, such as its title, keywords
that may be useful to search engines,
and other data that is not considered
document content"
See the Global structure of an HTML document. As CSS is not document content, it should be in the head.
Also every other Web developer will expect to see it there, so don't confuse things by putting it in the body, even if it works!
The only CSS you should put in the body is inline CSS, though I usually avoid inline styles.
The standards (HTML 4.01: the style element) clearly specifies that the style tag is only allowed inside the head tag. If you put style tags in the body tag the browsers will try to make the best of it anyway, if possible.
It's possible that a browser would ignore a style tag in the body if you specify a strict document type. I don't know if any current browser does this, but I wouldn't count on all future versions to be so relaxed about where you place the style element.
Although the style tag is not allowed in the body, the link tag is, so as long as you are referencing an external stylesheet, all browsers should render and use the CSS correctly when used in the body.
Source: https://html.spec.whatwg.org/multipage/semantics.html#the-link-element
In addition to earlier answers, though putting a style code block inside the element may work in modern browsers (though that still doesn't make it right), there's always a danger, particularly with older browsers that the browser will render the code as text unless the style section's included within a CDATA section.
Of course the other thing with putting it inside the element, other than inline styles, is that as it doesn't meet with the W3C HTML/XHTML specs is that any page with it within the body will fail on the W3C validator. It's always easier to bug-hunt unexpected display problems if all your code is valid, making it easier to spot mistakes. An invalid HTML element can adversely effect the rending of any and all element beyond where it occurs in the code, so you can get unexpected effects having elements in places where they shouldn't be, because when a browser finds an invalid element, it just makes it's best guess as to how it should display it, and different browsers may make different decisions in how they render it.
Whether you use a transitional or a strict doctype, it would still be invalid according to the (X)HTML specs.
Two conflicting answers:
From MDN page on link tag:
A <link> element can occur either in the <head> or <body>
element, depending on whether it has a link type that is body-ok. For
example, the stylesheet link type is body-ok, and therefore a
<link rel="stylesheet"> is permitted in the body. This isn't however
best practice; it makes more sense to separate your <link> elements
from your body content, putting them in your head.
From CSS The Definitive Guide (4th Edition/2017) page 10
To successfully load an external stylesheet, link must be placed inside the head element but may not be placed in any other element.
You would actually defeat the purpose of using CSS by putting the styles in the body. The point would be to separate content from presentation (and function). This way, any changes to style can be done in the stylesheet, not in the content. Once you use the inline style method, every page that has inline styling needs to changed one by one. Tedious, and risky since you could miss a page or three, or ten.
Using a stylesheet, you only need to change the stylesheet; the changes propagate automagically to every HTML page that links to the stylesheet.
neonble's point is also another great reason; if you mess up the HTML by adding CSS inline, rendering becomes a problem. HTML doesn't throw exceptions to your code. Instead it goes out and renders it the best way it can, and moves on.
Adhering to web standards by using a stylesheet makes for a better website. And when you need help because things on your page aren't exactly that way you want them, placing your CSS in the head as opposed to the body makes for much better troubleshooting by yourself and for anyone you ask for help from.
The difference is.
The loading of the page is asynchronous, so if you have external stylesheet it will load the css file immediately when it reach the link tag, that is why it is good to have at the top in head.
What difference will it make?
Pros: Sometimes easier to apply certain attributes in certain places, especially if code is being generated on the fly (such as building via php and each of a dynamically sized list needs its own class... such as for item timings for transforms).
Cons: Slightly slower, may not work someday in the distant future.
My General opinion on it:
Don't do it it you don't have to, but if you do have to, don't lose any sleep over it.
Putting the <style> in the body works well with all modern browsers.
I had been using this in eBay.
If it works, don't kick it.
The essence of the problem is as follows:
There is a page, I need to modify the contents of the browser extensions, you can use jQuery.
Tried $(document).ready(), but then the contents are still displayed for a short period (FOUC). I can not make changes to the page styles on the server.
I'm using the kango framework to build the extension.
Using only ECMAscript, you can't reliably avoid it. You have like no shot if you wait for DOMContentLoaded event, because at that point the DOM is pretty much rendered and displayed (which is what you see for a short period).
Your best shot would be to modify the CSS as soon as possible. If the stylesheet definition gets loaded before the DOM gets rendered and you would have set like
body {
display: none;
}
you would not see anything. You could try like
<body>
<script>
document.body.style.display = 'none';
</script>
<!-- more html -->
</body>
if that is any viable / useable solution for you.
I suggest you to use a combination of CSS and JavaScript. I had the same issue using jQueryUI on a site I'm building and found that a lot of these solutions out there would make the content unavailable to those without JavaScript.
So, here is what I did:
CSS:
.flash #wrapper {
display: none;
}
This sets <div id="wrapper"> to hidden only if it is a decedent of the flash class. So, to keep it from being hidden from those without JavaScript I add the flash class to <html> element. So, it can only be physically hidden if an end-user has JavaScript enabled, otherwise they'll at least have access via the unstyled content.
JavaScript:
$('html').addClass('flash');
$(document).ready(function() {
/* Do all your stuff */
/* When done show the wrapper with the content styled */
$(#wrapper).show();
});
Depending on your pages time to load you might get a little flash, but it won't be a flash of unstyled content, which is rather ugly. In my case I had a jQueryUI menu item that would flash the normal <ul> element first then the menuUI item, and my <div> elements are resized with jQuery so that each <div> column is equal height, but it would flash the different heights first. This fixed it while still giving accessibility to non-JavaScript browsers.
I have a large survey that I have made more usable with jQuery by arranging it into sections and using an accordian menu to flip through each section.
The trouble is, there is a noticable snap when $(document).ready() fires and condenses everything into an accordian menu. That is to say that before $(document).ready(), you can see the whole survey.
I did consider setting #surveyForm to display: none; in css and #surveyForm.active to display: block; but that creates a new problem:
Browsers without javascript enabled will never get to see #surveyForm.active and so they won't be able to use the survey.
Any ideas?
Cheers
-Iain
It's not clean and unobtrusive like good Javascript should be, but you can just add a Javascript snippet directly after your accordian content to initialize the accordian and hide the pieces that need hiding. The net effect should completely eliminate the "snap" and keep the form accessable to non-JS clients.
If you want to easily manage non-javascript browsers/users without the snap when JS is enabled, try the following snippet inside the head node of your page:
document.documentElement.className = 'has-js'
// or any other class name, use += and append it if you already have a class on your *html* tag
In your CSS write for the non-js scenario first and then set display to none or hide it any other way that fits you by prefixing your js-relevant css selector with .has-js.
I'll probably get downvoted for putting javascript in the head but keep in mind that from a performance standpoint (Yahoo et al) only javascript files (external) need to be loaded as late as possible.
A javascript tag itself will not make your page load longer except for the fact that it will block render while it is being parsed and executed, but in this case we want that, since you need the .has-js class before rendering starts to avoid flickering.
I haven't tried this, but perhaps you could wrap the content in <noscript> tags. Those with Javascript disabled will always see the content. Those with Javascript will not see the content. Then use JQuery to remove the <noscript> tags, thus making the content visible to those with Javascript.
EDIT:
The following example almost works. What I intended was to delete the <noscript> tags, whilst keeping their content. However, the code ends up escaping the HTML. The idea works, but I'm not sure how to implement it properly—perhaps someone else can shed some light on it:
<noscript>
<p>Display me!</p>
</noscript>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('noscript').contents().unwrap();
});
</script>
Here's what I wanted to get:
<p>Display me!</p>
Here's what I actually get:
<p>Display me!</p>
EDIT 2:
After a little more investigation, the unwrap() method works correctly for non <noscript> tags: it works, for example, for the contents of a <div>. I'm not sure what the solution is here. It is presumably something to do with the way browsers interpret <noscript>.
This is the progressive enhancement solution I use for situations like this.
I would stick with the css display:none solution. To fix the no javascript issue you might consider using this:
<script type="text/javascript">
$(document).ready(function(){
// fade in?
});
</script>
<noscript>
<div>foobar!</div>
</noscript>
Could you try hiding everything at the top of your jquery block, and then showing it again after you do all the condensing?
$(document).ready
(
function ()
{
$("#surveyForm").hide();
... MAGIC CONDENSING
$("#surveyForm").show();
}
);
That may reduce the impact of the "snap" you're seeing.
Ways that I can think of to deal with this are:
Use javascript to load the CSS file that does initial hiding.
Put CSS in a noscript block that sets visibility to true after you've set it to false everywhere.
Both should work I think though I've not had a chance to test them properly.
You can place an inline Javascript statement which will hide the element immediately after it is rendered.
Basically...
Scripts inside the <head> section are loaded
HTML is rendered
$(document).ready() fires
So to fix that, you can simply do this
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#survey").accordion();
}
</head>
<body>
<div id="survey">....</div>
<script type="text/javascript">
$("#survey").hide();
</script>
</body>
I'm currently developing a Safari extension that uses an injected script to further inject some HTML into the current webpage, as well as injecting some other scripts to make it work. This is all working fine, but the issue is that the HTML that is injected gets affected by CSS stylesheets that the webpage has already imported. For example, the HTML looks perfect on Google.com (which has relatively little CSS styling), but awful on StackOverflow.com (which styles buttons etc).
jQuery is injected into the webpage at the time of this HTML being displayed, so I have that available. I've tried all kinds of things, including walking through all of the elements and calling removeClass() on each of them, to no avail. I've also tried to add "CSS reset" classes, etc, but nothing seems to be working.
What's the best way to go around preventing the CSS from interfering with my HTML?
You can't prevent that from happen. However, you can override the CSS rules. Give your main element a unique id (which really should be unique by obfustation, like "yourapplicationname_mainelement_name" or something), then override all possible styles that might give strange effects on your html.
Your plugin:
<div id="yourapplicationname_mainelement_name">
<p>My paragraph that must not be styled</p>
</div>
Your css:
#yourapplicationname_mainelement_name p {
display: block;
color: black;
background: white;
position: relative;
... and so on ...
}
As your css style rules are the most specific, given your id, they will override any settings present on the page where your html is injected.
Further... It might be hard to see what rules are the most important. You can use firebug or similar to understand which is overriding another. You'll have a hard time without it when developing your application.
that's a tough one. two options as I see it.
You could set a wrapping div around all your content and prefix all your css with that. example:
<body>
<div class='wrappingDiv'>
...
</div>
</body>
stylesheet:
.wrappingDiv * {}
Then when you inject jquery use that to close off the initial wrapping div before your content and to wrap any following content in the another wrapping div.
Issues:
Only possible if you are injecting
other site content onto your own
site.
This could get complicated
depending on where you are injecting
html.
The other option is to load a resetting stylesheet that targets your injected html specifically. In this case only your injected html would be wrapped but you'd need a css file that reset all attributes for all tags to their default before you add your own styles. No real issues here, just not very elegant...
Another way would be to use an element that doesn't inherit stylesheet like an iframe, but that comes with its own issues...
i have seen on different plugins that they put the code inside a iframe and they use JS to interact with the rest of the page, so you can not change the css inside.
Also i have seen that when injecting html code,people sets the style of the plugin content using the "style" attribute inside the tags so the browser will give priority to the css inside the style attribute and not the css file. The idea is to override the css,usually with the "!important" clause. But you might have some problems on different browsers
EDIT i forgot to say that my answer is on the case that you inject the code on someone's else page where you cannot control directly the css
I want to hide a div using Javascript, as soon as the page gets loaded in the browser. I am able to do that, if i use the following code :
document.getElementById("div_id").style.display='none';
But, when i try to do the same thing using JQuery,i notice that the div is visible for a couple of seconds after page loads,and then it becomes hidden. The JQuery code i use is
$(document).ready(function() {
$("#div_id").css('display','none');
});
The same thing happens, if i use $("#div_id").hide(); Is this because im using a library,which would slow down the process a bit,instead of directly using document.getElementById ? . Any way to fix this ?
Thank You.
There's an easy solution to this. Set up a CSS class as follows
.js #div_id { display: none; }
Then have the following jQuery
$('html').addClass('js');
$(document).ready(function() {
/* normal code to run when DOM has loaded here */
});
the <div> will be hidden immediately (no flashes) if users have JavaScript enabled and won't be if they don't (which circumvents possible graceful degradation problems as meder points out in his option c).
This works because when can immediately access the <html> element when the page starts to load.
The reason why document.getElementById("div_id").style.display='none'; is probably working is because you have it in the <body> after the element and therefore the script does not wait for the whole DOM to be loaded before executing.
You could either
a) insert a script element directly after the element to hide it with jQuery:
b) have inconsistent Javascript by directly using DOM methods like your first code snippet
c) hide it with CSS with the disadvantage that for CSS enabled non-JS users they wouldn't be able to see anything
I would choose between A and C, though I'm not sure exactly what you're hiding.
A:
<div id="foo"></div>
<script>$('#foo').hide()</script>
C:
div#foo { display:none; }
First, use $("#div_id").hide();. It's more idiomatic for jQuery.
Second, it's because you're using $(document).ready. Usually, that event doesn't fire until the DOM is available for use. However, because of the way bindReady() is implemented, it's possible on some browsers for this event to be equivalent to the onload event, which won't fire until everything is loaded. Unfortunately, the only way that I know of to get around this (that doesn't cause problems for disabled users who can't use JavaScript because of a screen reader) is to set a short timeout (say 50ms) and repeatedly check for the existence of $("#div_id") while the page is loading. This is a horrible hack, and I hesitate to recommend it, but it should work. That said, you're almost better off just accepting the flash of content, knowing that most users won't see it.
I think a better option would be to style the div so that it is hidden when the page is written, without any javascript.
Then, whenever you are ready to show it again, use javascript to unhide it:
$('#someId').show();
It might be cause by the way you include the scripts. The browser has to download them before they are run. So if you have a lot of js files this can cause this problem.
I think the reason is that the DOM loads progressively and the $(document).ready event is waiting for the DOM to be fully loaded before executing.
If you really want the element to be invisible when the page loads, can you define that style in your CSS instead?
I haven't tried this, but if you still want the div to be visible for non-Javascript users then I think you could do something like this:
<noscript>
<style type="text/css">
#elementid {display: block !important;}
</style>
</noscript>
More likely it's because you are waiting until the document is ready to hide it. This seems more like a job for server side script if you want it hidden by default.