CWC index .

Using Javascript and/or CSS

This page was created as a result of a puzzle to deal with the still-used but ancient browser NS4. More and more people don't want to bother taking the time to deal with this obsolete browser. But even if you don't care whether or not NS4 can handle your webpages, you may find something useful here describing two different ways that can be used to hide and show text in an HTML file by using Javascript and/or CSS.

showing (and hiding) text and links

CSS: show/hide text | Javascript: show/hide js text . show/hide link . escaping characters | CSS/Javascript: show/hide text

Warning! I am not an expert in Javascript or CSS. But the following instructions using relatively simple coding do work for me. This method will get you started with javascripting and/or CSS. It should display in all the later browsers and most of the earlier ones.

Text

Hiding and/or showing text with CSS

CSS: text | Javascript: show/hide text . show/hide link . escaping characters | CSS/Javascript: show/hide text

To hide and/or show text with CSS, you must create two different stylesheets. For this example, you will see style.css and style_insert.css. Of course, your .css files can be named anything you want.

If you look at the source code of this page, you will see that there are 2 sentences below. The first sentence will appear only in NS4 and browsers with CSS disabled. The second sentence will appear only in current browsers and any browser with CSS disabled. The second half of the second sentence will only appear in NS4 with javascript disabled. Only those with CSS disabled will see all three phrases in their entirety.

This class="ns4" sentence should only show up in browsers with CSS disabled and NS4.

This class="later" sentence should only show up in current browsers...

...and NS4 with javascript (and CSS) disabled.

goes above </head>:

<link rel="stylesheet" href="style.css" type="text/css" />

how style.css looks:

