[RESOLVED]How a DIV can appear at the center of the page from bottom-right side of browser window

i want when i will click on a button then a div will be created dynamically at the bottom-right side of browser window with zero height & width and gradually move to center of the page and height and width will increase along with movement. anyone can help
me with code. thanks

I have created JS fiddle for this - http://jsfiddle.net/Arindamnayak/vbu6o071/

Include jquery to following html snippet.

<input type="button" value="initiate" onclick="start()" />
function start()
    var ht= window.screen.availHeight/2;
    var wd = window.screen.availWidth/3;
    $("body").append("<div id='dv'>NEW DIV</div>");
    $("#dv").css("top",ht +"px");
    $("#dv").css("left",wd +"px");
    $("#dv").animate({left: '-=150', top: '-=200'}, 1000);

Hi mou_inn,

As arindamnayak said, you could use the
JQuery animate()
function. You could set the location of the div by using left and top property. Like this.

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
        function CreateDiv() {
            var ht = window.screen.availHeight;
            var wd = window.screen.availWidth;
            //In my machine, ht: 860, wd: 1600
            $("body").append("<div id='dv'>NEW DIV</div>");
            $("#dv").css("position", "absolute");
            $("#dv").css("width", "100px");
            $("#dv").css("background-color", "#98bf21");
            $("#dv").css("top", ht - 100);
            $("#dv").css("left", wd - 100);

            //The left and top are used to control the position of the div.
            //And, the height and width are used to control the size of div.
            $("#dv").animate({ left: '-=850px', top: '-=450px', height: '+=100px', width: '+=200px' }, 1000);

<input type="button" value="initiate" onclick="CreateDiv();" />

Best Regards,

Leave a Reply