How would you use CSS within a jQuery script, so that if javascript were disbaled within the browser both the jQuery script and CSS would not show up?
3 Answers
Take a look at this post: http://forum.jquery.com/topic/loading-stylesheets-on-the-fly
8 Comments
tehman
i dont want to link to a css file, how would this work if i wanted the css within the script?
ghoppe
@tehman How do you expect to load the css within the script if javascript is disabled?
rid
@ghoppe, he wants to not load the CSS if JavaScript is disabled.
rid
@tehman, if you want the whole CSS inside your JavaScript file, then create a string with it and instead of adding a
<link/>, add a <style/>.ghoppe
@Radu well, now I'm really confused. By definition, any CSS in the jQuery script will not be applied if the script is disabled. This question needs work.
|
Another approach I've seen is to dynamically add a special css class to the body tag via javascript, and then preprend javascript-only CSS selectors with that css class.
eg:
<script>
document.body.className += ' scriptson';
</script>
<style>
.scriptson a {
/* only applied if javascript is enabled */
}
</style>
1 Comment
tehman
Thanks for the alternative approach, did not think of this but it does look like it could come in handy. Saved for future reference.
Put the <script> and <link> tag in a <noscript> tag.
To do the opposite, use $("head").append("<link href="CSSFILE" />"); or of the sort so that if javascript is disabled, the script will not run and the css will not be included. Note though, because it takes Javascript time to load, it will be jumpy. It is not what you want, which is why the <noscript> is the better solution.
4 Comments
Kokos
This would cause the opposite.
Luke James Emery
But this is how it ought to be done. If Javascript doesn't work, have a back up CSS file to fix whatever things were wrong.
Marcel
Your answer's first line is a bit backwards.
Luke James Emery
I already know this, and I have said this is the best way to do it. If he wants to mess up his website, he can use the second part. I answered it thoroughly and yet I have 0, woooooh yay.
$('a').css('color', 'red')will only be executed if javascript is turned on. Is that what you're looking for?