Place Jquery animate box to middle of the page

Question

In my user.php page I've a button called PARTICIPATE. After click on this button it's showing a POPUP box with a Register Form using Jquery Reveal Plugin (for popup). Now I validate this form with Jquery Plugin. After validation is complete I'm sending the request to Php suing Jquery/Ajax method. After successfully register I get the response and showing the success message on this POPUP BOX by hiding the html form. After few second the POPUP box will disappear.

Everything is ok now but the POPUP BOX with success message is now showing exactly to the top of the window. I want to show it at the middle or little bit lower. Can you please tell me How can I do this ?

My code is following : (This is the function which animate the popup box to top)

<script>
function scrollToElement(selector, callback){
    var animation = {scrollTop: $(selector).offset().top};
    $('html,body').animate(animation, 'slow', 'swing', function() {
        if (typeof callback == 'function') {
            callback();
        }
        callback = null;
    });
}
</script>

This is the code which validate the form and I'm calling the scrollToElement method :

<script>
$(document).ready(function() {  
    // validate signup form on keyup and submit
    $("#campaign").validate({
    submitHandler: function(form) {
        $.ajax({
            url: form.action,
            type: form.method,
            //async: false,
            data: $(form).serialize(),
            beforeSend : function (){
              $('input[type=submit]').attr('disabled', true); 
            },
            success: function(response) {
            $('#formError').html(response);
            $(form).hide();
            //return false;

            scrollToElement('#myModal2');

            setTimeout(function() {
            $('input[type=submit]').attr('disabled', false); 
            location.reload();
            }, 5000 );  


            }            
        });
    },

        rules: {
            phone: "required",
            postal: "required",
            suburb: "required",
            state: "required",
            pcode: "required",      
            terms : "required",
            terms1 : "required",                

            purpose: {
                required: true,
                maxlength: 150
                },
            workforce: {
                required: true, 
                maxlength : 150
                },
            plan_implement : {
                required: true, 
                maxlength : 150
                },                      
        },
        messages: {
            terms : "Required",
            terms1 : "Required",

            phone : "Required",
            postal: "Required",
            suburb: "Required",
            state: "Required",
            pcode: "Required",
            purpose: {
                required: "Required",
                maxlength: "Only 150 characters allowed"
                },
            workforce :  {
                required: "Required",
                maxlength: "Only 150 characters allowed"
                },
            plan_implement :  {
                required: "Required",
                maxlength: "Only 150 characters allowed"
                },

        }
    });


});
</script>

Html form

<div id="myModal2" class="reveal-modal3">
//my html form....
</div>

http://stackoverflow.com/questions/210717/using-jquery-to-center-a-div-on-the-screen check this out — Joe Thomas, May 05 '14 at 05:30
@wateriswet is there any way to add a css code to that function so that It will show in the middle of browser ? — Babu, May 05 '14 at 05:57

score 0 · Answer 1 · answered May 05 '14 at 06:08

0

You can use the css calc() Command! e.g. This only works if there is a fixed height and width

        height:300px;
        width:100px;
        position:absolute;
        left:calc(50% - 50px);  //the 50px is half your width
        top:calc(50% - 150px);  //the 150px is half your height
        background-color:blue;

Fiddle Here

answered May 05 '14 at 06:08

Joe Thomas

4,226
5
22
34

ok..please go to this link.http://pauseforsafetycom.ipage.com/index.php and login with test@yahoo.com and 123456789. Then you will redirect to another page. Scroll the page to bottom. You can see a button called "PARTICIPATE in the campain". Click on it and fill up the form. After Submit it you can see the result which I'm asking. – Babu May 05 '14 at 06:11
I didn't get a success message. – Joe Thomas May 05 '14 at 06:15
where you don't a get a success message ? – Babu May 05 '14 at 06:16
After I signed up for a kit – Joe Thomas May 05 '14 at 06:16
Ok. the message is showing on top of window. When you press the kit the just scroll up the window. Then you can see that success message. Please refresh the page and try again. Note: After Refresh you will re-direct to home page. then please click on view kit button on the right side of the page. – Babu May 05 '14 at 06:19

Place Jquery animate box to middle of the page

1 Answers1