The following code is a sample from w3schools.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var x = $("p").offset();
alert("Top: " + x.top + " Left: " + x.left);
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>Return the offset coordinates of the p element</button>
</body>
</html>
it is possible to get offset right and offset bottom using jquery?
Link :
https://jsfiddle.net/0hhxdbk5/1/
var right = ($(window).width() - ($element.offset().left + $element.outerWidth()));
var bottom = $(window).height() - top - link.height();
This should do it.
Related
I'm trying to add javascript in html. But the javascript part didn't work. Here is my full html. Firstly I did it in jsfiddle. It works fine in jsfiddle. I just copy the code and put inside the code.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<title>Merhaba Dünya!</title>
<script>
var sum = 0;
$("#scroll li").each(function() {
sum += $(this).width() + parseInt($(this).css('paddingLeft')) + parseInt($(this).css('paddingRight'))
});
$("#scroll").css('width', sum);
$("#holder").mousemove(function(e) {
x = -(((e.pageX - $('#scroll').position().left) / $("#holder").width()) * ($("#scroll").width() + parseInt($("#scroll").css('paddingLeft')) + parseInt($("#scroll").css('paddingRight')) - $("#holder").width()));
$("#scroll").css({
'marginLeft': x + 'px'
});
y = -(((e.pageY - $('#scroll').position().left) / $("#holder").width()) * ($("#scroll").width() + parseInt($("#scroll").css('paddingTop')) + parseInt($("#scroll").css('paddingBottom')) - $("#holder").width()));
$("#scroll").css({
'marginTop': y + 'px'
});
});
</script>
<link rel="stylesheet" type="text/css" href="ornek.css" />
</head>
<body>
<div id="holder"><ul id="scroll">
<div class="si"></div>
<li><div class="si"></div></li><ul> <li><div class="si"></div></li><ul>
<li><div class="si"></div></li><ul>
</ul><div class="si"></div><div class="si"></div><div class="si"></div>
</ul></div>
</body>
</html>
Add your script at the end of the HTML or in a document.ready function.
You try to reach selectors which are not yet loaded.
I am looking to get a method to dynamically get scroll position height instance as long as I scroll page, update CSS as well.
I used this snippet, however the value of bodyHeight is fixed on first page load, not updating while scroll and the CSS as well.
var bodyHeight = $('body').scrollTop();
var fixedTop = bodyHeight - 50;//(50)topnav height
$('.fixed-inner').css('top', fixedTop + 'px');
Try with something similar to:
<!DOCTYPE html>
<html>
<head>
<style>
div#main{
background-color:green;
}
</style>
</head>
<body>
<br /><br /><br /><br />
<div id="main" style="height:300px; position:relative; overflow:scroll;">
<div class="stairsImage" style="height:500px; width:300px; background-color:yellow; ">
<h1 id="testName">Lorem Ipsum</h1>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
<script>
$(document).ready(function() {
//-------------------------
$(window).scroll(function(){
var wScroll = $(this).scrollTop();
console.log(wScroll);
$("#testName").css({'transform' : 'translate(0px, '+ wScroll +'px)'});
});
//-------------------------
$("div#main").scroll(function(){
var wScroll = $(this).scrollTop();
console.log(wScroll);
$("#testName").css({'transform' : 'translate(0px, '+ wScroll +'px)'});
})
});
</script>
</body>
</html>
Try this
var bodyHeight = $(window).scrollTop();
var fixedTop = bodyHeight - 50;//(50)topnav height
$('.fixed-inner').css('top', fixedTop + 'px');
I hope this helps you
$(window).scroll(function () {
//You've scrolled this much:
$('div').text("The scrool position is " + $ (window).scrollTop() + " pxs");
});
jsFiddle here
good luck :)
You need to recalculate the bodyHeight when you scroll the page, and there is an jquery event for that, and you can have bodyHeight as a global variable.
var bodyHeight = $('body').scrollTop();
$(window).scroll(function () {
//recalculate the value every time the user scroll
var bodyHeight = $(window).scrollTop();
//doSomething()
});
further reading:
How do I determine height and scrolling position of window in jQuery?
Get scroll position using jquery
If I want to include the margin when measuring the width of an element I may call element.outerWidth(true); However, I can't find a similar way to get the left offset of an element in a container, where the margin is included. element.position().left doesn't include margin.
I've tried element[0].getBoundingClientRect().left, and that works but is there a similar jquery call?
EDIT:
It seems that the native javascript call above doesn't give me the margin either..
This is a limitation of jQuery's .position(), which has this limitation:
Note: jQuery does not support getting the position coordinates of hidden elements or accounting for borders, margins, or padding set on the body element.
Recommended solution:
var position = $element.position();
x = position.left + parseInt($element.css('marginLeft'), 10);
y = position.top + parseInt($element.css('marginTop'), 10);
Use Jquery offset() function
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>offset demo</title>
<style>
p {
margin-left: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hello</p><p>2nd Paragraph</p>
<script>
var p = $( "p:last" );
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
</script>
</body>
</html>
I'm currently trying to clone an element and to position it under (or above) the original one simply adding the styles "position: absolute" and "zIndex -1", but it doesn't work.
I tried to check the position before and after the append: it actually changes without no explanation. I mean that I expect the position to remain the same of the cloned object.
So why .append() changes the position of an element cloned in jquery?
Thanks in advance for the help :)
<!DOCTYPE html>
<head>
<title>jQuery Test</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" language="javascript">
function clicked() {
var $pulsante_temp = $("#button1").clone();
$("#div2").html("top: " + $pulsante_temp.position().top + " left: " + $pulsante_temp.position().left);
$pulsante_temp.css({
"position" : "absolute",
"zIndex" : "-1"
});
$("#div1").append($pulsante_temp);
$("#div2").html($("#div2").html() + " After append: top: " + $pulsante_temp.position().top + " left: " + $pulsante_temp.position().left);
$pulsante_temp.animate({
top: "-=10px"
}, 1000);
}
</script>
</head>
<body>
<button id="button1" onclick="clicked()" style="z-index: 1;">TEST</button>
<div id="div1" style="height: 30px;"></div>
<div id="div2"></div>
</body>
</html>
how to get [x,y] position related to the clicked div border?
this position of the clicked box is random , the example bellow is only one situation. I want to get click point position related to the clicked div , how to do it in js ?
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>img click positon</title>
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.clickbox').bind('click',function(e){
// how to get [x,y] positon relatived to div.clickbox ?
// console.log(x,y);
})
});
</script>
<style type="text/css">
*{margin:0;padding:0}
.page{margin:0 auto; width:940px}
.box{width:200px; margin:0 auto; margin-top:10%}
.clickbox{width:100%; height:230px;background-color:tan;}
</style>
<div class="page">
<div class="box">
<div class="clickbox"></div>
</div>
</div>
</body>
</html>
$('div.clickbox').click(function(e) {
var offset = $(this).offset();
console.log("X: "+e.clientX - offset.left);
console.log("Y: "+e.clientY - offset.top);
});
<script type="text/javascript">
$(function(){
$('.clickbox').bind('click',function(e){
var offset = $(this).offset();
alert(e.clientX - offset.left);
alert(e.clientY - offset.top);
})
});
</script>
e.pageX and e.pageY
You also find the offset- and the screen-coordinates in the event object