Jump to content

Jquery Menu: Unwanted Display Before Loaded


AntiNeko
 Share

Recommended Posts

Hey all!Is there a simple way to hide the content of my website (javascript, in particular, but all might even be better) before it has been fully loaded?I have made my own jquery-button-hoover on fade-menu for my website, entirely based on an already existing example from CSSTricks dot com. Check it:My menu My menu, including the original one, takes about one or two seconds to load its display (or DIV? I am new). During this load time the menu's html text is displayed, which I really don't want visitors to see.I have made all kind of speed tweaks I could think if in order to make the load time slower, like putting all the code in one and single file and removing background images from the buttons (no linking what so ever seems to have the same load speed, but the whole thing saved on my comp has no startup load time), but it doesn't seem to make any difference.I respect any possible load time when it comes to this stuff, and I feel this suggestion I have is the easiest solution, so I basically only want to know if there is an answer to my question up above!Thank you all for your time!

Edited by AntiNeko
Link to comment
Share on other sites

Here's a basic example:

<html>  <head>	<title>Test</title>  </head>  <body>	<div style="display: none;" id="div1">text</div>	...		<script type="text/javascript">	document.getElementById("div1").style.display = "";	</script>  </body></html>

Edited by justsomeguy
Link to comment
Share on other sites

Gah - I only manage to hide everything I want to hide, but it is not shown when the page has finished loading. I really don't know much - could someone please check my html and locate any possible conflict? :)I do believe I don't understand where the getElementById-Javascript is supposed to be.

Edited by AntiNeko
Link to comment
Share on other sites

Alright, I think I've figured it out now! I thank you for bearing with me!But the menu is still displayed too fast, or the javascript that tells it to be displayed again is triggered to early (maybe set a timeout?)... Here's the current page: menu

Edited by AntiNeko
Link to comment
Share on other sites

Why don't you just style the menu to look like it does after jQuery transforms it? Then you won't have to mess around with hiding and showing stuff. You've also got a lot of HTML tags in your head section that don't belong there, those might be messing with things also.

Link to comment
Share on other sites

The thought did occur to me before, but I wasn't very used to CSS-styling at the time and didn't manage to make any progress... but now it's different, so thanks a lot much for bringing back the idea!This is good! However, the size of the background border (called "pagewrap") is configurable through the BaseStyle.css file, but only after the jQuery transform, and not before that. The inital text makes the pagewrap stay at a smaller size and then pop into the jQuery stage's size. (huge improvement overall, though!)

Edited by AntiNeko
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...