JavaScript - Hide a Div at startup load

Question

I have a div in my php page that uses jQuery to hide it once the page has loaded  But is there a way to hide it from the very start of loadup   The reason I ask is because for a brief second  you can see the div when the page is loading  and then hides when the page is fully loaded   It looks unprofessional   Just wondering if there is a way around this   Thanks

User · Answer

Using CSS you can just set display none for the element in a CSS file or in a style attribute   div   display none     lt div id  div  gt  lt  div gt      lt div style  display none  gt  lt  div gt    or having the js just after the div might be fast enough too  but not as clean

User · Answer

Barring the CSS solution  The fastest possible way is to hide it immediatly with a script    lt div id  hideme  gt  lt  div gt   lt script type  text javascript  gt          hideme   hide     lt  script gt    In this case I would recommend the CSS solution by Vega  But if you need something more complex  like an animation  you can use this approach   This has some complications  see comments below   If you want this piece of script to really run as fast as possible you can t use jQuery  use native JS only and defer loading of all other scripts

User · Answer

I ve had the same problem   Use CSS to hide is not the best solution  because sometimes you want users without JS can see the div   The cleanest solution is to hide the div with JQuery  But the div is visible about 0 5 seconde  which is problematic if the div is on the top of the page   In these cases  I use an intermediate solution  without JQuery  This one works and is immediate     lt script gt document write   lt style gt  js hidden   display  none    lt  style gt     lt  script gt    lt div class  js hidden  gt This div will be hidden for JS users  and visible for non JS users  lt  div gt   Of course  you can still add all the effects you want on the div  JQuery toggle   for example  And you will get the best behaviour possible  imho      for non JS users  the div is visible directly for JS users  the div is hidden and has toggle effect

User · Answer

Why not add  display  none   to the divs style attribute   Thats all JQuery s  hide   function does

User · Answer

This method I ve used a lot  not sure if it is a very good way but it works fine for my needs    lt html gt   lt head gt         lt script language  JavaScript  gt      function setVisibility id  visibility        document getElementById id  style display   visibility             lt  script gt   lt  head gt   lt body gt       lt div id  HiddenStuff1  style  display none  gt      CONTENT TO HIDE 1      lt  div gt       lt div id  HiddenStuff2  style  display none  gt      CONTENT TO HIDE 2      lt  div gt       lt div id  HiddenStuff3  style  display none  gt      CONTENT TO HIDE 3      lt  div gt       lt input id  YOUR ID  title  HIDDEN STUFF 1  type button name type value  HIDDEN STUFF 1  onclick  setVisibility  HiddenStuff1    inline   setVisibility  HiddenStuff2    none   setVisibility  HiddenStuff3    none      gt       lt input id  YOUR ID  title  HIDDEN STUFF 2  type button name type value  HIDDEN STUFF 2  onclick  setVisibility  HiddenStuff1    none   setVisibility  HiddenStuff2    inline   setVisibility  HiddenStuff3    none      gt       lt input id  YOUR ID  title  HIDDEN STUFF 3  type button name type value  HIDDEN STUFF 3  onclick  setVisibility  HiddenStuff1    none   setVisibility  HiddenStuff2    none   setVisibility  HiddenStuff3    inline      gt   lt  body gt   lt  html gt

User · Answer

Use css style to hide the div     selector   display  none      or Use it like below   CSS    hidden   display  none      HTML   lt div id  blah  class  hidden  gt  lt  -- div content -- gt  lt  div gt    and in jQuery     function               blah   removeClass  hidden

[javascript] JavaScript - Hide a Div at startup (load)

Examples related to javascript

Examples related to jquery

Examples related to css

Examples related to html

Examples related to hide