none - jquery visible false
jQuery `.is(": visible ")` no funciona en Chrome (12)
Agregué el siguiente estilo en el padre y .is (": visible") funcionó.
pantalla: bloque en línea;
if ($("#makespan").is(":visible") == true) {
var make = $("#make").val();
}
else {
var make = $("#othermake").val();
}
Make:<span id=makespan><select id=make></select><span id=othermakebutton class=txtbutton>Other?</span></span><span id=othermakespan style="display: none;"><input type=text name=othermake id=othermake> - <span id=othermakecancel class=txtbutton>Cancel</span></span>
El código anterior funciona sin problemas en Firefox, pero parece que no funciona en Chrome. En Chrome muestra .is(":visible") = false incluso cuando es true .
Estoy usando la siguiente versión de jQuery: jquery-1.4.3.min.js
jsFiddle Link: http://jsfiddle.net/WJU2r/4/
En general, vivo esta situación cuando el padre de mi objeto está oculto. por ejemplo, cuando el html es así:
<div class="div-parent" style="display:none">
<div class="div-child" style="display:block">
</div>
</div>
si preguntas si el niño es visible como:
$(".div-child").is(":visible");
devolverá falso porque su padre no es visible para que div no sea visible, también.
Esta es la pieza de código de jquery.js que se ejecuta cuando is (": visible") se llama:
if (jQuery.expr && jQuery.expr.filters){
jQuery.expr.filters.hidden = function( elem ) {
return ( elem.offsetWidth === 0 && elem.offsetHeight === 0 ) || (!jQuery.support.reliableHiddenOffsets && ((elem.style && elem.style.display) || jQuery.css( elem, "display" )) === "none");
};
jQuery.expr.filters.visible = function( elem ) {
return !jQuery.expr.filters.hidden( elem );
};
}
Como puede ver, usa más que solo la propiedad de visualización de CSS. También depende del ancho y alto del contenido del elemento. Por lo tanto, asegúrese de que el elemento tenga algo de ancho y alto. Y para hacer esto, es posible que deba establecer la propiedad de visualización en "inline-block" o "block"
Hay un caso raro en el que si el elemento está configurado para display: inline la comprobación jQuery de la visibilidad falla.
Ejemplo:
CSS
#myspan {display: inline;}
jQuery
$(''#myspan'').show(); // Our element is `inline` instead of `block`
$(''#myspan'').is(":visible"); // This is false
Para solucionarlo, puede ocultar el elemento en jQuery y que show/hide o toggle() debería funcionar bien.
$(''#myspan'').hide()
$(''#otherElement'').on(''click'', function() {
$(''#myspan'').toggle();
});
Internet Explorer, Chrome, Firefox ...
Función de navegador cruzado "isVisible ()"
//check if exist and is visible
function isVisible(id) {
var element = $(''#'' + id);
if (element.length > 0 && element.css(''visibility'') !== ''hidden'' && element.css(''display'') !== ''none'') {
return true;
} else {
return false;
}
}
Ejemplo completo:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
//check if exist and is visible
function isVisible(id) {
var element = $(''#'' + id);
if (element.length > 0 && element.css(''visibility'') !== ''hidden'' && element.css(''display'') !== ''none'') {
return true;
} else {
return false;
}
}
function check(id) {
if (isVisible(id)) {
alert(''visible: true'');
} else {
alert(''visible: false'');
}
return false;
}
</script>
<style type="text/css">
#fullname{
display: none;
}
#vote{
visibility: hidden;
}
</style>
<title>Full example: isVisible function</title>
</head>
<body>
<div id="hello-world">
Hello World!
</div>
<div id="fullname">
Fernando Mosquera Catarecha
</div>
<div id="vote">
rate it!
</div>
<a href="#" onclick="check(''hello-world'');">Check isVisible(''hello-world'')</a><br /><br />
<a href="#" onclick="check(''fullname'');">Check isVisible(''fullname'')</a><br /><br />
<a href="#" onclick="check(''vote'');">Check isVisible(''vote'')</a>
</body>
</html>
Saludos,
Fernando
Necesito usar visibilidad: oculto en la pantalla: ninguno porque la visibilidad toma eventos, mientras que la pantalla no.
Entonces lo hago .attr(''visibility'') === "visible"
No sé por qué tu código no funciona en Chrome, pero te sugiero que uses algunas soluciones:
$el.is('':visible'') === $el.is('':not(:hidden)'');
o
$el.is('':visible'') === !$el.is('':hidden'');
Si está seguro de que jQuery le da algunos malos resultados en Chrome, puede confiar en la verificación de la regla css:
if($el.css(''display'') !== ''none'') {
// i''m visible
}
Además, es posible que desee utilizar el jQuery más reciente porque podría tener errores de la versión anterior corregidos.
Parece que jQuery''s :visible selector :visible no funciona para algunos elementos en línea en Chrome.
La solución es agregar un estilo de visualización, como "block" o "inline-block" para que funcione.
También tenga en cuenta que jQuery tiene una definición algo diferente de lo que es visible que muchos desarrolladores
Los elementos se consideran visibles si consumen espacio en el documento.
Los elementos visibles tienen un ancho o una altura que es mayor que cero.Elementos con
visibility: hiddenuopacity: 0se consideran visibles, ya que aún consumen espacio en el diseño.Los elementos que no están en un documento se consideran ocultos; jQuery no tiene forma de saber si serán visibles cuando se anexen a un documento, ya que depende de los estilos aplicables.
Todos los elementos de opciones se consideran ocultos, independientemente de su estado seleccionado.
Durante las animaciones que ocultan un elemento, el elemento se considera visible hasta el final de la animación. Durante las animaciones para mostrar un elemento, el elemento se considera visible al inicio de la animación.
En otras palabras, los elementos que consumen espacio son visibles, lo que significa que el elemento debe tener un ancho y una altura para consumir espacio y ser visible.
Por otro lado, incluso si su visibility está configurada como hidden o la opacidad es cero, sigue siendo :visible para jQuery ya que consume espacio, lo que puede ser confuso cuando el CSS dice explícitamente que su visibilidad está oculta.
La manera fácil de verlo es que si puede ver el elemento en la pantalla, incluso si no puede ver su contenido, es transparente, etc., es visible, es decir, ocupa espacio.
Limpié un poco tu marcado y agregué un estilo de visualización ( es decir, estableciendo la visualización de elementos para "bloquear", etc. ), y esto funciona para mí:
Referencia oficial de API para :visible
A partir de jQuery 3, la definición de :visible ha cambiado ligeramente
jQuery 3 modifica ligeramente el significado de
:visible(y por lo tanto de:hidden).
Comenzando con esta versión, se considerarán los elementos:visiblesi tienen cuadros de diseño, incluidos los de ancho y / o altura cero. Por ejemplo, los elementosbry los elementos en línea sin contenido serán seleccionados por el selector:visible.
Si lees los documentos de jquery, existen numerosas razones para que algo no se considere visible u oculto:
Tienen un valor de visualización de CSS de ninguno.
Son elementos de forma con tipo = "oculto".
Su ancho y alto están explícitamente establecidos en 0.
Un elemento ancestro está oculto, por lo que el elemento no se muestra en la página.
http://api.jquery.com/visible-selector/
Aquí hay un pequeño ejemplo jsfiddle con un elemento visible y otro oculto:
Si un elemento es hijo de un elemento que está oculto es (": visible") devolverá verdadero, lo cual es incorrecto.
Acabo de solucionar esto agregando "display: inherit" al elemento secundario. Esto lo arreglará por mí:
<div class="parent">
<div class="child">
</div>
<div>
y el CSS:
.parent{
display: hidden;
}
.child{
display: inherit;
}
Ahora el elemento se puede activar y desactivar efectivamente cambiando la visibilidad del padre, y $ (elemento) .is (": visible") devolverá la visibilidad del elemento principal
Supongo que tiene algo que ver con una peculiaridad en nuestro HTML porque otros lugares en la misma página funcionan bien.
La única forma en que pude resolver este problema fue hacer:
if($(''#element_id'').css(''display'') == ''none'')
{
// Take element is hidden action
}
else
{
// Take element is visible action
}
Una solución de navegador cruzado / versión para determinar si un elemento es visible, es agregar / eliminar una clase css al elemento en show / hide. El estado predeterminado (visible) del elemento podría ser, por ejemplo, así:
<span id="span1" class="visible">Span text</span>
Luego, en hide, elimina la clase:
$("#span1").removeClass("visible").hide();
En el programa, agrégalo de nuevo:
$("#span1").addClass("visible").show();
Luego, para determinar si el elemento es visible, usa esto:
if ($("#span1").hasClass("visible")) { // do something }
Esto también resuelve las implicaciones de rendimiento, que pueden ocurrir en el uso intensivo del selector ": visible", que se señalan en la documentación de jQuery:
Usar este selector en gran medida puede tener implicaciones en el rendimiento, ya que puede forzar al navegador a volver a procesar la página antes de que pueda determinar la visibilidad. El seguimiento de la visibilidad de los elementos a través de otros métodos, utilizando una clase por ejemplo, puede proporcionar un mejor rendimiento.
Documentación oficial de jQuery API para el selector ": visible"