workaround to read proper dimension when display : 'none' - javascript

Are there any workarounds to read proper element dimensions when it's display value is set to none?
Well, one would be to hide it without changing the display, but visibility property instead. While it gives proper dimensions, the element affects document flow.
One more way I can think of is opacity, but then the browser support kicks in.
The element I'm working with is appended to body.
Oh yes, I'm looking for computed style. There are no static CSS properties set for dimensions etc.
Any other solutions?

When display is none, by definition elements non-block elements have no dimensions. (Thanks, #Pekka) One potential way around this is to position the element far off-screen by setting position: absolute and left: -999em. The element will still exist so you can get its dimensions, but it won't appear in the document and should not affect flow.

There is a way to do it with offsetHeight and javascript
<script type="text/javascript">
<!--
onload=function() {
var divh = document.getElementById('top').offsetHeight;
alert(divh +"px");
}
//-->
</script>

Related

Any way to change the width of an element in real time?

So Im trying to change the width of a specific element in real time. Meaning that as you scale the browser window, the element changes width along with it.
Now, the way im calculating this width is by using another element as a reference point. So i just basically copy the reference element's width and apply it to my own element. However the problem is that this is only applied after every page refresh instead of a real time change.
Im using the following jquery code:
$("#lists ul").css("width", $("#lists").width());
As you can see, the code is pretty simple. #lists ul is the elements whose width I am attempting to change and #lists is the reference element. My question is, is there a way to achieve this effect? or should I use a different approach? thanks for the help!
No need to use JavaScript to adjust widths. This should be all you need:
#lists ul { width: 100%; }
What you're trying to do sounds crazy. As others have pointed out, using a percentage in CSS is probably much smarter.
If you insist on doing it this way though... I'm guessing your event is firing within $(document).ready(). Instead, try this.
$(window).resize(function(){
$("#lists ul").css("width", $("#lists").width());
});
You can use a combination of JavaScript and CSS. I don't know what your specific needs are, but you can easily set the width of an object like this:
var element=document.getElementById("my_element");
element.style.width=10+"px";// Simple as that.
If you just want to scale your element based on its parent element's size, this is best done with CSS percent width and height.
CSS:
#my_element{
width:20%;
}
Then CSS takes care of all your scaling needs whenever the parent element is resized.
CSS by itself may not look like what you want it to be, but if you make sure to define all applicable CSS properties of your element (like margin, padding, border, etc...) and then bolster the layout with JavaScript, you can do quite a bit.

Getting a div's "scrollWidth" when it has an absolute positioned child-div

I have a problem getting the width of a div's content (of the content, not the div itself).
The usual approach would be Javascript's scrollWidth property, I think.
The problem: within this div, another div is positioned absolute and has a negative right value (-350px). I can't change this (it's a menu, sliding in when you click a button, overlapping other elements. It needs to be positioned like that).
The scrollWidth returns the width of the outer div's content PLUS the negative right-value (in Chrome, didn't test other browsers).
Here's a short example:
/* ... */
http://jsfiddle.net/R4Cs5/12/
But I need the content's width that is accessible by scrollbars.
Any ideas?
Please use Jquery, no plain Javascript.
Thanks in advance.
I see that your jsfiddle doesn't import any jQuery library, while you wanted to use it. Anyway, with jQuery you can use .width to get an element's width see here: jsfiddle.

How to make an element's height increase with every child added to it

I have a <div> that has children appended to it by a script. These children elements are automatically appended by a PHP script and positioned using position:absolute. I tried to give the parent <div> the style min-height:400px allowing the elements appended to the <div> to increase the parent's height. The only problem is that the height does not increase when I do this. Does anybody know what I can do to fix this?
EDIT: I am not able to use position:relative for positioning my elements. Are there any solutions that allow for position:absolute.
Yes you can use position absolute (yeee♥!)
LIVE DEMO TEST CASE
By simply doing:
$(this).height( this.scrollHeight );
or with pure JS:
this.style.height = this.scrollHeight ;
and adding this to your element's CSS:
overflow:hidden;
overflow-y:auto;
Edit:
The demo tested fine in IE10, Firefox, Chrome, Safari, and Opera.
The key point here is setting the overflow value for the x or y axis (whichever dimensions you need the size of) to auto, rather than the default value of visible. Then the scrollWidth or scrollHeight property can be used on the HTML DOM object to get the full size of the element, including any absolutely-positioned descendants.
Odd as it seems, this is entirely consistent with the fact that setting overflow:hidden for a container clips any absolutely-positioned descendants. Apparently, elements with position:absolute aren't quite as "out of the flow" as we've always been told :)
You should not use position: absolute for this because stuff that is positioned that way will be pulled out of the normal render flow. This results in the parent not noticing that its content s acually very high. Use position: relative for the child div's. This way the parent will grow automatically.

Width of an inline element

How do know width of an inline element, without adding to document?
With adding
var span = document.createElement('span');
span.innerHTML = 'Hello, world!';
span.offsetWidth; //0
document.body.appendChild(span);
span.offsetWidth; //70
How without adding to document?
Sorry for my english)
The width of an element does obviously depend on the styles used (e.g. on the font size), so it is impossible to compute the width of the element without knowing where it is in the DOM.
You may add it to some invisible element if you don't want it to show on the screen.
You cannot get a width of an element if the element itself is not part of the DOM.
You need to append it, but you may also position it outside the visible area (with position: absolute and a negative left/top property) and remove it once you got the width
Until the element is added, there's no way to know for sure how wide it is, because it depends on the styling context.
jQuery's width() method has a trick that it uses for display: none elements, I don't know if it will work for an element that hasn't even been added to the DOM (it works by temporarily showing the element, getting the width, then hiding it again).

Is it possible to get a width in px from a div in a html page, without this property being manually set?

Suppose I have a div in my page, that doesn't have a width property manually set.
A user can resize his window, and so this div has, visually, a new "size" (dynamic). Is this new size (in px value terms) available somewhere? Like, "div.getCurrentSize" or something like that?
So, is it possible to get this width value from this div using something like javascript?
Look at the jQuery dimensions methods, e.g.
var w = $('#id').width();
Also note that it's not usually possible to obtain the dimensions of any element that's hidden. If you set the display property to none then the dimensions will all read as zero.
outerWidth
Description: Get the current computed width for the first element in the set of matched elements, including padding and border.
How about the standard javascript
(obj).offsetWidth

Categories