Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Hidden HTML using CSS & JS

Status
Not open for further replies.
GezH

GezH

Programmer
Aug 7, 2002
68
Hello all. Not sure if this should go in the CSS or JavaScript forum - it's a bit of both!

What I want to do is to have a block of HTML which is only displayed when javascript is enabled on the browser. So, I think the HTML should be enclosed in a div, which calls a CSS class that hides it by default. Then, when the page loads, a JavaScript call changes the div to be shown.

I hope that makes sense. I think I have the right idea, but I'm just not sure how to implement it. Any help very gratefully received!

Thanks.
 
Sort by date Sort by votes
A technique I use is:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
    <script type="text/javascript">
		document.getElementsByTagName('html')[0].className += ' jsEnabled';
    </script>

    // rest of code here...
</head>

Then in CSS you can declare:

Code: 
.jsEnabled .jsHidden {
	display: none;
}
.jsVisible {
	display: none;
}
.jsEnabled .jsVisible {
	display: block;
}

Then, you can give any element a class of "jsVisible" to make the element visible only when JS is enabled, or "jsHidden" to make the element hidden only when JS is enabled.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Looks great, thanks Dan, I'll give it a go.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
345
xwb
xwb
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
305
lexer
lexer
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
314
malpa
malpa
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
267
Rayj0000
Rayj0000
jimoo
  • Locked
  • Question
How execute JS
Replies
3
Views
425
xwb
xwb

Part and Inventory Search

Sponsor

Back
Top