Results 1 to 5 of 5
Like Tree1Likes
  • 1 Post By JosAH

Thread: Vertical centering with jquery

  1. #1
    williamhlane3 is offline Member
    Join Date
    Jul 2016
    Posts
    2
    Rep Power
    0

    Default Vertical centering with jquery

    Hello I am trying to center a div vertically with javascript and jquery but it is new perfect can anyone tell me why this does work?

    <!DOCTYPE html>
    <html>
    <head>
    <style>





    .signinmenudd {
    position: absolute;
    display: inline-block;

    }

    .logindropdiv {

    display: none;
    position: absolute;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    background-color: #f9f9f9;


    }
    .centerdiv {
    width: 200px;
    height: 200px;
    margin: auto;
    position: relative;

    }
    .show {
    display:block;
    }




    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    </head>
    <body>

    <button onclick="usersignin()" class="signin">Dropdown</button>



    <div id="signindiv" class="logindropdiv">


    <div id="centerdiv" class="centerdiv">
    <button onclick="usersignin()" class="signin">X</button>
    <form action="demo_form.asp">
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="submit" value="Submit">
    </form>

    </div>
    </div>


    <script>

    function usersignin() {


    document.getElementById("signindiv").classList.tog gle("show");
    var signInDivHeight = $("#signindiv").height();
    var centerDivHeight = $("#centerdiv").height();
    var finaltop = (signInDivHeight - centerDivHeight ) * .5;
    finaltop = finaltop + 'px';
    $("#centerdiv").css({ top: finaltop });

    }

    </script>

    </body>
    </html>

    Thank you to anyone who replies.
    Last edited by williamhlane3; 07-15-2016 at 06:31 AM.

  2. #2
    JosAH's Avatar
    JosAH is offline Moderator
    Join Date
    Sep 2008
    Location
    Voorschoten, the Netherlands
    Posts
    14,422
    Blog Entries
    7
    Rep Power
    28

    Default Re: Vertical centering with jquery

    Note that this is a Java forum; not a Javascript forum ...

    kind regards,

    Jos
    Build a wall around Donald Trump; I'll pay for it.

  3. #3
    SurfMan's Avatar
    SurfMan is offline Godlike
    Join Date
    Nov 2012
    Location
    The Netherlands
    Posts
    1,995
    Rep Power
    9

    Default Re: Vertical centering with jquery

    It's not even a javascript question, but CSS. Go read The complete guide to centering a div

    Last edited by SurfMan; 07-15-2016 at 09:32 AM.
    "It's not fixed until you stop calling the problem weird and you understand what was wrong." - gimbal2 2013

  4. #4
    williamhlane3 is offline Member
    Join Date
    Jul 2016
    Posts
    2
    Rep Power
    0

    Default Re: Vertical centering with jquery

    Sorry I for some reason it was a JavaScript forum, as for you surf man your a retard if you read the script you would see that the vertical centering is done withJavaScript. I got it to work and your retarded response did not help.

  5. #5
    JosAH's Avatar
    JosAH is offline Moderator
    Join Date
    Sep 2008
    Location
    Voorschoten, the Netherlands
    Posts
    14,422
    Blog Entries
    7
    Rep Power
    28

    Default Re: Vertical centering with jquery

    Quote Originally Posted by williamhlane3 View Post
    Sorry I for some reason it was a JavaScript forum, as for you surf man your a retard if you read the script you would see that the vertical centering is done withJavaScript. I got it to work and your retarded response did not help.
    I strongly disagree here: the link supplied by SurfMan clearly explains how to center divs with just a bit of css. I'm closing this thread now, because it has nothing to do with Java and your attitude doesn't belong here either.

    Jos
    trcooke likes this.
    Build a wall around Donald Trump; I'll pay for it.

Similar Threads

  1. Centering form in Netbeans
    By drimades in forum AWT / Swing
    Replies: 2
    Last Post: 03-08-2012, 08:48 AM
  2. centering an applet
    By smithdennis4 in forum New To Java
    Replies: 1
    Last Post: 09-22-2011, 12:44 AM
  3. Centering withen a JPanel
    By RKhadder in forum New To Java
    Replies: 2
    Last Post: 10-01-2010, 08:00 PM
  4. component centering
    By BigBear in forum AWT / Swing
    Replies: 3
    Last Post: 01-24-2010, 11:48 PM
  5. Centering inside a JFrame
    By kahaj in forum AWT / Swing
    Replies: 9
    Last Post: 09-23-2009, 07:23 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •