Hidden Elements with CSS On / Javascript Off

**jfredrickson** · 06-03-2008, 07:03 PM

I have a page with 4 divs and a javascript function that gets called onload hiding all the divs except for one (this is dynamic based on the URL so can't be done with CSS). There are links on the page that allow the user to browse through the different divs such that only one is present at a time.

This works great except that the javascript function doesn't get called until the page load has finished meaning that all the sections are visible for a brief period while the page loads.

I could use CSS to hide them all by default and simply wait for the javascript to turn one on, but then if a user has CSS on and javascript off they will not see any content.

The other alternative seems to be to include all of the content twice, once in a <noscript> tag and a second time with display set to none in the CSS. This seems to be the only completely degradable solution but I'd rather not have to send twice as much data just to solve this solution.

I've been searching the web endlessly for a solution to this problem but it can't seem to find anyone who has tackled it yet.

Does anybody know of a more elegant solution to this problem that degrades well for users with strange browser configurations?

Thanks!

**Medyman** · 06-03-2008, 07:09 PM

What I usually do in this kind of case is to insert the the bit of CSS to hide a particular class with javascript. Because this would go into the <head> of the page, it doesn't have to wait until the entire page has loaded.

Also, if the user doesn't have javascript, the style simply doesn't take effect and it shows all the divs.

Make sense?

**jfredrickson** · 06-03-2008, 07:13 PM

What do you mean by "CSS to hide a particular class with javascript"? Do you use CSS to hide the element or javascript? If it's CSS then there's still the problem that nothing will show with CSS on / Javascript off. If it's Javascript then how do I get it to execute before the page has finished loading?

**jfredrickson** · 06-03-2008, 07:27 PM

Ahh I just realized that I could use some server-side code to dynamically insert the inline styling to hide only the appropriate divs based on the URL in the same way that the javascript does.

Still kind of annoying that there doesn't seem to be a simpler purely client-side solution though.

**Medyman** · 06-03-2008, 07:42 PM

Still kind of annoying that there doesn't seem to be a simpler purely client-side solution though.

There is. You totally misunderstood me though. Let me try to explain it a different way.

Let's say there are a bunch of divs on your page. We'll give them all a class of "gray". Add a <noscript> to test when JS is off. So your HTML looks like this:

HTML Code:

<noscript><h1>Javascript is off!</h1></noscript>
<div class="gray">&nbsp;</div>
<div class="gray">&nbsp;</div>
<div class="gray">&nbsp;</div>
<div class="gray">&nbsp;</div>
<div class="gray">&nbsp;</div>
<div class="gray">&nbsp;</div>
<div class="gray">&nbsp;</div>
<div class="gray">&nbsp;</div>

With JavaScript off, we want a light gray background (#eee) and with JS on you want a dark background.

So, create two stylesheets: light.css and dark.css. Add the following styles:

light.css:

Code:

.gray{
	background:#eee;
	border:1px solid #ccc;
	height:150px;
	width:300px;
	float:left;
	margin:0 5px 5px 0;
	display:block;
	}

dark.css

Code:

.gray{
	background:#888;
	border-color:#000;
}

light.css is the default CSS file. So, include that in the <head> of the page with your regular <link> element. You can include it directly too.

Now, add the following JS to import dark.css with javascript:

Code:

<script type="text/javascript">
	function includeCSS(p_file) {
	var v_css  = document.createElement('link');
	v_css.rel = 'stylesheet'
	v_css.type = 'text/css';
	v_css.href = p_file;
	document.getElementsByTagName('head')[0].appendChild(v_css);
}

includeCSS('dark.css');
</script>

This will import dark.css if javascript is enabled. It's important that this JS go below the link to light.css.

All together:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
	.gray{
		background:#eee;
		border:1px solid #ccc;
		height:150px;
		width:300px;
		float:left;
		margin:0 5px 5px 0;
		display:block;
	}
</style>
<script type="text/javascript">
	function includeCSS(p_file) {
	var v_css  = document.createElement('link');
	v_css.rel = 'stylesheet'
	v_css.type = 'text/css';
	v_css.href = p_file;
	document.getElementsByTagName('head')[0].appendChild(v_css);
}

includeCSS('dark.css');
</script>
</head>
<body>

<noscript><h1>Javascript is off!</h1></noscript>
<div class="gray">&nbsp;</div>
<div class="gray">&nbsp;</div>
<div class="gray">&nbsp;</div>
<div class="gray">&nbsp;</div>
<div class="gray">&nbsp;</div>
<div class="gray">&nbsp;</div>
<div class="gray">&nbsp;</div>
<div class="gray">&nbsp;</div>


</body>
</html>

Thread: Hidden Elements with CSS On / Javascript Off

Thread Tools

Search Thread

Hidden Elements with CSS On / Javascript Off

Bookmarks

Bookmarks

Posting Permissions