AntiNeko Posted June 17, 2009 Share Posted June 17, 2009 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! Link to comment Share on other sites More sharing options...
justsomeguy Posted June 17, 2009 Share Posted June 17, 2009 Use the CSS display property to hide everything. You can have a Javascript function that runs on load to reset the display so everything shows up again. Link to comment Share on other sites More sharing options...
AntiNeko Posted June 17, 2009 Author Share Posted June 17, 2009 How would I go about doing this? I am very new at web design. Link to comment Share on other sites More sharing options...
justsomeguy Posted June 17, 2009 Share Posted June 17, 2009 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> Link to comment Share on other sites More sharing options...
AntiNeko Posted June 18, 2009 Author Share Posted June 18, 2009 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. Link to comment Share on other sites More sharing options...
justsomeguy Posted June 18, 2009 Share Posted June 18, 2009 At the end, right before the closing body tag. Each element you want to hide needs an ID, and you need one getElementById line for each element you want to show again. Link to comment Share on other sites More sharing options...
AntiNeko Posted June 18, 2009 Author Share Posted June 18, 2009 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 Link to comment Share on other sites More sharing options...
justsomeguy Posted June 18, 2009 Share Posted June 18, 2009 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 More sharing options...
AntiNeko Posted June 19, 2009 Author Share Posted June 19, 2009 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!) Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.