Prob menu déroulant accordéon sous Mozilla

sesautomation Messages postés 8 Statut Membre -
pangolin Messages postés 47 Statut Membre - 7 févr. 2009 à 15:27

Bonsoir,

J'essaie de faire un Menu déroulant "Accordéon" - Vertical pour le site de la boite dans laquelle je bosse...

Pour info's c'est un site qui a été conçu sous Web Creator Pro 3 ! Je sais .... Je sais :) !

Il fonctionne plus ou moin ... Enfin surtout "moin !" que plus pour un menu déroulant ... Vous alllez voir :(

Sous Mozilla Firefox :

- Il s'affiche entièrement déroulé !
- Aucune cellule ne réagit au passage de la souris (aucun changement de couleur txt et fond...)
- Il s'affiche plus large que prévu d'une dizaine de pixel vers la droite (Par rapport a Internet explorer et
ce qui est affiché en mode prévisualisation de Web Creator)

Sous Internet Explorer :

- Il s'affiche normalement a l'affichage de la page...
- Lorsque l'on clique sur le premier et le second titre le menu se déroule normalement mais toujours pas
de réaction au survol de la souris)
- Au troisième titre le menu saute ^^ il fait que de s'ouvrir et se fermer
- Lorsque l'on clique sur le 4ème titre la vitesse accélère encore....

Donc voila ou j'en suis ... J'avoue que je sais plus trop comment faire !

Voici la page ou édité et publié le menu accordéon :

 http://www.ses-automation.fr/pages/detection_gazpag.html

Ici tel qu'il devrais être :

 http://www.ses-automation.fr/pages/TEST.html

LE CODE :

DONC DANS LA PARTIE DE WEB CREATOR >> AUTRE HTML ET JAVASCRIPT j'ai mis :


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu MSR</title>
<style type="text/css">
* {
margin:0;
padding:0;
list-style:none;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin:10px;
}

a {
color: #008080;
text-decoration: none;
font-weight:bold;
}


#basic-accordian{
border:1px solid #EEE;
padding:5px;
width:190px;
position:absolute;
left:0%;
top:0%;
margin-left:812px;
z-index:2;
margin-top:180px;
}

.accordion_headings{
padding:10px;
background:#008080;
color:#000000;
border:1px solid #000000;
cursor:pointer;
font-weight:bold;
}

.accordion_headings:hover{
background:#C0C0C0;
font-size: 12px;
color:#000000;
}

.accordion_child{
padding:20px;
background:#FFFFFF;
color:#000000;
border:1px solid #000000;
}

.header_highlight{
background:#C0C0C0;
}

.accordion_child:hover{
background:#C0C0C0;
}

</style>
<script type="text/javascript" src="../accordian.pack.js"></script>
</head>
<body onload="new Accordian('basic-accordian',5,'header_highlight');">
<div id="basic-accordian" ><!--Parent of the Accordion-->
<!--Start of each accordion item-->
<div id="test-header" class="accordion_headings" >>> CAPTEURS / DETECTEURS:</div><!--Heading of the accordion ( clicked to show n hide ) -->
<!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->
<div id="test-content"><!--DIV which show/hide on click of header-->
<!--This DIV is for inline styling like padding...-->
<div class="accordion_child">
<a href="http://www.ses-automation.fr" > <b>> Analogique</a>
</div>
<div class="accordion_child">
<a href="http://www.ses-automation.fr" > <b>> Digital</a>
</div>
<div class="accordion_child">
> Controleur a point
</div>
</div>
<!--End of each accordion item-->
<!--Start of each accordion item-->
<div id="test1-header" class="accordion_headings" >>> CONTROLEURS :</div><!--Heading of the accordion ( clicked to show n hide ) -->
<!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->
<div id="test1-content"><!--DIV which show/hide on click of header-->
<!--This DIV is for inline styling like padding...-->
<div class="accordion_child">
> Analogique
</div>
<div class="accordion_child">
> Digital
</div>
</div>
<!--End of each accordion item-->
<!--Start of each accordion item-->
<div id="test2-header" class="accordion_headings" >>> PORTATIFS :</div><!--Heading of the accordion ( clicked to show n hide ) -->
<!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->
<div id="test2-content"><!--DIV which show/hide on click of header-->
<!--This DIV is for inline styling like padding...-->
<div class="accordion_child">
> Analogique
</div>
</div>
<!--End of each accordion item-->
<!--Start of each accordion item-->
<div id="test3-header" class="accordion_headings" >>> DISPOSITIFS D'ALARME :</div><!--Heading of the accordion ( clicked to show n hide ) -->
<!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->
<div id="test3-content"><!--DIV which show/hide on click of header-->
<!--This DIV is for inline styling like padding...--><div class="accordion_child">
> Analogique
</div>
</div>
<!--End of each accordion item-->
<!--Start of each accordion item-->
<div id="test4-header" class="accordion_headings header_highlight" >>> GAZ's :</div><!--Heading of the accordion ( clicked to show n hide ) -->
<!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->
<div id="test4-content"><!--DIV which show/hide on click of header-->
</div>
<!--End of each accordion item-->
</div><!--End of accordion parent-->
</body>

