Hide div class on page load

Question

Hello I have a sign up form which is visible and I am trying to hide it when the page loads. So what I did was to put the whole form in a div class named "signup" and then hide it with a script code.

UPDATE: html

<script>
  document.write('<div class="js">');
  </script>

<span class="button">Sign In</span>
<div id="signup">
<div class="modal-bg">
<div id="modal">
    <span>Sign In<a href="#close" id="close">&#215;</a></span>
    <form>
        <input id="username" name="username" type="textbox" placeholder="Username" required>
        <input id="password" name="password" type="password" placeholder="Password" required>
        <a id="forgot-link" href="#">Forgot password?</a>
        <button name="submit" id="submit" type="submit">Sign in</button>
    </form>
</div>
</div>
</div>
<script>
  document.write('</div>');
  </script>

My JS code (without hide function):

$('.button').click(function(){
          $('#modal').css('display','block');
          $('.modal-bg').fadeIn();
    });

        $('#close,.modal-bg').click(function(){
              $('.modal-bg').fadeOut();     
              $('#modal').fadeOut();
          return false;
        });

Even though the hide/appear seems to work the form goes hidden if I click on it. This is a problem as no one can sign up if they can't type/click on the form. (ISSUE FIXED)

here is the codepen (live version): http://codepen.io/mariomez/pen/WbgrNK

Answer 1

You are looking for a div with the id "signup", but that is the class name.

$(function() {
  $(".signup").hide();
});

Will hide the signup div when the page loads.

You could then use $(".signup").toggle(); on the button click event.

If you combine these, eg

$(function() {
  $(".signup").hide();

  $(".button").click(function() {
    $(".signup").toggle();
  });
});

Then the button displays the signup block correctly, and it is hidden on page load.

Answer 2

You hide the "signup" Div but try to restore the "modal" div

This works:

$('.button').click(function(){
      $('#signup').css('display','block');
      $('.modal-bg').fadeIn();
});

    $('#close').click(function(){
          $('.modal-bg').fadeOut();     
          $('#signup').toggle();
      return false;
    });

Answer 3

You don't need the signup div at all - I think it complicates things. Just start your modal background hidden so before your button click code add this:

$('.modal-bg').css('display','none');       

Example

Update

to stop your form showing up whilst your page loads I would add a js div:

after your body opening tag:

<script>
   document.write('<div class="js">');
</script>

before your body closing tag:

<script>
   document.write('</div>');
</script>

This allows you to apply js only style, in this case for the modal-bg:

.js .modal-bg {display:none;}

and then you can remove the above js to hide the modal as it will be now in your css

updated codepen

Answer 4

Here is the jQuery to change the CSS on page load:

$('.signup').css({
  'display': 'none'
});

Answer 5

First method (CSS) - CodePen

#signup {

     display: none;
}

Second method (jQuery) - CodePen

$('#signup').hide();

Answer 6

Looks like you already figured it out in your codepen paste? That code is different from your post...

Anyway, you have 3 layers of divs in your Login dialog:
#signup > modal-bg > modal

So if you want to hide #signup after loading the page:

$(function() {
  $("#signup").hide();
});

then you also need to show/hide #signup in your button events.

.modal-bg and #modal are child elements of #signup, so if you remain #signup in hidden, .modal-bg and #modal will always be hidden no matter what you do on them.

By the way, I suggest you to use FireBug or general developer tools (hit F12 in chrome/IE/FIrefox) to inspect HTML elements and check what goes wrong, at least that's how I found the problem in your code.