How to get popup to expand vertically up and down

Question

I have the following fiddle to show what I have for a pop up already...

I am looking for my pop up to expand in a vertical fashion up and down upon page load. An example would be on Facebook. When you click the 'more' link that is next to birthdays.

Ie- it will say:

John Smith and 5 more birthdays today

or something like that. If you click on that you will see the pop up display as a small rectangle and then expand to the whole thing and display the content.

How could I do that?

Right now I have my pop up displaying on page load.

$(document).ready(function () {
    // On Load Show
    $(".light_admin,.white_overlay").fadeIn("slow");

    // Set time Out 5 second
    setTimeout(function () { $(".light_admin,.white_overlay").fadeOut("slow"); }, 5000);
});

$('.admin_popup').on('click', function () {
    $(".light_admin,.white_overlay").fadeIn("slow");
});

$('.close_admin_popup').on('click', function () {
    $(".light_admin,.white_overlay").fadeOut("slow");
});

A.Sharma · Accepted Answer · 2015-09-04T06:23:29.300

1

I think I get what you're trying to do. First create a wrapper around the content. Hide both the content and the outside wrapper. You can achieve a stretching effect by increasing the padding of the top and bottom while at the same time, set a negative margin-top that is equal to the padding-top that you set. That way, you don't move the element while expanding it.

HTML

<div class="dashboard_welcome_help">    
<a class="admin_popup" href="javascript:void(0)">Click Here</a>

<div class="admin_help_popup light_admin">  

    <a class="close_admin_popup" href="javascript:void(0)">Close</a>
    <div class="wrapper">
      <div id="indexpopupTitleWrap">
        <div id="indexpopupTitle">Have Questions?</div>
      </div>
      <div id="contactMessageStatus"></div>
      <form id="admin_help_form" name="admin_help" action="" method="POST" autocomplete="on">
        <div id="admin_help_form_wrap">
            <input type="text" class="inputbar" name="name" placeholder="Full Name" required>
            <input type="email" class="inputbaremail" name="email" placeholder="Email" required>
            <textarea rows="4" cols="50" name="message" class="inputbarmessage" placeholder="Message" required></textarea>
            <label for="contactButton">
                <input type="button" class="contactButton" value="Send Message" id="admin_submit">
            </label>
        </div>
      </form>
      </div>
    </div>
<div class="white_overlay"></div>

</div>

JQuery

$(document).ready(function () {

    $(".light_admin,.white_overlay").fadeIn("slow",function(){
          $(".light_admin").animate({paddingBottom:'50px',paddingTop:'50px',marginTop:'-50px'},170);
     });
});

$('.admin_popup').on('click', function () {
    $(".light_admin,.white_overlay").fadeIn("slow",function(){
        $(".light_admin").animate({paddingBottom:'50px',paddingTop:'50px',marginTop:'-50px'},170);
        });
     });

$('.close_admin_popup').on('click', function () {
    $(".light_admin,.white_overlay").fadeOut("slow",function(){
                $(".light_admin").animate({paddingBottom:'0px',paddingTop:'0px',marginTop:'0px'},170);
        });
});

Fiddle

Take a note as to the marginTop values. If you change the paddingTop, you have to make the marginTop the negative of the value that you change to.

edited Sep 04 '15 at 06:23

answered Sep 04 '15 at 04:02

A.Sharma

2,771
1
11
24

That's somewhat like I want, but I want it to stretch up and down, but first appear smaller, then stretch. – Becky Sep 04 '15 at 04:36
1

Well which components do you want shown when it is smaller? Just `Click Here`? – A.Sharma Sep 04 '15 at 04:44
I really don't want to show anything in the pop up until it reached its full size. – Becky Sep 04 '15 at 04:46
1

I changed it so that it doesn't show until the outer box is stretched. Just use a callback function after opening the box. You can modify the "blind" effect to any jquery effect. – A.Sharma Sep 04 '15 at 05:04
How can I modify it so that it stretches both ways? – Becky Sep 04 '15 at 05:05
1

I'm not sure what you mean. Do you want to scale it from the center? Or do you want to stretch it down, then stretch it right? – A.Sharma Sep 04 '15 at 05:06
Yes I want it to scale from the center and then stretch vertically in terms of up and down. – Becky Sep 04 '15 at 05:08
1

Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/88750/discussion-between-a-sharma-and-becky). – A.Sharma Sep 04 '15 at 05:09
1

@Becky note that I updated the fiddle one last time. There was an issue with the effect not working when you clicked `Close`. I fixed that. – A.Sharma Sep 04 '15 at 06:24
Thanks. One last question when you can. How can I keep the close button in the corner? – Becky Sep 04 '15 at 06:29
Take a look at this: http://stackoverflow.com/questions/14012105/how-to-animate-css-translate Add a class that translatesY your close button in the call back of the fadeIn – A.Sharma Sep 04 '15 at 07:05

How to get popup to expand vertically up and down

1 Answers1