ET DANS LA PARTIE DE SCRIPT DE WEB CREATOR :: j'ai mis

//by dezinerfolio.com
eval((function(){a=" {3document5ByIdOgvv=8E!&&E!K32}o=E;E;v=parseInt(2E=o;3vdheight=vHpx}Oofvgvv=v/d.h;dDv;dfilterKalpha(D+v*100H)Obz>0z#-1:z-v90E;%eE;z<x(x-z)#+1:v+z9x%Accordians,fl=5sByTagName(diva=[]d=S;QQ,Q)=={a.push}}xL((hc=h0,hc6==hcMc+;c;coverflowKhidden;c.h=g(cc.s=(s=8)?7:s;h.f=f;h.c=a;h.match4fHH))x=h}hC=(Rj=0;j<F.c;j++n=F.c[j];n=n0,ndMn6nMn+;s=dJt4sH)Rp=0;p<s;p++s[p]=KGsJce(p,1d=s.join( break}}clearn.tQ==FPg(n,0@ed+K GP@b}}}}})(S)}x!LxC()}}",b=49;while(b>=0)a=a.replace(new RegExp("#%2345689@CDEFGHJKLMOPQRS".charAt(b),"g"),("\\\042\044.style.displayfunctionInterval(.className.length.indexOf(-)(d)if(-content).id){.style.=none{d=;z=g;x=d.h;(d,;for(i=0;i<l;i++);}else{('+n+')',9)}.substr(=blockv=Math.round(/d.sv=(v<1)?zcleard.t)}} d.offsetHeightreturn (new RegExp(.getElement+-header=undefined;ofv)gn.t=set'.onclickopacity=dthis+d.f+.spli==null=(} n=dfor(l[i]".split(""))[b--]);return a})())

C'est assez bizarre ... J'ai autres chose dans note pad ... Javascipt d'après ce que j'ai compris !

J'ai rajouté ce fichier car j'ai vu dans le code qu'il y avait un liens vers "accordian.pack.js"

J'ai aussi le fichier "accordian-src.js" mais je n'ais pas vu de liens dans le code vers ce fichier.js

VOICI LE CONTENU "accordian-src.js" ///


/*
DezinerFolio.com Simple Accordians.

Author  : G.S.Navin Raj Kumar
Website : https://dezinerfolio.com/

*/

/*
* The Variable names have been compressed to achive a higher level of compression.
*/

// Prototype Method to get the element based on ID
function $(d){
	return document.getElementById(d);
}

// set or get the current display style of the div
function dsp(d,v){
	if(v==undefined){
		return d.style.display;
	}else{
		d.style.display=v;
	}
}

// set or get the height of a div.
function sh(d,v){
	// if you are getting the height then display must be block to return the absolute height
	if(v==undefined){
		if(dsp(d)!='none'&& dsp(d)!=''){
			return d.offsetHeight;
		}
		viz = d.style.visibility;
		d.style.visibility = 'hidden';
		o = dsp(d);
		dsp(d,'block');
		r = parseInt(d.offsetHeight);
		dsp(d,o);
		d.style.visibility = viz;
		return r;
	}else{
		d.style.height=v;
	}
}
/*
* Variable 'S' defines the speed of the accordian
* Variable 'T' defines the refresh rate of the accordian
*/
s=7;
t=10;

//Collapse Timer is triggered as a setInterval to reduce the height of the div exponentially.
function ct(d){
	d = $(d);
	if(sh(d)>0){
		v = Math.round(sh(d)/d.s);
		v = (v<1) ? 1 :v ;
		v = (sh(d)-v);
		sh(d,v+'px');
		d.style.opacity = (v/d.maxh);
		d.style.filter= 'alpha(opacity='+(v*100/d.maxh)+');';
	}else{
		sh(d,0);
		dsp(d,'none');
		clearInterval(d.t);
	}
}

//Expand Timer is triggered as a setInterval to increase the height of the div exponentially.
function et(d){
	d = $(d);
	if(sh(d)<d.maxh){
		v = Math.round((d.maxh-sh(d))/d.s);
		v = (v<1) ? 1 :v ;
		v = (sh(d)+v);
		sh(d,v+'px');
		d.style.opacity = (v/d.maxh);
		d.style.filter= 'alpha(opacity='+(v*100/d.maxh)+');';
	}else{
		sh(d,d.maxh);
		clearInterval(d.t);
	}
}

// Collapse Initializer
function cl(d){
	if(dsp(d)=='block'){
		clearInterval(d.t);
		d.t=setInterval('ct("'+d.id+'")',t);
	}
}

//Expand Initializer
function ex(d){
	if(dsp(d)=='none'){
		dsp(d,'block');
		d.style.height='0px';
		clearInterval(d.t);
		d.t=setInterval('et("'+d.id+'")',t);
	}
}

