Now This Log

Wednesday, 20 February 2002 : "Is Javascript On or Off?"

Turns out there's a more straightforward way to do what I wanted, with no need for style sheets or putting scripts in the <head> or ...
<script language="JavaScript" type="text/javascript"><!--
    document.writeln('JavaScript is ON');
// --></script>
<noscript>JavaScript is OFF</noscript>
(thanks to Matt W.)

(Follow the comment link to read about the overly-complicated stylesheet-manipulating JavaScript I threw together the other day to do the same thing in a worse way...)


I made a low-tech but useful JavaScript for myself the other day. On the page my browser opens to first, I wanted a way to immediately see if JavaScript is on without going into IE's (or Opera's) menus or preferences to check. I know of no browser (except possibly some branch of Mozilla I haven't seen) which has a status indicator specifically for that piece of information. So I made one.

One caveat -- it only works if you have style sheets enabled. (But it seems most folks do.)

The result looks like this: [disabled because I kept getting some weird errors from it]
JavaScript is  ON  OFF
(Turn on or off JavaScript and reload to see the difference.)

So far I've seen it work in IE6/Windows, Opera 6/Windows, Mozilla 6/Mac and IE 5.1/MacOSX, so there's a decent chance it'll work in plenty of other browsers. 'Working' is defined as showing the red 'ON' when you load the page with JavaScript turned on.

Anyone not interested in the code can stop reading now...

This goes between your page's <head> tags (or put just the function in an external script, like I did for this very page):
<script language="JavaScript" type="text/javascript"><!--
function jstest() {
    document.getElementById('jon').style['background'] = 'red';
    document.getElementById('joff').style['background'] = 'white';
}
//--></script>
In your opening <body> tag, add an 'onload' entry like so:
<body onload="jstest()" bgcolor="white" text="black" [etc...]>
Then somewhere in your main page body, put something like this:
<small>JavaScript is <b><span id="jon" style="color: white; background: white;">&nbsp;ON </span><span id="joff" style="color: white; background: green;">&nbsp;OFF </span></b></small>
You can change the code to display what you like; it's all text and colors, no graphics. Just keep track of the names of your id tags in the <span>s, making sure they match the values in the script. Also, make sure that the colors for 'invisible' pieces match the background of the page (in this case, white). You can obviously play with these values (maybe you want OFF to be red and ON to be green...).


Replies: 3 comments so far

Add a comment of your own

* The following works without CSS support (ie: even earlier browsers). Just stick it in the body of the document...



JavaScript is OFF

Throw in tags in the writeln/noscript sections if you want it to look prettier.

Re: the mozilla note... with any mozilla, head over to
http://xulplanet.com/downloads/view.cgi?category=applications&view=prefbar
to get a toolbar that shows and lets you control your javascript enabled/disabled setting (and a couple others). Bummer is that when you upgrade Mozilla, you have to go back to xulplanet to re-install the toolbar.

Posted by matt @ 02/20/2002 01:43PM est


* OK, so it was pretty much just an exercise for which there was a better solution sitting out there.

Still, I learned stuff doing it.

Posted by Steve @ 02/20/2002 01:46PM est


* ...and I learned something from your having done it too. I've yet to fiddle with any of that DOM stuff. Looks like you can do some neat stuff with it. :)

Posted by matt @ 02/21/2002 04:31PM est


Add a new comment:
Name


E-Mail (optional)


Homepage (optional)


Comments
Note: I am extremely loath to ever actually do so, but I
do reserve the right to remove any comment for any reason.
Also, be aware that Greymatter logs your IP address.



Links, exploration and
synthesis from
Steve Bogart

Mug shot
photo by my wife
If you want to be e-mailed when there's new stuff here, say "add me."
Archives by week

February 2002
S M T W T F S
     12
3456789
10111213141516
17181920212223
2425262728  

Older Archives:
2001 (Aug-present)
2001 (Jan-Aug)
2000 | 1999 | 1998

Medley/AllTooCozy
Entropy
Genehack
rc3.org
GirlHacker
LarkFarm

Search log since Aug. 2001:

Ye olde Amazon wish list
Powered By Greymatter

How's my HTML?
How's my CSS?

Home - Log - Services - Writing - Media - Links - About