Hello,
While I am becoming more and more aware of some of the key features of HTML5 I would like you to know that there is a new attribute that you can make use of which is called
|
1 |
hidden="hidden" |
This attribute serves exactly the same thing that our old friend display:none does
So in CSS we used this
[geshi lang=”css” nums=”1″ target=”_self” ]
|
1 2 3 |
.hide { display:none } |
And then we apply the above style to an element as
|
1 |
<div class="hide">This is hidden</div> |
Now lets do the exact same thing with our new HTML5 friend “the hidden attribute”
We can use hidden attribute 3 ways.
As bool
|
1 |
<div hidden>This is hidden</div> |
As string literal
|
1 |
<div hidden="hidden">This is hidden</div> |
or as an empty string literal
|
1 |
<div hidden="">This is hidden</div> |
Browser support
No surprises here that IE does not support it. All other major browser do support it which includes firefox, chrome, opera, safari
Using hidden attribute With jQuery
This is pretty simple and we will do it the standard way we add attribute to an element
Here is a quick example
|
1 2 3 |
$(document).ready(function(){ $('#hide_this_element').attr('hidden','hidden'); }) |
As you can see that the element with ID hide_this_element will not appear on the page as a result of above jQuery code.
jQuery with fallback
|
1 2 3 4 |
$(document).ready(function(){ $('#hide_this_element').attr('hidden','hidden'); if($('#hide_this_element').is(":visible")) { $('#hide_this_element').css("display","none"); |
|
1 |
} |
|
1 2 |
) }) |
I am in double mind to use it because there are few HTML things that when kept to HTML core looks more syntactically correct but anyone can argue on this point. I will.
For the time being though I will still be using my beloved CSS display: property.
It will be another few years before we see standards getting adopted by major browsers as soon as they become standards. I hope 🙂
I hope that you find this writeup useful.
As always your comments are always welcomed
Cheers.
Leave a Reply