Javascript Girl
  1. Javascript Girl
  3. Les éléments apparaissent uniquement après l'élément d'inspection
Intereting Posts
Comment charger un script Greasemonkey après la demande AJAX Comment les barres de progression multiples doivent-elles être traitées en javascript? Comment vérifier si une chaîne contient une sous-chaîne en JavaScript? RegEx qui correspond à la dernière occurrence de point dans une chaîne JavaScript: extraire les cadres vidéo de manière fiable Quelle est la manière privilégiée de muter un état réactif? Est-ce que JavaScript peut annuler et remplacer les boutons de retour et de renvoi du navigateur? AngularJS – Manipulation de jeton de rafraîchissement? Changer le texte du menu contextuel en fonction de quel élément est cliqué Récupération de la position du personnage en cas d'événement sur la souris Comment les variables sont-elles assignées à la mémoire en Javascript? Est-ce qu'une déclaration de changement inversé est acceptable JavaScript? Les fonctions de test ne fonctionnent pas sur la portée du contrôleur Liste de lecture vidéo ou audio HTML 5 Comment détecter le changement de taille de document dans jquery

Les éléments apparaissent uniquement après l'élément d'inspection

Je viens de rencontrer le problème le plus étrange que j'ai rencontré dans mon humble développement de carrière en mode indépendant. Je crée une application Web pour un site de demande d'emploi où les candidats utilisent leurs webcams pour répondre à 3 courtes questions. Pour cela, j'utilise un plugin jQuery appelé ScriptCam qui utilise Flash pour activer la webcam de l'utilisateur. J'ai tout fonctionné très bien mais maintenant j'ai le problème suivant.

J'utilise jQuery .show() et .hide() pour afficher et masquer les boutons. Un bouton, un bouton de relecture, ne s'affiche pas lorsque vous appelez $("#replay").show(); Mais montre quand je clique droit n'importe où dans le navigateur après avoir appelé cette commande et appuyez sur "Inspect Element"! J'ai cherché ce qui pourrait causer ce problème mais je n'ai rien trouvé … Qu'est-ce qui pourrait causer ce comportement?

C'est ainsi que j'ai défini le bouton:

<div onclick='replay();' id='replay' class="replay">Replay</div>

C'est le CSS du bouton: 

 .replay{ float: left; top: 150px; left: 60px; z-index: 100; -webkit-box-shadow: 0 12px 36px -16px rgba(0,0,0,0.5); background:url('../img/button-grey.png') no-repeat 100% 100%; background-position: center center; color: white; width: 140px; text-align: center; padding: 10px; cursor: pointer; font-family: Archive; display: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; }

Modifier: CSS de la division parent du bouton: 

 .box{ margin-left: 100px; height: 337px; width: 300px; float: left; text-align: center; }

Je n'ai utilisé aucun délai n'importe où et le bouton apparaît vraiment juste après avoir cliqué sur l'élément d'inspection quelque part dans le navigateur. Je ne peux pas non plus reproduire ce problème ailleurs. Quelqu'un a-t-il une idée de ce qui pourrait causer cela? Toute aide serait très appréciée, merci d'avance!

Mise à jour: Il semble que seul Safari sur Mac ait des problèmes.

Mise à jour 2: Lorsque vous déplacez le bouton hors de sa division parent directement sur l'étiquette du corps, cela fonctionne comme il se doit! Donc c'est probablement un conflit css de la division parent?

Edit: Vous pouvez voir le problème ici , cliquez simplement sur le bouton "Volgende vraag" en attendant que la petite vidéo termine. Après cela, le bouton de relecture devrait apparaître juste au-dessus de la vidéo.

J'ai trouvé la solution! Le problème est causé par un conteneur antérieur div qui a l' display:none CSS display:none . Bien que je change avec jQuery's .show() avant que le problème ne se produise et que son contenu soit visible, en supprimant l' display:none dans mon CSS ne le fait fonctionner! Merci pour toute l'aide et les suggestions!

Pour moi, j'ai dû changer la visibilité d'un élément que j'ai trouvé caché au-dessus de l'image dans ma feuille de style pour résoudre le problème. Je l'ai trouvé en utilisant l'élément d'inspection. Ensuite, après avoir changé, l'image s'est déplacée évidemment, donc j'ai dû changer les marges pour la ramener à sa position d'origine.