11521 sujets

JavaScript, DOM et API Web HTML5

Mettre une exception IE

Bonsoir,

J'utilise le code suivant pour que dès que je scroll, mes divs aient l'opacité qui passe de 0 à 1.
Cela marche très bien, sauf avec IE...
Du coup, tous les éléments sont en opacity:0 donc on voit rien si on lance depuis IE.

Donc, comment je peux faire pour appliquer une opacité de 0 sauf si le navigateur utilisé est IE ?
J'ai regardé du côté des feuilles conditionnelles et de "!important" mais ça ne marche pas..

Merci d'avance pour votre aide,

Cdl

$(document).ready(function() {
 $(window).scroll( function(){
    
        $('nom de mes divs').each( function(i){
            
            var objectTop = $(this).offset().top;
            var windowBottom = $(window).scrollTop() + $(window).innerHeight();
            
            if( objectTop < windowBottom ){          
                $(this).animate({'opacity':'1'},1000);   
            }   
        });     
    });    
});

Modifié par flox (27 Nov 2016 - 12:36)
Bonsoir
Voici le bout de code que j'utilise pour identifier IE:
Dans le <head>

<script type="text/javascript">
    var UA = navigator.userAgent;
    var isIE = UA.match(/(Trident|MSIE)/);
    if(isIE) document.getElementsByTagName('html')[0].setAttribute('data-IE', 'IE');
 </script>

Ce que ça veut dire:
1) la chaîne de caractères retournée par navigator.userAgent contient une foultitude trucs, il semble que le fait qu'elle contienne "(Trident|MSIE)" puisse être considérée comme un marqueur de IE
2) la dernière ligne force la balise <html> de ta page à avoir un attribut "data_IE" que tu peux ensuite exploiter en CSS.
Comment ça marche:
Tu peux tester si tu es sous IE en javascript par 
if(isIE) {....}

Tu peux tester si tu es sous IE en CSS par 
html[data-IE]{...}

Avec ce gadget, je suis jusqu'à présent arrivé à traiter tous mes problèmes liés à l'utilisation de IE
Tout de même, sur le principe, je ne mettrais pas l'opacité par défaut à 0 en css. Je ferais tout en javascript, ce qui eviterait de prendre le problème à l'envers en cas de bugs, comme ici, et de dépendre de javascript.

Sinon : l'utilisation du user agent dans la détection d'un navigateur n'est pas fiable. Je lui préfère de loin un test via le support d'une propriété css.
Modifié par Olivier C (27 Nov 2016 - 00:29)
Bonsoir,

Merci à vous pour vos réponses.
Du coup, au lieu de mettre l'opacité à 0 depuis le css, je l'ai mis dans mon code javascript 

$(this).addClass("fadeIn");


.fadeIn{opacity:0;}


Ainsi, je n'ai plus besoin de vérifier depuis quel navigateur la visite du site se fait vu que s'il ne peut supporter le code javascript que j'utilise, ça n'ajoutera pas la class .fadeIn qui met l'opacité à 0 pour le coup. C'est bien juste ?

Ha, et sinon, en cherchant sur Internet j'ai trouvé ce bout de code, pour détecter si l'utilisateur peut supporter l'opacité. Mais je ne connais pas, est-ce bien sa fonction ?

if('opacity' in document.body.style) {......}
Bonsoir,

Il me semble que sous I.E. l'opacité se gère via la propriété filter.

Un truc du genre 
element {
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);/* opaque */
}
element {
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);/* transparent */
}


Bonne soirée.
Modifié par Greg_Lumiere (26 Nov 2016 - 21:55)
Administrateur
Bonjour,

de quelle(s) version(s) d'IE est-il question ? IE11, IE10 ou cette antiquité d'IE8 plus utilisée que par quelques entreprises et administrations ou assimilé ? (IE9 a moins de parts de marché qu'IE8...)
Ou bien Edge ?
@flox : je n'ai pas de quoi vérifier car je n'ai rien sous la main pour tester mais, apriori, à la lecture de votre dernier mesage, vous êtes sur la bonne voie.

PS : et d'accord avec Felipe pour dire que la version d'IE en cause ne peut être que très ancienne. Sinon il ne peut s'agir que d'un bug qui n'est pas lié à la propriété css susnomée.
La version de IE concernée gère forcément la propriété opacity si non les éléments seraient visibles...

Je pense donc qu'il s'agit plus d'un problème au niveau du JS qu'autre chose.
Du coup, à quoi fait référence $('fadeIn').each dans ton code ?
As-tu aussi vérifié que la boucle est bien exécutée ? Ajoute par un exemple un console.log("ok") à l'intérieur de la boucle et vérifie ta console.
Vérifie d'ailleurs tout simplement ta console pour voir s'il n'y a aucune erreur.

Il faut noter que les commentaires conditionnels ont été abandonnés depuis la version 10 et qu'il faut passer par un
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

(pas très conseillé) pour arriver au bon résultat.
Zelalsan a écrit :
La version de IE concernée gère forcément la propriété opacity si non les éléments seraient visibles...
Logique ! J'accuse l'heure tardive ! Smiley sweatdrop
Hum, je viens de vérifier et au final ce bout de code marche bien sur IE; mais c'est mon navigateur qui avait un problème. il s'avère qu'il restreint les scripts par défaut. Du coup tout fonctionne, merci à vous pour vos réponses !

Smiley cligne
Sujet clos
Aller à