jQuery et IE9

steeve · 24-09-2013 08:43:28

Salut a tous, je cherche la solution mais en vain pour faire fonctionner jQuery sous IE9, je n'ais pas de soucis avec les version 7, 8 et 10...
J'ai bien vu que beaucoup de gens on le même soucis mais aucune des solutions données ne règle mon problème...
Connaissez vous l'origine de ce dysfonctionnement ?

Jc · 24-09-2013 08:57:10

Bonjour,

Vous auriez dit sur IE8 j'aurais su pourquoi, mais IE9 jamais eu de problèmes.
Merci de préciser le contexte de votre problème, la version utilisée de jquery notamment.

++

steeve · 24-09-2013 09:26:54

Bonjour, bien en fait, je test les différents versions d'IE avec IE-tester mais j'ai le sentiment que c'est lui qui bug, je viens de faire un test en ligne et le résultats n'est pas le même mais le rendu est une capture d'écrans et je ne suis sur de rien...
Par contre sur les tests en ligne, c'est avec la version IE8 qu'il y a un soucis...
Je comprend rien avec ce navigateur !

steeve · 24-09-2013 11:36:07

Bon et malgré le fait que d'autre ont le même soucis, c'est peut être chez moi que ça na va pas...
Exemple, avec ce code:

$('#toTop').fadeOut();

var classe = "backtotop";

$(window).scroll(function() {

    if ($(window).scrollTop() === 0) {

        $('#toTop').fadeOut('8000');

    } else {

        if ($('#toTop').length === 0) {

            //$('body').append('<div id="toTop">' 

            //                + '<a href="#top" class="' 

            //                + classe 

            //                + '"><i class="icon-arrow-up"></i></a>' 

            //                + '</div>');

        }

        $('#toTop').fadeIn('8000');

    }

});

$(document).ready(function() {

    $(function() {

        $('.' + classe).click(function(e) {

            e.preventDefault();

            $('html, body').animate({scrollTop: '0px'}, 1300);

        });

    });

});

SI j'inscrit en dur dans le HTML, tous va bien: <div id="toTop"><a href="#top" class="backtotop"><i class="icon-arrow-up"></i></a></div>
En revanche si je laisse la fonction append afficher cette div alors ca ne va plus, la page ne fait que s'actualiser...

Jc · 25-09-2013 00:50:53

Bonjour,

Merci pour votre code. Alors pour vous répondre, cela n'a rien à voir avec le navigateur, mais avec votre code qui est incomplet.

Pour commencer, vu que vous rajoutez une div en haut de votre page quand l'utilisateur remonte en haut de la page, cela sous-entends que votre hauteur de page est plus grande que votre hauteur d'écran. A partir de là, en faisant un $('body').append vous ne risquez pas de voir grand chose à l'écran vu que vous rajoutez du code html à la fin de votre balise <body> (donc juste avant la balise de fermeture </body> qui se trouve en dehors de votre écran). Par conséquent un $('body').prepend() est plus approprié.

Ensuite, IE, et à juste titre, supporte mal la redondance de balises identiques ayant le même id lorsque il est question d'y appliquer un traitement particulier (fade,tooltip,etc...) car il va être incapable de savoir lequel est la cible de votre code (même si certains navigateurs utilisent par défaut la première balise rencontrée dans le DOM. Il est donc nécessaire que vous complétiez votre code pour vous assurer qu'en toutes circonstances, vous n'ayez qu'une seule balise <div id="to_top"> dans votre DOM.

Dernière modification par Jc (25-09-2013 02:10:42)

steeve · 25-09-2013 12:36:27

Salut,
alors en fait, je ne suis pas sur d'avoir compris mes erreurs...

Jc a écrit :

A partir de là, en faisant un $('body').append vous ne risquez pas de voir grand chose à l'écran vu que vous rajoutez du code html à la fin de votre balise <body> (donc juste avant la balise de fermeture </body> qui se trouve en dehors de votre écran)

