-2

Iam positioning my div at the center of the page using below css code : 

.content{
 width:1000px;
 height:600px;
 margin:auto;
 margin-top:auto;
}

My Requirement :
I would like to implement the above in $(document).ready(function () {} using JQuery. Initially i will assign the div negative position and hide it. Then in document.ready i want to show it and animate the div assigning the above properties.

I tried to implement the same. I am able to assign width and height but margin:auto and margin-top:auto; is not working.

It will be very helpful if somebody can guide me..!!

This is what i am doing:
http://jsfiddle.net/rgd9mwjz/

I need to see the animation of div moving from -5550px to center of div. How to achieve this?

Kishore Kumar
  • 78
  • 6
  • Please create jsfiddle. Its difficult to understand. www.jsfiddle.net – Ankur Aggarwal Jan 05 '15 at 12:46
  • You can ref the below links http://stackoverflow.com/questions/5132323/aligning-a-div-to-center-of-page-while-its-position-is-absolute http://stackoverflow.com/questions/5012111/how-to-position-a-div-in-the-middle-of-the-screen-when-the-page-is-bigger-than-t – muhil varnan Jan 05 '15 at 12:47
  • with only css can be done too. – Jai Jan 05 '15 at 12:47
  • possible duplicate of [How to vertically center a div for all browsers?](http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) – sodawillow Jan 05 '15 at 12:54

3 Answers3

1

You don't need jQuery to center the item, I've used it to add a class on the div in my example, making it come from left to right :

$(function() {
    $("div").addClass("shown");
});
*
{
    margin: 0;
    padding: 0;
}

html, body
{
    height: 100%;
}

div
{
    top: 50%;
    left: -50%;
    background: darkred;
    width: 100px;
    height: 100px;
    position: relative;
    transform: translate(-50%, -50%);
    -moz-transition: .5s ease;
    -webkit-transition: .5s ease;
}

div.shown
{
    left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
sodawillow
  • 12,497
  • 4
  • 34
  • 44
  • I would like to use JQuery. I am planning to achieve some other functionality. – Kishore Kumar Jan 05 '15 at 13:03
  • I have used jQuery in my answer. Did you look at the result given by my answer ? Does it look like what you want ? – sodawillow Jan 05 '15 at 13:06
  • Your answer is absolutely fine. But i need to modify my jQuery code. I am looking for an answer related to that..!! – Kishore Kumar Jan 05 '15 at 13:11
  • You set styles with jQuery. To me a better approach is to manipulate (add, remove, toggle ) CSS classes (defined in your CSS stylesheet). 12 lines of JS, create a function to center HTML items, this is typical overkill to me. – sodawillow Jan 05 '15 at 13:47
0

I've found a interesting reply on this post Using jQuery to center a DIV on the screen

Hope it helps you!

Community
  • 1
  • 1
Ddd
  • 11
  • 3
  • Thanks David.. I saw this post earlier itself. What i want is the animation of the div. Please see the updated Question. – Kishore Kumar Jan 05 '15 at 13:04
  • I wd use the animate function of jQuery ( http://api.jquery.com/animate/ ) catching the values that the link I provided uses, and passing them in an array. Example: `$("#your_element_id").animate( { "position":"absolute", "top": Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) + "px", "left" : Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft()) + "px"}, 5000);` – Ddd Jan 05 '15 at 16:12
0

Check this DEMO:

http://jsfiddle.net/60c977nf/

$(document).ready(function()
{
   $('.content').css('display','block'); 
   $('.content').addClass('other_properties');
});

I have added a new class to the div .content on document ready state and specified the new styles in the css files. That would make it easier for you to write new styles using the css file itself.

If you want to add styles using jQuery itself then use .css() property itself.

Rahul
  • 346
  • 1
  • 19