asked on

How do I hide these layers so they do not show when the page loads?

I have a page here:

http://hoosier.fireandrainhosting.com/product-gallery

that loads all the categories into hidden layers from a database.

There is a brief moment when you can see all the layers.

Is there a way to make these hidden so they do not show when it initially loads?

Any help would be most appreciated.

COBOLdinosaur

The page load is pure chaos. the number of http calls the server has to deal with is astronomical. The build of the DOM is conflicted because of all the bits being loaded, and with all the scripting images and css files to load there is no way of knowing what gets loaded first.

The browsers are trying to optimize by rendering what they think they have as all the pieces come in, then fixing it up as they understand more of the metadata. If it is critical, then I suppose you could load the page with out the images, and then after the layout has been established use AJAX to load the images in background into the hidden layers. Of course that could have a negative impact on the performance of other components on the page, but that is the price of bloat.

Cd&

Donnie Walker

ASKER

how would I do that?

Kyle Hamilton

are you hiding the layers with css or javascript?

Donnie Walker

ASKER

I do not know. I did not build this.

Kyle Hamilton

You will have to figure it out. There is a lot going on on this page.

Here's one suggestion:

You could use display:none; in the css on the results, then only show the one desired result using js.

Place your css files in the header, and your scripts at the bottom of the document. This helps to make sure the DOM is actually ready before js is executed.

If the items are hidden using css in the first place, they should not be visible as the page loads.

COBOLdinosaur

I do not know. I did not build this

Then you inherited a mess, and if you are going to have to work with it, I recommend you start by cleaning it up to something a little less complex and bloated. In doing so you will probably learn enough about it to fix it, and maintain it going forward.

Cd&

Jon Norman

Yes, there's quite a lot wrong with this page, but I don't think it's unfixable. It looks like several designers have worked on this in the past, each adding new javascript libraries, you need to look through the code and try to work out if you can do the same thing with less javascript libraries - I would start off by mapping out all the different bits of functionality in that page, then look to see if you can remove some of the javascript libraries and achieve the same result - removing all the older versions of jQuery is a good start.

InspectorSwagget

If you want to hide something through css you can do it quite easily using the opacity property. For example:

<!DOCTYPE html>
<html>
<head>
	<title>table bgcolor</title>
	<style type="text/css">
	#hideme{
		opacity:0;
	}
	</style>
</head>

<body>
	<div id="hideme">
		<p>If you can see this then the css isn't working :p</p>
	</div> <!-- End hideme -->
</body>
</html>

Open in new window

For more on opacity check here: http://www.w3schools.com/css/css_image_transparency.asp

Another thing you could do is change the position so it's not on the page. But this could lead to future complications with positioning that item:

<!DOCTYPE html>
<html>
<head>
	<title>table bgcolor</title>
	<style type="text/css">
	#hideme{
		position:absolute;
		top:-1000px;
		left:-1000px;
	}
	</style>
</head>

<body>
	<div id="hideme">
		<p>still hidden...</p>
	</div> <!-- End hideme -->
</body>
</html>

Open in new window

For more on positioning check here: http://www.w3schools.com/css/css_positioning.asp

Hope this helps and btw the markup is a bit cluttered. You might want to rehire another person to clean it up for you so it's easier to maintain in the future.

Kyle Hamilton

Don't use opacity. First, it's not supported in IE, second, the element will still occupy space in the DOM, it'll just be invisible.

You should use display:none to truly hide elements.

ASKER CERTIFIED SOLUTION

InspectorSwagget

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Donnie Walker

ASKER

thanks