Menu
[CODE]
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Test</title>
<script src=”//code.jquery.com/jquery-1.11.0.min.js”></script>
<style>
*{
box-sizing:border-box
}
body{
padding: 0;
margin: 0;
}
div{
height: 100px;
padding: 15px;
width: 250px;
}
div:nth-child(odd){
box-shadow: inset 1px 1px 10px 1px rgba(0,0,0,.5);
}
div:nth-child(even){
background-color: #eee;
box-shadow: 1px 1px 10px 1px rgba(0,0,0,.5);
}
#find{
margin-left: 250px;
}
</style>
</head>
<body>
<div>
</div>
<div id=”find”>
</div>
<script type=”text/javascript”>
$(document).ready(function(){
var temp = $(‘#find’).offset().left;
console.log(‘offset is ‘ + temp);
});
</script>
</body>
</html>
when i am using the offset() method it correctly logs “offset is 250” , (check the above snippet)
when i use the position() method i correctly or incorrectly logs ‘offset is 0’ , .. why ??? (check the code below)
[CODE]
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Test</title>
<script src=”//code.jquery.com/jquery-1.11.0.min.js”></script>
<style>
*{
box-sizing:border-box
}
body{
padding: 0;
margin: 0;
}
div{
height: 100px;
padding: 15px;
width: 250px;
}
div:nth-child(odd){
box-shadow: inset 1px 1px 10px 1px rgba(0,0,0,.5);
}
div:nth-child(even){
background-color: #eee;
box-shadow: 1px 1px 10px 1px rgba(0,0,0,.5);
}
#find{
margin-left: 250px;
}
</style>
</head>
<body>
<div>
</div>
<div id=”find”>
</div>
<script type=”text/javascript”>
$(document).ready(function(){
var temp = $(‘#find’).position().left;
console.log(‘position is ‘ + temp);
});
</script>
</body>
</html>
the Jquery documentation says the following about the position() property :
[QUOTE]
The .position() method allows us to retrieve the current position of an element [COLOR=”#FF0000″]relative to the offset
[URL=”http://api.jquery.com/position/”]http://api.jquery.com/position/
when i read
[QUOTE]
relative to the offset
i just don’t get it , can somebody explain in a couple of sentences wht am i missing ??