2011-09-01 4 views
10

J'ai un problème avec la fonction jquery show dans firefox.Jquery .show() ne fonctionne pas dans firefox

Situation: J'ai chargé une iframe avec une page ASPX dans un popup (fancybox). Dans cette page aspx, j'ai un bouton avec un événement onclick qui appelle une fonction personnalisée et dans cette fonction, il déclenche la fonction .show() sur un div. Cette div a un élément de style qui contient: display: none ;.

Cela fonctionne dans IE, safari, chrome. Cela fonctionne même dans Firefox quand je charge la page aspx autonome. Il ne fonctionne pas dans Firefox dans le popup fancybox-iframe. Je n'ai pas d'erreurs javascript. Même l'affichage: none est supprimé de l'attribut style, mais le div n'apparaît pas.

Le code HTML de la page

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

Le code javascript:

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

     parent.sizeFancybox(); 
    } 

Le bouton où est déclenché le menu contextuel, est un point d'ancrage, qui a la classe fancyboxiframe. Fancybox générera automatiquement le code js pour afficher le popup.

J'ai vérifié ces sujets:

J'ai vérifié si mon code HTML est valide et il est.

Une idée?

BHD

+0

avez-vous essayé $ ("# psharebutton"). Toggle(); ? –

+0

Je n'ai plus le code te reproduire :(Désolé pour ça –

Répondre

8

J'ai eu un problème similaire et ma solution était de faire

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

au lieu de

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

A jquery "show" est identique à définir l'attribut de style d'affichage à « bloc ". J'ai trouvé que j'avais besoin de "inline-block" pour firefox et chrome (je n'avais pas besoin de ça pour IE). Je crois (mais je n'ai pas confirmé) que jquery est assez intelligent pour savoir quelle est la valeur d'affichage précédente et l'utiliser, mais dans mon cas j'ai commencé avec l'affichage réglé sur "none" donc il n'y avait pas de valeur précédente.

+1

Votre réponse et la réponse de DJ étaient probablement la solution, malheureusement je ne peux plus la reproduire, mais après avoir vu Je suis sûr que c'était le cas. J'ai voté pour vos deux réponses. –

1

Il suffit d'écrire vers le bas comme $ ("# psharebutton"). Attr ('display', '') ou $ ("# psharebutton"). Attr ('display', 'bloc').

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

     parent.sizeFancybox(); 
    } 
+0

Voir mon commentaire à kirk :) –

1

J'ai eu un problème similaire. Je ne mets dans mon css:

body { display: none } 

et essayé de changer cela en jQuery:

$("body").show(); 

qui ne fonctionne pas dans Firefox.

Après avoir changé le code HTML à

<body style="display: none"> 

et enlever la partie de CSS, j'ai pu utiliser jQuery show();

Il semble que l'héritage des règles CSS ne suit pas la même routine dans Firefox que dans IE/Chrome.

+0

Merci pour votre réponse, c'est probablement utile pour les autres :) –

0

Cela peut être juste un effet secondaire d'une erreur js. Cela vaut toujours la peine de cliquer sur F12 et de voir s'il y a des erreurs js dans la console. J'ai eu un problème similaire où je ne pouvais pas comprendre pourquoi .show() ne fonctionnait pas sur une entrée qui avait un style de 'display: none' dans Firefox et il s'est avéré que j'avais un sélecteur mal formé qui manquait un fermeture] et a jeté une erreur que vous ne voyez pas, jusqu'à ce que vous ouvriez Firebug. Chrome était plus tolérant a montré le bouton tandis que Firefox a attrapé le mauvais sélecteur.

Questions connexes