11548 sujets

JavaScript, DOM et API Web HTML5

Javascript et jquery sous ie5.5

Bien le bonjour à tous.
alors voilà, je vous présente mon petit souci qui concerne mon code javascript.
je suis en train de me faire un site et j'ai voulu en profiter pour tester la librairie jquery et notamment son effet de "slide".
je ne peux tester mon site que sur firefox, ie5.5,ie6 et ie7 et je suis assez satisfaite car le javascript fonctionne sur presque tous.
Ie6,ie7 et firefox c'est impec. par contre, sous ie5.5 rien ne se passe.
alors je me suis demandée si ie5.5 supportait cette librairie et en testant par un "alert" j'ai pu m'apercevoir que oui.
c'est pourquoi je viens solliciter votre aide car je ne trouve pas la solution.
sans plus tarder, voici mes différents codes.

Le code HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

	<title></title>

	<link rel="stylesheet" type="text/css" media="screen,projection" href="ecran.css" />
        <link href="css/orange.css" rel="stylesheet" type="text/css" />
	<!--[if lte IE 6]>
	<link rel="stylesheet" type="text/css" href="css/ie-only.css" />
	<![endif]-->
	<!--[if IE ]>
	<link rel="stylesheet" type="text/css" href="css/ietous.css" />
	<![endif]-->
	
	<script type="text/javascript" src="js/jquery-1.2.2.min.js"></script>
	
	<script type="text/javascript" src="js/slidemy.js"></script>  
	<script type="text/javascript" src="js/jsmy.js"></script> 
	
</head>
<body>

<div id="wapper">
	<div id="left">
		<form method="get" action="<?php echo $PHP_SELF; ?>">
			<fieldset>
			<legend>Switcher :</legend>
				<div id="switcher">
					<p><input type="image" src="img/default/switch_orange.gif" name="choix_un" value="orange" alt="choisir le fond orange" />
					<input type="image" src="img/default/switch_vert.gif" name="choix_deux" value="vert" alt="choisir le fond vert" />
					<input type="image" src="img/default/switch_violet.gif" name="choix_trois" value="violet" alt="choisir le fond violet" />
					<input type="image" src="img/default/switch_beige.gif" name="choix_quatre" value="beige" alt="choisir le fond beigge" />
					</p>
				</div>
			</fieldset>
		</form>
	</div>
	
	
	<div id="main">
			<ul id="nav">
			
				<li class="sup">
					<a href="index.php#formasub" title="bla" >blabla</a>
					<div class="endlien"></div> 
					
						<ul class="sub" id="formasub">
												
								
									<li>blabla</li>
									
									<li>blabla</li>							
							
						</ul>
					
				</li>
				
				
				<li class="sup">
					<a href="index.php#comp" title="bla">blabla</a>
					<div class="endlien"> </div>
							
						<ul id="comp" class="sub">
							<li>blabla
									<ul class="subsub">
										<li></li>
										<li></li>
										<li></li>
										<li></li>
									</ul>
							</li>
							<li>
									
									<ul class="subsub">
										<li>bla</li>
										<li>bla</li>
										<li>bla</li>
										<li>bla</li>
									</ul>
							</li>
							<li>bla</li>
							<li>bla</li>
							<li>bla</li>
						</ul>
						
					
				</li>
				
				<li class="sup">
					<a href="index.php#exp" title="bla">bla</a>
					<div class="endlien"></div>
				
				
					<ul id="exp" class="sub">
						<li>
							<ul class="subsub">
								<li>bla</li>
								<li>bla</li>
							</ul>
						 </li>
					</ul>
					
				
				</li>
				
				<li class="sup">
					<a href="index.php#rea" title="bla">bla</a>
					<div class="endlien"></div>
				
					
					<ul id="rea" class="sub">
						<li>bla </li>
                                                <li>bla </li>
					</ul> 
						
					
				</li>
				
				<li class="sup">
					<a href="index.php#cont" title="bla">bla</a>
					<div class="endlien"></div>
				
					
					<ul id="cont" class="sub">
						<li>bla </li>
                                                <li>bla </li>
											
					</ul>
				</li>				
				
			</ul>
		<p id="pres">
			blalba
		</p>
		
	</div>
	<div class="clear" />
	
</div>

</body>
</html>


S'ensuit le code javascript qui cache lors du chargement les bloc "ul" de classe "sup"( jusque ici tout va bien)


// JavaScript Document
function chargecache(){
	
	
	if(document.getElementsByTagName) {
		
		//on test si c un ul et on le stock
		//on cible l'élement parent pour réduir la recherche
		var parent=document.getElementById("main");
		
		//on recupere les ul de div main en vérifiant si ils existent
		if(parent.getElementsByTagName("ul")) {
			
			//recuperation des ul
			var table=parent.getElementsByTagName("ul");
			
			for (i=0;i<table.length;i++) {
				
					
					//on recupere la classe
					var classe=table[i].className;
					
					if (classe!=null){
					       //si classe vaut visible
						if(table[i].className=="sub"){
							table[i].className="cache";
							
							}
					}
				}
				
			
			
			}
		}
	
	
	
	}

window.onload=chargecache;


et voici mon ptit code jquery pour faire afficher lors du clique sur un lien le ul correspondant :

// JavaScript Document
/////////////////////////////////////////////////
//animation j query/////////////////////////////
/////////////////////////////////////////////////
$(document).ready( function () {
		alert ("rentre dans jquery");
		//variable global
		//variable qui memorise le ul afficher
		var current;
		//alert ("current"+current);
		
		$("li.sup a").focus(								 
			function(){
			//current.slideUp("slow");
			
			//recuperation du li a afficher
			//on efface le current si deja lien actif
			if(current!=null){
				current.slideUp("slow");
				current.removeClass("sub");
				current.addClass("cache");
				
				}
			
				$(this.hash).slideDown("slow");
				$(this.hash).removeClass("cache");			
				$(this.hash).addClass("sub");
				current=$(this.hash);
				return false;
			
			
						}
		);
		
			
		
		
});

quelques petites remarques:
-mon "alert(rentre jquery)' me permet donc de verifier que ie5.5 rentre dans la fonction
-avant de mettre .focus j'avais testé avec .click et ca ne marchait pas non plus.

alors est ce que ".click" et ".focus" ne sont pas pris en compte par ie5.5 (si c'est le cas comment contourner?) ?

d'autre part je m'interroge sur un point: faut il préférait le ".click" au ".focus"? je m'explique: le ".focus" me permet de gérer à la fois le click (du moins une simulation: en cliquant sur le lien ca lui donne le focus) et la navigation par tabulation (pas besoin de faire tapper sur "entrer" pour que l'élément apparaisse). donc je me demandais qu'est ce qui était le mieux du moins en terme de code propre (je précise: je débute en javascript!)

je vous remercie d' avoir lu jusqu'au bout et si quelqu'un dans l'assemblée connaitrait la solution, j'en serais toute contente de la connaitre! Smiley biggrin
en même temps vous me direz à juste titre: pourquoi t'embêtes tu à vouloir ton site fonctionnel sous ie5.5 sachant que c'est un site perso? et bien, bonne question! je ne sais pas mais en tout cas, je suis devant ce problème et ca me turlupine!![/i][/i][/i]
Modifié par ploufplouf (24 Mar 2008 - 17:06)
Sujet clos
Aller à