I have to write a javascript function that is returning the current size (in px) of a div. Unfortunately the div has its weight specified in % instead of px.
The style of the div: position: absolute; width: 100%; height: 100%;
And my width returning function:
function getTableWidth(tableId){
var tabWidth = document.getElementById('pt1::tabb').children[0].children[0].style.width;
return tabWidth;
}
tabWidth is '100%'.
Is it possible to return the px width instead of the % width ?
NOTE: I don't have access to any html/css , as the page I am working on is generated through a complex framework. I can only embed javascript.
Each browser is different. In most you can use the clientWidth and clientHeight properties of the DOM element. In non-IE browsers you can use document.defaultView.getComputedStyle(). However I'd recommend using a framework that takes care of cross-browser issues for you. In jQuery, you can get the current width in pixels using something as simple as $(element).width().
node.offsetWidth
should do the trick (in all browsers!)
Related
I am having two grid one div is header another one is footer between the two grid, I am using sidebar in left side.
Here is my JavaScript code
function resize()
{
var heights = window.innerHeight;
document.getElementById("left").style.height = heights + "px";
}
resize();
window.onresize = function() {
resize();
};
I want to show this full content with in the page without show any browser scroll bar.
Here is my demo
Click here to see my demo
You can use pure CSS: there are a few ways to determine the behavior of CSS to adjust to screen size. I think that a good method for this is to use the viewport units: vw and vh, this will let you achieve responsive design easily...
vw stands for "viewport width" and vh is for "viewport height". and,
you can use it with CSS like in this example:
div {
width: 100vw;
height: 100vh;
}
This guide may be helpful to understand this method better...
You can also set px for pixels and other CSS sizing units instead of % and also use vmin and vmax for minimum and maximum size adjustment, or just use min-height/width like in this example:
.sidebar {
min-width: 30%;
min-height: 30%;
}
Another more modern way is to do it with flexbox...
Using Jquery:
You take the browser screen height
$(window).height()
& then reduce the height of header & footer
$(window).height() - $('header').outerHeight() - $('footer').outerHeight()
Using JS
window.innerWidth - document.getElementById('header').offsetHeight - document.getElementById('footer').offsetHeight;
Instead of offsetHeight you can also use clientHeight. Difference is:
clientHeight includes padding.
offsetHeight includes padding, scrollBar and borders.
Updated
Update your function resize() as:
document.getElementById('inner').style.maxHeight = window.innerWidth - document.getElementById('header').offsetHeight - document.getElementById('footer').offsetHeight;
Is there any way to check, if DIV with name for example "character" is overlaping DIV with name "ground" ?
I want to do this with clean Javascript, I know that jQuery is better, but that's what I don't want.
I saw this post: check collision between certain divs? , but it does not return anything.
Thanks for help.
First, I'd suggest you check out the HTML5 canvas element, as by the sounds of it, you want to make a game, and the canvas is great for that ;)
But, to answer your question, you could create or get div elements with document.createElement() or getElementById() respectively, and get their style properties either by getting their JS-set values (element.style) or use getComputedStyle if you'd prefer to set initial values in CSS.
Make sure that, however you get these CSS properties, they'll need to be parsed into something that JS can digest. For integer-based positions, parseInt() usually does the trick.
Next, you do the math. In this case, you'd want to see if the character div's top, plus its height, is greater than the top position of the ground. If it is, it has collided.
To set the style back to the div, you can just set the style property.
Here's an example (copied from this fiddle):
var character = document.getElementById("character");
var ground = document.getElementById("ground");
//We could use getComputedStyle to get the style props,
//but I'm lazy
character.style.top = "10px";
character.style.height = "40px";
ground.style.top = "250px";
//For every 33ms (about 30fps)
setInterval(function(){
//Get the height and position of the player
var charTop = parseInt(character.style.top),
charHeight = parseInt(character.style.height);
//and the top of the ground
var groundTop = parseInt(ground.style.top);
//linear gravity? Why now?
charTop += 5;
//If the character's bottom is hitting the ground,
//Stop moving
if(charTop + charHeight > groundTop) {
charTop = groundTop - charHeight;
}
//Set the character's final position
character.style.top = charTop + "px";
},33);
#character {
position: absolute;
width: 40px;
height: 40px;
left: 50px;
background-color: #F00;
}
#ground {
position: absolute;
width: 300px;
height: 60px;
left: 0px;
background-color: #A66;
}
<div id="character"></div>
<div id="ground"></div>
One more thing: While there are convoluted ways to get element positions when elements use different positioning properties (ex: the player uses top/left coordinates, where the ground uses bottom), it's a lot harder to manage.
The only jQuery that was being used in that linked answer was to get with width,height, and position of the divs, which are somewhat trivial to retrieve using pure JS:
CSS / JavaScript - How do you get the rendered height of an element?
jquery position() in plain javascript
How do I retrieve an HTML element's actual width and height?
It's not returning anything because the .top .left and height variables in the return statement were relying on jQuery functions that retrieve the information mentioned above.
How can i tell if a css property such as width ex: width:100% has px or % assigned to it.
in chrome for example if i have width:250px; and i do $('div').width() i get 250 whereas if i use percentage, i just get the width in px for the percentage based on my screen resolution.
This should work.
var value = $('#id').get(0).style.width;
var hasPx = value.indexOf('px') >= 0;
var hasPct = value.indexOf('%') >= 0;
JSBin: http://jsbin.com/asewit/2/edit#javascript,html
If by "css property" you mean css rule, and not inline style property set directly in the element, there is no fast way to get it. You'd have to:
Query all css rule declarations
Loop through every css rule and check if the element matches the
rule and push it into array
Loop through the candidates and take the latest width value, or the
latest width value with !important
If you mean inline style, it's so trivial it's hard to understand why the question got so many upvotes:
element.style.width and check if there is a px or % there
edit: here is incomplete demo for the css rule querying:
http://jsfiddle.net/Chjnd/1/
tested in google chrome and firefox
You can use .style.cssText, which contains the actual CSS code:
$("<div style='width:50px'>").get(0).style.cssText // "width: 50px; "
$("<div style='width:50% '>").get(0).style.cssText // "width: 50%; "
I have a HTML element but I have not defined the width or height (or sometimes I may not have defined the right or bottom, but I did define the width & height) in CSS.
Do you know how I can use JavaScript to obtain either an elements width or height or right or bottom if I haven't set it?
#blockMenu { z-index: 0; padding: 10%; }
If I do the following, I know it wont work because I didn't set the width or right:
var width = document.getElementById("blockMenu").offsetRight - document.getElementById("blockMenu").offsetLeft;
Is there anyway to determine the dimensions & position of a element when I haven't set it?
If not what if I define the width; how do I obtain the elements width through JavaScript?
With JavaScript you can do
document.getElementById("blockMenu").clientWidth;
document.getElementById("blockMenu").clientHeight;
With jQuery you can do
$('#blockMenu').width();
$('#blockMenu').height();
Check working example at http://jsfiddle.net/7jteV/2/
if you have the option to use jquery, you can use the height() and width() methods.
You can use jQuery as well
$("blockMenu").width()
$("blockMenu").height()
http://api.jquery.com/width/
http://api.jquery.com/height/
document.getElementById("blockMenu").style.width
document.getElementById("blockMenu").style.height
Should do the trick
I've searched around and couldn't find this. I'm trying to get the width of a div, but if it has a decimal point it rounds the number.
Example:
#container{
background: blue;
width: 543.5px;
height: 20px;
margin: 0;
padding: 0;
}
If I do $('#container').width(); it will return 543 instead of 543.5. How do I get it to not round the number and return the full 543.5 (or whatever number it is).
Use the native Element.getBoundingClientRect rather than the style of the element. It was introduced in IE4 and is supported by all browsers:
$("#container")[0].getBoundingClientRect().width
Note: For IE8 and below, see the "Browser Compatibility" notes in the MDN docs.
$("#log").html(
$("#container")[0].getBoundingClientRect().width
);
#container {
background: blue;
width: 543.5px;
height: 20px;
margin: 0;
padding: 0;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>
<p id="log"></p>
Ross Allen's answer is a good starting point but using getBoundingClientRect().width will also include the padding and the border width which ain't the case the the jquery's width function:
The returned TextRectangle object includes the padding, scrollbar, and
the border, but excludes the margin. In Internet Explorer, the
coordinates of the bounding rectangle include the top and left borders
of the client area.
If your intent is to get the width value with the precision, you'll have to remove the padding and the border like this:
var a = $("#container");
var width = a[0].getBoundingClientRect().width;
//Remove the padding width (assumming padding are px values)
width -= (parseInt(a.css("padding-left")) + parseInt(a.css("padding-right")));
//Remove the border width
width -= (a.outerWidth(false) - a.innerWidth());
Just wanted to add my experience here, though the question's old: The consensus above seems to be that jQuery's rounding is effectively just as good as an unrounded calculation -- but that doesn't seem to be the case in something I've been doing.
My element has a fluid width, generally, but content that changes dynamically via AJAX. Before switching the content, I temporarily lock the dimensions of the element so my layout doesn't bounce around during the transition. I've found that using jQuery like this:
$element.width($element.width());
is causing some funniness, like there are sub-pixel differences between the actual width and the calculated width. (Specifically, I will see a word jump from one line of text to another, indicating the the width has been changed, not just locked.) From another question -- Getting the actual, floating-point width of an element -- I found out that window.getComputedStyle(element).width will return an unrounded calculation. So I changed the above code to something like
var e = document.getElementById('element');
$('#element').width(window.getComputedStyle(e).width);
And with THAT code -- no funny bouncing! That experience seems to suggest that the unrounded value actually does matter to the browser, right? (In my case, Chrome Version 26.0.1410.65.)
You can use getComputedStyle for it:
parseFloat(window.getComputedStyle($('#container').get(0)).width)
Use the following to get an accurate width:
var htmlElement=$('class or id');
var temp=htmlElement[0].style.width;