This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
What is the difference between visibility:hidden and display:none
I am looking at examples to hide/show div tags using JavaScript.
In some examples, they use visibility and in some display.
e.g.
document.getElementById("divhotel").style.visibility = "hidden";
vs
document.getElementById("divhotel").style.display = "none";
What is the difference between the two?
When you set visibility to hidden, the element is not shown but still takes up the same space on the page.
When you get display to none, the element is neither shown nor does it take up any space on the page.
More often than not I find myself using display, but it depends on what your scenario demands.
visibility is how the element is rendered, the block where it exists is still laid out regardless of the value. Items might be pushed around because of that. display is how it is rendered to the page: block is div type elements, with a full box models; none element isn't rendered to the page at all; inline is an inline element such as a span or anchor tag.
Ah, beloved Google.
"style.visiblity makes the element visible or hidden, it is still rendered and takes up space on the page even if you can't see it. If you set style.display to "none" the markup is not processed and does not take up space on the page."
Related
I've found a way to getBoundingClientRect from a hidden element: Make its display style to initial so the browser can calculate properly. Then hide instantly the element so it never shows up to the user.
But it doesn't work on IE. It always returns 0.
How can I make this work on IE?
var element = document.querySelector('#foo');
console.log('Element is hidden', element.getBoundingClientRect());
element.style.display = 'initial';
console.log('Element shows for little time', element.getBoundingClientRect());
element.style.display = 'none';
<div id="foo" style="display: none;">Guess my size, I'm hidden !</div>
Sadly, IE doesn't support initial value (mdn). So the assignment does nothing, and the element remains hidden, that's why you get 0 as a resulting height.
But even if it did, it wouldn't have worked the way you expected: display: initial sets the universal initial value for display for all the affected elements - that's inline both for divs and spans. Here's little proof-of-concept of this behaviour.
Instead you have to cache the original value of display by your own code before hiding it. Actually, that's exactly what jQuery and other popular frameworks do with their implementation of .hide():
The matched elements will be hidden immediately, with no animation.
This is roughly equivalent to calling .css( "display", "none" ),
except that the value of the display property is saved in jQuery's
data cache so that display can later be restored to its initial value.
If an element has a display value of inline and is hidden then shown,
it will once again be displayed inline.
This might answer the question indirectly - another option if you need to getBoundingClientRect() for a hidden element is to hide it in a different way (other than display:none). Setting color and/or background-color to transparent, for example.
I've tried to find an answer for a long time but I didn't find anything.
I'm using contentEditable div to write a text exactly on 210x297mm page. When page ends javascript adds next one:
if(container.scrollHeight > container.clientHeight)
{
page_number = page_number+1
$('#editor').append('<div id="page_'+page_number+'" class="page" onkeyup="javascript:check_page(this);" contentEditable></div><div class="marginbottom"></div>');
$("#page_"+page_number).attr("tabindex",-1).focus();
}
Everything works fine, unless I paste any longer text inside the div at the end of each page. Then only the part of the text apears and the rest goes outside div (and because of 'overflow: hidden' is invisible).
Is there any javascript/jquery method to detect overflow's content and move it into the next page (I didn't find it) or any CSS style that will allow me to separate the text inside each div?
I've read about CSS3 multi-column and I need sth doing similar operations, but separating rows, not columns.
I think your best bet is to not use overflow: hidden but auto and try to detect with JavaScript if there's an overflow by checking for scroll height.
In this case you can dynamically start moving parts of the text (word by word maybe) until the content can fit the available space.
For some concrete techniques check this thread out for example: detect elements overflow using jquery
I need to wait for a certain object to load while it is hidden. But what appears to be happening, is that it only loads without the display:none;
I'm using jQuery, and I tried putting the .load on the object to call a function when it loads, but seems that it will not load, because it's hidden.
Is there a way of 'forcing' the load of the Object, or, another way to 'hide' but still loading?
How to do it correcly:
use visibility: hidden instead of display: none
as explained here: http://www.w3.org/TR/SVG/painting.html#VisibilityProperty
When the ‘display’ property is set to none, then the given element
does not become part of the rendering tree. With ‘visibility’ set to
hidden, however, processing occurs as if the element were part of the
rendering tree
Load it off screen, style="position:absolute;left:100000px"
How to doit correcly:
use visibility: hidden instead of display: none
as explained here: http://www.w3.org/TR/SVG/painting.html#VisibilityProperty
When the ‘display’ property is set to none, then the given element
does not become part of the rendering tree. With ‘visibility’ set to
hidden, however, processing occurs as if the element were part of the
rendering tree
thanks to #SomeKittens
It seems that an SVG will not be rendered if the element is set to display:none. It's possible to load every element individually with JS as shown in this answer.
I need to hide elements based on what a user does. if he presses "a only", I can say something like
for(i=0;i<document.getElementsByClassName("b").length;i++){
document.getElementsByClassName("b")[i].style.visibility="hidden";
}
but this will leave empty spaces between elements in the list (the invisible elements still occupy space), which looks bad, is there a better way this can be done.
try style.display="none"
Using visibilty="hidden", the elements will still take up their calculated space on the page.
You may also consider using jQUery. It makes tasks like these incredibly simple.
Yep. You are setting the visibility CSS property to hidden. This stops the element from being displayed, but it still occupies space.
You want to set the display property to be none. This removes it from being displayed, and stops it occupying space - effectively removing it from the document, at least as far as displaying it is concerned.
for(i=0;i<document.getElementsByClassName("b").length;i++){
document.getElementsByClassName("b")[i].style.display = "none";
}
Use display: none instead of visiblity: hidden. The visibility property only hides the element; the display property actually removes the element from the layout.
For visibility:hidden, the javascript parser will parse the elements css properties and hides, it actually exist on dom, but user cannot see.
For display: none, when javascript parser finds the element with display, it just ignore the element and it move ahead. So you have to user display: none;
This question already has answers here:
Calculate text width with JavaScript
(29 answers)
Closed 10 years ago.
Is there a way to find the width of text in Javascript (jQuery is used, so happy to take advantage of any functions they provide) for a hidden element?
I want to have a graph of nodes. Each node has text inside and I want the nodes to have a width that accommodates the text up to a limit. So I essentially create hidden <div>'s with some html inside. Then I use jQuery to display those <div>'s on the graph at the right spots. It's important that I know the correct width ahead of time so I can construct the graph properly.
UPDATE: Just to clarify, I need to know how wide some text is while it's hidden. Blender gave an answer below, I'm hoping there's a less tricky way?
What width do you mean? If you mean the <div> element's width, there's a handy function which does just what you need. Play with some of these:
$('#foo').width();
$('#foo').innerWidth();
$('#foo').outerWidth();
As for finding the width of a hidden element, I usually do this dirty trick:
var zIndex = $('#foo').css('z-index');
$('#foo').css('z-index', '-10');
$('#foo').css('position', 'absolute');
$('#foo').css('display', 'block');
var fooWidth = $('#foo').width();
$('#foo').css('display', 'none');
$('#foo').css('z-index', zIndex);
There must be a simpler way, though...
$('#txt').width()
http://jsfiddle.net/Detect/jk97D/
You can set the style of the divs to have no wrap white-space:nowrap (so, text is in one line) then get the width of each div, if more than the limit, set it to the limit and set the style to allow text wrapping `white-space:normal
Just throwing in a non-JQuery answer to this. Assume I have a work div with id myworkerdiv and i have put my text in already.
var myDiv document.getElementById('myworkerdiv'),
width = myDiv.clientWidth || myDiv.scrollWidth;
You can also find out height as well, if your so included (clientHeight || scrollHeight).
You could use something similar blender's method, but use the visibility css property rather than display. Visibility:hidden; keeps placement of the element, but just makes it invisible.