[Résolu] Faire cohabiter 2 scripts ??

(reprise du message précédent)

hi hi...

Rien n'empêche d'inclure un script dans un commentaire conditionnel.

Mais cela n'enlève rien sur le fond: la détection js se fait sur les objets et les méthodes nécessaires à un script, pas sur les identifiants formel du navigateur.

Laurent Denis a écrit :
Rien n'empêche d'inclure un script dans un commentaire conditionnel.

D'accord, mais je crois qu'on ne peut pas mettre un commentaire conditionnel dans un script.. et comme mon "truc" se trouve en plein milieu du script, je suis un peu coincé...

Et bien finalement après avoir digéré tous vos messages, un peu de cogitation, et je pense avoir trouvé la solution la moins mauvaise pour me sortir de ce mauvais pas...
Laurent Denis, amha tu seras d'accord :
Alors, tout commence pour les gentils explorateurs qui acceptent le :hover et le :focus pour tout le monde. Le CSS sera suffisant pour mon menu déroulant :

HTML :

<div id="menu_top">
	
	<!-- L'étude Notariale -->
	<dl>
	
		<dt>L'étude Notariale</dt>
		<dd><ul>
			<li><a href="#">Présentation</a></li>
			<li><a href="#">Les Associés</a></li>
			<li><a href="#">Vos Interlocuteurs</a></li>
		</ul></dd>
	</dl>
	
	
	<!-- Annonces Immobilières -->
	<dl>
		<dt>Annonces Immobilières</dt>
		<dd><ul>
			<li><a href="#">Recherche multi-critères</a></li>
			<li><a href="#">Le service négociation</a></li>
			<li><a href="#">Les frais de négociation</a></li>
			<li><a href="#">Proposer votre bien</a></li>
			<li><a href="#">La région en bref</a></li>
		</ul></dd>
	</dl>
	
	<!-- Profession Notaire -->
	<dl>
		<dt>Profession Notaire</dt>
		<dd><ul>
			<li><a href="#">Qu'est-ce qu'un notaire ?</a></li>
			<li><a href="#">Que fait-il ?</a></li>
			<li><a href="#">Qu'apporte-t-il ?</a></li>
			<li><a href="#">Qui le choisit ?</a></li>
			<li><a href="#">Les Frais d'acte</a></li>
		</ul></dd>
	</dl>
	
	
	<dl>
		<!-- Informations Juridiques -->
		<dt>Informations Juridiques</dt>
		<dd><ul>
			<li><a href="#">Droit de la famille</a></li>
			<li><a href="#">Gestion de patrimoine</a></li>
			<li><a href="#">Droit immobiler</a></li>

		</ul></dd>
	
	</dl>
</div> <!-- Fin Menu Top -->

et CSS :

#menu_top dt{
	color:#fff;
	font-size:1.2em;
	text-decoration:none;
	font-weight:bold;
	display:block;
	padding:17px 0 5px 14px;
}

#menu_top dl:hover dt,
#menu_top dl:focus dt,
#menu_top dl.sfhover dt{
	background: url(img/etoile.gif) no-repeat scroll 0 0;
	color:#000;
}


#menu_top{
	border-bottom: 3px solid #069 ;
	height:4.5em;
	}

#menu_top dl{
	float:left;
	margin-left:1em;
	width:11em;
	position:relative;
	}
	
#menu_top dl:hover dt,
#menu_top dl.sfhover dt{
	cursor:pointer;
	}

#menu_top dt{
	width:6em;
	}

#menu_top dl dd{
	display:none;
	}
	
#menu_top dl:hover dd,
#menu_top dl.sfhover dd{
	display:block;
	width:15em;
	position:absolute;
	left:14px;
	}
	
	
#menu_top dd a{
	color:#fff;
	text-decoration:none;
	font-weight:bold;
	}
	
#menu_top dd a:hover{
	color:#000;
	}

Maintenant, le vilain petit canard (peut-être un jour deviendra-t-il un cygne ??)

j'ajoute ceci dans mon head :

<!--[if IE]>
<script type="text/javascript" src="menu_top_ie.js"></script>
<![endif]-->

avec menu_top_ie.js qui ressemble à ça :

sfHover = function() {
	var sfEls = document.getElementById("menu_top").getElementsByTagName("DL");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);[/i]

=> ce qui explique les .sfhover dans ma feuille se style
Il me reste, il me semble, une famille à part, ceux qui utilisent IE mais qui ont désactivé JS
Alors j'ajoute un noscript dans mon commentaire conditionnel, dans lequel je vais joindre une feuille de style "simple", simple en ce sens qu'il n'y aura pas de menu déroulant pour eux, bah oui quoi, tant pis !!
donc ça donne :

<!--[if IE]>
<script type="text/javascript" src="menu_top_ie.js"></script>
<noscript>
<style type="text/css">
@import url("ie-ss-js.css");
</style>
</noscript>
<![endif]-->

