How do I split the code

Poster: Cirtap
Dated: Tuesday October 13 2009 - 18:44:51 BST

Cod problem
Trying to put a Collapsible Menu in I table but cannot find out how to split the cod between *_data.js and that part that goes in the cell.

Design problem
How do I get a line above each heading when it´s open.
http://www.overenskommelsen.se/menu/index.htm

Thx
Cirtap



[code]_scrollAmount=5 // Used for Netscape 4 scrolling
_scrollDelay=10 // Used for Netscape 4 scrolling

_menuCloseDelay=500 // The delay for menus to remain visible on mouse off
_menuOpenDelay=5 // The delay for opening menus on mouse over
_subOffsetTop=0; // Sub menu offset Top position
_subOffsetLeft=0; // Sub menu offset Left position

Goverfilter="Alpha(style=1,opacity=25,finishOpacity=100,startX=0,finishX=100,startY=100,finishY=0);Fade(duration=0,2);Shadow(color='#777777', Direction=135, Strength=5)"
Goverfilter="Fade(duration=0,2);Alpha(opacity=90);Shadow(color='#777777', Direction=135, Strength=5)"
Goutfilter="randomdissolve(duration=0.3)"
Goutfilter=""
Goverfilter=""

AllMargin=0

treeOffset=0; // Used to set the offset of sub menus
singleMasterMenu=true // Informs the system to on;y have one menu open at a time

with(tstyle1=new mm_style()){
onbgcolor="#ffffff";
oncolor="#000000";
offbgcolor="#ffffff";
offcolor="#000000";
bordercolor="#FFFFFF";
borderstyle="solid";
borderwidth=1;
separatorcolor="#000000";
separatorsize="1"; //streck mellan rubrik
padding=8;
fontsize="75%";
fontstyle="normal";
fontweight="bold"
fontfamily=", ”Georgia, Times New Roman”, Times, serif";
pagecolor="black";
pagebgcolor="#000000";
headercolor="#685478";
headerbgcolor="#ffffff";

subimage="b_arrow.gif"
subimageposition="top right" ; //possition på pil
ondecoration="underline" //länksträck

onsubimage="b_arrow_down.gif"
image="trans.gif"
subimagepadding=3 //marginal runt bild
imagepadding=1 //marginal vänsterkant
itemwidth=200 //menybredd
}

with(SubSampleStyle=new mm_style()){
styleid=3;
onbgcolor="#ffffff";
oncolor="#000000";
offbgcolor="#ffffff";
offcolor="#000000";
bordercolor="#FFFFFF";
borderstyle="solid";
borderwidth=1;
separatorcolor="#FFFFFF";
separatorsize="1"; //streck mellan rubrik
padding=10;
fontsize="75%";
fontstyle="normal";
fontfamily=", ”Georgia, Times New Roman”, Times, serif";
pagecolor="black";
pagebgcolor="#000000";
headercolor="#685478";
headerbgcolor="#ffffff";
itemwidth=200
image="trans.gif"
}


sub1Style=new copyOf(SubSampleStyle)
sub1Style.offcolor = "#000000"; //textfärg 1 submeny
sub1Style.offbgcolor="#ffffff" //bg 1 submeny
sub1Style.separatorcolor="#FFFFFF" //streckfärg i 1 submenyn

sub2Style=new copyOf(SubSampleStyle)
sub2Style.offcolor = "#000000"; //tx färg i 2 submeny
sub2Style.offbgcolor="#ffffff" //bg färg 2 submeny
sub2Style.separatorcolor="#000000" //streckfärg i 2 submenyn


tstyle1.clickcolor="#000000" //tx färg vid klick
tstyle1.clickbgcolor="#ffffff" // bg färg vid klick

tstyle1.clicksubimage="b_arrow_down.gif"


