Avatar of Donnie Walker
Donnie Walker
Flag for United States of America 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.
CSSjQueryJavaScript

Avatar of undefined
Last Comment
Donnie Walker

8/22/2022 - Mon
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?
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
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&
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
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.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
ASKER CERTIFIED SOLUTION
InspectorSwagget

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Donnie Walker

ASKER
thanks