setting visibility vs. hide/show - javascript

What is the difference between element.css('visibility', 'visible') and element.show(). Also, what is the difference between element.css('visibility', 'hidden') and element.hide()?
Update: In addition, what is the most proper way to hide an element and all its elements' subtree?
Update N2: Which is the proper way to know if an element (and its subtree) is visible: element.is(':visible') or element.css('visibility')?
Update N3: Is there a way to hide an element (completely), but it still will reserve the space/area on the browser page? (as far as I've got it - the proper way would be to call hide() but it might lead to the page visual restructuring.

Visibility will still reserve the space in your Browser.
A hidden element is set to display: none thus all space occupied by this element collapses.
If you only set the element to visibility: hidden the element will just go transparent but the space is occupied as if the element is still there.
.hide() is equal to .css('display', 'none')
.show() is equal to .css('display', 'block') - I'm pretty sure jQuery does some magic here to decide if it's really block that should go in there but it's somewhat equal.
#Update:
Once you hide an element with .hide() (or .css('display', 'none')) all elements down the dom-tree that are children of that element will be hidden too.
#Update 2:
If you are using .hide() and .show() it's .is(':visible')
If you are using the visibility css attribute then .css('visibility')
#Update 3:
That's exactly what .css('visibility', 'hidden') does, it hides the element without the page restructuring. .hide() will completely "remove" the element.

jquery.hide() is equivalent to calling .css('display', 'none') and and jquery.show is equivalent to calling .css('display', 'block')
The .css() method is just setting the visibility property.
From the css point of view difference :
visbility : hidden
The value hidden makes the generated boxes invisible without removing them from the layout. Descendant boxes can be made visible. See this
display : none
A value of none makes the element generate no box at all. Descendant boxes cannot generate boxes either, even if their display property is set to something other than none.See this
With hidden the element is still generated.

Taken from w3schools.com:
visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.
display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as the element is not there:

In addition to bardiir's explanation here is good demo of "display:none" and "visibility:hidden"
http://www.w3schools.com/css/css_display_visibility.asp
"remove" button sets "display:none" and "hide" button sets "visibility:hidden".

They are setting 2 different css properties: hide/show sets the display property to none, show removes this setting so that the default is used (e.g. 'block' for a div).
The difference as the other answers point out is that calling hide on an element means that it (and all its ancestors) will not take up any space. Where as setting visibility to hidden will effectively just make the elements completely transparent (but still take up space).
For answers to your edits:
Hide all ancestor (this is automatically done with both methods).
Use element.is(':visible') since this performs a check on both the visibility and display properties and to see if the height and width aren't 0, it also performs it recursively on the ancestors, whereas element.css('visibility') just tells you the visibility of the element.
Setting element.css('visibility', 'hidden') will do this - not calling element.hide().

Related

How to getBoundingClientRect from a hidden element? (doesn't work on IE)

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.

Locate elements on the page using jQuery selector

I am currently using (e.g.) this in the console
> $("input[type='text']").css("background", "purple")
to highlight matched elements. However, this doesn't work well when those elements are hidden. Is there a good way of doing it?
EDIT: TO CLARIFY, I am only using the input tag as an example, and when I mean hidden I am talking about an element where it could be outside of the window, inside a hidden container, height 0, or whatever hard to find. Generally not visible basically, not just display: none;.
My concern is to locate all the matched elements for development purposes. This question is not about how to make something purple!
Maybe like that:
$("input[type='text'], input[type='hidden']").css("background", "purple")
You could show the hidden elements before trying to change the background.
$("input[type='text']").show();
$("input[type='text']").css("background", "purple")
If the parent is hidden, show the parent first, then change the background color.
$("input[type='text']").parent().show();
$("input[type='text']").css("background", "purple")
This should work:
$("input[type='text'], input[type='text']:hidden").
show().
css("background", "purple");

Can't get height of hidden div in Firefox

I'm trying to get the height of an initially hidden div element in Netscape and Firefox using javascript (it works fine in IE). I have tried using MyElement.scrollHeight, MyElement.offetHeight, MyElement.style.height and many different ways of setting the element initially visible, getting the height and then hiding it again. I keep getting a value of 0. Any thoughts?
Correct me if I'm wrong (Which I may be), but from doing some research, elements with display: none have no height.
To get the height, you would need to unhide them, get the height, then rehide them. Issues like this have popped up in the past like so:
jQuery: height()/width() and "display:none"
jQuery: Get height of hidden element in jQuery
(Both jQuery examples, but you get the point)
Hidden elements in Netscape is not accessible.
you can set that position with styling hole of div out of your screen. for example move it to -9999 on top left. then you can access that's attributes like height and width.
you can also visible that element and get your attribute and hide it again, but it is not usual because your element will be show a little bit of the second and user maybe feel jumping on screen.
you should position it by setting style to "absolute" and "top" to -9999px or more (depend of your project height) and then get your element height and width with DOM and anythings that you want ...

Dynamically hiding elements in a list without the hidden elements occupying empty space on the page

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;

How to prevent other elements changing, when changing style of element with same class

I am moving individual elements around using their style.top and style.left attributes. The issue is that when changing the style of one element it seems to change the style of others. What is an effective way to get round this?
I'm not sure why this happens, but I guess you selected the element by using a .class selector. Please make sure to select only one element. If you add / edit style-rules of that element, it does not change other elements sharing the element's classname.

Categories

Resources