[Webmaster] Besoin de vos experiences ....

Marsh Posté le 07-05-2001 à 15:53:27

Hello et merci de vous interresser a moi !
Bon en gros :
je realise le site d'une entreprise pour mon stage. C un site assez volumineu, et il faudrait que la frame de gauche contienne le menu de la section en cours. Donc je compte le faire en dynamique. Mais je ne sais aps trop comment faire le script qui va creer ce menu ....
Voius avez surement deja du en faire vous, alors quels sont vos idées et conseils ?
merci ! :jap:

Reply

Marsh Posté le 07-05-2001 à 15:53:27

Reply

Marsh Posté le 07-05-2001 à 16:10:36

si tu pouvais donner plus d'infos... utiles de préférence...

Script : Côté client ou côté serveur ?
Contenu : Statique ou dynamique (y'a une base de données derrière ou pas ?)
Les pages, elles statiques ou dynamique ? (pareil)
L'arboressance, c'est koi ?
...

Reply

Marsh Posté le 07-05-2001 à 16:11:28

ben en gros il faut utiliser (avec ie5) :

les listes :
<ul id="root">
<li onclick="c(1)">menu 1
<ul id="menu1"></ul>
<li onclick="c(2)">menu 2
<ul id="menu1"></ul>
...
<ul>

c'est ce que j'ai fait (je te file le script ce soir il est un peu gros). En gros quand tu clique sur un element de la liste , j'affiche la page dans la frame a coté et en meme temps j'ouvre ou je ferme le sous menu contenu dans la liste suivante : UL.
quans la liste n'est pâs affiché il faut faire un display:none comme ca la liste disparait.

je poste ca ce soir en beaucoup plus clair et avec l'exemple du script que j'ai fait moi meme, il est base sur le menu du site msdn de microsoft : http://msdn.microsoft.com/library/

Reply

Marsh Posté le 07-05-2001 à 16:16:52

merci darkoli, par contre j'ai homis de mettre qu'il faut que cela soit compatible avec netscape 4.x et IE4.x ...
magicbuzz, les scripts sont des javascripts, il n'y a pas de basse de données derriere ; ce que j'apelle dynamique, c que le contenu de la frame s'ecrit suivant la section dans laquelle on se trouve ....
l'arborescence de quoi ?

Reply

Marsh Posté le 07-05-2001 à 16:19:42

ok
je croyais que tu voulais générer l'arboressance de façon automatique, c'est pour ça

Reply

Marsh Posté le 07-05-2001 à 16:27:59

petoulachi a écrit a écrit :

merci darkoli, par contre j'ai homis de mettre qu'il faut que cela soit compatible avec netscape 4.x et IE4.x ...
magicbuzz, les scripts sont des javascripts, il n'y a pas de basse de données derriere ; ce que j'apelle dynamique, c que le contenu de la frame s'ecrit suivant la section dans laquelle on se trouve ....
l'arborescence de quoi ?

ben pour ie4 ca devrait etre ok mais pour ns je ne pense pas mais il ne doit y avoir trop de conversion a faire... (desole je netraville que sur ie (c'est pas moi qui decide)).

Reply

Marsh Posté le 07-05-2001 à 16:29:11

darkoli a écrit a écrit :

(desole je netraville que sur ie (c'est pas moi qui decide)).

Vas-y comme t'as trop de la chance toi :love:

Reply

Marsh Posté le 07-05-2001 à 16:32:34

C clair t'as bien de la chance a ne bosser que sous IE.
Bon j'espere que ton script sera pas trop galere a porter sous netscape (je ne parts pas vaincueur avec lui ...)

Reply

Marsh Posté le 07-05-2001 à 16:35:06

petoulachi a écrit a écrit :

C clair t'as bien de la chance a ne bosser que sous IE.
Bon j'espere que ton script sera pas trop galere a porter sous netscape (je ne parts pas vaincueur avec lui ...)

Ce qui me gave à mort c'est que j'avais fait un script comme ça intégralement paramétrable en plus, qui marchait sous NS et tout... (par contre, ça rechargeait la page à chaque fois) mais je l'ai pas sous la main... et je sais pas si je l'ai encore...

Reply

Marsh Posté le 07-05-2001 à 16:42:38

ha ? he bin c dommage
Sinon c normal que certain script marchent sous netscape 4.x et pas sous netscape 6 ???

Reply

Marsh Posté le 07-05-2001 à 16:42:38

Reply

Marsh Posté le 07-05-2001 à 16:47:20

petoulachi a écrit a écrit :

ha ? he bin c dommage

Sinon c normal que certain script marchent sous netscape 4.x et pas sous netscape 6 ???

Ouais, NS6 supporte à peut près autant les scripts que NS 3.0
Les versions 4.x étaient trop pourries, donc ils ont fait marche arrière... NS 6.0 supporte HTML 3.2 seulement.
IE et NS 4.x supportent le HTML 4.0

(mais chez NS ils ont essayé d'imposer des merdes ce qui fait que NS 4.x n'(était pas conforme à HTML 4.0, d'où les incompatibilités)

Reply

Marsh Posté le 07-05-2001 à 16:49:20

Dis moi magicbuzz je matte ton site et je vois que tu parles de pb avec netscape et les colspan ? je crois que j'ai ce pb moi :

Code :

<table border="0" cellpadding="0" cellspacing="0" width="100%" height="90">
<tr>
<td rowspan="3" width="153" height="90" valign="top">
<img src="images/logo.jpg" width="153" height="90" border="0">
</td>
<td rowspan="2" width="80%" height="60" bgcolor=#7AADFF valign="middle">
<form name="formulaire">
<input type="text" name="bandeau" size="45"></form>
</td>
<td rowspan="2" width="100" height="60" bgcolor="#7AADFF" valign="middle" align="right">
<form name="form">
<input type="text" value="search for ?" name="search" size="15" maxlength="100">
<a href="javascript: search();">
<img src="images/ok.gif" border="0" width="24" height="22" alt="start research" align="absbottom">
</a>
</form>
</td>
<td width="30" height="30" align="right" valign="top" bgcolor=#7AADFF>
<img src="images/arrondihautdroit1.jpg" width="30" height="30" border="0">
</td>
</tr>
<tr>
<td width=30 height=30 valign="baseline" bgcolor=#7AADFF align="right">
<img src="images/arrondihautdroit2.jpg" width=30 height=30 border=0 align="absbottom">
</td>
</tr>
<tr>
<td width="32" height="30" valign="top">
<img src="images/arrondihautgauche.jpg" width="32" height="30" border="0">
</td>
<td colspan="3" width="100%" height="30"> </td>
</tr>
</table>

il est ou le pb ??

Reply

Marsh Posté le 07-05-2001 à 16:53:28

voici le principe de mon menu :

j'ai un objet menu qui contient les infos necessaire pour un element du menu : numero du noeud parent, url, nom,...
j'ai toute les fonction qui gerent automatiquement le menu : ouverture et fermeture et creation du dynamique du menu si celui ci n'existe pas.
pour creer un menu c'est super facile :
=> le code de gestion est le meme quelque soit le menu.
=> il faut simplement initialiser le contenu du menu a l'aide de la fonction numero_noeud=ajout(nom_element,lien_url,numero_noeud_parent);
nom_element : nom qui est affiché en HTML
lien_url : url a ouvrir dans la frame a coté s'il n'y a rien a faire, mettre "-"
numero_noeud_parent : numero du noeud parent retourné par la fonction lors de sa creation, -1 si noeud racine.

exemple :

Code :

*1
a
b
2
c
d
1
e
3
l'etoile indique que 1 ne point sur aucune page.
tmp0=ajout("1","-",-1);
ajout("a","tata.html",tmp0);
ajout("b","tete.html",tmp0);
tmp0=ajout("2","titi.html",-1);
ajout("c","toto.html",tmp0);
tmp1=ajout("d","tutu.html",tmp0);
ajout("1","rara.html",tmp1);
ajout("e","rere.html",tmp0);
tmp0=ajout("3","riri.html",-1);

Reply

Marsh Posté le 07-05-2001 à 16:55:11

Surtout, vire tout tes rowspan... Parceque même IE a beaucoup de mal des fois... A la limite fait des tableaux imbriqués si tu veux pas couper tes images, mais enlève les rowspan de suite !

Ensuite, le <form> et </form> met-les autour des <tr> et </tr>
Bah ouais NS il est concon il il aime pas ça... (d'ailleurs, met les autour du tableau, comme ça t'es sûr que ça fait plus chier.

Pour finir, ne laisse jamais d'espace après une balise <td>, ni avant une balise </td>

=>

<td width="32" height="30" valign="top">
<img src="images/arrondihautgauche.jpg" width="32" height="30" border="0">
</td>

Ca devient :

<td width="32" height="30" valign="top"><img src="images/arrondihautgauche.jpg" width="32" height="30" border="0"></td>

Sinon, explosion totale de la page sous NS assurée dès que la page commence à être chargée.

Reply

Marsh Posté le 07-05-2001 à 20:37:56

voila comme promis mon javascript :
tout en bas il y a [...], qu'il faut remplacer par l'ajout des elements du menus

Code :

<html>
<head>
<title>menu</title>
<style>
a {color:003366;text-decoration:none}
a:hover {color:6699CC;text-decoration:underline overline}
pre {font-family:verdana;font-size:12px}
li {list-style:none;margin-left:0px;margin-bottom:0px;margin-top:0px;vertical-align:middle}
li img {cursor:hand}
ul {margin-left:15px;display:none}
ul.root {margin-left:0px;display:block}
</style>
</head>
<body>
<pre>
<ul id=liste class="root">
</ul>
</pre>
<script language="javascript">
var listes=new Array();
var nbl=0;
var clic=-1;
function rien() {
return;
}
// structure menu
function menu(n,l,p) {
this.nom=n; // nom du lien
this.lien=l; // lien : url
this.parent=p; // numero du noeud parent, si -1 pas de noeud parent
this.nb=0; // nombre de sous elements
this.etat=2; // indique si les sous elements ont étés créés ou non, si nb=0, etat=2
} // si etat!=2, 0 pour liste effacée et 1 pour liste affichée
// supprime tout les espaces present dans une chaine de caratere et les remplace par des
function supprime_espace(n) {
n.replace(/ /g," " );
return(n);
}
// ajout d'un element dans le menu
// n : nom à afficher
// l : lien (url)
// p : pere (si -1 se trouve à la racine du menu
function ajout(n,l,p) {
var elm=new menu(n,l,p);
listes[nbl]=elm;
if (p>-1) {
listes[p].nb++;
}
return(nbl++);
}
// genere le code html qui va representer le menu
function creermenu(n) {
var s1='<li onClick="mod('+n+')">';
var s2='<img id=i'+n+' src="'+(listes[n].nb<1?'dc.gif':'bs.gif')+'">';
if (listes[n].lien=="-" ) var s3=' <a href="javascript:rien()">'+listes[n].nom+'</a>';
else var s3=' <a href="'+listes[n].lien+'" target="page">'+listes[n].nom+'</a>';
var s4='<ul id=l'+n+'></ul>';
return(s1+s2+s3+s4);
}
function ini() {
var lst=document.all.liste;
var s="";
for (var i=0;i<nbl;i++) {
if (listes[i].parent==-1) s+=creermenu(i);
}
lst.innerHTML=s;
}
// création du sous menu d'un noeud n
function sousmenu(n) {
if (listes[n].nb<1) return;
var s="";
for (var i=0;i<nbl;i++) {
if (listes[i].parent==n) {
s+=creermenu(i);
}
}
return(s);
}
// gestion du clic sur un noeud : initialisation+ouverture et fermeture
function mod(n) {
// traitement du clic multiple
if (n==clic) {
clic=listes[n].parent;
return;
}
clic=listes[n].parent;
// si ok
if (listes[n].nb<1) return;
if (listes[n].etat==2) {
eval('document.all.l'+n+'.innerHTML=sousmenu(n)');
listes[n].etat=0;
}
if (listes[n].etat==0) {
eval('document.all.l'+n+'.style.display="block"');
eval('document.all.i'+n+'.src="bo.gif"');
}
else {
eval('document.all.l'+n+'.style.display="none"');
eval('document.all.i'+n+'.src="bs.gif"');
}
listes[n].etat=(listes[n].etat+1)&1;
}
// generation du menu à l'aide de la fonction ajout
[...]
// affichage du menu, uniquement les noeuds racine
ini();
</script>
</body>
</html>

Reply

Marsh Posté le 07-05-2001 à 20:40:54

par exemple pour créer un menu contenant les jours de la semaine, il fau ecrire à la place [...] tout en bas :

tmp=ajout("jours","-",-1);
ajout("lundi","-",tmp);
ajout("mardi","-",tmp);
ajout("mercredi","-",tmp);
ajout("jeudi","-",tmp);
ajout("vendredi","-",tmp);
ajout("samedi","-",tmp);
ajout("dimanche","-",tmp);

=> les jours (lundi..dimanche) sont des sous menus de "jours"

Reply

Marsh Posté le 09-05-2001 à 09:28:16

Ok merci Darkoli je vais me pencher dessus. Si j'apporte des ameliorations, ça t'interesse ?

:jap: En tout cas merci tous les ! :jap:

Reply

Marsh Posté le 09-05-2001 à 09:42:48

Juste deux ptites questions ;
a quoi ça sert de faire '+n+' ? par exemple: mod('+n+') ??
et sinon je crois que supprime_espace n'a rien a faire ici

Reply

Marsh Posté le 09-05-2001 à 12:09:04

petoulachi a écrit a écrit :

Juste deux ptites questions ;
a quoi ça sert de faire '+n+' ? par exemple: mod('+n+') ??
et sinon je crois que supprime_espace n'a rien a faire ici

oui tu peux virer supprime espace : je l'avais mise car il y avait un probleme au debut. En effet si le nom des menu est long et qu'ils sont plus grand que la largeur de la frame, le nom et coupé et ecris sur plusieurs lignes :

Code :

:D Nom du menu 1 qui
est un peu trop long
:D Menu2

et c'est pas géniale, en remplacant les espaces (' ', coe ascii 32) par il n'y a plus de retour automatique à la ligne.

Code :

:D Nom du menu 1 qui est un peu ... [caché par le bord de la frame]
:D Menu2

donc la fonction supprime_espcae remplacait les ' ' par ' ' mais en fait il existe une methode encore plus simple.

Il suffit d'utiliser la balise PRE.

Code :

<pre>
<ul ...>
[...
</ul>
</pre>

et la il n'ya plus de retour à la ligne automatique car la mise en page d'origine est conservée.

Reply

Marsh Posté le 09-05-2001 à 12:11:09

Tiens c bizarre ton code genere une erreur etrange. Lorsque je load la page, il me donne une erreur javascript : "les donnees necessaires pour achever cette operation ne sont pas encore disponible".
cette erreur se passe dans la fonction ini;

Code :

function ini() {
var lst=document.all.liste;
var s="";
for (var i=0;i<nbl;i++) {
if (listes[i].parent==-1) s+=creermenu(i);
}
lst.innerHTML=s;
}

lorsque tu fais :
lst.innerHTML=s;

et je comprend pas pourquoi ? :??:

Reply

Marsh Posté le 09-05-2001 à 12:12:09

ok compris, je connaissais pas <pre>

Reply

Marsh Posté le 09-05-2001 à 12:14:57

petoulachi a écrit a écrit :

Juste deux ptites questions ;
a quoi ça sert de faire '+n+' ? par exemple: mod('+n+') ??
et sinon je crois que supprime_espace n'a rien a faire ici

si c'est du '+n+' qui est la dont tu parle :
eval('document.all.l'+n+'.innerHTML=sousmenu(n)');

eval va interpreter le code qui est donné en parametre. Chaque element du menu a un numero propre et une liste associée dont le nom est 'l'+n ou n est le numero de l'element.

donc pour acceder directement a une liste ou modifier ses parametre, j'utilise cette methode.

si tu fait des amelioration y'a pas de problem tu peux me les filer.

Reply

Marsh Posté le 09-05-2001 à 14:26:38

non je voulais pas parler de ça, mais plutot pourquoi tu encadres ta variable de '+ +',par exemple dans :
var s1='<li onClick="mod('+n+')">';
je vois pas pourquoi tu fais pas mod(n) directement.
Sinon tu n'as pas l'URL du site qui utilise ce script ?

Reply

Marsh Posté le 09-05-2001 à 20:26:34

petoulachi a écrit a écrit :

non je voulais pas parler de ça, mais plutot pourquoi tu encadres ta variable de '+ +',par exemple dans :
var s1='<li onClick="mod('+n+')">';
je vois pas pourquoi tu fais pas mod(n) directement.
Sinon tu n'as pas l'URL du site qui utilise ce script ?

simplement si je fais mod(n), le code HTML ecris sera mod(n) alors le parametre transmis par la fonction ne correspond a rien.

pour chaque liste li, il faut que je sache sur laquelle l'utilisateur a cliqué, c'est pourquoi en parametre de la fonction mod je mets le numero de la liste.

code HTML pour le 18° par exemple :
<li onClick="mod(18)">

pour le creer en javascript (n=18) (en gras la chaine de caracteres) :
var s1='<li onClick="mod('+n+')">';

Reply

Marsh Posté le 10-05-2001 à 09:39:27

ok ok . en fait, tu fait un transtypage avec '+ +', comme en java quoi ....
sinon he bin ton script je vais devoir le changer, en fait pour etre precis je ne vais pas pouvoir garder gd chose de ton script. En effet, tu utilises la propriete innerHTML,propre a IE et qui bien sur n'est pas presente sur netscape. Je ne peux donc pas ecrire du code HTML entre 2 balises tel que tu le fais (ou alors on me l'a caché ? :crazy: ). Donc en gros, je garde un peu le meme systeme pour la structure, mais ensuite l'ecriture du code je vais tout reprendre ...
En tout cas merci pour l'interet que tu me portes, ça me fait plaisir ! :jap:

Reply

Marsh Posté le 10-05-2001 à 12:19:19

ou ce que tu peux faire c'est ne pas le faire en dynamique mais créer deja tout le menu des le depart.

Reply

Marsh Posté le 10-05-2001 à 14:12:27

Comment ça ?

Reply

Marsh Posté le 10-05-2001 à 20:17:31

petoulachi a écrit a écrit :

Comment ça ?

en gros il ne faut pas utiliser innerHTML pour créer le menu mais le créer une fois pour toute des le depart.

En fait le programme que j'ai fait ne va pas tout genere des le depart. Il ne va creer les sous menu que juste avant qu'il soit ouvert pour la premiere fois. Mais les sous menu peuvent tous etre créé des le depart se qui evite d'avoir à utiliser innerHTML.

Reply

Marsh Posté le 11-05-2001 à 14:05:34

ouais c ce que je comptait faire... de toute façon, je vois pas trop comment je pourrai faire autrement, a cause de ce netscape...
En gros, on declare le menu, et il est construit de suite. apres on ne peut plus le changer (ou alors il faut reloader la page)

Reply

Marsh Posté le

Reply

[Webmaster] Besoin de vos experiences ....

Sujets relatifs:

Leave a Replay