Javascript ne fonctionne pas sur IE

J'ai le code suivant, qui, en survolant un élément, affiche une div, et se cache au passage du curseur. Cela fonctionne bien sur tous les navigateurs, sauf IE, voici mon code;Javascript ne fonctionne pas sur IE

// JavaScript Document 

var baseopacity=0 
function showtext(thetext){ 
    if (!document.getElementById) 
    return 
    textcontainerobj=document.getElementById("tabledescription") 
    browserdetect=textcontainerobj.filters? "ie" : typeof textcontainerobj.style.MozOpacity=="string"? "mozilla" : "" 
    instantset(baseopacity) 
    document.getElementById("tabledescription").innerHTML=thetext 
    highlighting=setInterval("gradualfade(textcontainerobj)",50) 
} 

function hidetext(){ 
    cleartimer() 
    instantset(baseopacity) 
} 

function instantset(degree){ 
    if (browserdetect=="mozilla") 
     textcontainerobj.style.MozOpacity=degree/100 
    else if (browserdetect=="ie") 
     textcontainerobj.filters.alpha.opacity=degree 
    else if (document.getElementById && baseopacity==0) 
     document.getElementById("tabledescription").innerHTML="" 
} 
function cleartimer(){ 
    if (window.highlighting) clearInterval(highlighting) 
} 
function gradualfade(cur2){ 
    if (browserdetect=="mozilla" && cur2.style.MozOpacity<1) 
     cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.2, 0.99) 
    else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100) 
     cur2.filters.alpha.opacity+=20 
    else if (window.highlighting) 
     clearInterval(highlighting) 
} 
//<![CDATA[ 
$(window).load(function(){ 
    $(".tiptext").mouseover(function() { 
     $(this).children(".description").show(); 
    }).mouseout(function() { 
     $(this).children(".description").hide(); 
    }); 
});//]]>

Voici le code HTML pour l'un des éléments (chaque élément est une image);

<div id="one"> 
<div class="tiptext"><a href="http://mathremake.site40.net/"><img src="../images/web/1.png" height="180" width="300"/></a> 
<div class="description"><font face="Arial, Helvetica, sans-serif"><u>Ascension Math Page</u></font><font size="2" face="Arial, Helvetica, sans-serif"><br>Ascension Collegiate's Mathematics department web page.</br></font></div> 
</div> 
</div>

Et le CSS pour le même élément;

#one { 
    top: 200px; 
    position: absolute; 
    width: 300px; 
    position: absolute; 
    left: 50%; 
    margin-left: -500px; 
    }

Toute l'aide est appréciée, merci. :)

Source

2012-07-01 Matt Levesque

S'il vous plaît, indentez votre code et utiliser des points-virgules, le cas échéant. Juste parce que votre interpréteur JavaScript n'en a pas besoin, cela ne veut pas dire que les humains ne le font pas. De même, lorsque vous postez sur une question sur Stack Overflow, "cela ne fonctionne pas" n'est généralement pas suffisant pour obtenir de bonnes réponses. Je vous recommande de modifier votre message, y compris les erreurs que vous recevez. – Brad

Le gestionnaire d'événements mouseOut est-il appelé? Ajoutez un débogage de console ou 'alert ('mouseOut')' pour vous assurer. –

De plus, vu que vous utilisez déjà jQuery, vous pouvez aussi utiliser les fonctions '$ .fadeIn()' et '$ .fadeOut()' pour faire votre animation pour vous. –

IE a un problème avec $(window).load(), vous pouvez essayer ceci:

$(window).bind('load', function(){ 
    ... 
});

ou:

$(document).ready(function() { 
    $(".tiptext").hover(function() { 
     $(this).find(".description").show(); 
    }, function() { 
     $(this).find(".description").hide(); 
    }); 
});

Source

2012-07-01 01:57:46 undefined

++ 1 innit! –

@Tats_innit merci bruv :) – undefined

Vous pouvez document prêt, vous pouvez également utiliser la fonction .hover() qui peut faire les choses plus faciles. Aussi je recommanderais ajouter une propriété display:none css à votre classe .description ou faire une nouvelle classe .hide et l'ajouter.

Javascript

$(function(){ 
    $(".tiptext").hover(function() { 
     $(".description").show(); 
    },function() { 
     $(".description").hide(); 
    }); 
    });

CSS:

.description{ 
    display:none; 
    }

solution

Source

2012-07-01 02:08:50

Javascript ne fonctionne pas sur IE

Répondre

Questions connexes