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>
Related
I want to get the X coordination of the button to the root document like in picture.
I try to use offsetLeft of JQuery, but it only return the x of current frame :
$(window).on('click',
function(e){
console.log("x: " + e.target.offsetLeft);
}
);
http://i.imgur.com/Fdfr31x.jpg
So I want to know that is there a method to get direct the x in situation like that ?
Try
$("button").on('click', function()
{
// Your code
});
In this case, the x value will be 8 as the default margin of the body is 8px.
$("button").on('click',
function(e) {
console.log("x: " + e.target.offsetLeft);
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Button</button>
Add a javascript to each file:
$(window).on('click',
function(e) {
console.log(getLeft()+e.target.offsetLeft);
}
);
function getLeft() {
if (window.parent!=window) {
var result="foo";
$(window.parent.document).find("iframe").each(function() {
if ($(this)[0].contentWindow==$(window)[0]) {
result=this.offsetLeft+window.parent.getLeft();
}
});
if (result!="foo") return result;
}
return 0;
}
A sample of an html containing test2.html would be:
<html>
<head>
<style>
iframe {
position: absolute;
left: 50%;
top: 0px;
width: 50%;
height: 100%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="test.js"></script>
</head>
<body>
<button>foo</button>
<iframe src="test2.html"></iframe>
</body>
</html>
This works by getting the position of the iframe from the parent.
Feel free to comment on this if you have any questions :)
P.S. <frame> is obsolete/deprecated. The example is using <iframe>.
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.
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 want to bind the content of a span element (that is the current position of the element).
Problem: when I change the element position, angular doesn't update the value of the ng-bind attribute.
This is my html:
!doctype html>
<html lang="en" ng-app="exempleApp">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery2.1.4.js"></script>
<script src="jquery-ui.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="exempleApp.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.movable { width: 150px; height: 150px; padding: 0.5em; background- color: green;}
</style>
<script>
$(function() {
$( ".movable" ).draggable(
{
drag: function(){
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
var thisId = $(this).attr('id');
$('#' + thisId + ' .posX').text(xPos);
$('#' + thisId + ' .posY').text(yPos);
}
}
);
});
</script>
</head>
<body ng-controller="imgController as ctrl">
<div id="1" class="ui-widget-content, movable" >
<p>Drag me around</p>
<span class="posX" ng-bind="ctrl.presentation.images[0].posX"></span>
<span class="posY" ng-bind="ctrl.presentation.images[0].posY"></span>
</div>
<div id="2" class="ui-widget-content, movable" >
<p>Drag me around</p>
<span class="posX" ng-bind="ctrl.presentation.images[1].posX"></span>
<span class="posY" ng-bind="ctrl.presentation.images[1].posY"></span>
</div>
<div >
<span ng-bind="ctrl.presentation.images[0].posX"></span>
<span ng-bind="ctrl.presentation.images[0].posY"></span>
</div>
</body>
</html>
And this is my exempleApp.js:
(function() {
var app = angular.module("exempleApp", []);
app.controller('imgController', function(){
this.presentation = pres;
});
var pres = {
images: [
{
posX: "0",
posY: "0"
},
{
posX: "0",
posY: "0"
}
]
};
})();
Thanks for the help
https://docs.angularjs.org/api/ng/directive/ngBind
Typically, you don't use ngBind directly, but instead you use the
double curly markup like {{ expression }} which is similar but less
verbose.
Try this:
<span class="posX">{{ctrl.presentation.images[1].posX}}</span>
Full explanations Databinding in AngularJS
I may have misunderstood your question. It's my understanding that ng- bind binds the value of the html to the value of the object. That is, it's going to read the value from the object, not set it. So when the object changes, the html gets updated. Not the other way around.
#Veo
<p>drag.html</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dragger</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui.js" type="text/javascript"></script>
<script src="js/angular.js" type="text/javascript"></script>
<script src="js/drag.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
.movable { width: 150px; height: 150px; padding: 0.5em; background- color: green;}
</style>
<body ng-app="exempleApp">
<div ng-controller="imgController">
<div id="1" class="ui-widget-content movable" drag>
<p>Drag me around</p>
<span class="posX">{{presentation.images[0].posX}}</span>
<span class="posY">{{presentation.images[0].posY}}</span>
</div>
<div id="2" class="ui-widget-content movable" drag>
<p>Drag me around</p>
<span class="posX">{{presentation.images[1].posX}}</span>
<span class="posY">{{presentation.images[1].posY}}</span>
</div>
<div>
<span>#1 .movable = </span>
<span ng-bind="presentation.images[0].posX"></span>
<span ng-bind="presentation.images[0].posY"></span>
</div>
<div>
<span>#2 .movable = </span>
<span ng-bind="presentation.images[1].posX"></span>
<span ng-bind="presentation.images[1].posY"></span>
</div>
</div>
<script>
$(function() {
$( ".movable" ).draggable();
});
</script>
</body>
</html>
<p>drag.js</p>
var app = angular.module("exempleApp", []);
app.controller('imgController', function($scope){
$scope.presentation = pres;
});
app.directive('drag', function(){
return {
link: function(scope, element, attrs){
//initial position
scope.presentation.images[attrs.id-1].posX = element.position().left;
scope.presentation.images[attrs.id-1].posY = element.position().top;
//position after drag
element.on('drag', function(){
scope.presentation.images[attrs.id-1].posX = element.position().left;
scope.presentation.images[attrs.id-1].posY = element.position().top;
console.log(scope.presentation.images[attrs.id-1]);
scope.$apply();
})
}
}
})
var pres = {
images: [
{
posX: "0",
posY: "0"
},
{
posX: "0",
posY: "0"
}
]
};
<p>Note changes: - 1)created a drag directive.then apply it to div.movable.
2)initial position will give you position of draggable div on page load.
3)scope.$apply(); plays important role here without this values will not be apply changes. for more information about $apply visit $apply
<p>if you have any problems just ask me</p>
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