i needed to hide a div on my code behind:
bool hideDiv = false
//codes to change hideDiv
myDiv.visible = hideDiv;
and i want to check visibility of my div using javascript:
if (jQuery("myDiv") != null){
//some codes
}
else{
//some codes
}
and the 'jQuery("myDiv")' is always not null (even if the div was actually not visible), what is the better way to check if a div is visible?
You can use :visible selector inside is filtering function:
if ($('#myDiv').is(':visible'))
Notes:
You probably forgot the # before the id in your selector(jQuery("myDiv")).
jQuery will never return null no matter if the searched elements exist or not, unlike document.getElementById
Related
I have a simple block of code to hide/show two divs. It works great, the only issue I have is that I need to return the display value to the #MSOZoneCell_WebPartWPQ2 back to table. I have set it to none in the css initially. The last line doesn't seem to take effect.
here is the code:
$(function() {
$('#swap').click(function() {
$('#MSOZoneCell_WebPartWPQ2').toggle();
$('#example_wrapper').toggle();
$('#MSOZoneCell_WebPartWPQ').css('display') == 'table';
});
});
You're using == operator
Try this:
$(document).ready(function(){
$('#swap').click(function() {
$('#MSOZoneCell_WebPartWPQ2').toggle();
$('#example_wrapper').toggle();
$('#MSOZoneCell_WebPartWPQ').attr('style','display:table;');
});
});
you should use .css( propertyName, value )
Set one or more CSS properties for the set of matched elements.
so your last line should be
$('#MSOZoneCell_WebPartWPQ').css('display', 'table');
when you call .css( propertyName )
$('#MSOZoneCell_WebPartWPQ').css('display);
you are Getting the value of said property not setting it
Get the computed style properties for the first element in the set of
matched elements.
Update 1:
please note that Jquery's .show(), .hide() and .toggle() will only work with elements with block display property.
so one way to avoid changing the display property back and forth is to wrap the wanted elements in a div (container) and .toggle() it.
I have created a JSFiddle, I warped each div in a container div with a calss called "toggle" and set initial display value of one of them to "none" using style attribute.
<div class="toggle" style="display:none">
now I toggle between them using this
$('.toggle').toggle();
Update 2:
you can also use .toggleClass() here's another JSFiddle
Add this to your CSS
#example_wrapper.hiddenDiv, #MSOZoneCell_WebPartWPQ2.hiddenDiv {
display: none;
}
add a class to the div you want initially hidden
<div id="MSOZoneCell_WebPartWPQ2" class="hiddenDiv">
toggle the class using this
$(function() {
$('#swap').click(function() {
$('#MSOZoneCell_WebPartWPQ2').toggleClass("hiddenDiv");
$('#example_wrapper').toggleClass("hiddenDiv");
});
});
in this example I'm using a class called "hiddenDiv", if you change it make sure the class name is the same in CSS, HTML and JS.
you are sure you need "==" to set the value? or one "="
Firstly == is an equality check. You should use = to set a value.
Secondly, the css() method setter accepts two parameters. The rule to set and the value itself. Try this:
$('#MSOZoneCell_WebPartWPQ').css('display', 'table');
I have a menu consisting of sort criteria. The options per criteria are listed as check boxes in a div wioth class '.collapse_box'.
I need to check each of these div's to see if any of the checkboxes it contains are checked. If there are any checkedboxes I need to set the DIV display to block.
I was thinking along these lines:
$('.collapse_box')each(function()
if( $(this).(input:checked).length() > 0{ //here lies my problem
$(this).show();
}
});
Seeing that I am very new to javascript and jquery I don't know how to return the checked boxes for $(this). Or better said: the correct method to check if any checkboxes in $(this) are checked.
Your selector is wrong, element are always given as string or object:
if( $(this).find('input:checked').length > 0){
Also, length isnt a function, but a property. And you forgot the .find()
Made you a jsFiddle with demo
Alright, assuming that the inputs are children, something like this will work:
$('.collapse_box').each(function(){
if($(this).find('input').prop('checked')){
$(this).show();
}
});
The .prop('checked') piece returns a boolean value of whether the input is checked or not.
EDIT Martijn makes a good point, you can switch it to vanilla JS with a mod to the selector.
$('.collapse_box').find('input').each(function(){
var self = this;
if(self.checked){
self.style.display = 'block';
}
});
Im trying to build a collase expand function on my website.
I have the following that toggle ths hidden div only im trying to change the 'Expand' text to collapse, and then if clicked again, collapse > expand.
Can anybvody see what im doing wrong?
$('.coverage .expand').click(function(){
$(this).parent().parent().find('.subitems').toggle('slow', function() {
var togtit = $(this).parent().find('.expand');
if((togtit).is('Expand')){
togtit.html('Collapse')
} else {
togtit.html('Expand')
}
});
});
The problem is that you use .is() method in wrong way. You may try the following instead:
$(this).parent().find(".expand").html(function(i, html) {
return html === "Expand" ? "Collapse" : "Expand";
});
if(togtit.html() == 'Expand'){
togtit.html('Collapse')
} else {
togtit.html('Expand')
}
Above should work.
Check the current matched set of elements against a selector, element,
or jQuery object and return true if at least one of these elements
matches the given arguments.
jQuery.is should be used to check if element matches selector. It will not test inner content of an element.
I want to change the style of visible elements using CSS only. Is there a selector that does it? It needs to work with Chrome and Firefox only. (I am building an extension / addon)
If there isn't, is there a way to change the style of visible elements with a light javascript?
Visible within the current scroll position. An element can be out of the scroll vision, or partially visible.
There is no standard pure CSS rule for assessing visibility.
As others have said, jQuery (if you wanted to use jQuery) has both a CSS selector extension :visible and the ability to execute .is(':visible') on any given jQuery object to get the computed style on any given DOM element with .css("display") or .css("visibility").
It's not particularly simple in plain javascript to determine if an object is visible because you have to get the computedStyle (to take into account all possible CSS rules that might be affecting the element) and you have to make sure no parent objects are hidden causing the child element to be hidden. This is a function I have in my own personal library:
//----------------------------------------------------------------------------------------------------------------------------------
// JF.isVisible function
//
// Determines if the passed in object is visible (not visibility:hidden, not display: none
// and all parents are visible too.
//
// Source: http://snipplr.com/view/7215/javascript-dom-element-visibility-checker/
//----------------------------------------------------------------------------------------------------------------------------------
JF.isVisible = function(obj)
{
var style;
if (obj == document) return true;
if (!obj) return false;
if (!obj.parentNode) return false;
if (obj.style) {
if (obj.style.display == 'none') return false;
if (obj.style.visibility == 'hidden') return false;
}
//Try the computed style in a standard way
if (window.getComputedStyle) {
style = window.getComputedStyle(obj, "")
if (style.display == 'none') return false;
if (style.visibility == 'hidden') return false;
} else {
//Or get the computed style using IE's silly proprietary way
style = obj.currentStyle;
if (style) {
if (style['display'] == 'none') return false;
if (style['visibility'] == 'hidden') return false;
}
}
return JF.isVisible(obj.parentNode);
};
There is no pure CSS way of doing this. As Kirean's comment already said, why would you want to style visible elements only? Invisible elements won't show their styling anyway. If you don't want the invisible element to take up space (aka, laid out), you should use display: none;
If you REALLY want a selector to select the visible elements, you could do what Widor suggested and use jQuery. You could first use jQuery to first select the visible elements, add a class to them, then use CSS to select the elements by that class.
$('div:visible').addClass('visibleElement');
.visibleElement {
color: red;
}
There is no Way to select invisible elements, using pure CSS
http://www.w3.org/TR/selectors/
However, if you have a class name or other selector, using jquery you can do something like the following
jQuery(selector).each(function(){
Var $this=$(this);
if ($this.css('visibility')==='hidden')
//set your style
})
Edit: after your edit, there is definitely no way of selecting what is within the viewport with CSS alone. It is a context free language of sorts.
However, you can always fool around with an elements offset position with jquery and determine if it's within the current viewport(window.scrollposition or something similar). This type of solution gets messy quickly, though.
This looks like a :visible selector to me:
http://api.jquery.com/visible-selector/
EDIT: Saw your javascript tag before your 'no CSS' caveat.
But this is a CSS selector of sorts.
I have a collection of elements on my page, and I want to see if they are visible or not currently.
So:
$(".someClass")
How can I loop through and figure this out? because if it is visible, i have to fire another function.
$(".someClass").each(function(){
if($(this).is(":visible")){
//item is visible: do something
}
});
how about that?
$(".someClass:visible")
will return the visible ones.
What you could do:
$(".someClass").each(function(x) { if ( x.style.display != "none" && x.style.visibility != "hidden" ) { your_function(); } });
where your_function() is the name of your function.
All solutions in terms of $('.someClass').is(':visible') are unreliable. All it tells us is if a particular element has a styling of display:none or visibility:hidden. This is not the same as whether an element is visible!
Consider a situation like this:
<div style="display:none;"><div class="someClass"></div></div>
Everybody can see that the element designated by $('.someClass') is invisible. But $('.someClass').is(':visible') will return true!
The only water-proof solution is to not only check for is(':visible') on the $('.someClass'), but on all of its parent elements as well. Only if for none of the parents holds that is(':visible') === false, we can conclude that $('.someClass') is actually visible.