CODEWITHSUNDEEP
jquerycssbrowserappendbrowser-width
egr103
egr103

Reputation: 3978

Get browser width and height append divs jQuery

I'm trying to get the browser width and height and append two different DIV's to two different positions using jQuery.

DIV ONE should be absolute positioned, 40px from the left and 40px from the bottom of the browser window whilst DIV TWO should be 40px from the right and 40px from the bottom, no matter what device is looking at the webpage (so must work on iPad, iPhone's etc.).

I also have content (images, child divs and text) sitting within both div's but I just haven't a clue how to approach this as I'm useless with jQuery.

Could anyone help me out with this?

Upvotes: 0

Views: 1466

Answers (3)

Faust
Faust

Reputation: 15394

You don't need jQuery for that (the positioning, at least). CSS has enough tricks.

Don't use absolute positioning, use fixed:

#div-1, #div-2 {position:fixed;}
#div-1 {left:40px; bottom;40px;}
#div-2 {right:40px; bottom;40px}

With position:fixed, the left, right, top, and bottom properties refer to how far the respective edge of the fix-positioned object is from the respective edge of the viewport.

...So it won't matter where you apped your divs. Just append them to the body:

var myDivsHtml = howeverYouGetYourDivs();
$('body').append(myDivsHtml)

Upvotes: 2

yoku2010
yoku2010

Reputation: 600

Try this:

$(function(){
    var $body = $("body");
    $("<div/>").css({
        "position":"fixed",
        "bottom":"40px",
        "left":"40px"
        }).appendTo($body);
    $("<div/>").css({
        "position":"fixed",
        "bottom":"40px",
        "right":"40px"
        }).appendTo($body);
});

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195972

I believe you are looking for fixed positioning and not absolute.

Just use CSS for this

.div1{
   position:fixed;
   bottom:40px;
   left:40px;
}
.div2{
   position:fixed;
   bottom:40px;
   right:40px;
}

Upvotes: 1

Related Questions