with(new menuname("main Tree Menu")){
fontweight="normal"
top=100
left=0
style = tstyle1;
alwaysvisible = 1;
itemwidth=200
//margin=AllMargin
//position="relative"
aI("text=Home;");
aI("text=About;showmenu=om;type=tree");
aI("text=Information;showmenu=info;type=tree");
aI("text=Meeteing;showmenu=moten;type=tree");
aI("text=Follow up;showmenu=upp;type=tree");
aI("text=Knowledge;showmenu=kunskap;type=tree");
aI("text=Contact;showmenu=kontakt;type=tree");
}

with(new menuname("om")){

style = SubSampleStyle;
margin=AllMargin
aI("text=Detta är Överenskommelsen;url=#");
aI("text=Dokument;showmenu=dok;type=tree");
aI("text=Uppdraget;url=#");
aI("text=Begrepp;url=#");
aI("text=Några datum;url=#");
}


with(new menuname("info")){
style = sub1Style;
margin=AllMargin
aI("text=Informationsbrev;url=#");
aI("text=Trycksaker;url=#");
aI("text=Portfolio;url=#");
aI("text=Artiklar;url=#");
}

with(new menuname("dok")){
style = sub2Style;
margin=AllMargin
aI("text=Överenskommelsen (pdf);url=#");
aI("text=In english;url=#");
aI("text=Skrivelser till riksdagen;url=#");
}

with(new menuname("moten")){
style = sub1Style;
margin=AllMargin
aI("text=Årlig konferens;url=#");
aI("text=Dialogmöten;url=#");
aI("text=Annat;url=#");
}

with(new menuname("upp")){
style = sub1Style;
margin=AllMargin
aI("text=Studier;showmenu=studier;type=tree");
aI("text=Åtaganden/Åtgärder;url=#");
}

with(new menuname("studier")){
style = sub2Style;
margin=AllMargin
aI("text=Årlig uppföljningsstudie);url=#");
aI("text=Tematiska studier;url=#");
}

with(new menuname("kunskap")){
style = sub1Style;
margin=AllMargin
aI("text=Lokala exempel;url=#");
aI("text=Utredningar;url=#");
aI("text=Forskning;url=#");
aI("text=Om EU;showmenu=eu;type=tree");
aI("text=Internationellt;url=#");


with(new menuname("eu")){
style = sub2Style;
margin=AllMargin
aI("text=Koden;url=#");
aI("text=Compact;url=#");
}

with(new menuname("kontakt")){
style = sub1Style;
margin=AllMargin
aI("text=kontaktuppgifter;=url=#");
aI("text=Press;url=#");
}

}

drawMenus()[/code]

Re: How do I split the code

Poster: Ruth
Dated: Thursday October 15 2009 - 23:06:58 BST

Hi,

As far as I know, for the treemenu you would just put the calls for everything in the table cell making the main menu position='relative'; However, you need to be aware that the treemenu has never been released, it never got out of beta testing, though many many people use it with no problems. There is no support or development of that menu anymore, however, I do as much support of it as I can. There are some things that just can't be done with it. So, doing position relative, you will need to test browsers to make sure there is no problem that way. I tested your menu, putting it in a table cell and it worked fine in IE5.5, 6, 7, FF1.5, 2.0.0.18, 3.0.8, NN7.02, 9, Google Chrome, not sure on the version, an early one, Opera 9.50; Safari for PC 4.0.3 I can't test on macs.

As to getting a line below the header of a submenu, actually, it is designed to open so that the submenu comes between it and the next heading, so the only way to do it is by adding a item to the top of each submenu, using a line image as a bgimage, like this. So I used your transparent image for the item, then set the imageheight and itemheight to 1px, then created a 1px by 20px or so black line image and set it as the bgimage for the item and set the separator size for that item to 0. That makes that black line bgimage go across the whole item and it looks like a separator/line below the main header for that submenu. If you would also like a line below the last item of the submenu, you could just copy and paste that first item as the last item of the submenu.



Hope this helps

Ruth

Re: How do I split the code

Poster: Cirtap
Dated: Saturday October 17 2009 - 19:09:21 BST

Hi Ruth,

I have a hard time with this menu, so I really appreciate your support, even if the Collabsible menu seems to be the black sheep of the Milonic family.
I have placed menus in tables before, but this collabsible menu will not work.