// Removes Classname from the given div.
function cc(n,v){
	s=n.className.split(/\s+/);
	for(p=0;p<s.length;p++){
		if(s[p]==v+n.tc){
			s.splice(p,1);
			n.className=s.join(' ');
			break;
		}
	}
}
//Accordian Initializer
function Accordian(d,s,tc){
	// get all the elements that have id as content
	l=$(d).getElementsByTagName('div');
	c=[];
	for(i=0;i<l.length;i++){
		h=l[i].id;
		if(h.substr(h.indexOf('-')+1,h.length)=='content'){c.push(h);}
	}
	sel=null;
	//then search through headers
	for(i=0;i<l.length;i++){
		h=l[i].id;
		if(h.substr(h.indexOf('-')+1,h.length)=='header'){
			d=$(h.substr(0,h.indexOf('-'))+'-content');
			d.style.display='none';
			d.style.overflow='hidden';
			d.maxh =sh(d);
			d.s=(s==undefined)? 7 : s;
			h=$(h);
			h.tc=tc;
			h.c=c;
			// set the onclick function for each header.
			h.onclick = function(){
				for(i=0;i<this.c.length;i++){
					cn=this.c[i];
					n=cn.substr(0,cn.indexOf('-'));
					if((n+'-header')==this.id){
						ex($(n+'-content'));
						n=$(n+'-header');
						cc(n,'__');
						n.className=n.className+' '+n.tc;
					}else{
						cl($(n+'-content'));
						cc($(n+'-header'),'');
					}
				}
			}
			if(h.className.match(/selected+/)!=undefined){ sel=h;}
		}
	}
	if(sel!=undefined){sel.onclick();}
}

cette parti du code je ne sais pas trop ou l'insérer ... Car quand je la met dans les parties HTML ET JAVASCRIPT ou SCRIPT ca ne fonctionne pas !

J'espère que se sera assez compréhensible et que quelqu'un aura déjà été confronter a ce problème ... Et aura envie de m'aider ! :)

Bien Evidement si vous avez un autres codes qui fonctionne ca serais meme encore mieux ^^

Merci d'avance

Julien

http://www.ses-automation.fr/pages/detection_gazpag.html

Afficher la suite

A voir également:

Prob menu déroulant accordéon sous Mozilla
Menu déroulant excel - Guide
Excel menu déroulant en cascade - Guide
Downloadhelper mozilla - Télécharger - Outils pour navigateurs
Menu déroulant google sheet - Accueil - Guide bureautique
Mozilla firefox - Télécharger - Navigateurs

4 réponses

Réponse 1 / 4

pangolin Messages postés 47 Statut Membre 19

Avant que j'oublie, je poste vite fait ce message:
Ton menu marche très bien sur http://www.ses-automation.fr/pages/detection_gazpag.html avec safari et quasiment bien (sauf couleurs des cases) avec opera, le tout sous MacOSX en tout cas! Par contre le reste de la page s'affiche pas, sous opera j'ai un message d'alerte me disant qu'il faut netscape ou IE, et sous safari, j'ai juste un message affiché disant qu'il faut netscape.

Par contre effectivement sous firefox le menu bugge... J'ai pas IE sous mac, donc pas testé :)

Je connais pas du tout Web Creator, désolé :)

Là ça m'a l'air assez compliqué comme code, à mon avis y'a moyen de faire plus simple.

Désolé j'ai essayé de m'y plonger dedans, mais faut croire qu'il se fait tard...

Réponse 2 / 4

sesautomation Messages postés 8 Statut Membre 1

Oui c'est sur il était déjà tard quand j'ai posté ^^

Si tu as une idée pour faire plus simple je t'écoute :)

Comme ta pu le comprendre jsuis pas un pro du html etc ... Pour le moment et encore moin du JavaScript mdr

J'ai pas safari et opéra ! Je vais les prendres tout a l'heure... Par contre sur IE c'est bizarre ce qu'il fait non ?

Et bon sur mozilla c'est meme pas un menu déroulant " accordéon"

au faite mon adresse e-mail est masqué biarrement je sais pas pk : jbelina@ses-automation.fr

Réponse 3 / 4

sesautomation Messages postés 8 Statut Membre 1

Personne ?

Réponse 4 / 4

pangolin Messages postés 47 Statut Membre 19

Re!
En fait "plus simple" c'est entre guillemets parce que ça reste du javascript assez technique :)

C'est vrai que c'est bizarre que ça marche pas sur IE et firefox, encore ça aurait été du CSS jveux bien mais du javascript. Certains te diront que c'est normal que ça marche pas sous IE mais bon :)

En fait faudrait tester ce qui va pas, du genre en parsemant le code de window.alert qui affiche les paramètres à vérifier, mais si tu maitrise pas trop javascript, ça va être un peu chaud.

Si j'ai le temps un de ces 4... En attendant vaudrait mieux que qqu'un d'autre t'aide...

Discussions similaires

TV continental Edison bloqué sur le menu

Supprimer liste déroulante Excel

Suppression listes déroulantes

Effacer liste déroulante

Prob menu déroulant accordéon sous Mozilla

4 réponses

Votre réponse

Discussions similaires

Newsletters