[SOLVED] Showing something on a page - only if they have Javasciprt disabled.

Ed · December 23rd, 2007, 09:31 AM

I want to make my site accessible whether they have JavaScript enabled or not.

I am going to place the content that's in the JavaScript in a <noscript></noscript> part - but, I want the actual JavaScript to not show when a user has it disabled.

http://simplifiedimpact.com/beta2.html

What I have is the fx.slide from MooTools, which the content from that, I want to place under the big image when they have JS disabled, not above it.

I was thinking that I but tags around the fx.slide box that showed it only is JS was enabled, and place the content under the big image in <noscript> tags.

Like this:

How would I do this without repeating in content above and below the image? I basically want the opposite of <noscript>

Thanks,
Ed

Aso · December 23rd, 2007, 01:17 PM

I'm not sure what you want to do is completely possible. In other words, you want certain content to be in a different place, depending on the user's javascript support?

I guess you could use javascript to actually write the content at runtime, then have the page content in HMTL below the image in <noscript> tags.

Or...use a server-side script to detect javascript support, then output the correct HTML accordingly.

Or.... (now this is last resort

) use javascript to write a few CSS styles to position your content absolutely above the image, but code it below the image in your HTML. Then if javascript is off, things will display 'as is'.

Ed · December 23rd, 2007, 02:05 PM

Actually, all I want to do is hide the slide button and the welcome image if they haven't JS enabled. Even though it is javascript - it still appears even when I disable it. I don't want people to be confused as to what the hell the slide button is.

Is there an opposite of <noscript> ?

Thanks,
Ed

Aso · December 23rd, 2007, 02:13 PM

I see

Not that I know of. You could set the button and welcome image to display:none then override it with javascript to display:inline. It's not the best approach, but it's an easy fix. Just found an article that should help out with that (link)

Stuart · December 23rd, 2007, 02:16 PM

Just do this:

HTML Code:

<script type="text/javascript">
var code = '<a id="toggle" href="#" name="toggle"><img class="imageslide" src="http://simplifiedimpact.com/images57/slidebutton.jpg" alt="Slide"></a>';
document.write(code);
</script>

That should do it!

Ed · December 23rd, 2007, 02:40 PM

Code:

<script type="text/javascript">
var code = '<h3 class="section">

<img src="http://simplifiedimpact.com/WELP.jpg" alt="Welcome" />

<a id="toggle" href="#" name="toggle"><img class="imageslide" src="http://simplifiedimpact.com/images57/slidebutton.jpg" alt="Slide" /></a></h3>

<div id="test">

<img id="ready" src="http://simplifiedimpact.com/nobinoculars.jpg" alt="Ready?" /><br />
Yes, we design beautiful websites that are extremely simple, yet have some serious impact.<br />
<br />
<br />
<div class="aboutpara"><img src="http://simplifiedimpact.com/aboutus5.jpg" alt="** PLEASE DESCRIBE THIS IMAGE **" /><br />
Simplified Impact is a small web design company based in Cork, Ireland.</div>
</div>';document.write(code);
</script>

Why isn't this working? - I want the whole div + other stuff to disappear when it's disabled, not just the button - I always phrase thinks wrong!

Thanks,
Ed

MikeHopley · December 23rd, 2007, 05:31 PM

So what you want is <yesscript>. This does not exist, but it's easily faked via CSS.

Wherever you would like <yesscript>, put <div class="yesscript">. Wherever you would like </yesscript>, put </div>.

In your CSS, apply .yesscript { display: none }.

Then run the following javascript:

Code:

function yesScript() {
var x = document.getElementsByTagName("div")
for (i=0;i<x.length;i++) {
if (x[i].className == "yesscript") { x[i].style.display = "block" }
}

This will not have the desired result for browsers that ignore CSS, but that's a tiny fraction of users and you can still explain what's going on to them.

Ed · December 23rd, 2007, 05:39 PM

That gives me this:

http://simplifiedimpact.com/beta2.html

Aso · December 23rd, 2007, 05:51 PM

You need to use

Code:

<script type="text/javacript">

instead of

Code:

<script>

MikeHopley · December 23rd, 2007, 05:52 PM

I would put all your javascript in an external file.

I even remove my inline event handlers.

Ed · December 23rd, 2007, 07:00 PM

I'm still having problems. :(

Stuart · December 23rd, 2007, 07:13 PM

Yeah, this is weird! Mike's script should work, but it doesn't. Odd...

MikeHopley · December 24th, 2007, 06:26 AM

Um...

I missed out a closing } at the end of the function.

