11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Le menu vertical javascript + Internet explorer

Bonsoir à tous,

Je testais le super script de menu déroulant vertical (le V1) et j'ai été surpris de voir qu'en recopiant le tout sur une autre page, les menus restaient ouverts.

Il y a-til une procédure spéciale à effectuer (ou un morceau de CSS à ne pas mettre ?) ?
Après un test sur IE 7, il s'avère qu'il faille activer le controle.

Voici le code de ma page :

<!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><title>Largeur fixe 750, header/menu gauche/contenu/footer.</title>



<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>

<link rel="stylesheet" type="text/css" href="layout.css" media="screen" />

</head><body>

<div id="conteneur">

	  <div id="header">
ffff
</div>

 <div id="sousheader">
kk
</div>



	  <div id="gauche"><dl id="menu">

		<dt onclick="javascript:montre();"><a href="index.php">Index</a></dt>
			
		<dt onclick="javascript:montre('smenu2');">Menu 2</dt>
			<dd id="smenu2">
				<ul>
					<li><a href="#">Sous-Menu 2.1</a></li>
					<li><a href="#">Sous-Menu 2.2</a></li>

					<li><a href="#">Sous-Menu 2.3</a></li>
				</ul>
			</dd>	

		<dt onclick="javascript:montre('smenu3');">Menu 3</dt>
			<dd id="smenu3">
				<ul>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>

					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
				</ul>
			</dd>

		<dt onclick="javascript:montre('smenu4');">Menu 4</dt>
			<dd id="smenu4">
				<ul>
					<li><a href="#">Sous-Menu 4.1</a></li>
					<li><a href="#">Sous-Menu 4.1</a></li>
				</ul>
			</dd>

	
</dl>
		
	  </div>
	  
	  <div id="centre">
  	  partie centrale qui "pousse" les colonnes vers le bas.<br>
  	  partie avec du contenu occupant le reste de la largeur<br>

  	  partie avec du contenu occupant le reste de la largeur<br>
  	  partie avec du contenu occupant le reste de la largeur<br>
  	  partie avec du contenu occupant le reste de la largeur<br>
  	  partie avec du contenu occupant le reste de la largeur<br>
  	  partie avec du contenu occupant le reste de la largeur<br>
  	  partie avec du contenu occupant le reste de la largeur<br>

  	  partie avec du contenu occupant le reste de la largeur<br>
  	  partie avec du contenu occupant le reste de la largeur<br>
  	  partie avec du contenu occupant le reste de la largeur<br>
  	  partie avec du contenu occupant le reste de la largeur<br>
  	  partie avec du contenu occupant le reste de la largeur<br>
  	</div>

	  
	  <div id="pied">blabla </div>
</div>
	  


</body></html>


Vous l'aurez remarqué, j'ai repris le gabarit de mise en page d'AlsacreationS.

Je ne comprend donc pas pourquoi est-ce que la page exemple du tutorial ne me demande aucun controle sur IE7 et ne pose pas de problème sur IE6 alors qu'en recopiant le tout sur une autre page...
Merci d'avance pour votre aide précieuse.

:)
Modifié par proki (23 Aug 2007 - 07:20)
En fait, la page html toute seule marche.
Mais dès que je passe par mon moteur de template (donc php+html), le menu ne marche plus Smiley decu
le window.onload doit etre écrasé par un autre event planqué dans un fichier JS de ton moteur de template.
su tu passais par un 

// written by Dean Edwards, 2005
// with input from Tino Zijdel, Matthias Miller, Diego Perini

//  http://dean.edwards.name/weblog/2005/10/add-event/
 

function addEvent(element, type, handler) {
	if (element.addEventListener) {
		element.addEventListener(type, handler, false);
	} else {
		// assign each event handler a unique ID
		if (!handler.$$guid) handler.$$guid = addEvent.guid++;
		// create a hash table of event types for the element
		if (!element.events) element.events = {};
		// create a hash table of event handlers for each element/event pair
		var handlers = element.events[type];
		if (!handlers) {
			handlers = element.events[type] = {};
			// store the existing event handler (if there is one)
			if (element["on" + type]) {
				handlers[0] = element["on" + type];
			}
		}
		// store the event handler in the hash table
		handlers[handler.$$guid] = handler;
		// assign a global event handler to do all the work
		element["on" + type] = handleEvent;
	}
};
// a counter used to create unique IDs
addEvent.guid = 1;

function removeEvent(element, type, handler) {
	if (element.removeEventListener) {
		element.removeEventListener(type, handler, false);
	} else {
		// delete the event handler from the hash table
		if (element.events && element.events[type]) {
			delete element.events[type][handler.$$guid];
		}
	}
};

function handleEvent(event) {
	var returnValue = true;
	// grab the event object (IE uses a global event object)
	event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event);
	// get a reference to the hash table of event handlers
	var handlers = this.events[event.type];
	// execute each event handler
	for (var i in handlers) {
		this.$$handleEvent = handlers[i];
		if (this.$$handleEvent(event) === false) {
			returnValue = false;
		}
	}
	return returnValue;
};

function fixEvent(event) {
	// add W3C standard event methods
	event.preventDefault = fixEvent.preventDefault;
	event.stopPropagation = fixEvent.stopPropagation;
	return event;
};
fixEvent.preventDefault = function() {
	this.returnValue = false;
};
fixEvent.stopPropagation = function() {
	this.cancelBubble = true;
};

addEVent(window,'load', montre)


Oui cela peut paraitre lourd, mais c'est le meilleur addEvent du monde :
http://dean.edwards.name/weblog/2005/10/add-event/[/i]
Sujet clos
Aller à