This is what I got in the data .js file:
[code]_scrollAmount=5 // Used for Netscape 4 scrolling
_scrollDelay=10 // Used for Netscape 4 scrolling

_menuCloseDelay=500 // The delay for menus to remain visible on mouse off
_menuOpenDelay=5 // The delay for opening menus on mouse over
_subOffsetTop=0; // Sub menu offset Top position
_subOffsetLeft=0; // Sub menu offset Left position

Goverfilter="Alpha(style=1,opacity=25,finishOpacity=100,startX=0,finishX=100,startY=100,finishY=0);Fade(duration=0,2);Shadow(color='#777777', Direction=135, Strength=5)"
Goverfilter="Fade(duration=0,2);Alpha(opacity=90);Shadow(color='#777777', Direction=135, Strength=5)"
Goutfilter="randomdissolve(duration=0.3)"
Goutfilter=""
Goverfilter=""

AllMargin=0

treeOffset=0; // Used to set the offset of sub menus
singleMasterMenu=true // Informs the system to on;y have one menu open at a time

with(tstyle1=new mm_style()){
onbgcolor="#ffffff";
oncolor="#000000";
offbgcolor="#ffffff";
offcolor="#000000";
bordercolor="#FFFFFF";
borderstyle="solid";
borderwidth=1;
separatorcolor="#000000";
separatorsize="1"; //streck mellan rubrik
padding=8;
fontsize="75%";
fontstyle="normal";
fontweight="bold"
fontfamily=", ”Georgia, Times New Roman”, Times, serif";
pagecolor="black";
pagebgcolor="#000000";
headercolor="#685478";
headerbgcolor="#ffffff";

subimage="b_arrow.gif"
subimageposition="top right" ; //possition på pil
ondecoration="underline" //länksträck

onsubimage="b_arrow_down.gif"
image="trans.gif"
subimagepadding=3 //marginal runt bild
imagepadding=1 //marginal vänsterkant
itemwidth=200 //menybredd
}

with(SubSampleStyle=new mm_style()){
styleid=3;
onbgcolor="#ffffff";
oncolor="#000000";
offbgcolor="#ffffff";
offcolor="#000000";
bordercolor="#FFFFFF";
borderstyle="solid";
borderwidth=1;
separatorcolor="#FFFFFF";
separatorsize="1"; //streck mellan rubrik
padding=10;
fontsize="75%";
fontstyle="normal";
fontfamily=", ”Georgia, Times New Roman”, Times, serif";
pagecolor="black";
pagebgcolor="#000000";
headercolor="#685478";
headerbgcolor="#ffffff";
itemwidth=200
image="trans.gif"
}


sub1Style=new copyOf(SubSampleStyle)
sub1Style.offcolor = "#000000"; //textfärg 1 submeny
sub1Style.offbgcolor="#ffffff" //bg 1 submeny
sub1Style.separatorcolor="#FFFFFF" //streckfärg i 1 submenyn

sub2Style=new copyOf(SubSampleStyle)
sub2Style.offcolor = "#000000"; //tx färg i 2 submeny
sub2Style.offbgcolor="#ffffff" //bg färg 2 submeny
sub2Style.separatorcolor="#000000" //streckfärg i 2 submenyn


tstyle1.clickcolor="#000000" //tx färg vid klick
tstyle1.clickbgcolor="#ffffff" // bg färg vid klick

tstyle1.clicksubimage="b_arrow_down.gif"




with(new menuname("om")){

style = SubSampleStyle;
margin=AllMargin
aI("text=Detta är Överenskommelsen;url=#");
aI("text=Dokument;showmenu=dok;type=tree");
aI("text=Uppdraget;url=#");
aI("text=Begrepp;url=#");
aI("text=Några datum;url=#");
}


with(new menuname("info")){
style = sub1Style;
margin=AllMargin
aI("text=Informationsbrev;url=#");
aI("text=Trycksaker;url=#");
aI("text=Portfolio;url=#");
aI("text=Artiklar;url=#");
}

