2011-09-01 33 views
10

Tengo un problema con la función jquery show en firefox.Jquery .show() no funciona en firefox

Situación: He cargado un iframe con una página aspx en una ventana emergente (fancybox). En esa página aspx tengo un botón con un evento onclick que llama a una función personalizada y en esa función dispara la función .show() en un div. Este div tiene un elemento de estilo que contiene: display: none ;.

Esto funciona en IE, safari, chrome. Esto incluso funciona en Firefox cuando cargo la página aspx por separado. No funciona en Firefox en la ventana emergente de fancybox-iframe. No obtengo ningún error de javascript. Incluso la pantalla: ninguno se elimina del atributo de estilo, pero el div no aparece.

el código HTML de la página

<div class="popupWrapper"> 
    ..some elements 
    <div id="psharebutton" style="display:none;"> 
    ..content of the div 
    </div> 
</div> 

El código javascript:

function dolinkedin(url, title, summary, source) { 
     $(".smbutton").addClass("buttonDisabled"); 
     $("#linklinkedin").removeClass("buttonDisabled"); 
     $("#psharebutton").show(); 

     parent.sizeFancybox(); 
    } 

El botón se activa cuando la ventana emergente, es un ancla, que tiene la clase fancyboxiframe. Fancybox generará automáticamente el código js para mostrar la ventana emergente.

He comprobado estos temas:

He comprobado si mi html es válido y lo es.

¿Alguna idea?

BHD

+0

has probado $ ("# psharebutton"). Toggle(); ? –

+0

No tengo el código que reproducir más :(Lo siento por eso –

Respuesta

8

que tenía un problema similar y mi solución era hacer

$("#psharebutton").css("display", "inline-block"); 

en lugar de

$("#psharebutton").show(); 

Un jQuery "show" es idéntica a la configuración del atributo de estilo de visualización de "bloque ". Descubrí que necesitaba "Inline-Block" para Firefox y Chrome (no necesitaba esto para IE). Creo (pero no lo he confirmado) que jquery es lo suficientemente inteligente como para saber cuál es el valor de visualización anterior y usarlo, pero en mi caso empecé con la visualización configurada en "ninguno", por lo que no había ningún valor anterior.

+1

Su respuesta y la de DJ fueron probablemente la solución, lamentablemente ya no puedo reproducirlo, pero después de ver similares Comportamiento Dejo de estar seguro de que ese fue el caso. Elegí ambas respuestas. –

1

Sólo tiene que escribir abajo como $ ("# psharebutton"). Attr ('display', '') o $ ("# psharebutton"). Attr ('display', 'block').

function dolinkedin(url, title, summary, source) { 
     $(".smbutton").addClass("buttonDisabled"); 
     $("#linklinkedin").removeClass("buttonDisabled"); 
     $("#psharebutton").attr('display',''); 

     parent.sizeFancybox(); 
    } 
+0

Ver mi comentario en kirk :) –

1

Tuve un problema similar. Yo puse esto en mi css:

body { display: none } 

y trató de cambiar esto en jQuery:

$("body").show(); 

que no funcionaba en Firefox.

Después de haber cambiado el código HTML para

<body style="display: none"> 

y la eliminación de la parte de CSS pude usar jQuery show(); impecable

Parece que la herencia de las reglas CSS no sigue la misma rutina en Firefox que en IE/Chrome.

+0

Gracias por su respuesta, probablemente sea útil para otros :) –

0

Puede ser solo un efecto secundario de un error js. Siempre vale la pena presionar F12 y ver si hay algún error js en la consola. Tuve un problema similar en el que no pude entender por qué .show() no funcionaba en una entrada que tenía un estilo de 'display: none' en Firefox y resultó que tenía un selector mal formado al que le faltaba un cierre] y arrojó un error que no ve, hasta que abra Firebug. Chrome fue más tolerante y mostró el botón mientras Firefox atrapó el selector incorrecto.

Cuestiones relacionadas