CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
Becky
Becky

Reputation: 2289

How to get popup to expand vertically up and down

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

https://jsfiddle.net/05w8fpL5/6/

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");
});

Upvotes: 1

Views: 1532

Answers (1)

A.Sharma
A.Sharma

Reputation: 2799

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.

Upvotes: 1

Related Questions