I'd like to know if there's anything incorrect in the following :
if($('#three').is(':visible')) {
alert("visible");
} else {
alert("hidden");
}
Thanks
Your code seems correct to me. However, visible selector on jQuery defines a not visible elements if:
They have a CSS display value of none.
They are form elements with type="hidden".
Their width and height are explicitly set to 0.
An ancestor element is hidden, so the element is not shown on the page.
Is it the case in your test?
Some others importants aspect regarding this selector is that elements with visibility: hidden or opacity: 0 are considered to be visible!
Also, since 1.3.2, this selector has evolved, as stated in the changelog.
Better you check this : :visible Selector
<script>
if( $('#foo').is(':visible') ) {
// it's visible, do something
}
else {
// it's not visible so do something else
}
if( $('#foo').is(':hidden') ) {
// it's hidden, do something
}
else {
// it's not hidden so do something else
}
</script>
Make sure that #three has display attribute set to some default value. E.g. Display="none"
Related
Is it possible to make text appear when only the right id is used? So that some text is only visible when the URL says http://example.com#hello and not visible when it just says http://example.com
(I'm not from an English-speaking-country so I'm having a hard time describing this.)
if (window.location.hash == "#hello") {
document.getElementById("myElement").style.visibility = "visible"
} else {
document.getElementById("myElement").style.visibility = "hidden"
}
You would probably want to get the element and set it to a variable instead of calling to the DOM both times, but you should get the idea here. You could also use display: none instead of the visibility property if you wanted to.
for that you should use JavaScript and check if the URL has it or not and then select the element you want to add or remove a behavior..
var textElement = document.getElementById('myTextElement');
if(window.location.hash == '#hello'){
textElement .style.display = 'block';
} else {
textElement .style.display = 'none';
}
Hope it helps.
I think this can be done with pure CSS through using the :target selector: When navigating to yourpage.com/#id an element is targeted, and as such the rules in the :target selector apply.
#test{opacity:0;}
#test:target{opacity:1}
<div id="test">Can you see me?</div>
click me
Ok guys so I am testing if elements are hidden, problem is if the parent element is hidden then the children are considered hidden as well so the line that I append is being appending even if the children elements that aren't technically "display:none"
function checkIfVisible() {
var checkLeft= $('#left').children('.module').filter(':hidden');
if(checkLeft.length > 0) {
if(!$('.resetLeft').length) {
left.prepend('<span class="resetLeft">Reset Left Widgets</span>');
}
}
I run this script on page load, and when ever any of the children elements are clicked to be hidden. How do I stop the script from assigning the prepended element from being added if the parent elements is hidden but none of the children are hidden (Display:none) in style?
So basically.
If #left is hidden (parent) and none of the children are I don't want the resetLeft to be prepended. But if #left is hidden and 1 or more of the children of it are display:none then prepended. even if left isn't hidden I need to this work as well.
This should do it:
var visible = $('#left').is(':hidden') && $('#left').children('.module').filter(function() {
return this.style.display === 'none';
}).length === 0;
But this seems like a hack. Why are you forced to do this?
I took what Blender sort of said to do but I changed it around to work just the way I wanted. I used the && and logical operator...
function checkIfVisible() {
var checkLeft=
$('#left').is(':visible')
&&
$('#left').children('.module').filter(':hidden').length > 0;
if(checkLeft) {
if(!$('.resetLeft').length) {
left.prepend('<span class="resetLeft">Reset Left Widgets</span>');
}
}
This worked wonderfully for me, and all I did was add the function to the click function of showing the #left element!
I have this javascript code that creates a slider:
http://jsfiddle.net/samccone/ZMkkd/
Now, i want to use this code on a checkbox input. the problem is that the code creates a child element that slides in it's parent using a css position, and an input cannot have a child.
My idea was to use background-position and just slide the background of the input from left to right using css instead of using real positioning.
How can I adapt this script? It is quite easy I think but after a couple of tries I just gave up, i'm not good enough :).
Thanks for your help,
Christopher
Believe it or not, for checkboxes a switch effect is possible to create without JavaScript.
If you follow your checkbox with a label:
<input type="checkbox" id="jim" />
<label for="jim"></label>
You will find that you can select the label with the next sibling selector:
input + label { /* some CSS */ }
Why is that useful? Because using the pseudo selector :checked you can now style the label based on the state of the checkbox:
input + label { background-position: 0 0; }
input:checked + label { background-position: 100% 0; }
Clearly, due to the for="jim" attribute, clicking on the label will change the state of the checkbox. So if you hide the checkbox, you end up with a styled, clickable label.
input { display: none; }
Of course, labels can have children so you can be as fancy as you want with your recreation of a switch. And you should be careful to include :focus styles as well, for people who tab to your checkbox rather than click on it.
For browsers that do not support the :checked pseudo class (IE8 and below), it's pretty easy to emulate with a global handler and a 'checked' class. Something like:
jQuery(document).bind('change', function(e){
var elem = jQuery(e.target);
// If this is not a checkox, do nothing.
if (elem.attr('type') !== 'checkbox') { return; }
// Add or remove checked class based on current state.
if (elem.attr('checked')) { elem.removeClass('checked'); }
else { elem.addClass('checked'); }
});
...should do it.
You might need to store some data in object properties (or the .data() api), but your background position idea should work just fine. Just replace your calls to .offset().left with .css('background-position') (you'll have to split and parseInt the string it returns tho) and keep plugin' away at it.
I also need to find out all the elements inside a div, and check for their visibility. How to do it?
The first part of your question sounds like you want to find all the elements inside of a div. And then check for visibility.
To get all elements that are descendants of a div, use:
$('#myDiv *')
So to test each element, and act accordingly based on visibility:
$('#myDiv *').each(function() {
if( $(this).is(':visible') ) {
// code to run if visible
} else {
// code to run of not visible
}
})
You can select them using the :visible and :hidden pseudo-elements. For example, selects all the visible descendants of a <div>.
$("div :visible")...
Of you can do a test using is(). For example:
if ($("#someId").is(":visible")) { ...
$('#myElement').is(':visible');
Will return true or false
Use the :hidden and :visible selectors.
$("div:visible").hide();
$("div:hidden").show();
use the $(div :visible) selector to select all visible elements in the div. you may loook at http://api.jquery.com/visible-selector/ for more details.
I have a div:
<div class="test" id="someElement" style="position: absolute"></div>
Is there any way to check if the certain element:
$("#someElement")
has a particular class (in my case, "test").
Alternately, is there a way to check that en element has a certain style? In this example, I'd like to know if the element has "position: absolute".
Thank you very much!
CSS Styles are key-value pairs, not just "tags". By default, each element has a full set of CSS styles assigned to it, most of them is implicitly using the browser defaults and some of them is explicitly redefined in CSS stylesheets.
To get the value assigned to a particular CSS entry of an element and compare it:
if ($('#yourElement').css('position') == 'absolute')
{
// true
}
If you didn't redefine the style, you will get the browser default for that particular element.
if($('#someElement').hasClass('test')) {
... do something ...
}
else {
... do something else ...
}
if ($("element class or id name").css("property") == "value") {
your code....
}
Or, if you need to access the element that has that property and it does not use an id, you could go this route:
$("img").each(function () {
if ($(this).css("float") == "left") { $(this).addClass("left"); }
if ($(this).css("float") == "right") { $(this).addClass("right"); }
})
i've found one solution:
$("#someElement")[0].className.match("test")
but somehow i believe that there's a better way!
Question is asking for two different things:
An element has certain class
An element has certain style.
Second question has been already answered. For the first one, I would do it this way:
if($("#someElement").is(".test")){
// Has class test assigned, eventually combined with other classes
}
else{
// Does not have it
}