• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 584
  • 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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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