with(new menuname("dok")){
style = sub2Style;
margin=AllMargin
aI("text=Överenskommelsen (pdf);url=#");
aI("text=In english;url=#");
aI("text=Skrivelser till riksdagen;url=#");
}

with(new menuname("moten")){
style = sub1Style;
margin=AllMargin
aI("text=Årlig konferens;url=#");
aI("text=Dialogmöten;url=#");
aI("text=Annat;url=#");
}

with(new menuname("upp")){
style = sub1Style;
margin=AllMargin
aI("text=Studier;showmenu=studier;type=tree");
aI("text=Åtaganden/Åtgärder;url=#");
}

with(new menuname("studier")){
style = sub2Style;
margin=AllMargin
aI("text=Årlig uppföljningsstudie);url=#");
aI("text=Tematiska studier;url=#");
}

with(new menuname("kunskap")){
style = sub1Style;
margin=AllMargin
aI("text=Lokala exempel;url=#");
aI("text=Utredningar;url=#");
aI("text=Forskning;url=#");
aI("text=Om EU;showmenu=eu;type=tree");
aI("text=Internationellt;url=#");


with(new menuname("eu")){
style = sub2Style;
margin=AllMargin
aI("text=Koden;url=#");
aI("text=Compact;url=#");
}

with(new menuname("kontakt")){
style = sub1Style;
margin=AllMargin
aI("text=kontaktuppgifter;=url=#");
aI("text=Press;url=#");
}

}

drawMenus()[/code]






And this is how the index- file looks like:
[code]<html>
<head>
<link href="../ov.css" rel="stylesheet" type="text/css">
</head>

<body>
<SCRIPT language=JavaScript src="milonic_src.js" type=text/javascript></SCRIPT>
<script language=JavaScript>
if(ns4)_d.write("<scr"+"ipt language=JavaScript src=mmenuns4.js><\/scr"+"ipt>");
else _d.write("<scr"+"ipt language=JavaScript src=mmenudom.js><\/scr"+"ipt>");
</script>

<SCRIPT language=JavaScript src="collapse_data.js" type=text/javascript></SCRIPT>
<SCRIPT language=JavaScript src="treemenu.js" type=text/javascript></SCRIPT>

<script>

function changeCM(th)
{
if(!th.checked)singleMasterMenu=false; else singleMasterMenu=true
}


</script>

<table width="200" border="0" align="center">
<tr>
<td colspan="3">

<script>
with(new menuname("main Tree Menu")){
fontweight="normal"
top=100
left=0
style = tstyle1;
alwaysvisible = 1;
itemwidth=200
//margin=AllMargin
//position="relative"
aI("text=Home;");
aI("text=About;showmenu=om;type=tree");
aI("text=Information;showmenu=info;type=tree");
aI("text=Meeteing;showmenu=moten;type=tree");
aI("text=Follow up;showmenu=upp;type=tree");
aI("text=Knowledge;showmenu=kunskap;type=tree");
aI("text=Contact;showmenu=kontakt;type=tree");
}


drawMenus();
</script>


</td>
</tr>
</table>



</body>
</html>[/code]

Thanks
Cirtap

Re: How do I split the code

Poster: Ruth
Dated: Sunday October 18 2009 - 4:39:50 BST

Hi,

OK, here's your table and menu call. Below is the collapse data file





Now, take a look at the OM submenu, I have that coded to show that line you wanted. I actually put in both the top and bottom extra aI strings to have a line below the main that opened that submenu and the last line to put one in before the next main header item. That does mean making a image

Please note, the collapse menu can't be placed in the table cell like the regular menus, at least it has problems in some browsers. This menu has to stay together or some browsers don't show the submenus, even though they actually open the collapsed submenu area, they don't show the text.

Ruth

Re: How do I split the code

Poster: Cirtap
Dated: Sunday October 18 2009 - 21:24:19 BST

Thanks Ruth!

Still some small things to do with the menu, but now it´s up and running.

/Cirtap

www.overenskommelsen.se