CODEWITHSUNDEEP
jquerycss-position
user1104170
user1104170

Reputation: 41

Unable to set absolute position for my div's using jQuery

@Purmou

Hi, Please consider the following html5 file. The div's are still positioning at 0,0 and the borders are also not appearing. I have tried various changes to the enclosed but it does not seem to work.

Will really appreciate your help Purmou and all others reading this note. Regards, sbguy

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Absolute Positioning Test</title>
<style type="text/css">
html, body {
    position:absolute; 
    top:0;
    left:0;
    margin:0px;
    padding:0px 0px 0px 0px;
    height:100%;
    width:100%;
}
div {
    margin:0px;
    padding:0px 0px 0px 0px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/JavaScript">
var A_height = 100;
var A_width = 100;
var A_top = 20;
var A_left = 20;
var B_height = 100;
var B_width = 100;
var B_top = 200;
var B_left = 200;
jQuery("#A").css({ 
    "position": "absolute",
    "width": A_width + "px",
    "height": A_height + "px",
    "top": A_top + "px",
    "left": A_left + "px",
    "border": "1px solid black",
    });
jQuery("#B").css({
    "position": "absolute",
    "width": B_width + "px",
    "height": B_height + "px",
    "top": B_top + "px",
    "left": B_left + "px",
    "border": "1px solid black",
    });
</script>
</head>
<body>
<div id="A">
<p>HELLO A</p>
</div>
<div id="B">
<p>HELLO B</p>
</div>
</body>
</html>

Upvotes: 3

Views: 19706

Answers (1)

Purag
Purag

Reputation: 17061

Try using this:

jQuery("#div1A").css({
    "position":"absolute", 
    "top": $("#div1A").offset().top + "px",
    "left": $("#div1A").offset().left + "px",
});

EDIT: You apparently wanted to set the variables div1A_top and div1A_left as the top and left CSS values:

jQuery("#div1A").css({
    "position":"absolute", 
    "top": div1A_top + "px",
    "left": div1A_left + "px",
});

Upvotes: 9

Related Questions