où ie-ss-js.css ressemble à ça :

#menu_top dl dd{
	display:block;
	width:15em;
	font-size:0.8em;
	position:absolute;
	left:14px;
	}

Moi il y 1 heure ->
Moi maintenant ->

Merci à Laurent Denis et à dunjl pour vos conseils de technicien ou de sage, j'ai l'impression (l'impression hein !!) de m'en être bien sorti sur ce coup là
à + !! [/i]
Modifié par kristof (08 Aug 2006 - 00:07)

soit. Pour ma part, je ne suis pas d'accord.

Je dirais simplement que si j'ai développé ce menu en JS, c'était pour éviter ces menus déroulants en CSS afin de rendre la navigation possible sans souris.
Bien que ce menu JS ne soit pas infaillible, il a au moins le mérite de ne pas utiliser de contournement et d'être plus accessible que celui en CSS. D'ailleurs, il existe mieux (menu déroulant partie 1 / menu déroulant partie 2).

Maintenant, c'est vrai que dès que c'est possible, il vaut mieux se passer du menu déroulant, çà évite les soucis.

Tiens... A ce propos, la première version que j'avais développé n'employait pas cette structure. Une chose me gène dans celle-ci : On crée de multiples listes descriptives qui ne contiennent qu'un dt et qu'un dd. Quel intérêt de faire une liste dès lors ?
Une structure telle que ci-dessous me semblait plus logique.
Code édité :

<div id="menu">
	<div id="menu1">
		<h3>Menu 1</h3>
		<ul>
			<li><a href="#">lien</a></li>
			<li><a href="#">lien</a></li>
			<li><a href="#">lien</a></li>
			<li><a href="#">lien</a></li>
		</ul>
	</div>
	<div id="menu2">
		<h3>Menu 2</h3>
		<ul>
			<li><a href="#">lien</a></li>
			<li><a href="#">lien</a></li>
			<li><a href="#">lien</a></li>
			<li><a href="#">lien</a></li>
		</ul>
	</div>
	<div id="menu3">
		<h3>Menu 3</h3>
		<ul>
			<li><a href="#">lien</a></li>
			<li><a href="#">lien</a></li>
			<li><a href="#">lien</a></li>
			<li><a href="#">lien</a></li>
		</ul>
	</div>
</div>

Dans le doute, je m'étais abstenu en copiant celle des menus d'Alsa'... A l'heure actuelle, je n'ai pas l'impression d'avoir fait le bon choix et je pense opter pour celle que je viens de donner. J'ai bien essayé de ne faire qu'une liste descriptive contenant tous les dt et dd mais bizarrement, j'ai buté dessus; les menus déroulants ne fonctionnaient pas. C'est pourquoi j'ai tendance à croire que cette multiplication des dl n'a qu'une vocation technique et non sémantique.

bonne nuit.
Modifié par koala64 (08 Aug 2006 - 08:06)

oups koala64 je t'avais oublié dans mes remerciements...

Mais avec la propriété :focus la navigation sans souris fonctionne, non ??

Sinon au départ mon menu ressemblait plutôt à ça :

<ul>
       <li>
            <hn>...</hn>
            <ul>
                  <li><a>...</a></li>
                  ...
             </ul>
        </li>
</ul>
<ul>
.....
</ul>

=> Peut-être un peu mieux, je sais pas, comme toujours il n'y a pas de solution idéale j'ai l'impression !!
Je l'avais modifié en utilisant les listes de déf pour utiliser ton JS qui marche très bien il est vrai, mais qui ne s'accordait pas bien avec d'autres choses, enfin bref ...
Effectivement j'essaie au max de convaincre des inconvéniants des menu déroulants et autres roll over, mais c'est difficile de convaincre des clients qui veulent "que ça bouge", alors on est bien obligé parfois de se plier à leur exigences, je débute dans le métier, je n'ai pas encore bcp de clients et ça m'embêterai d'en voir partir un juste pour ça (en + chez qq'un qui ne sera pas géné de faire un truc à la gomme), alors j'essaie de faire au mieux .
Allez bonne nuit !

Essaye donc ceci :

// Raccourci et création d'un objet
var d = document,
	o = {};

