I am trying to calculate the div positioning. This is my code .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
.content {width: 60%;
position: relative;
text-align: center ;
top: 150px;
left:300px;
right:450px; border-style: solid;
border-width: 5px;
}
</style>
</head>
<body>
<div class="content">
Testings content
</div>
<script>
function ReadDivPos() {
var content = document.getElementsByClassName('content');
for (i = 0; i < content.length; i++) {
console.log("Top " + content[i].getBoundingClientRect().top) //top
console.log("left " + content[i].getBoundingClientRect().left) //left
console.log("right " + content[i].getBoundingClientRect().right) //right
console.log("offsetWidth " + content[i].offsetWidth); //width
}
var _divPos = "LEft "+content[0].getBoundingClientRect().left + ",Width " + content[0].offsetWidth + ",Avail Width " + window.screen.availWidth + ",Right " + content[0].getBoundingClientRect().right;
return _divPos;
}
console.log(ReadDivPos());
</script>
</body>
</html>
This code works fine when the page is not resized but when the page is resized and horizontal scroll bar appears on the screen then it doesnot work fine. How can i get the exact positions of the div if the page is resized or not. For example these are the images i have captured to explain the problem .
When the page is resized and scroll bar is at the extreme right then left positioning of div shows 208px which is wrong and it should be 311 px .
When i move the scroller on the left and then i calculated the width using Chrome MeasureIT add on then it says 311px.
I want to get the exact positioning of the div.I am using class of the div to get the positioning as i am not using div id and i only had to use the class so this is how i have done it but it is not working when the page is resized. Any help?
Since you already have jQuery loading in the page, take a look at the jQuery offset() and position() methods and leverage jQuery selectors.
<script>
function ReadDivPos(selector) {
var _divPos = "";
$(selector).each(function() {
var p = $(this).offset();
var w = $(this).width();
console.log("Top " + p.top) //top
console.log("left " + p.left) //left
console.log("right " + p.left + w) //right
console.log("offsetWidth " + w); //width
_divPos += "Left " + p.left + ",Width " + w + ",Avail Width " + window.screen.availWidth + ",Right " + (p.left + w) + "\\n";
});
return _divPos;
}
console.log(ReadDivPos(".content"));
</script>
Related
Consider the code below. This code returns the absolute position of the mouse when hovering over the div tag.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<p>This example demonstrates how to assign an "onmousemove" event to a div element.</p>
<div onmousemove="myFunction(event)"></div>
<p>Mouse over the rectangle above, and get the coordinates of your mouse pointer.</p>
<p id="demo"></p>
<script>
function myFunction(e) {
var x = e.clientX;
var y = e.clientY;
var coor = "Coordinates: (" + x + "," + y + ")";
document.getElementById("demo").innerHTML = coor;
}
</script>
</body>
</html>
Now, I'd like to use div.offsetLeft inside the function in order to calculate the relative mouse position. The problem is, if I try doing something like:
<script>
function myFunction(e) {
var x = e.clientX - this.offsetLeft;
var y = e.clientY - this.offsetHeight;
var coor = "Coordinates: (" + x + "," + y + ")";
document.getElementById("demo").innerHTML = coor;
}
</script>
I get an error. The this is not referencing the div tag, but something else... Any ideas on how to solve this?
I've got an issue with the element position properties, in particular the 'left' property. I've created a grey block shape in css and rotated it by 0.17rad in js. I want to move the block diagonally across the screen so that it moves a distance of 3px for every 20 milliseconds. If you use your good old SOHCAHTOA and pythagoras laws, that comes out to 0.5075470472px in the left direction and 2.956754301px in the upwards direction every 20ms.
html:
<html lang='en'>
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='.css'>
</head>
<body>
<div id='block'></div>
<script src='.js'></script>
</body>
</html>
css:
#block {
width: 19px;
height: 31px;
position: absolute;
background-color: grey;
}
js:
var block = document.getElementById('block');
block.style.left = '0px';
block.style.top = '500px';
block.style.transform = 'rotate(0.17rad)';
setInterval(function() {
block.style.left = (parseInt(block.style.left) + 0.5075470472) + 'px';
block.style.top = (parseInt(block.style.top) - 2.956754301) + 'px';
}, 20);
What happens in my case is the block moves correctly in the upward direction but doesn't move at all in the left direction. Any thoughts?
parseInt is rounding the numbers, what you need is to use parseFloat:
block.style.left = (parseFloat(block.style.left) + 0.5075470472) + 'px';
block.style.top = (parseFloat(block.style.top) - 2.956754301) + 'px';
I have a parent div with sub div which are dynamically created by it's height and width. In my hand I have top left,margin top from parent div.But the problem is for first one it's working fine. When I place a second div, the margin top is getting calculated from the first sub div instead of parent div.
Here is my code:
$('#Droppable').append(
'<div id="PlaceHolder' + PlaceholderId + '" style="height:' + HeightInPx +
'px;width:' + Widthinpx + 'px; background-color:black;color:white;text-
align:center;color:yellow;margin-left:' + X + 'px;margin-top:' + Y + 'px;">'
+ PlaceholderName + '</div>'
);
$('#Droppable').append(
'<div class ="child-divs"
id="PlaceHolder' + PlaceholderId + '"
style="height:' + HeightInPx + 'px;width:' + Widthinpx + 'px;
background-color:black;color:white;
text- align:center;
color:yellow;
margin-left:' + X + 'px;
margin-top:' + Y + 'px;">'
+ PlaceholderName + '</div>'
);
#Droppable{
position : relative;
}
#Droppable > div.child-divs {
position : absolute;
top :
bottom :
left :
right :
}
Please fill top, bottom, left, right with values as per your requirement.
To make the second div calculate position in relation to the parent div and not by its position in the children make its position absolute and the parent's relative
#Droppable{
position : relative;
}
#Droppable > div {
position : absolute;
}
And please, either remove the id from child element or make it unique.
I have a few elements positioned in my HTML. The body has a max-width from 1280px with margin auto. And there are a few elements, which I floated right. In the middle of the page there should be 70 images go from left to right (and then dissapear). I have tried to make those elements position absolute with display: inline, but since the start and the end position should always be the same, and the images have a width and a height, I didn't know how to make it dynamically.. Thats my code so far:
HTML
<body>
<h1>Sweets</h1>
<div class="images"></div>
<div id="display"></div>
<div class="clear"></div>
<div id="maracons"></div>
<div id="cupCake"></div>
</body>
JQUERY
for (var i = 0; i < 10; i++) {
$('.images').append('<img class="image' + i.toString() + '" src="img/' + arr[i][5] + '">');
}
CSS
$leftPos: 1100px;
$widthImage: 200px;
.images{
width: $widthProducts;
height: 200px;
position: absolute;
left: 1100px;
top: 0px;
}
.image-1{
left: $leftPos;
}
.image-2{
left: $leftPos - $widthImage;
}
.image-3{
left: $leftPos - $widthImage*2;
}
Here is how it looks like:
Confusing question but from what I gather you want the images to have dynamic height/width when you are appending them? If so what do you want to make the width/height equal?
If thats the case here is the answer:
var imgWidth = 10, imgHeight = 10;
for (var i = 0; i < 10; i++) {
imgWidth = 100; //Set width
imgHeight = 100; //Set height
$('.images').append('<img style="width:' + imgWidth +'px!important; height:' + imgHeight + 'px !important; " class="image' + i.toString() + '" src="img/' + arr[i][5] +'">');
}
the !important keyword will force the width/height specified to ignore the width/height specified in the class..
sorry if this is not what you mean, a jsfiddle would be great.
UPDATE
Check this fiddle:
http://jsfiddle.net/xP8Qb/
Here is the kinda thing you were looking for:
$(document).ready(function () {
var endpoint = 800; //you can set left+top endpoints and ref them in loop below..
for (var i = 0; i < 3; i++) {
var html = '<div class="imgs img'+i+'"></div>';
setTimeout(function() {
$('.images').append(html);
$('.images>.imgs:last').animate({"left" : "300px"}, endpoint);
}, i * 1000);
}
});
i can work on it more if needed, but hopefully this is enough to put you on the right track..
Okay, I'll be the first to admit that i'm quite terrible when it comes to css, but I try... :D
I have this JS Function which I use to create rounded corners using images, instead of the standard div in div in div way. I know there are better ways, but this is how i've done it:
function applyHorizontalImageCornersSpecific(div, left, middle, right, leftWidth, rightWidth, height, type) {
var title = div.html();
div.html("");
div.append('<div>' + title + '</div>');
div.css("position", "relative");
div.css("z-index", "2");
div.prepend('<img src="' + left + '" style=" position:absolute; width:' + leftWidth + ';z-index:-1;"/>');
div.prepend('<img src="' + middle + '" style=" position:absolute;z-index:-2; width:100%; height:' + height + '; "/>');
//div.prepend('<div style="position:relative; margin-left:' + leftWidth + ';margin-right:' + rightWidth + ';"><img src="' + middle + '" style="position:absolute;z-index:-2; width:100%; height:' + height + '; "/></div>');
div.prepend('<img src="' + right + '" style=" position:absolute; width:' + rightWidth + '; right:0px;z-index:-1;"/>');
div.css("height", height);
}
div is the div object being passed to the function $("#divid") for example.
left, middle and right are the image locations.
leftwidth, rightwidth and height are pretty self explanitory.
Now the problem - Using IE 8, the div(which is a rounded title bar) draws perfectly when using the commented out line
div.prepend('<div style="position:relative; margin-left:' + leftWidth + ';margin-right:' + rightWidth + ';"><img src="' + middle + '" style="position:absolute;z-index:-2; width:100%; height:' + height + '; "/></div>');
and the active line
div.prepend('<img src="' + middle + '" style=" position:absolute;z-index:-2; width:100%; height:' + height + '; "/>');
But IE 7 only works with the active line.
The left and middle images are drawn in IE 7 but not the right image and the div content(title).
The active line for both IE 7 and IE 8 renders the left and right images usless as they both(left and right) sit over the center image, so any transparency only shows the center image and not the body background.
Any and All help is, as usual, really appreciated.
If you're not aware of this already, there is a rather elegant way in CSS to create a rounded corner:
-moz-border-radius: 15px; /* where the 15px is the degree of rounding */
border-radius: 15px;
This is only supported in newer browsers (IE7, for example, will still have square borders).
Additionally, I noticed you said that this was for a rounded title bar. Wouldn't it be easier if you just used a photo-editing software like GIMP or PS to create a rounded image? This would solve the problem of cross-browser compatibility as well as the problem of obtrusive JavaScript not gracefully degrading (if JavaScript is disabled, the user does not get the image!)
While i'm sure this won't help anyone - for completeness my solution was to set the z-index on the appended div instead of the passed div:
function applyHorizontalImageCornersSpecific(div, left, middle, right, leftWidth, rightWidth, height, type) {
var title = div.html();
div.html("");
div.append('<div style="z-index:5">' + title + '</div>');
div.css("position", "relative");
div.prepend('<img src="' + left + '" style=" position:absolute; width:' + leftWidth + ';z-index:-1;"/>');
div.prepend('<div style="position:relative; margin-left:' + leftWidth + ';margin-right:' + rightWidth + ';z-index:-2;"><img src="' + middle + '" style="position:absolute; width:100%; height:' + height + '; "/></div>');
div.prepend('<img src="' + right + '" style=" position:absolute; width:' + rightWidth + '; right:0px;z-index:-1;"/>');
div.css("height", height);
}