[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 577
  • Last Modified:

jQuery: Position from top of window

How can I position my element from the top of the window instead of the top of its parent?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Demo</title>

<style type="text/css">

#xyz {
position: relative;
top: 100px;
left: 100px;
width: 300px;
height: 300px;
border: 1px solid red;
padding: 20px;
text-align: center;
}

#xyz h2 {
position: absolute;
background: #ffeeee;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

</head>
<body>

<div id="xyz">

<h2>Hello</h1>

Hi There!

</div>

<script type="text/javascript">
/* <![CDATA[ */

$('#xyz h2').css('top','10px');
alert('I want the h2 to be positioned 10px from the top of the window, not 10px from the top of its parent.'); 

/* ]]> */
</script>

</body>
</html>

Open in new window

0
hankknight
Asked:
hankknight
  • 4
  • 3
  • 3
  • +2
2 Solutions
 
Greg AlexanderLead DeveloperCommented:
Take out the

top: 100px;
left: 100px;

in your #xyz style
0
 
jrm213jrm213Commented:
I think you want

position: absolute;

instead of

position: relative;



0
 
hankknightAuthor Commented:
Thanks, but I think you both misunderstood my question.  

I cannot change anything about #xyz

I want to control the top position of $("#xyz h2" ) without making any changes to its parent.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
David S.Commented:
The "position:relative" declaration given to "#xyz" creates a new positioning context. If you can't remove that declaration, then you would need to give a negative value to the top property of "#xyz h2", e.g. "-90px".
0
 
hankknightAuthor Commented:
OK, then how can I find out what negative number to use to get my element to 10px from the top of the window?
0
 
David S.Commented:
0
 
hankknightAuthor Commented:
I tried using offset but I must be doing something wrong.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Demo</title>

<style type="text/css">

#xyz {
position: relative;
top: 100px;
left: 100px;
width: 300px;
height: 300px;
border: 1px solid red;
padding: 20px;
text-align: center;
}

#xyz h2 {
position: absolute;
background: #ffeeee;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

</head>
<body>

<div id="xyz">

<h2>Hello</h1>

Hi There!

</div>

<script type="text/javascript">
/* <![CDATA[ */

$('#xyz h2').css('top', (0 - $(window).offset.top + 10) + 'px' );
alert( (0 - $(window).offset.top + 10) + 'px'); 

/* ]]> */
</script>

</body>
</html>

Open in new window

0
 
David S.Commented:
Change

$(window).offset.top

to

$('#xyz h2').offset().top
0
 
hankknightAuthor Commented:
Thanks.  Now it positions the h2 slightly above the window.  I want it 10px below the top of the window.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Demo</title>

<style type="text/css">

#xyz {
position: relative;
top: 100px;
left: 100px;
width: 300px;
height: 300px;
border: 1px solid red;
padding: 20px;
text-align: center;
}

#xyz h2 {
position: absolute;
background: #ffeeee;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

</head>
<body>

<div id="xyz">

<h2>Hello</h1>

Hi There!

</div>

<script type="text/javascript">
/* <![CDATA[ */

$('#xyz h2').css('top', (0 - $('#xyz h2').offset().top + 10) + 'px' );

/* ]]> */
</script>

</body>
</html>

Open in new window

0
 
leakim971PluritechnicianCommented:
what about :
var topParent = $("#xyz").css("top").replace(/\D/g,"");
	$('#xyz h2').css({ "top": (-topParent + 10 ) + "px" });

Open in new window

0
 
leakim971PluritechnicianCommented:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Demo</title>

<style type="text/css">

#xyz {
	position: relative;
	top: 100px;
	left: 100px;
	width: 300px;
	height: 300px;
	border: 1px solid red;
	padding: 20px;
	text-align: center;
}

#xyz h2 {
	position: absolute;
	background: #ffeeee;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>

<div id="xyz">

<h2>Hello</h2>

Hi There!

</div>

<script type="text/javascript">
/* <![CDATA[ */

$(document).ready(function() {
	var topParent = $("#xyz").css("top").replace(/\D/g,"");
	$('#xyz h2').css({ "top": (-topParent + 10 ) + "px" });
	//alert('I want the h2 to be positioned 10px from the top of the window, not 10px from the top of its parent.'); 
});

/* ]]> */
</script>

</body>
</html>

Open in new window

0
 
leakim971PluritechnicianCommented:
Thanks for the points!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 3
  • 3
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now