// Définition des propriétés de l'objet
o.Menu =
{

	// Chargement du menu
    __Load__: function()
	{

		// On lance le test pour s'assurer du bon fonctionnement
        o.Menu.__Test__();

    },

	// Test d'existence des méthodes et de la syntaxe xhtml
    __Test__: function()
	{

		// Si l'une des méthodes du script n'est pas interprétée ou si le menu n'existe pas, on stoppe le script.
        if ( !d.getElementById ||
		     !d.getElementsByTagName ||
		     !d.createElement ||
		     !d.createTextNode ||
		     !d.getElementById('menu') ||
		     !d.getElementById('menu').setAttribute ||
		     !d.getElementById('menu').replaceChild ||
		     !d.getElementById('menu').appendChild ||
		     !d.getElementById('menu').getElementsByTagName('dl') ) return false;

		// Une fois le test effectué, on initialise le menu.
		return o.Menu.__Init__();

	},

	// Méthode d'initialisation du menu
	__Init__:function()
	{

		// On définit les variables nécessaires.
        var iA,
			oMenu = d.getElementById('menu'),
			oDl = oMenu.getElementsByTagName('dl');

		// On cache tous les éléments dd en lançant la méthode dédiée à cette tâche.
        o.Menu.__HideLists__();

		// Pour chaque élément dl du tableau oDl,
        for ( iA = oDl.length - 1; iA >= 0; iA-- )
        {
			// On récupère l'élément dt.
            var oDt = oDl[iA].getElementsByTagName('dt')[0];
			// On crée un élément dt et un élément a
			var oNewDt = d.createElement('dt'),
				oA = d.createElement('a'),
				oTextA = d.createTextNode('');

			// On définit les propriétés de l'objet oA
			// (récupération du noeud texte de l'élément dt pour définir celui de l'élément a)
			oA.setAttribute('href','#');
            oTextA.data = oDt.firstChild.nodeValue;

			// On constitue l'arbre DOM en remplaçant l'élément dt du code xhtml
			// par celui qu'on vient de créer.
            oA.appendChild(oTextA);
            oNewDt.appendChild(oA);
            oDl[iA].replaceChild(oNewDt,oDt);

			// On définit des méthodes en fonction des actions de l'utilisateur.
			oA.onclick = o.Menu.__Discard__;
            oDl[iA].onmouseover = o.Menu.__MouseDisplay__;
            oA.onfocus = o.Menu.__TabDisplay__;
			oA.onkeypress = o.Menu.__TabDisplay__;
        }

    },

	// Méthode d'affichage de l'élément dd lorsqu'on le survole.
    __MouseDisplay__:function()
	{

		// On cache tous les éléments dd en lançant la méthode dédiée à cette tâche.
        o.Menu.__HideLists__();

		// On récupère l'élément dd de l'élément dl qu'on survole dans un objet.
        var oDd = this.getElementsByTagName('dd')[0];

		// On affecte la propriété css "display: block;" à l'objet oDd (affichage)
        oDd.style.display = 'block';

		// On ajoute la classe sfhover au survol
		this.className += ' sfhover';

		// On cache l'élément dd lorsqu'on ne survole plus l'élément dl.
        this.onmouseout = o.Menu.__HideLists__;

    },

	// Méthode d'affichage de l'élément dd lorsqu'il prend le focus.
    __TabDisplay__:function()
	{

		// On cache tous les éléments dd en lançant la méthode dédiée à cette tâche.
        o.Menu.__HideLists__();

		// On récupère l'élément dd de l'élément dl qui a le focus dans un objet.
        var oDd = this.parentNode.parentNode.getElementsByTagName('dd')[0];

		// On affecte la propriété css "display: block;" à l'objet oDd (affichage)
        oDd.style.display = 'block';

		// On donne le focus au premier lien de l'élément dd traité.
        oDd.getElementsByTagName('a')[0].focus();

    },

	// Méthode de masquage des éléments dd
    __HideLists__:function()
	{

		// On définit les variables nécessaires.
        var iA,
			oDl = d.getElementById('menu').getElementsByTagName('dl'),
			oDd = d.getElementById('menu').getElementsByTagName('dd'),
			sUserAgent = navigator.userAgent,
			isOpera = sUserAgent.indexOf('Opera') > - 1,
			isIE = sUserAgent.indexOf('compatible') > -1 &&
				   sUserAgent.indexOf('MSIE') > -1 &&
				   !isOpera;

		// Pour chaque élément dl du tableau oDl,
        for (iA = oDl.length - 1; iA >= 0; iA-- )
		{
			// On supprime la class sfHover
			if( !isIE )
				oDl[iA].setAttribute('class','');
			else
				oDl[iA].className = oDl[iA].className.replace(new RegExp(" sfhover\\b"), "");
		}

		// Pour chaque élément dd du tableau oDd,
        for (iA = oDd.length - 1; iA >= 0; iA-- )
		{
			// On affecte la propriété css "display: none;" à l'objet oDd (masquage)
			oDd[iA].style.display = 'none';
		}

    },

	// Fonction d'annulation
    __Discard__:function()
	{

		// On annule l'action.
        return false;

    }

};

// Une fois que le document est chargé en mémoire, on charge le script.
window.onload=o.Menu.__Load__;

a écrit :
oups koala64 je t'avais oublié dans mes remerciements...

Mais avec la propriété :focus la navigation sans souris fonctionne, non ??

Pas grave, du coup, j'ai encore joué le rebelle...
Et non, la pseudo-classe :focus ne fonctionne pas car pour celà, il faudrait que le menu soit déjà ouvert. En CSS, ce n'est pas possible de cumuler les deux actions.
Modifié par koala64 (08 Aug 2006 - 06:14)