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>
Related
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.
could someone please explain why the following code, where I simply move a div to mouse click position, does work only if I remove the DOCTYPE tag ?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Prova</title>
<style>
.bbox{
width: 10px;
height:10px;
position:absolute;
background-color: orange;
}
</style>
</head>
<body onclick = "moves()">
<script>
function moves(){
var cordx;
var cordy;
var d;
var e = window.event;
d= document.getElementById('box');
cordx = e.clientX;
cordy = e.clientY;
d.style.left = cordx;
d.style.top = cordy;
}
</script>
<div class="bbox" id='box'></div>
</body>
</html>
CSS requires that lengths (other than 0) have units.
You are assigning integers to d.style.left and d.style.top.
If you forget the Doctype then the browser assumes the page was written in the 90s and emulates the bugs that browsers of that era had. Once such bug is treating an integer in CSS as a pixel value instead of an error.
Use + "px".
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
I'm trying to come up with a script that will have a number of thumbnails across (in width) the browser. I want it to be able to be flush and not have gaps on the sides. The thumbnails should always be the same size, and I'm guessing that the only way is the change the spacing between each image. But can someone help me out? Let me know if my question is unclear.
EDIT: here's an example: http://www.beautyineverything.com/
Thank you!
Something like this?
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<title>sandbox</title>
<meta http-equiv='content-type' content='text/html; charset=UTF-8'/>
<script type='text/javascript' src='js/jquery-1.6.1.min.js'></script>
<script type='text/javascript'>
var MAX_IMAGE_WIDTH = 240;
$(function(){
$(window).resize(resizeImages).resize();
});
function resizeImages() {
var containerWidth = $('.imageContainer').innerWidth();
var numberOfImages = Math.ceil(containerWidth / MAX_IMAGE_WIDTH);
var imageWidth = Math.ceil(containerWidth / numberOfImages);
var imageWidthLast = containerWidth - (numberOfImages - 1) * imageWidth;
$('.imageContainer .image').css('width', imageWidth);
$('.imageContainer .image:nth-child(' + numberOfImages + 'n)').css('width', imageWidthLast);
$('.imageContainer .image').each(function(){
$(this).text($(this).innerWidth());
});
}
</script>
<style type='text/css'>
.imageContainer {
border:1px solid black;
overflow:hidden;
}
.image {
width:160px;
height:160px;
float:left;
}
</style>
</head>
<body>
<div class='imageContainer'>
<?php
for ( $n = 10; $n < 30; ++$n) {
$backgroundColor = '#' . sprintf('%02x%02x%02x', $n * 8, $n * 8, $n * 8);
echo "<div class='image' style='background-color:{$backgroundColor};'></div>";
}
?>
</div>
</body>
</html>
Resizing images could be written in a bit smarter way so that instead of 223+223+223+223+223+223+223+216 they would be 223+222+222+222+222+222+222+222. For this, width of each column should be calculated individually, so that widths of columns vary only by 1px max.
This might sound primitive but tables were designed for something like this only.
one solution is to have a table and put your images as background-image of the cells. (or put it inside and give it a height and width 100%) Its is easy to keep control over the cell size and margins/padding.. that is why they were so popular for structural stuff.
Before ruling the idea out, do note that (apart form the fact that i HATE to use tables for designing and positioning stuff, but do not hesitate to use it for what it was meant to be) making tables will reduce the amount of code to be written. use css to size the cells and table. use inline to put background image. no js functions wat-so-ever.
please drop a comment if you disagree of if i am missing something :)
I want to put 3 parallel divs in html. div middle should be the width of 960px and center of the page, div left and div right will be both site of the div middle,the page min-width will be 1024px, when the browser's width is more than 1024px,div left and div right maybe width (100%-960px)/2 the overflow-x is hidden. When the browser's width is equal and less than 1024, div left and div right maybe width 32px ((1024-960)/2=32px), overflow-x is scroll(the page width show 1024px. I use this code,but it can not adjust the width unless refresh the page. How to do dynamic adjustment width and overflow-x?
Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
</head>
<body>
<style>
*{padding:0;margin:0;}
#box {min-width:1024px; _width:960px;}
#left {width:32px;float:left;background-color:blue;}
#middle {width:960px;float:left;background-color:red;}
#right {width:32px;float:left;background-color:green;}
</style>
<script>
$(document).ready(function() {
var width = document.body.clientWidth;
if(width>1024){
$('#box').css({
width:width + 'px'
});
$('#left').css({
width:(width-1024)/2+32 + 'px'
});
$('#right').css({
width:(width-1024)/2+32 + 'px'
});
}
});
</script>
<div id="box">
<div id="left">1</div>
<div id="middle">2</div>
<div id="right">3</div>
</div>
</div>
</body>
</html>
Try:
<script>
$(document).ready(function() {
var width = document.body.clientWidth;
windowResize(width);
$(window).resize(function() {
windowResize(width);
});
});
function windowResize(width) {
if(width>1024){
$('#box').css({
width:width + 'px'
});
$('#left').css({
width:(width-1024)/2+32 + 'px'
});
$('#right').css({
width:(width-1024)/2+32 + 'px'
});
}
}
</script>
You can do this by binding some javascript code to the resize event:
http://api.jquery.com/resize/