@import url(style_insert.css);
.ns4 {background:transparent; color:#900;}
.later { display:none;}
[rest of styles follow...]

how style_insert.css looks:

.ns4 {display:none !important;}
.later {background:#009; color:#fff; border:2px solid #c03; display:block !important;}

coding below <body>:

<p class="ns4">seen only by NS4 and browsers with CSS disabled.</p>

<p class="later">seen only by current browsers <span class="ns4"> and ns4 with javascript (and hence CSS) disabled</span>.</p>

You can safely change the sections that are in bold text in the above example. The stylesheet that is called for in <link rel="stylesheet" href= [etc. etc.]> is the stylesheet that is for the more ancient browser. The stylesheet that is called for by the @import url is for current browsers. It is essential that the @import url be placed on the first line of your main stylesheet. Also make sure that your class names remain in the same order in the two stylesheets. Note the !important that appears beside the two show/hide styles in the stylesheet to be read by current browsers. This is because the majority of your viewers will be using more recent browsers.

Hiding and/or showing text with Javascript

CSS: show/hide text | Javascript: show/hide text . show/hide link . escaping characters | CSS/Javascript: show/hide text

Perhaps you would also like to hide text from all browsers with javascript disabled. To do that, you can use document.write. To show text to browsers with javascript disabled, you can use <noscript> and </noscript>

If you look at the source code of this page, you will see that there are 2 sentences below. The first sentence will appear only in browsers with javascript enabled. The second sentence will appear only browsers with javascript disabled.

Copy the following section and paste it below <body> in your HTML file.

<script type="text/javascript">
<!-- // hide from older browsers
document.write("This sentence with <b style=\"color:#c03\">bold red text<\/b> " +
"will only appear in a browser that has javascript <i>enabled<\/i>.");
// -->
</script>

<noscript>
This sentence with <i>italic text</i> will only appear in a browser that has javascript <b>disabled</b>.
</noscript>

You can safely change the sections that are in bold text. Note that you can place different text for browsers with javascript disabled (indeed, this is often desirable). This is done in the <noscript> section.

Escaping Characters in Javascript

CSS: show/hide text | Javascript: show/hide text . text link . escaping characters | CSS/Javascript: show/hide text

As you may have noticed from looking at the above example, the HTML after document.write looks slightly different than it does normally. This is because the characters "(quotation mark), '(single quote) and /(forward slash) are integral to the javascript code itself. So depending on how your javascript is constructed, at least two of these characters must be escaped when used in a javascript. To do that, a \(backward slash) is placed before each of the aforementioned characters. Without these backward slashes, there is a very high likelihood that your script will not appear at all.

If you wish to display "(quotation marks) after document.write, precede the character with \(backward slash). Or you can also use the character entity rather than the character itself. For instance, if you want to display the sentence

Murphy's Law states, "Everything that can go wrong will go wrong."

You would type the following inside your script tags:

document.write("<p>Murphy's Law states, \"Everything that can go wrong will go wrong.\"<\/p>");

or

code:
document.write("<p>Murphy's Law states, &quot;Everything that can go wrong will go wrong.&quot;<\/p>");

Another way to get around this problem is to always use single quote marks to surround the document.write text. However, in that case, then all instances of '(single quote) would have to be escaped. They can either be preceded by the \(backward slash) or replaced with &#039;. And the /(forward slash) will still have to be escaped:

document.write('<p>Murphy\'s Law states: "Everything that can go wrong will go wrong."<\/p>');

or

code:
document.write('<p>Murphy&#039;s Law states: "Everything that can go wrong will go wrong."<\/p>');

No matter how you look at it, unless you avoid the use of the characters ', " and / completely, some escaping of characters may be required in your document.write text area. Please read more about character entities here.

Javascript Text Link

CSS: show/hide text | Javascript: show/hide text . show/hide link . escaping characters | CSS/Javascript: show/hide text

To display the following phrase and link with javascript, use document.write. A different message is displayed when javascript is disabled.

<script type="text/javascript">
<!-- // hide from older browsers
document.write("Some text goes here. <a href=\"http://website\">a link<\/a>");
// -->
</script>

<noscript>
Some text goes here. <a href="http://website">a link</a>
</noscript>

You can safely change whatever parts are in bold text in the above example. Whatever is typed after document.write must remain on the same line of coding (ie: no line breaks). Also, remember to escape any characters that are integral to the javascript code. Otherwise, your script will most probably not appear anywhere.

If nothing is put between <noscript> and </noscript>, or if the noscript tag is left out altogether, nothing will show in a browser with javascript disabled.

CSS/Javascript Text

CSS: show/hide text | Javascript: show/hide text . show/hide link . escaping characters | CSS/Javascript: show/hide text

There are five sentences in the source code. The first three will appear only to those browsers with javascript enabled. The fourth will appear in browsers with javascript disabled and the second half of the fourth will also appear in all browsers with javascript disabled. The fifth will appear only in ancient browsers with javascript disabled. To display the text, document.write and <noscript> ... </noscript> are used.

<script type="text/javascript">
<!-- // hide from older browsers
document.write("<p>seen by all browsers with javascript enabled<\/p>" +
"<p class=\"later\">seen only by current browsers with javascript enabled<\/p>" +
"<p class=\"ns4\">seen only by ancient browsers with javascript enabled<\/p>");
// -->
</script>

<noscript>
<p>text to be seen by all browsers with javascript disabled</p>
<p class="later">text to be seen only by all browsers with javascript disabled</p>
<p class="ns4">text to be seen only by ancient browsers with javascript disabled</p>

</noscript>

You can safely change whatever parts are in bold text in the above example. Whatever is typed after document.write must remain on the same line of coding (ie: no line breaks). Also, remember to escape any characters that are integral to the javascript code. Otherwise, your script will most probably not appear anywhere.

The reason that class="later" phrases show up in ancient browsers with javascript disabled is because the people who designed those browsers inexplicably intertwined CSS and javascript. In the ancient browser, if javascript is disabled, so is CSS. This is just one of the many many reasons that you really should upgrade your browser.

Remember, if nothing is typed between <noscript> and </noscript>, or if the noscript tag is left out altogether, nothing at all will show in any browser with javascript disabled.


Confused? For more detailed and much better instructions, please go to JavaScript Kit, JavaScript tutorial - The W3C DOM and/or W3Schools Javascript Tutorial. Free javascripts are available from The Javascript Source, Dynamic Drive and JavaScript Resources!as well as many others.

W3Schools CSS Tutorial, Quirksmode (CSS and Javascript), wdvl.com JavaScript Tutorial and webdevelopersjournal.com Javascript Tutorial are four other invaluable sources of information.

© llizard 2004, 2006, 2007

CWC reference pages . ASCII-art . illustrations and gif animations . llinks to ridiculously useless sites . home page