Show div when JS Off

Printable View

02-10-2013, 02:44 AM
edatz

Show div when JS Off

Hi, currently I use the Switch Content script- from Dynamic Drive to handle a couple of drop downs on my blog scripts. While it works fine, it seems an awful lot of code to do the few items I need.

The big deal on this is that if JS is turned off in the browser, the divs can still be seen.

There are some shorter bits of JS to do a drop down div, but none I have found will show the div if JS is off.

This is a much shorter div drop:

Code:

The Javascript ---------------------------- // -- drop divs - start with 2 function showHide(elementid) { if (document.getElementById(elementid).style.display == 'none') { document.getElementById(elementid).style.display = 'block';} else {document.getElementById(elementid).style.display = 'none';} } The HTML ---------------------------- <div><a href="javascript:showHide('2')"><b>First</b></a></div> <div id="2" style="display:none;"> Lorem ipsum dolor sit amet. </div> <div><a href="javascript:showHide('3')"><b>Second</b></a></div> <div id="3" style="display:none;"> Ut wisi enim ad minim veniam. </div>

How do I make this show when javascsript is off?

Hope someone can help on this - thanks.
02-10-2013, 08:41 AM
COBOLdinosaur

Generally a toggle is going to take scripting.

You could simplify it and speed it up by using CSS classes:
.show {display:block;}
.hide {display:none;}

then the script can be:
function showHide(elementId)
{
document.getElementById(elementId).className=
(document.getElementById(elementId).className=='none')? 'block':'none';
}

You could do at least a one way change by targeting off of the click

You might be able to get a toggle with two different clickable links but it would be a little dicey.
02-10-2013, 03:51 PM
edatz

Quote:

but it would be a little dicey

bit of an understatement ;)

I've written my own blogging software in Perl and so there's just one line for the data I call (in 2 places). I'd forgotten about the noscript tag, so think that's probably going to end up the easiest. Otherwise we'll be running around in circles.

It's not about browser usage, but things like GoogleBot picking up my archives and category list/links.

Thanks
02-10-2013, 05:46 PM
COBOLdinosaur

Yeah no script will work as long as you can live with it just staying default. The Google spider will pick it up whether you display it or not. It does not process css or javascript; It just reads the text. As long as you are not mssking and showing users different content than Google as a normal thing then there will not be an issue with the SEs.
02-10-2013, 09:56 PM
rnd me

css: (in <head>)

Code:

#2{ display: none;} .js #2{ display: block;}

js: (early in <body> to avoid FOUC)

Code:

document.body.className+=" js"

that way, it's easy to show/hide/adjust many divs using regular CSS and a tiny bit of JS rather than complex/slow/brittle DOM code by simply adding ".js " to any CSS selector you want active only when scripting works.
you can set a default to no js and easily clobber the rules because for any selector, ".js "+selector is more specific (and thus out-cascades) the default rule's selector on its own.
02-11-2013, 03:25 AM
edatz

Quote:

Originally Posted by COBOLdinosaur

... Google spider will pick it up whether you display it or not. .

Didn't know that. Thought if anything had any JS the bot ignored the div etc.

Will leave it as is then.

Thanks.