you can see for example in wikipedia here:
http://en.wikipedia.org/wiki/United_States
The second pargraph starting with "At 3.79 million square miles".
If you check the width of this pharagraph it will give you the full width including the width of the floating right element '.infobox'
http://imageshack.us/photo/my-images/38/54351130.jpg/
But I need to get the Exact width of the pharagraph displayed to the user (which is the pharagraph width - the infobox etc').
However assuming I have no idea that there is a floating element and I want javascript to calculate the exact displayed width of the contect.
Thank you.
Edit:
Here is an example to the problem:
http://jsfiddle.net/guy_l/sj3Zp/2/
Scrolling through the DOM I get the same results however the calculated witdh is different.
Here is your scenario with a jQuery solution which works fine:
<script>
// with all margins and paddings
var w1 = $('.c_2').outerWidth(true);
var w2 = $('.c_3').width();
alert ('Calculated width: ' + w2 + ' - ' + w1 + ' = ' + ( w2-w1) );
</script>
<style>
.c_1 {
border: 1px solid red;
}
.c_2 {
float: right;
width: 22em;
height: 200px;
margin: 0px 20px;
padding: 0px 20px;
border: 1p solid orange;
}
.c_3 {
border: 1px solid blue;
}
</style>
<div class="c_1">
<div class="c_2">
Infopanel
</div>
<p>
Some paragraph
</p>
<p class="c_3">
The interesting paragraph
</p>
</div>
Related
Say that I have this element on my page:
<div style="height: 1em;"> </div>
I want to use JavaScript to measure the height of the div to figure out how many px are equivalent to 1em for that element.
So if I did:
document.querySelector('div').getBoundingClientRect()
Then I might get 16.
But what if users can inject arbitrary styles onto this webpage? What if they do something like:
div { border: 1px solid black; }
Then I would get 18, because of the unexpected border applied to all div elements.
To avoid this, I could add a laundry list of styles to the div to remove potential "unexpected styles:"
<div style="border: 0; margin: 0; padding: 0; height: 1em;"> </div>
But is that list of styles comprehensive? If not, what other styles do I need? Or is there a better way to make this calculation?
Set the font-style: 1em !important; on the element, and get the font size in px using Window#getComputedStyle:
var fontSize = window.getComputedStyle(div).fontSize;
console.log(fontSize);
<div id="div" style="font-size: 1em;"></div>
My previous not bullet proof answer:
This fails if the user uses borders and/or paddings which height is greater than 16.
You can use box-sizing: border-box on the element. With this box sizing, the borders and the paddings don't increase the dimensions of the element. The content area is the original width/height minus any paddings and borders.
console.log(div.getBoundingClientRect().height);
div {
padding: 3px;
border: 2px solid black;
}
<div id="div" style="height: 1em; box-sizing: border-box;">
I'm trying to create an online image cropper where the user uploads a photo and it is displayed with a box (frame) that is changeable via buttons. Crops the photo and sends it back to the user.
I have a basic template of form uploader in php (working). It then displays the image in a div with another transparent div above it with a border marking the cropping area.
The initial values for the divs are set in the css section via php as the page is sent to the user. I'm trying to adjust the size of the frame div, as the width given is the image width +2 px for the frame (same for height) and it should just be the images width (-2 px).
This code should be working, but when the alerts pop up, they show that the frame width/height has not changed the original values, and it appears as though the frame does not change.
<!DOCTYPE html>
<head>
<style type="text/css">
html, body {
width: 500px;
height: 334px;
background-color: black;
}
.top {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
width: 500px;
height: 334px;
position: absolute;
background-color: transparent;
border-width: 1px;
border-style: solid;
border-color: white;
z-index: 999;
}
.bottom {
top: 0px;
left: 0px;
position absolute;
width: 500px;
height: 334px;
background-color: green;
// background-image: url(uploads/1505002267.jpg);
z-index: 998;
}
</style>
<script type="text/javascript">
function myOnLoad() {
var w = 500;
var h = 334;
var frame = document.getElementsByClassName('top')[0];
w = w - 2;
h = h - 2;
//frame.setAttribute("style", "width: " + w + "px;");
//frame.setAttribute("style", "height: " + h + "px;");
frame.style.width = w + "px;";
frame.style.height = h + "px;";
alert(frame.offsetWidth);
alert(frame.offsetHeight);
}
</script>
<title>Test Website</title>
</head>
<body onload="myOnLoad()">
<div class="wrapper">
<div class="bottom" id="image">
<div class="top" id="frame">
</div>
</div>
</div>
</body>
</html>
I am aware that I can change the value php gives to the css section, but I'm going to need to change the crop ratio in the next step anyway, so I need this way to work. Please help, I've been looking at this code for way too long.
Remove the semicolon in the quotes.
frame.style.width = w + "px";
frame.style.height = h + "px";
Also, offsetHeight and offsetWidth takes border into consideration. Since your border width is 1px, it adds 2px to both height and width of the image canceling out the subtraction with 2.
Read more about offset width and height on MDN.
I'm trying to align multiple divs in the center of a container div. I am using the modulus function to work out the padding needed from the left hand side of the page. Here is the JavaScript I am using:
JavaScript
window.addEventListener("resize", winResize, false);
var width, leftPad, space, boxWidth;
winResize();
function winResize() {
width = document.getElementById('body').offsetWidth;
boxWidth = 350 + 10 + 10;
space = width % boxWidth;
document.getElementById('a').innerHTML = width + '....' + space;
leftPad = space / 2;
document.getElementById('container').style.paddingLeft = leftPad + 'px';
document.getElementById('container').style.width -= leftPad;
};
The HTML is as follows:
<div id="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
And the CSS:
#container {
width: 100%;
float: left;
}
#container .block {
width: 350px;
height: 350px;
background-color: 4e4e4e;
float: left;
margin: 10px;
}
My problem is with this code, the padding on the left pushes the container div to the right, which makes the page wider than the window. I have tried removing the padding from the width of the container (in the bottom line of the winResize function) but this doesn't seem to do anything. Is there a way I can remove this "excess div" with CSS padding/margins?
What I can perceive is that you are trying to make container look in the center of your page, js is not required to do it and prefer not use js to position static elements in your page ever.
Here is the css you should use to make it come in center and fluidic
#container {
width: 100%;
text-align:center;
}
#container .block {
width: 350px;
height: 350px;
background-color: #4e4e4e;
display:inline-block;
margin: 10px;
}
Also you can see this fiddle : http://jsfiddle.net/ghFRv/
I would like to know if there is any reason why you want to CENTER an html element?
This is a CSS job and CSS does a very good job at it.
If you want to center your DIVS you could use margin: 0 auto; on the .block.
This would center your layout and keep the elements block level as well.
Your css would look like this:
#container {
width: 100%; /*Remove the float, it's not needed. Elements align top-left standard.*/
}
#container div.block {
width: 350px; /*Makes it possible for margin to center the box*/
height: 350px;
background: #4e4e4e; /*background is the shorthand version*/
margin: 10px auto; /*10px to keep your margin, auto to center it.*/
}
This should get rid of your problem, and makes your page load faster since theres no JS plus, the layout can never be "disabled" due to JS being disabled.
Hope this helped, if it did don't forget to upvote / accept answer
‐ Sid
This is my HTML code
<div class="container">
<div class="menu-vertical">menu-vertical</div>
<div class="mainContent">mainContent</div>
</div>
This is my CSS
.container {
border: 3px solid #666;
overflow: hidden
}
.menu-vertical {
width: 230px;
float: left;
padding: 10px;
border: 2px solid #f0f
}
.mainContent {
overflow: hidden;
padding: 30px;
border: 2px solid #00f
}
Now i want to make few div inside mainContent of fixed size lets say 150px however if the mainContent width became, lets say 650px then i'll be having 4 div in a row then again 4 in a row. So 4 div means it will be of 600px, hence i'll be having an extra 50px of space.
Now finally what exactly i want to do is to detect this empty space and making the mainContent max-width to 600px`. Any trick which can do this. Javascript or something.
Here is the solution using jquery:
$(function(){
var outerdiv = $('.mainContent');
var innerdivs = $('.mainContent > div');
var sum =0;
innerdivs.each(function(index){
sum += $(this).width(); //calculate and add the widths of every div
});
//outerdiv.width(sum); //set new width for .maincontent
outerdiv.css("max-width", sum); //you can also set max-width like this.
});
You can check out the jsfiddle for this here: http://jsfiddle.net/jqYK6/
Regards,
Saurabh
https://stackoverflow.com/a/10011466/1182021
Here is the link for the answer... after waiting for long i come up to this.
Let's say I have a parent div with a fixed width of 320px and I want to be able to (or I want my users to be able to) add any amount of child divs to the parent and have them all adjust automatically to share the width of the parent.
I don't want the parent width to change, nor do I want to do this with any sort of scrolling overflow - I just need for the divs inside to fit the width of the parent equally.
For example,
If there is only one child then the width is 100%, if there are two then their width is 50% each etc
How would I go about doing this?
I've approached this many different ways with css, but can't seem to figure it out. I'm assuming this has to be done with some sort of javascript, but I don't know enough to pull it off.
But, If it can be done with just css, that would be great.
Thanks in advance.
(Don't know if you'll need to know this, but the child divs will have no text. They're just blank with background-color and fixed height)
Example code:
CSS
.box {
margin: 10px;
background: white;
border-radius: 6px;
border: 1px solid darken(white, 12%);
-webkit-box-shadow: 0px 1px 4px rgba(50, 50, 50, 0.07);
-moz-box-shadow: 0px 1px 4px rgba(50, 50, 50, 0.07);
box-shadow: 0px 1px 4px rgba(50, 50, 50, 0.07);
float: left;
}
.line {
height: 6px;
opacity: 0.4;
-moz-opacity: 0.4;
filter:alpha(opacity=4);
margin-bottom: -1px;
float: left;
}
HTML
...
<div class="box">
<div class="line"> </div>
</div>
...
#will be able to add any amount of .lines
Use display: table (and table-layout: fixed with fixed width for container if you need equal-width columns) for container and display: table-cell for child elements.
Hope this helps!
<html>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script tye="text/javascript">
function resizeChildren( $div ){
var $children = $div.children(".child"); // Change .line to the appropriate class of the children
var $count = $children.length; // Determine how may children
var $width = $div.width(); // Get width of parent
var $cellwidth = Math.floor( $width / $count ); // Calculate appropriate child width
$children.width( $cellwidth ); // Apply width
}
function addChild( $div, $html ){
$( $html ).prependTo ( $div ); // Add a new child
resizeChildren ( $div ); // Call the resize function
}
$(document).ready( function(){
$("#add").click( function(){ // When <a id="add" is clicked...
addChild( $(".parent"), '<div class="child">Random...</div>' );
return false;
});
});
</script>
<style type="text/css">
.parent {
width: 500px;
border: 1px solid #000;
}
.child {
float: left;
}
</style>
<div class="parent" style="width: 500px;">
<div class="child">Random...</div>
<br clear="all" /></div>
Add DIV
</body>
</html>
Some browsers require also rule font-size:0px to show DIV which height is below 1em, otherwise their height will be 1em.
EDIT
There has came more info while I was writing my answer. If that table lay-out is working, answer to the last comment is above. I removed the part of my answer considering positioning, because I missunderstood your question also.