La je ne comprend pas car en fait, j'ai effectivement cette div qui apparaît juste avant </body> mais j'ai un css qui la positionne et je la vois bien apparaitre (fadin et fadout fonctionne correctement):

#toTop a{

    position: fixed;

    text-decoration: none;

    right: 10px;

    bottom: 10px;

    background-color: $couleur;

    padding: 7px 10px;

    color: $dark;

    @include border-radius(5px);

    border: 1px solid #000;

}

#toTop a:hover{

    @include box-shadow(0px 0px 5px #222);

    color: $light;

}

La je ne comprend pas non plus:

Jc a écrit :

Ensuite, IE, et à juste titre, supporte mal la redondance de balises identiques ayant le même id lorsque il est question d'y appliquer un traitement particulier (fade,tooltip,etc...) car il va être incapable de savoir lequel est la cible de votre code (même si certains navigateurs utilisent par défaut la première balise rencontrée dans le DOM. Il est donc nécessaire que vous complétiez votre code pour vous assurer qu'en toutes circonstances, vous n'ayez qu'une seule balise <div id="to_top"> dans votre DOM.

Car je n'ais pas le sentiment d'avoir plusieurs <div id="to_top"> car:
- soit je laisse la fonction l'ajouter cette div au sein du html, ca fonctionne pour l'affichage mais la page s'actualise au lieu de remonter...
- soit je ne laisse pas la fonction l'ajouter et je l'ajoute moi même en dur et la tous fonctionne...

La fonction: lenght "if ($('#toTop').length === 0)", n'est elle pas censé vérifier l’absence de div toTop avant de l'ajouter ?

Voici mon code simplifié mais sans modifs:

<!DOCTYPE html>

<head>

    <style>

        #toTop a { position: fixed; text-decoration: none; right: 10px; bottom: 10px; background-color: #f25126; padding: 7px 10px; color: #181818; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; border: 1px solid #000; }

        #toTop a:hover { -webkit-box-shadow: 0px 0px 5px #222222; -moz-box-shadow: 0px 0px 5px #222222; box-shadow: 0px 0px 5px #222222; color: #b1b1b1; }

    </style>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

    <script>

        $(document).ready(function() {

            $('#toTop').fadeOut();

            var classe = "backtotop";

            $(window).scroll(function() {

                if ($(window).scrollTop() === 0) {

                    $('#toTop').fadeOut('8000');

                } else {

                    if ($('#toTop').length === 0) {

                         $('body').append('<div id="toTop">'

                                + '<a href="#top" class="'

                                + classe

                                + '">toTop</a>'

                                + '</div>');

                    }

                    $('#toTop').fadeIn('8000');

                }

            });

            $(function() {

                $('.' + classe).click(function(e) {

                    e.preventDefault();

                    $('html, body').animate({scrollTop: '0px'}, 1300);

                });

            });

        });

    </script>

</head>

<body>

    <a name="top"></a>

    <hr />

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <hr />

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <hr />

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <hr />

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <hr />

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <hr />

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <hr />

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <hr />

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <hr />

    <!-- <div id="toTop"><a href="#top" class="backtotop">toTop</a></div> -->

</body>

</html>

La dernière div est commenté, c'est donc bien la fonction qui ajoute la div toTop et en théorie il me semble je ne peut absolument pas avoir 2 div toTop, non ?

Dernière modification par steeve (25-09-2013 13:12:28)

steeve · 25-09-2013 12:41:53

En ce qui concerne le dernier code,j'ajoute que si je fais l'inverse, a savoir commenter la fonction append() et dé-commenter la div en dur dans le html, la ça fonctionne correctement:

<!DOCTYPE html>