Can you check the JS with Firebug or a JS error console?

Ed · December 24th, 2007, 09:29 AM

I get:

Quote:

Originally Posted by Firebug

x is not defined

Code:

 for (i=0;i<x.length;i++) {

What does this mean?

MikeHopley · December 24th, 2007, 10:46 AM

Your code is slightly mistyped. Here's what you have:

Code:

function yesScript() {
var x = document.getElementsByTagName("div") }
for (i=0;i<x.length;i++) {
if (x[i].className == "yesscript") { x[i].style.display = "block" }
}

You should have:

Code:

function yesScript() {
var x = document.getElementsByTagName("div")
for (i=0;i<x.length;i++) {
if (x[i].className == "yesscript") { x[i].style.display = "block" }
}
}

"x" is an array holding all the <div> tags in the document. The "for" loop cycles through these, using the index of "i". "x[i]" is the i-th <div> in the document (well, actually the (i+1)-th <div>, because numbering starts at 0).

Each of these is checked for the className. If the className matches, the style is rewritten.

Ed · December 24th, 2007, 10:57 AM

Oh, it's still not working! This really bugs me as I hate nagging all the time. Fix this, Fix that... Are there any other methods? If not, why wouldn't this be working? Apologies, Ed

MikeHopley · December 24th, 2007, 11:35 AM

Quote:

Originally Posted by Vivara

Oh, it's still not working! This really bugs me as I hate nagging all the time. Fix this, Fix that... Are there any other methods? If not, why wouldn't this be working? Apologies, Ed

Oh dear.

Sorry, I thought that would be a straightforward solution. I use something similar on my site, and it seems to work fine.

Your problem now is not this specific script, but rather your method of including JS at all. Check your HTML validation: it's interpreting the JS as HTML, which means that obviously something's badly wrong with your placement of the script.

It's been a long time since I used any internal JS, but I think you may need some special comment characters around your script. Look up the basics of including JS on a webpage.

Alternatively, take it out into an external file again.

Ed · December 24th, 2007, 12:02 PM

Oh Dear indeed.

My method of including JavaScript was fine - I've used this many times before (and the validator says it's cool too).

However, I have moved it to an external file.

I just wanted to check with you that all I have to do in the external file is paste the code, no start tags or anything?

Looks like I'll have to figure some other way - this doesn't look like it's going to work.

What about the way swagner first mentioned, what's wrong with that?

Thanks,
Ed

MikeHopley · December 24th, 2007, 12:13 PM

Quote:

Originally Posted by Vivara

My method of including JavaScript was fine - I've used this many times before (and the validator says it's cool too).

Interesting. HTML Validator for Firefox gave me parsing errors. That's probably because it applies two layers of validation, whereas the W3C validator only applies one.

Quote:

I just wanted to check with you that all I have to do in the external file is paste the code, no start tags or anything?

That's right. An external file is only the javascript -- no HTML whatsoever (just like external CSS).

Quote:

What about the way swagner first mentioned, what's wrong with that?

Nothing, except for the problems associated with document.write: it's not allowed in XHTML, and it's buggy in Gecko browsers such as Firefox. Since you're not using XHTML, the former is irrelevant here.

But this would be a fine solution; in fact, it's arguably better than mine because it does not rely on CSS.

If you want to avoid the problems with document.write, you'll need to use DOM methods instead (longer and slower, but safer).

MikeHopley · December 24th, 2007, 12:21 PM

Quote:

Originally Posted by Vivara

I am using XHTML, I switched...lol.

No you're not. You just think you are! I love the Socratic method.

This line of code entails that you are not using XHTML:

Code:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Browsers will interpret your code as HTML, and therefore you can use document.write if you wish.

Alternatively, read up on DOM methods.