Hiding/Showing a DIV 2

[Mighty]

Hi Folks,

I have a DIV on a page which contains all the content for that page. I have the visibility set to hidden so that it is not displayed as soon as the page starts to load. I want all the images to load first and then the DIV.

<div ID="Detail" STYLE="visibility: hidden; height: 281; overflow: auto;">

I then use the onload event in the BODY tag to make the DIV visible.

onload="Detail.style.visibility='visible';"

This works fine in IE6 but will not work in NN7. Any ideas why?

Mighty

 

[tsdragon]

try:

document.getElementById("Detail").style.visibility = 'visible';

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[Mighty]

Thanks Tracy. That worked fine.

Mighty

 

[Vragabond]

And while you're at it, think of all the users who are not using javascript (namely search engine spiders), who will enjoy nothing on your page.

 

[ChrisHunt]

I'm not sure all the spiders will look at the CSS either, so you may get listed. On the other hand, more sophisticated arachnids will see that "display:none" and may penalise your site for having large volumes of hidden text. It used to be a common technique of "black hat" SEO merchants.

I wouldn't obsess about what order bits of the page load into the browser. If your images are optimised, it'll all happen pretty quickly anyway. If they aren't, your visitors will want something to read while your images load, otherwise it'll be [Back] button time...

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Mighty]

Thanks for the pointers guys. The pages on my site will look something like this:

http://iccgie.winstemp.com/aboutus_committee.asp

I have used the code that Tracy gave me to load the page body after all the images have loaded. As you can see the images don't load overly quickly. I developed the layout in Photoshop and "Save Optimised as" to generate the HTML.

Any pointers on how to improve the page load speed. I am already considering just using normal text for the navigation at the top and the left so that I don't have to use images. However, I like the text that I am currently using.

Mighty

 

[ChrisHunt]

Ooh that's horrid. Why does photoshop want to turn your design into a jigsaw?

I think you should use text for that navigation, mainly for speed, accessibility and ease of maintainance, but also because I imagine that some Chinese visitors may find a more conventional font easier to read. You can actually embed a font of your choice following the instructions in faq215-4042 , though it only works in IE so you'll need to have fallback fonts for other browsers.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Mighty]

Chris,

Most of the visitors to the site will be Irish so the readability is not really an issue. However, speed os obviously going to be an issue.

Can you point me to a good location to get a list of web-safe fonts. Obviously there is Times, Arial and verdana. Are there any more interesting fonts.

I think that I will just have to use a normal font for the top and left navigation and that will just leave the banner image at the top to load. I sliced that up into smaller pieces rather than loading one large image. Is that not the best way to do it?

Mighty

 

[Mighty]

What are people's views on IFRAMES. What about loading all the images the first time the site is accessed and then just changing the contents of an IFRAME as the user moves around the site.

Are there any drawbacks with IFRAMES

Mighty

 

[ChrisHunt]

Is that not the best way to do it?

I can't give a simple answer to that question. In general, fewer, larger images will take less time to load - because each time you request a new file there's an overhead to pay. However, it can seem slower if you have to wait for the big file to load before you see anything (that's why browsers tend to show the text first, btw).

A technique that canny designers use is to identify places where they can use repeating background images - you load a small image and tile it vertically, horizontally or both. Better still are places where you can define coloured blocks in your layout using CSS, without any images being involved. I think there's scope for both techniques on your site.

Web-safe fonts? Take a look at

http://www.codestyle.org/css/font-family/sampler-CombinedResults.shtml

for some suggestions, though be aware that the percentages cited are percentages of that site's visitors, which may not be representative of the web at large.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Mighty]

Thanks for the suggestions Chris. I will work on that. Basicaly I need to use CSS as much as possible and only use images where is is absolutely essential.

Any opinion on the IFRAME issue?

Mighty

 

[Vragabond]

I see no reason for an iframe. Zour visitors will have to wait for the images to load the first time they access your site -- with or without iframe. On subsequent visits (clicking links), either only content will change (iframe) or the whole page, with the images loaded from cache. In both cases, the user won't have to wait for the images to download on subsequent visits. Therefore I don't think you would save much by using an iframe.

As for loading the content after the pictures, I still cannot think of a smart reason why you should be doing that -- does it change experience if your pictures are loaded when text appears as opposed to otherwise?

 

[Mighty]

Thanks Vragabond. I appreciate the advice.

Mighty