<head>

    <style>

        #toTop a { position: fixed; text-decoration: none; right: 10px; bottom: 10px; background-color: #f25126; padding: 7px 10px; color: #181818; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; border: 1px solid #000; }

        #toTop a:hover { -webkit-box-shadow: 0px 0px 5px #222222; -moz-box-shadow: 0px 0px 5px #222222; box-shadow: 0px 0px 5px #222222; color: #b1b1b1; }

    </style>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

    <script>

        $(document).ready(function() {

            $('#toTop').fadeOut();

            var classe = "backtotop";

            $(window).scroll(function() {

                if ($(window).scrollTop() === 0) {

                    $('#toTop').fadeOut('8000');

                } else {

                    if ($('#toTop').length === 0) {

                        // $('body').append('<div id="toTop">'

                        //        + '<a href="#top" class="'

                        //        + classe

                        //        + '">toTop</a>'

                        //        + '</div>');

                    }

                    $('#toTop').fadeIn('8000');

                }

            });

            $(function() {

                $('.' + classe).click(function(e) {

                    e.preventDefault();

                    $('html, body').animate({scrollTop: '0px'}, 1300);

                });

            });

        });

    </script>

</head>

<body>

    <a name="top"></a>

    <hr />

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <hr />

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <hr />

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <hr />

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <hr />

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <hr />

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <hr />

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <hr />

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <hr />

    <div id="toTop"><a href="#top" class="backtotop">toTop</a></div>

</body>

</html>

Désolé de ne pas voir la subtilité qui existe entre les 2 tests, pourtant je cherche !!!

Jc · 26-09-2013 07:14:47

Bonjour,

A la vue des css associées à votre <div id="to_top">, je comprends maintenant que c'est une balise contenant/servant de lien pour accéder en haut de la page lorsque l'utilisateur atteint le bas de page, donc la méthode .append() est appropriée par contre elle devrait s'afficher lorsque l'on atteint le bas de page pas le haut. Excusez-moi donc pour la confusion initiale de ma part quant à la fonction réelle de cette div dans votre code, ayant lu aussi un peu en diagonale..
Donc quand vous écrivez:

$(window).scroll(function() {
if ($(window).scrollTop() === 0) {
$('#toTop').fadeOut('8000');
} else {
...

il y a un souci car au chargement de votre page $('#toTop') n'est pas encore présent dans votre DOM. Il faut donc compléter votre code en vérifiant la présence de $('#toTop').

- soit je laisse la fonction l'ajouter cette div au sein du html, ca fonctionne pour l'affichage mais la page s'actualise au lieu de remonter...

Le fait que la page s'actualise est-ce un comportement attendu/normal?

La fonction: lenght "if ($('#toTop').length === 0)", n'est elle pas censé vérifier l’absence de div toTop avant de l'ajouter ?

Non ce n'est pas ainsi que la condition doit être vérifiée. Voici la bonne méthode:

  // en jquery

  if ($("#toTop")){   }

  // en javascript

  if (document.getElementById("toTop")){   }

$(document).ready(function() {
$('#toTop').fadeOut();
var classe = "backtotop";
...

Ensuite comme évoqué au début, lorsque le document devient ready, normalement $('#toTop') n'existe pas et vous ne le vérifiez pas dans votre code, ce qui peut générer une erreur et empêcher le code qui suit d'être évalué et donc de fonctionner.

Dernière modification par Jc (26-09-2013 07:17:56)

steeve · 26-09-2013 08:02:39

Ok, un grand merci, je pense maintenant comprendre ce que je ne comprenais pas, effectivement, au 1er chargement et si j'utilise la fonction append(), le div toTop n'existe pas et comme vous dites, le programme ne s'effectue peut être pas complètement...

Je commence mes test dés maintenant
EDIT:

Jc a écrit :

Le fait que la page s'actualise est-ce un comportement attendu/normal?

Non, je ne veux pas l'actualiser mais qu'elle remonte calmement car en cas de scroll, j'ai aussi mon menu qui passe en position relative (css) pour suivre le défilement de la page et je veux qu'en cas de clic sur toTop tous reprenne sa place calmement histoire de rendre un comportement agréable et fluide...

Dernière modification par steeve (26-09-2013 08:10:14)

steeve · 26-09-2013 15:00:13

Bien en fait, non, impossible de mettre en place la solution que vous m'avez donné
En revanche vos information m'on fait réfléchir autrement, plutot que de vérifier sa présence, je l'ai ajouter d'office puis je le masque...

<script>

        $(document).ready(function() {

            var id = "backtotop";

            $('body').append('<div id="toTop">' + '<a href="#" id="' + id + '">toTop</a>' + '</div>');

            $('#toTop').fadeOut();

            $(window).scroll(function() {

                if ($(window).scrollTop() === 0) {

                    $('#toTop').fadeOut('8000');

                } else {

                    $('#toTop').fadeIn('8000');

                }

            });

            $(function() {

                $('#' + id).click(function(e) {

                    e.preventDefault();

                    $('html, body').animate({scrollTop: '0px'}, 1300);

                });

            });

        });

    </script>

Cette solution fonctionne comme je le veux a une chose près, le bouton apparaît 1 petite seconde au chargement puis disparaît...
Je continue les recherches

Jc · 27-09-2013 08:37:49

Bonjour,

Attention tout de même d'utiliser les dernières versions de jquery et jquery ui, car il faut passer par un hide() ou un effet() selon ce que l'on veut faire.
Le hide() correspondant à l'attribut style="display:none" il suffit de l'appliquer directement au chargement et retirer votre fadeOut().

++

steeve · 27-09-2013 11:45:42

Ok, merci modification hide() faites et je n'ai plus l'apparition du bouton cette petite seconde !
Si non quel version de jQuery et jQuery Ui préconisez vous ?
Si non, pour le code et vu que vous n'apportez plus d'observation supplémentaire, je passerais le poste en résolu, je reviendrais sur cette fonction plus tard car je compte lui ajouter une navigation par les ancres (ex: href="#monLien") mais avant, je voudrais revoir et mettre en ordre tous ce que j'ai déjà fait et vous montrer d'autre choses si je ne vous prend pas trop de temps ?

Jc · 27-09-2013 12:52:00

Bonjour,

Je vous recommande de toujours utiliser les versions stables de production et non les version legacy.
Ensuite, aujourd'hui, le mieux je pense est d'utiliser JQuery 1.9.1 avec JQueryUI 1.10.3

++

nicolas · 30-09-2013 15:04:04

Jc a écrit :

Non ce n'est pas ainsi que la condition doit être vérifiée. Voici la bonne méthode:

// en jquery
if ($("#toTop")){ }
// en javascript
if (document.getElementById("toTop")){ }

Tu es en train de l'enduire d'erreurs; ça va coller partout. On teste bien l'existence d'un élément avec $('#mon-id').length :

http://learn.jquery.com/using-jquery-co … nt-exists/

Jc · 02-10-2013 14:37:50

Bonjour,

Sémantiquement parlant rechercher l'exitence d'au moins un objet du DOM est plus performant que d'en compter le nombre, mais le mieux à tous les niveaux reste

 if (document.getElementById("toTop")){   }

 

++

PHP|Débutant :: Forums

Advertisement

#1 24-09-2013 08:43:28

jQuery et IE9

#2 24-09-2013 08:57:10

Re : jQuery et IE9

#3 24-09-2013 09:26:54

Re : jQuery et IE9

#4 24-09-2013 11:36:07

Re : jQuery et IE9

#5 25-09-2013 00:50:53

Re : jQuery et IE9

#6 25-09-2013 12:36:27

Re : jQuery et IE9

#7 25-09-2013 12:41:53

Re : jQuery et IE9

#8 26-09-2013 07:14:47

Re : jQuery et IE9

#9 26-09-2013 08:02:39

Re : jQuery et IE9

#10 26-09-2013 15:00:13

Re : jQuery et IE9

#11 27-09-2013 08:37:49

Re : jQuery et IE9

#12 27-09-2013 11:45:42

Re : jQuery et IE9

#13 27-09-2013 12:52:00

Re : jQuery et IE9

#14 30-09-2013 15:04:04

Re : jQuery et IE9

#15 02-10-2013 14:37:50

Re : jQuery et IE9

Pied de page des forums