Handling Hidden Layer in old browsers

what if the browser dosn't support "display:none" property

[Pat1975]

Hello,

In some websites when I have a mouse pointer hover on a link , a layer automatice show up displaying more information without having to load a new page. One of the technic I can think out is to use the css display property like the code below

<div style="position:absolute; display:none">......</div>

Then use the javascript to change the style according to user action to make it visible or hidden again. But with this technic, it would be a very ugly page in old browers which don't support "display:none" as all the hidden contents will be visible when the page is loaded.

Another technic is to use the javascript to dynamically generate the layer e.g. using document.write() method. But this would make the script very complicate and also the search engines can't crawl the dynamic generated contents.

So I wonder what is the technic that they actually used in most big sites to work around this issue.

[rocknbil]

Have you tried "visibility:hidden"?

This works with older browsers but the down-side is it leaves a big block of empty space where the div/object is. But if it's as I suspect (revealed by the use of the word 'layers'), you are using z-index and absolute positioning anyway so this problem is irrelevant.

[Pat1975]

Thanks for your answer.

I havn't planed yet where exactly on my sites I will use it. Just thinking about applying more dynamic html trick to my website. Until now I have never apply any dynamic trick to my websites except the back-end administration area which I know for sure what browsers our staffs use.

Your techinque is better. I checked with the reference now and saw that position:absolute, z-index and visibility:hidden are all supported in NN4 and IE4. Maybe it's the time to stop thinking about browsers older than version 4 now.

OK, thanks again.

[tomda]

Maybe it's the time to stop thinking about browsers older than version 4 now.

Yeah, it's time!

[rocknbil]

Nah, it makes you a better developer to always consider "backwards compatibility" and "graceful degradation." There are still text-only browsers out there, and non-javascript environments.

Just thinking about applying more dynamic html trick to my website.

Before taking this step, consider if it's really worth the effort: will these dynamic tricks make it easier to access the content?

[Digimon]

I have to disagree here. While I think it is necessary to thin about backwards compatibility, etc... you also have to be realistic. The interent is a very dynamic enviroment and technology evolves quickly. Users cannot be stuck in old technologies. The latest browser is two clicks away from you.
Also, and this is the most important reason, I get to see many different site stats and the average percentage of users using an older version than IE4 are under 0,001% (if that).
When you talk about text based browsers... are you serious?

[bedlam]

Pat1975:

Your problem is pretty easy to solve, really. What you want is an ordinary link to a page that has the content you want to display. Your JS should

• Check for some DOM property only available in newer browsers, and silently exit if the property is not available
  
• Attach an event listener to the relevant link
  
• Use JS to load the content of the linked-to page into the current page
  

This method will work for any browser, whether or not javascript is available. If you want to see an example of a script that works precisely this way, try this search [google.com].

-b

[Robin_reala]

Digimon: up until last year I only used a text browser on my phone because downloading images was prohibitively expensive. A well designed site should fall back nicely regardless of what user agent accesses it.

[Pat1975]

bedlam:

Thank you for your tricks. But I think loading the content up on user action may too slow. As I said in my original post that another method is to using document.write (or writing the innerHtml property). By this way I can check the browser or object before generating the hidden layer.

The problem of this method is that, instead of writing the simple html code , now, the html code must be contained in the javascript string. So I have to make sure that I've add the back slashs to all special characters properly.

It would become even more complicate task when I generate these client-side script with php script. That means the client-side script (which generate the html code) now need to be contained within a php string. A lot of back slashs to add now.

[rocknbil]

When you talk about text based browsers... are you serious?

Yes.

Users cannot be stuck in old technologies.

Try telling that to under-funded educational institutions or third world countries. OOPS! They're not in your target market and don't deserve your attention, sorry!