the famous display:none getElementById trick

[a_design_interactive]

maybe this isn't the right way to do this at all. i don't really know much about this kind of stuff-- the special effects goodies and all that-- DOM manipulation-- i guess that's what it's called? sorry, i just feel out of the js loop. maybe i shouldnt feel that way. blah, blah..anyway...

i have a question about the script i picked up-- and if you have something better, please let me know. if you take a look at the script at the link what i'm about to say will make more sense.

i'm making a page wherein there will be an image to click on, and the hidden thig is also an image. in my example, which has the same code essentially as my real page, i've only used text as the hidden object for the sake of time.

my concern is this: what happens when the visitor doesn't have javascript? using NoScript in Firefox, i see that the link, instead of opening the hidden object, it goes to the name of the hidden object's ID at the document root, causing a 404 error.

could this be avoided by using a "NoScript" line of code where i can tell it to have the hidden stuff opened instead of hidden-- so no 404 will happen, cause no need to click? or-- what's the best way to handle this whole thing? just looking for ideas on how to make it more failsafe.

thanks!!

[Twey]

what's the best way to handle this whole thing?

Whenever something needs to be made visible by Javascript, it should be hidden by Javascript in the first place. This ensures than JS-incapable browsers can still see it.

[mburt]

Yeah, twey is right here. Using CSS only works in certain browsers, (i.e), so it's a bad idea, because some users may not be able to view it

[jscheuer1]

Yeah, twey is right here. Using CSS only works in certain browsers, (i.e), so it's a bad idea, because some users may not be able to view it

Well css works in almost if not all modern browsers. The trouble occurs not because it doesn't work, but because it does. Say you set the style in the css as display:none. Then you use a script later to make it display:block when a user clicks or hovers something. If the user has javascript disabled, they will never get to see your content. A good way to deal with this is to have the content start out display:block and then to switch it to display:none onload via javascript and then later to reveal it onclick or whatever. That way, a javascript disabled browser will still see the content. This requires that you design your page so that it will look OK with all the content displayed at once as well as with most of it not displayed. Not that hard to do.

A nice twist on this for folks who don't want to see all the content while the page is loading would be to have an additional style section written in the head of the page using document.write that sets the display to none for the class of content you wish later to be able to reveal. That way, it will be hidden from the very beginning but, only if javascript is enabled.

[mburt]

Yeah, I noticed this problem occurs in Mozilla, which is a very common browser. The choice should be up to yourself to use css or not.

[Twey]

It's not a problem, it's expected behaviour. It should occur in every browser. The problem isn't to do with using CSS or not.

I don't think you grasped John's explanation. Try reading it again. And remember, it's CSS that's being changed by Javascript.

[mburt]

Well... I feel stupid

[a_design_interactive]

A good way to deal with this is to have the content start out display:block and then to switch it to display:none onload via javascript and then later to reveal it onclick or whatever.

aw ha! good thinking!! see, i'm still learning-- still trying to reinvent the wheel here! i'll catch on. it's getting better-- slowly but surely.

the reason i failed to see this is because of a typical case of poor programmer's Detective work on my part. meaning-- as a rule of thumb, when programming, if one were to go on the philosophy "What do i already Know [about the content etc], and can i use that knowledge to gain my desired behaviour here?"

i probably won't articulate this well enough, but hopefully it will make sense enough for someone to understand the principle of this "programmers rule". if i do horribly, maybe someone will do a better re-write of the concept below.

so, instead of trying to make things more difficult by searching for something yet unturned; something else i can "do" to it (by coming to DD looking for something new to do)-- if i had instead just sat down and concentrated on what's really going on, or sketched it out-- i might have got it. Had i talked it out and described what's going on with each of the visible / invisible elements, using this rule of thumb, i should have been able to see:
if javascript is used to unveil the element, then, the element must not be hidden in the first place, in order for non-javascript browsers to see it.

the Situation, specifically:

VISIBLE CONTENT - css = typographic style, color, etc. and no special display properties; | javascript = none

HIDDEN CONTENT - css = typographic style, color, etc. and a special "display:none" property, which hides the element, and collapses the element's "box" to hide its content for special effect | javascript = used to remove the display:none CSS property, onclick() changing display:none; to display:block;

a good detective (programmer) would have solved the situation (even had he not known the programming languages' specifics) looked at that last line and thought: if javascript is un-hiding it by assigning a new CSS property, then i could eliminate that by starting with the CSS Property removed (actually, the way the script is written, but i wanted hidden first!), and then using javascript to hide, and then unhide the element.
___________
(i hope that made enough sense for someone to take something from it!... if not, i'm sorrry-- i was merely trying to turn it into a learning experience rather than my sad little problem!

the script was actually written like that in the first place-- but, what i was missing was the onload() factor. i wanted the elements to be hidden "on page load"... onload()!! but revealed again later w/ similar code (ie. if something is done w/ javascript to get desired results later from a CSS selector, chances are do something w/ javascript beforehand will allow for the opposite if desired)

thanks again!