create a menu with div tag [Archive]

Click to See Complete Forum and Search --> : create a menu with div tag

guik

04-15-2003, 02:03 PM

i intend to creta a dynamic menu with div tag.
the problem is: i create the menu thanks a for loop. that causes an error concerning mouse events.
here is a aprt of my code:
<div class="artiste" onmouseover="showmenu(idee[0])" onmouseout="hidemenu(idee[0])" >
Peintres
<div id="lespeintres" class="menu" style="background-color:lightblue;font:bold;visibility:hidden;position:absolute;left:100;width:100;">
<script language= "javascript">
<!--
for(i=0;i<nom.length;i++)
{
numero_id = idee[i+1];
document.write('<div class="menu" onmouseover="showmenu(numero_id)" onmouseout="hidemenu(numero_id)">' + nom[i][0] );
//alert(nom[i][0]);
if (nom[i][1]=="1")
{
if(nom[i][3]=="menu1")
{
//alert(nom[i][1]);
//alert(nom[i][3]);
document.write('<div id="gauguinet" class="menugauguin" style="background-color:teal;font:bold;visibility:hidden;position:absolute;left:100;width:100;">');
for(j=0;j<nom[i][2]+1;j++)
{
//alert(menu1[j]);
document.write('<div class="menubis">' + menu1[j] + '</div>');
}
document.write('</div>');
}

if(nom[i][3]=="menu2")
{
//alert(nom[i][1]);
//alert(nom[i][3]);
document.write('<div id="picasset" class="menupicasso" style="background-color:teal;font:bold;visibility:hidden;position:absolute;left:100;width:100;">');
for(j=0;j<nom[i][2]+1;j++)
{
//alert(menu2[j]);
document.write('<div class="menubis">' + menu2[j] + '</div>');
}
document.write('</div>');
}
if(nom[i][3]=="menu3")
{
//alert(nom[i][1]);
//alert(nom[i][3]);
document.write('<div id="matisset" class="menumatisse" style="background-color:teal;font:bold;visibility:hidden;position:absolute;left:100;width:100;">');
for(j=0;j<nom[i][2]+1;j++)
{
//alert(menu3[j]);
document.write('<div class="menubis">' + menu3[j] + '</div>');
}
document.write('</div>');
}
}
document.write('</div>');
}
and here are my functions and tables:
nom = new Array(new Array("Gauguin",1,3,"menu1"),new Array("Picasso",1,2,"menu2"),new Array("Monet",0,0,"rien"),new Array("Matisse",1,2,"menu3")); //nom_menu,sousmenu?,nb_sousmenu,nomsousmenu

menu1 = new Array("Biographie","Oeuvres","Contemporains","Ses femmes");
menu2 = new Array("Biographie","Oeuvres","Ses ecrits");
menu3 = new Array("Bio","Influences","Tableaux");
idee = new Array("lespeintres","gauguinet","picasset","monett","matisset");

function showmenu(no_id){
//if(no_id!="lespeintres")
//alert(no_id)
if(document.getElementById(no_id).style.visibility=="hidden")
document.getElementById(no_id).style.visibility="visible";
}

function hidemenu(no_id){
if(document.getElementById(no_id).style.visibility=="visible")
document.getElementById(no_id).style.visibility="hidden";
}

it displays the menu "lespeintres" ("gauguin","picasso","monet","matisse") but while the mouse is over picasso area or gauguin area it displays matisse's menu each time, as if in the for loop i kept the "3" value.
please help me!

khalidali63

04-15-2003, 03:49 PM

Post a link to the page,itf thats possible,JS in conjunction with HTML will make it easy for some one to figure out the solution

Cheers

Khalid

guik

04-15-2003, 04:17 PM

in fatc i can't cause i don't have a web page yet. i'm just practicing.
if that can hell you, here is my whole html code(copy-paste in a notepad editor):
<html>
<head>
<title>Menu avec DIV</title>
<link rel="StyleSheet" href="style_menudiv.css">
<script language= "javascript" src="fct_menudiv.js">
</script>
</head>

<body>
<div class="artiste" onmouseover="showmenu(idee[0])" onmouseout="hidemenu(idee[0])" >
Peintres
<div id="lespeintres" class="menu" style="background-color:lightblue;font:bold;visibility:hidden;position:absolute;left:100;width:100;">
<script language= "javascript">

</script>
</div>
</div>

</body>
</html>

you already have the whole javascript code and here is my style sheet:
.artiste{position:absolute;top:0px;left:0px;height:10px;width:100px;background-color:#FF8080;font:bold;}

hope that can help you...
for those who will be fearless with all that code
please help!
thanks

pyro

04-15-2003, 04:22 PM

How about including these two files:

style_menudiv.css
fct_menudiv.js

guik

04-16-2003, 08:18 AM

here it is

guik

04-16-2003, 10:57 AM

nobody may help me?
That's not such a hard problem.
the error comes from the for loop but i don't know how to resolve it

so please help

DrDaMour

04-16-2003, 11:00 AM

that is a huge half french javascript, that has horrible formatting, and is very difficult to follow. I suggest redoing (just for debuggin purposes) it so that the main menu is the four painters names, that should cut the javascript in half. Then it will be managemable to follow yoru flow control statements and such

guik

04-16-2003, 11:30 AM

i made my code easier to look
so the problem is: i can't access the menu i wish, it always displays the same menu(Matisse's one)

guik

04-16-2003, 11:30 AM

i made my code easier to look
so the problem is: i can't access the menu i wish, it always displays the same menu(Matisse's one)

guik

04-16-2003, 11:30 AM

i made my code easier to look
so the problem is: i can't access the menu i wish, it always displays the same menu(Matisse's one)

DrDaMour

04-16-2003, 11:50 AM

ok i checked this out, and first let me say: this code is REALLY ugly, i don't see the advantage of putting everythign into arrays and using javascript to output it all. It's not like it would be easy to create new things or anything. I't woudl probalby be better to just make each menu in html, and hide it ans show it as needed.

However
Your problem is this, no matter were the mouse is the call to onmouseover="showmenu(id_number)" in the first div always has id_number = matisse.

this is because your loop has this statement
id_number = id_nb[i];

and id_nb has these values

id_nb = new Array("gauguinet","picasset","monett","matisset");

so on the last pass through id_number is equal to the last idnex of id_nb.

BUT I SEE WHAT YOU WANTED TO DO, what you did is when you did yoru document.write you did
onmouseover="showmenu(id_number)" which sends the actual text id_number out to the browser, which later is interpreted to it's value, what you wanted to do was send it the value of id_number at that point in the for loop, so change it to

onmouseover="showmenu(' + id_number + ')" and that will send the value od id_number as text to teh browser, which will be passed to the function.

DrDaMour

04-16-2003, 11:56 AM

haha just thought of somethign doing that will pass the artiste's names as if they were variables when you pass a string to a function you have to put quotes around it, but you can't do that because you're using document.write but NEVER FEAR i have your answer.

Use ' and that will send single quotes to the browser

so just change the main div like to this, and it works, i just tested it

document.write('<div class="menu" style="background-color:lightblue;font:bold;width:100" onmouseover="showmenu('' +id_number + '')" onmouseout="hidemenu('' + id_number + '')">' + nom[i][0] );

wow that was REALLY ugly....

DrDaMour

04-16-2003, 11:59 AM

haha i can't show you that escape sequence i just found out from posting, smileys and it's taking care of it. So i just uploaded the modified file, just download it and look at what i changed.

there's something wrong with monet btw, but you'll have to figure that out

guik

04-16-2003, 12:03 PM

i put my html code in document.write in order to be able to fill my field thanks a for loop. it make my code shorter(...you'll say "uglier", i know...). in fact i try to create a menu and make it as flexible as possible. That's why i can't use only html tag:that's static.
by the way, your code throw a "object required" error

thanks

DrDaMour

04-16-2003, 12:04 PM

check the new download and all my other posts......

and your way is jsut plain wrong :)

guik

04-16-2003, 12:40 PM

sorry guy, but that's still throw a object required error

may you explain me why you think my way is wrong: that's been 2 weeks that i learned javascript and i don't see another way to make it dynamic

DrDaMour

04-16-2003, 12:49 PM

did you download my file? because i can't copy and paste the changes that need to be made ina forum. It works excellent for me. Although since you have monet set to nothing (literally), it will get an object exception.

And it's wrong because it's not really dynamic if you have to change teh code taht drastically every time you want to change the menu. Dyanmic implies that you only have to do a very small amount of changes for a new product. Oh and you array stuff shoudl be included in teh html file, and the document.write stuff is what should be outsourced considering that is what is reusable.

either way, the file that i upload here works perfect on my computer. You get an object exception when you mouse over monet though because you don't have that rien thing taken care of (i think?).

guik

04-16-2003, 12:56 PM

it works well...
thanks DrDamour. You're right: my code isn't that much dynamic but i just try guy. Just be indulgent with me, i'm a beginner.
thank you for all

did you know:
your name just sound like a french name..
it would be Doctor Of Love in english. but you probably know it...

DrDaMour

04-16-2003, 01:03 PM

dr of romance actually, but yes i know it, luckily it's my real last name too. Since my first name is Christopher my whole name means Son of God of Romace. It's always worked well with the ladies. et je parle un peu francais

and about what you're trying to do. You are kind of simulating a database, and it's good to experiment with, but it's really not the right way to go about things. If you have time i suggest you go check out mySQL & php, this will do what you want more often.

The only reason this relaly is the right way to do it, is that a menu is inherently static. Dynamic stuff is things that change constatnly, how often do you really change a menu? not too often.

What you learned from this was how document.write sends text to the browser. It's very tricky but things within your absolute quotes whether they be ' (ie document.write('kill')) or " (document.write("kill")) get sent as pure text, so yoru browser was reading the onmouseover as onmouseover="formshow(id_number)" not the onmouseover="formshow('mollet')" that you wanted it to. And because you were in quotes hell i had to use that & to create an escape sequence that woudl sent the single quotes around mollet to the browser. Really, quite ugly, but that wasn't your fault. That's the english language for not having the triple quote