I have a problem - I want to DELETE the div's rather than just hide them with css on my web page. I'm newbie in Javascript and I can not say for sure whether this is but I think that should be used function removeChild(). Here's the script:
http://jsbin.com/ufoyor/edit#javascript,html/
It works like this:
1) "X" button hide pronto and crossClose divs due to the fact-purpose style of "hidden" these blocks.
2) The script sets a specific value in a cookie if the value matched the block is not shown (with style = "visibility: hidden;").
Yes, you can remove the element together with its subtree with removeChild().
However, for I suggest setting style display: none. It won't display at all (won't occupy the space as visibility:hidden does).
In plain JavaScript use removeChild(): https://developer.mozilla.org/En/DOM/Node.removeChild
In jQuery you have method remove(): http://api.jquery.com/remove/
Related
Short Version: Is it standard behaviour that myDiv.style.display (Javascript) returns blank when I have set that div to display:none in a master stylesheet, yet returns "none" when it is set via an inline style?
Long Version:
I have some divs that I hide and unhide via their display style, toggling it with Javascript between block and none. They always start off hidden (display:none) which I have been setting with inline styles thusly:
<div id="anID" class="aClass" style="display:none">
stuff
</div>
Here is the Javascript to toggle between none and block. The two chOpsXXX() functions just set the divSection.style.display to the opposite value (along with other housekeeping):
var divSection = document.getElementById("chOpsSection" + strSectionID);
var strDisplay = divSection.style.display;
if (strDisplay == "none") {
chOpsDisplaySection(strSectionID);
} else {
chOpsHideSection(strSectionID);
}
This all works fine when I use an inline style attribute to set the initial display:none style.
I am also setting other styles for these divs in master stylesheet. So I decided it might make sense to move the initial state of display:none to said stylesheet. I did so. I won't post it, I think you can picture it.
But when I did so, the div is initially hidden (display:none), but the first call to divSection.style.display returns an empty string (alert(strDisplay); returns a blank string, not null).
My Javascript shown above then hides it (becaues it doesn't equal "none") and then the next call to divSection.style.display returns "none" and everything works fine from there. (Same behaviour if I set it to inline in the master stylesheet: the div is initialy visible, and the first call to divSection.style.display returns a blank string).
This is easy enough to fix by checking for both "none" and "" in my Javascript above. But I would like to know if this returning of a blank string from divSection.style.display is standard behaviour.
All replies are welcome.
If you access to a DOM Element via JS(using for example getElementById) you'll not be able to read the computed style of that element, because it is defined inside the CSS file. To avoid this, you have to use property getComputedStyle(or currentStyle for IE).
function getStyle(id, name)
{
var element = document.getElementById(id);
return element.currentStyle ? element.currentStyle[name] : window.getComputedStyle ? window.getComputedStyle(element, null).getPropertyValue(name) : null;
}
Usage(JSFiddle):
var display = getStyle('myDiv', 'display');
alert(display); //will print 'none' or 'block' or 'inline' etc
It's not working because you removed it as a style attribute on your element, and placed it in an external stylesheet. DOM will not show attribute values that do not exist in the document object (DOM is merely an XML parser that reads your HTML document verbatim).
To find CSS values set in an external stylesheet, you have to parse document.styleSheets and find the matching selector(s).
This is where using a library like jQuery becomes really handy, because it parses external stylesheets, and has helper methods to get the full CSS applied to an element.
Example of how you would do this in jQuery:
value = $("#anID").css("display");
PS - Looking for an empty string won't work for you, either, because display: "" is not the same as display: "none" (and in fact, is the same as display: block, for a div, because a blank essentially means inherit)
My solution:
Create class .hidden
.hidden {
display: none !important;
}
Javascript:
function toggleHidden(id) {
var x = document.getElementById(id);
x.classList.toggle('hidden');
}
The javascript display property stands for only for DOM attribute
Mozilla JS wiki, Returns an object that represents the element's style attribute.
W3schools, The Style object represents an individual style statement
You could use jquery's css method to get a mixed display value like
alert($("#foo").css("display"))
It should show none even if you set it with css
after I used that code to hide the element with the id "failedUpdateMessage", I would like to show that hidden element in some page in html, how would I do that using java script? I'd try to replace the "hidden" to "show" but it doesn't work.
You must use :
document.getElementById("failedUpdateMessage").style.visibility ="visible";
Note : show() works on elements hidden with jQuery methods and display:none in CSS (but not visibility:hidden).
Look up the visibility property. See what values are acceptable. Don't guess. show isn't one of them. visible is.
How can I reset JavaScript changed CSS values in HTML elements (without reloading the page)?.
I'm trying to develop an interactive image gallery using jQuery.
Try this .....
document.getElementById("myForm").reset();
The simplest method would be to have the initial styles all set via your stylesheet (referencing elements by class, tag, or id as applicable). Don't have the defaults set via inline styles. Because then when you apply inline styles via JS you can reset to the defaults by simply removing the inline styles again - no need to know the previous values.
So taking your example where you set the opacity:
$("#main").animate({'opacity':'0'},2000);
This causes an inline style to be applied, which you can remove with:
$("#main").css('opacity', '');
...at which point whatever was in your stylesheet would take effect again.
I need to set some special style for an element if some other element is visible (which is indicated by a special css class and can change dynamically). I need to do this because the page rendering and it's behavior is fully controlled by some framework's code and I don't want to change it. I can put any content anywhere in the body of the page. Is there a non-hacking way to do it?
My only idea was to use some plug-in like "watch" for jquery, but it's very ugly.
try using the properychange/attributemodified event
$("object-in-question").bind("DOMAttrModified propertychange", function(e) {
if($(this).is(":visible")).... etc
});
http://jsbin.com/abece4
In the past we used the CSS attribute "display" to show and hide DOM elements. To check if an element is visible, we could just use:
element.offsetWidth > 0
Since we had some problems with Flash and Java Applets (they stop when they get display:none) we switched to the CSS attribute "visibility".
I am now looking for a fast and easy way to check if an element is not visible.
I have tried the following:
Checking the attribute itself on the element and and all parents => too slow
Checking the calculated style directly from the browser (element.currentStyle or window.getComputedStyle() plus getPropertyValue(style property)) => also too slow
Do you know any other way or shortcut to see if an element is visible?
use JQuery and the you can do this
var isVisible = $('#foo').is(':visible');
Remember that visibility:hidden makes an element hidden, but that element still occupies its space, which may have some unexpected consequences on the layout (it may be an advantage as well if you are aware of this).
I would use absolute positioning to move the element far to the left, outside possible screen width. This gets the element out of the flow so the hidden element has no impact on layout, makes the element practically invisible, and it doesn't have the disatvantages of display:none.
.hide {
position:absolute;
left:-3000px;
}
Then to determine if an element is hidden you can use its offsetLeft property:
if( myElement.offsetLeft < 0 ){ /* it's hidden */ }
If you need to determine if a child element is off the screen (you don't know if it's the hidden element or its child) you can use .offsetParent and a while loop, as described in PPK's Find Position article.
Toggling Element Visibility by Kent is an unobtrusive, semantically valid way of presenting content that will degrade nicely for non-CSS-aware browsers.
After the page loads completely, we crawl through the entire document tree and look for block-level elements styled with class name toggle. If we find one that says toggle closed, we immediately hide its next sibling element, by styling it with class name hidden.
When we find one, we tell it to listen for mouse clicks.
When one of our pet elements hears a click, it leaps into action, hiding (or showing) its next available sibling, the same way we did it during the initial crawl.
All three class names (toggle, closed, and hidden) are fed in at the bottom in the init call, and may be changed to any valid class name.
Also look at this DevX article which compares the Display and Visibility properties.
Checking the focus would work, either parent is visible or not.
var isVisible = true;
try{
document.getElementById("target").focus();
}catch(err){
isVisible = false;
}
It obviously should work on input or link, but for other element, I'm not sure.
I have studied the same problem before using jQuery, but that time my aim is to focus the first availabe field on a form. The resulting code is like:
$(":text:visible:enabled").filter(function(){
return $(this).parents.filter(function(){
return this.style.display == "none";
}).size()==0;
}).slice(0,1).focus();
It would also work for hidden/invisble parent.
CSS selectors are optimised to find sets of matching elements. There are several libraries implementing this functionality. JQuery, ExtJS Core to name a couple.
Using Ext Core, I could write a javascript function that checks for visibility as follows:
// Checks whether the element is currently visible using
// both visibility and display properties
if(Ext.get(el).isVisible()){
alert('it\'s visible');
};
see http://extjs.com/products/extcore/docs/?class=Ext.Element for more Ext Core Ext.Element functionality.
function isVisible(elem) {
return elem.style.visibility !== "hidden";
}