Hello Milonic Gurus,
I successfully put a Milonic DHTML vertical menu into a <td> element of a table. That works just fine.
What I want is this:
I want the menu to follow scroll i.e. it not to disapper from the web page even when I scroll down.
I am trying to put the line
followscroll="0,100,10"; inside the code. It looks like this now:
<table cellspacing="2" cellpadding="2" height="75%" width="100%" bgcolor="#ffffff" border="1">
<tr valign="top">
<td id="leftpanel" width="10%">
<script type="text/javascript">
with(new menuname("Main Menu")){
alwaysvisible=1;
style=menuStyle;
position="relative";
followscroll="0,100,10";
aI("status=Home;text=Home;url=http://tilaks.homelinux.com/;");
aI("showmenu=Movies;text=Movies;");
aI("showmenu=Music;text=Music;");
aI("showmenu=Travel n Tourism;text=Travel n Tourism;");
aI("showmenu=Sports;text=Sports;");
aI("showmenu=Education;text=Education;");
}
drawMenus() ;
</script>
</td>
</tr>
</table>
But it does not give the desired behaviour. It just stays static and does not follow the scroll.
Can anyone help me ?
Thanks a lot, in advance.
Help - FollowScroll with Vertical Menu inside a Table Cell
Hi,
The whole purpose of putting the menu into a table cell is to keep in at that position so that when page resolution is changed based on the user's browser settings the menu will always be in the same place. By making it relative position you disable the followscroll property since you've told it to remain where it is relative to the table cell.
If you want follow scroll you'll need to place the menu using absolute positioning, i.e. top=20; left=10; where 20 and 10 are whatever you want them to be. Then set the follow scroll and it will work.
Ruth
The whole purpose of putting the menu into a table cell is to keep in at that position so that when page resolution is changed based on the user's browser settings the menu will always be in the same place. By making it relative position you disable the followscroll property since you've told it to remain where it is relative to the table cell.
If you want follow scroll you'll need to place the menu using absolute positioning, i.e. top=20; left=10; where 20 and 10 are whatever you want them to be. Then set the follow scroll and it will work.
Ruth
Ruth,
I understand what you are saying.
Usually, people tend to put a navigation bar inside a table cell rather than going for absolute position, so that it can be more controlled.
If the followcroll can be enabled for this also (I understand this may be an enhancement) then I think it is going to add a lot of value.
Any other workarounds ?
I understand what you are saying.
Usually, people tend to put a navigation bar inside a table cell rather than going for absolute position, so that it can be more controlled.
If the followcroll can be enabled for this also (I understand this may be an enhancement) then I think it is going to add a lot of value.
Any other workarounds ?
While I realize I'm breaking the rules here, this works for me...
You can see it, and the rest of the code, at http://www.west.asu.edu/cspc/steps/discover.htm.
Code: Select all
with(new menuname("mainMenu")){
top=220;
left=5;
style = tstyle1;
alwaysvisible = 1;
itemwidth = 155;
followscroll = "5,10,4";
margin = AllMargin;
position = "absolute";
aI("text=Introduction;showmenu=careerplan;url=intro.htm;status=Introduction;");
aI("text=Discovering More About Yourself;showmenu=discover;url=discover.htm;status=Discovering More About Yourself;");
aI("text=Investigating the \"World of Work\";showmenu=investigate;url=investigate.htm;status=Investigating the World of Work;");
aI("text=Making an Informed Decision and Goal Setting;showmenu=goal;url=goal.htm;status=Making an Informed Decision and Goal Setting;");
aI("text=Implementation of Your Job Search;showmenu=search;url=search.htm;status=Implementation of Your Job Search;");
aI("text=Return to Career Services;url=http://www.west.asu.edu/cspc/;status=Career Services Home;");
}John
Questions
Hi,
I do see it working on your site !!! Pretty promising to me.
I have a few questions.
1. The way I have it now, is I have it inside a table cell <td>..</td> with the position property set to relative. That puts it inside the table cell all the time.
What I see in your case, is that you are trying a combination of two things. Firstly, you are not using the menu to be placed inside a table cell to start with . Am I correct or wrong ? Please clarify.
2. I feel that you have it set to absolute and not inside a table cell and then you have played around with the top coordinates of the menu to be placed in such a way that it looks to be in the right column in your page. Once you do that, you use followscroll and thus it works.
Please clarify my understanding .
I would love to hear from you that you indeed placed the menu inside a <td> and still get the effect that I am after, and the one you have achieved.
I am curiously and eagerly awaiting a reply.
Thanks a lot, in advance !!!
I do see it working on your site !!! Pretty promising to me.
I have a few questions.
1. The way I have it now, is I have it inside a table cell <td>..</td> with the position property set to relative. That puts it inside the table cell all the time.
What I see in your case, is that you are trying a combination of two things. Firstly, you are not using the menu to be placed inside a table cell to start with . Am I correct or wrong ? Please clarify.
2. I feel that you have it set to absolute and not inside a table cell and then you have played around with the top coordinates of the menu to be placed in such a way that it looks to be in the right column in your page. Once you do that, you use followscroll and thus it works.
Please clarify my understanding .
I would love to hear from you that you indeed placed the menu inside a <td> and still get the effect that I am after, and the one you have achieved.
I am curiously and eagerly awaiting a reply.
Thanks a lot, in advance !!!
To John
John,
In addition to my email reply to your post, I would also like to know what is meant by style = tstyle1 ? I thought we can use only menustyle unless either you have changed the names or created a new style .
I just cut and pasted your code, but it did not work. The menu itself vanished. There must be some more tricks to get this working inside a <td> in my page.
Thanks a lot.
In addition to my email reply to your post, I would also like to know what is meant by style = tstyle1 ? I thought we can use only menustyle unless either you have changed the names or created a new style .
I just cut and pasted your code, but it did not work. The menu itself vanished. There must be some more tricks to get this working inside a <td> in my page.
Thanks a lot.
That's a straight htm page, so by looking at the source you'd be able to see exactly where all the files are.
In this case, the full _data file is at http://www.west.asu.edu/cspc/steps/steps_new_data.js.
While I don't advocate breaking Andy's rules, this was done long ago with a very early version of the system, BAR (Before Andy's Rules), but continues to work.
In this case, the full _data file is at http://www.west.asu.edu/cspc/steps/steps_new_data.js.
While I don't advocate breaking Andy's rules, this was done long ago with a very early version of the system, BAR (Before Andy's Rules), but continues to work.
John
Hi,
Just to add my two cents, John is using a treemenu so maybe that is why yours disappeared, if you didn't have the treemenu.js module? That t-style comes from the treemenu, but I haven't taken a real look at the page so I could be off the chart here.
Also, just to point out, you can name the styles anything you want, you don't have to use menuStyle: mainStyle, myStyle, style1, subStyle, mySub and so on whatever suits your fancy
Ruth
Just to add my two cents, John is using a treemenu so maybe that is why yours disappeared, if you didn't have the treemenu.js module? That t-style comes from the treemenu, but I haven't taken a real look at the page so I could be off the chart here.
Also, just to point out, you can name the styles anything you want, you don't have to use menuStyle: mainStyle, myStyle, style1, subStyle, mySub and so on whatever suits your fancy
Ruth
To John and Ruth
Hello John, Ruth,
When I downloaded my menu, I did not get a treemenu.js. . I just got the 4 js files menu_data.js, milonic.js, mmenuns4.js and mmenudom.js.
Is there something wrong I am doing ?
Do I need a treemenu to get the effect that John has in his page ?
All I need is to be able to put the menu inside a <td>...</td> and have it foward scroll.
I am a lil confused whether to use absolute or relative.
If you (John or Ruth) can please throw some light on how the effect was achieved in http://www.west.asu.edu/cspc/steps/discover.htm, I would really greatly appreciate it.
Johns site has this line of code
tr>
<td width="155" rowspan="3" align="center" valign="top"><a name="nav"></a><script language="javascript" src="steps_new_data.js" type="text/javascript"></script><script language="javascript" src="/sa/menu5/treemenu.js" type="text/javascript"></script></td>
</tr>
He does not have anything like what we have been told to do, i.e. to put the main menu script inside the <td>..</td> tag with 'relative' positioning while leave the submenu data inside the menu_data.js.
What do I need to do to get this effect ?
Thanks a lot in advance (to both John and Ruth)
When I downloaded my menu, I did not get a treemenu.js. . I just got the 4 js files menu_data.js, milonic.js, mmenuns4.js and mmenudom.js.
Is there something wrong I am doing ?
Do I need a treemenu to get the effect that John has in his page ?
All I need is to be able to put the menu inside a <td>...</td> and have it foward scroll.
I am a lil confused whether to use absolute or relative.
If you (John or Ruth) can please throw some light on how the effect was achieved in http://www.west.asu.edu/cspc/steps/discover.htm, I would really greatly appreciate it.
Johns site has this line of code
tr>
<td width="155" rowspan="3" align="center" valign="top"><a name="nav"></a><script language="javascript" src="steps_new_data.js" type="text/javascript"></script><script language="javascript" src="/sa/menu5/treemenu.js" type="text/javascript"></script></td>
</tr>
He does not have anything like what we have been told to do, i.e. to put the main menu script inside the <td>..</td> tag with 'relative' positioning while leave the submenu data inside the menu_data.js.
What do I need to do to get this effect ?
Thanks a lot in advance (to both John and Ruth)
To Ruth
In addition to what I wrote just now in my previous post, I would like to have the sub-menus, just like they are in my "under construction" site http://worldinpocket.home.comcast.net
The same kind of menu, is what I want inside my table cell (which is how you see it on the site) but I want it to scroll with the browser windown scrolling down.
Hope this helps, explain what I am looking for.
Thanks
The same kind of menu, is what I want inside my table cell (which is how you see it on the site) but I want it to scroll with the browser windown scrolling down.
Hope this helps, explain what I am looking for.
Thanks
Hi
the treemenu is not a standard part of the menu. Its part of the bolt-on modules and you find it here:
http://milonic.com/menumodules.php
(scroll down there)
Michael
the treemenu is not a standard part of the menu. Its part of the bolt-on modules and you find it here:
http://milonic.com/menumodules.php
(scroll down there)
Michael
Hi,
If you place the main menu in a table cell with the position="relative"; to keep it there it will not scroll. I doubt that the menu could be programmed to do that, position="relative" is a css code and the browsers treat it as being 'stationary' within that table cell.
However, you could put a div inside that table cell, set it to a 150px or so width and then set the menu as absolutely positioned and followscroll. Try this as your middle table setup
And put this as your main menu back in the menu_data.js file
Ruth
If you place the main menu in a table cell with the position="relative"; to keep it there it will not scroll. I doubt that the menu could be programmed to do that, position="relative" is a css code and the browsers treat it as being 'stationary' within that table cell.
However, you could put a div inside that table cell, set it to a 150px or so width and then set the menu as absolutely positioned and followscroll. Try this as your middle table setup
Code: Select all
<DIV>
<TABLE height="75%" cellSpacing=2 cellPadding=2 width="100%" bgColor=#000000
border=1>
<TBODY>
<TR vAlign=top>
<TD id=leftpanel ><div style="height:75%;width:150px;border:1px solid red"> </div> [edited:br removed]</TD>
<TD id=maincanvas width="75%" height="100%">
<TABLE id=maincanvastable height="100%" width="100%" border=1>
<TBODY>
<TR id=top height="50%" width="100%">
<TD colSpan=2><FONT color=#ffffff>Under Construction<BR>An Utopia
for anyone looking to explore Indian culture, food, cinema, her
pristine natural beauty, among other things !!! </FONT></TD></TR>
<TR id=mid height="40%">
<TD id=mid_ad width="30%">Ad goes here </TD>
<TD id=mid_content width="70%">Middle content goes here. </TD></TR>
<TR id=bottom height="10%">
<TD colSpan=2>Bottom content goes here </TD></TR></TBODY></TABLE></TD>
<TD id=rightpanel width="15%" height="100%"> Possible place for
advert </TD></TR></TBODY></TABLE></DIV></FONT><BR>Code: Select all
with(new menuname("Main Menu")){
alwaysvisible=1;
style=menuStyle;
top="220";
left="20";
followscroll = "5,10,4";
aI("status=Home;text=Home;url=http://home.comcast.net/~worldinpocket/index.html;");
aI("showmenu=Movies;text=Movies;");
aI("showmenu=Music;text=Music;");
aI("showmenu=Travel n Tourism;text=Travel n Tourism;");
aI("showmenu=Sports;text=Sports;");
aI("showmenu=Education;text=Education;");
}
Last edited by Ruth on Fri Apr 28, 2006 2:26 am, edited 1 time in total.
To Ruth
Ruth,
Your code snippet certainly works.
I wanted to know what those multiple <br>'s and a couple of $nbsp;'s after the opening <div> was for ?
Was it to make the entire page scroll just to see the effect , which I doubt it is , coz I have the same down in another place in the page ?
Or is it to have the <div> to span the entire length of the <td> column ?
Or is it something else ?
How did you get the red border to span the entire <td> column height and width ?
Thanks for your insights.
Tilak
Your code snippet certainly works.
I wanted to know what those multiple <br>'s and a couple of $nbsp;'s after the opening <div> was for ?
Was it to make the entire page scroll just to see the effect , which I doubt it is , coz I have the same down in another place in the page ?
Or is it to have the <div> to span the entire length of the <td> column ?
Or is it something else ?
How did you get the red border to span the entire <td> column height and width ?
Thanks for your insights.
Tilak
Hi,
Sorry. I was playing with a number of things. The first one was without the div and in my browser without the breaks I didn't have anything to scroll so I couldn't test the scrolling. When I put that div in I just forgot to remove all the breaks.
The div spans 150px since the menu is around 130px wide or so. That way it leaves some space for those who increase the font size and thereby increase the menu width.
When you use divs, if you set the height and width of the div using css it will be that size even if you don't have anything in it other than a non breaking line space and therefore the border goes around it totally. I just left the border in so you could see the div size.
Ruth
Sorry. I was playing with a number of things. The first one was without the div and in my browser without the breaks I didn't have anything to scroll so I couldn't test the scrolling. When I put that div in I just forgot to remove all the breaks.The div spans 150px since the menu is around 130px wide or so. That way it leaves some space for those who increase the font size and thereby increase the menu width.
When you use divs, if you set the height and width of the div using css it will be that size even if you don't have anything in it other than a non breaking line space and therefore the border goes around it totally. I just left the border in so you could see the div size.
Ruth
Hi Ruth
Ruth,
Thanks a lot for your reply.
I think I am all set.
Just to make full use of Milonic DHTML on my page, I wanted to know from you how to use tabs in my page.
For example, if you look at my page http://worldinpocket.home.comcast.net you will see a lil portion between the first table and the middle table.
I want to put a tab in that area. I want to put a tiny table with one row there. Essentially, I want one tab for each country, e.g. US, India, UK, Australia and once you click one of them, the context of the page will shift to be country specific, although the vertical DHTML menu elements will remain pretty much the same.
Can you please help me out here.
As like the previous emails of yours, I am very much appreciative of your help.
Thanks a lot, in advance.
Thanks a lot for your reply.
I think I am all set.
Just to make full use of Milonic DHTML on my page, I wanted to know from you how to use tabs in my page.
For example, if you look at my page http://worldinpocket.home.comcast.net you will see a lil portion between the first table and the middle table.
I want to put a tab in that area. I want to put a tiny table with one row there. Essentially, I want one tab for each country, e.g. US, India, UK, Australia and once you click one of them, the context of the page will shift to be country specific, although the vertical DHTML menu elements will remain pretty much the same.
Can you please help me out here.
As like the previous emails of yours, I am very much appreciative of your help.
Thanks a lot, in advance.
Hi,
I'm not sure what you mean by tab, there is a specific menu that is made of tabs, actually there are a couple of designs. But, if you mean you want 'links' then try this.
And add this style to the menu data file. Just copy and paste it right below the menuStyle that is already there.
Of course you don't have to use a different style for the menu in the table, but I figured I'd play around and show you some other style things you can do.
Below my name are some links. You should take a look at the 1st one for the Beginners' Forum. There are some explanations and examples, particularly sections I, II, and III and borders.
Ruth
I'm not sure what you mean by tab, there is a specific menu that is made of tabs, actually there are a couple of designs. But, if you mean you want 'links' then try this.
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>The WYNIWYG - What You Need Is What You Get !!!</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<STYLE type=text/css>BODY {
FONT-SIZE: 12px; FONT-FAMILY: verdana; BACKGROUND-COLOR: #ffffff;margin:5px;
}
.backG {
FONT-SIZE: 12px; COLOR: #ffffff; BORDER-BOTTOM: #538c4d 2px solid; FONT-FAMILY: verdana; BACKGROUND-COLOR: #93c39b
}
TD.form1 {
FONT-SIZE: 12px; BACKGROUND: #eaeaea; FONT-FAMILY: verdana
}
</STYLE>
<META content="MSHTML 5.50.4807.2300" name=GENERATOR></HEAD>
<BODY><!-- ***** This is the section of code you need to paste into your web pages ***** -->
<SCRIPT src="milonic_src.js" type=text/javascript></SCRIPT>
<NOSCRIPT><A href="https://milonic.com/">JavaScript Menus and DHTML Menus
Powered by Milonic</A></NOSCRIPT>
<SCRIPT type=text/javascript>
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>");
else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>");
</SCRIPT>
<SCRIPT src="menu_data.js" type=text/javascript></SCRIPT>
<!-- **** JavaScript Menu HTML Code --><!-- This is the table for the header that contains the company logo and the letter-head google ad -->
<TABLE height="20%" cellSpacing=2 cellPadding=2 width="100%" bgColor=#000000 border=1>
<TBODY>
<TR vAlign=top>
<TD align=middle><FONT color=#ffffff>Company Logo Image</FONT> </TD></TR>
<TR vAlign=top>
<TD> </TD></TR></TBODY></TABLE>
<table width="100%" cellpadding=0 cellspacing=4 border=0 align="center">
<tr>
<td><table cellpadding=0 cellspacing=0 border=0 align="center" width="80%">
<tr>
<td>
<script>
with(new menuname("Country")){
alwaysvisible=1;
style=tableStyle;
orientation="horizontal";
menuwidth="100%";
itemwidth="100%";
menualign="center";
position="relative";
aI("text=Country 1;url=whatever;");
aI("text=Country 2;");
aI("text=Country 3;");
aI("text=Country 4;");
aI("text=Country 5;");
aI("text=Country 6;");
}
drawMenus();
</script>
</td>
</tr>
</table>
</td>
</tr>
</table>
<DIV>
<TABLE height="75%" cellSpacing=2 cellPadding=2 width="100%" bgColor=#000000
border=1>
<TBODY>
<TR vAlign=top>
<TD id=leftpanel><div style="height:75%;width:150px;border:1px solid red"> </div>
</TD>
<TD id=maincanvas width="75%" height="100%">
<TABLE id=maincanvastable height="100%" width="100%" border=1>
<TBODY>
<TR id=top height="50%" width="100%">
<TD colSpan=2><FONT color=#ffffff>Under Construction<BR>A Utopia
for anyone looking to explore Indian culture, food, cinema, her
pristine natural beauty, among other things !!! </FONT></TD></TR>
<TR id=mid height="40%">
<TD id=mid_ad width="30%">Ad goes here </TD>
<TD id=mid_content width="70%">Middle content goes here. </TD></TR>
<TR id=bottom height="10%">
<TD colSpan=2>Bottom content goes here </TD></TR></TBODY></TABLE></TD>
<TD id=rightpanel width="15%" height="100%"> Possible place for
advert </TD></TR></TBODY></TABLE></DIV></FONT><BR>
<DIV>
<TABLE height="5%" cellSpacing=2 cellPadding=2 width="100%" bgColor=#000000
border=1>
<TBODY>
<TR vAlign=top>
<TD align=left width="20%"> <FONT face=Arial color=#000000
size=-2><A href="https://milonic.com/">Drop Down Menu by
Milonic</A></FONT> </TD>
<TD align=right width="90%"><FONT face=Arial color=#ffffff>Contact Us |
About Us </FONT></TD></TR></TBODY></TABLE></DIV></FONT>
<DIV></DIV></FONT>
<DIV></DIV></BODY></HTML>
Code: Select all
with(tableStyle=new mm_style()){
bordercolor="#CCCCCC";
borderstyle="outset";
borderwidth=3;
onborder="3px inset #cccccc";
fontfamily="Verdana, Tahoma, Arial";
fontsize="75%";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#000000";
offcolor="#ffffff";
onbgcolor="#ffffff";
oncolor="#000000";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=5)";
padding=5;
pagebgcolor="#82B6D7";
pagecolor="red";
separatorcolor="#cccccc";
separatorsize=1;
separatorheight="100%";
separatorwidth=2;
separatoralign="center";
separatorpadding=3;
subimage="arrow.gif";
subimagepadding=2;
}Below my name are some links. You should take a look at the 1st one for the Beginners' Forum. There are some explanations and examples, particularly sections I, II, and III and borders.
Ruth
To Ruth
Ruth,
Your example that you provided is in very similar lines with what I am looking for.
What I meant by tabs, can be best illustrated by a sample website URL : http://news.yahoo.com/s/ap/20060428/ap_ ... an_nuclear .
If you see on top, the tabs called "Home", "US" , "Business", "World" etc. That is what I am looking for. Also, these tabs may well go beyond one single row into two rows in which case they will show up within the same width but in multiple rows. This is what I want to achieve.
Secondly, with the tabs that you showed me in the example, I am assuming that I can add the vertical menu in the same page as the horizontal tabs. Is that a fair statement ?
Have been very much helped by your examples, advice, suggestions and code snippets. Thank you so much.
Awaiting eagerly, another innovative code snippet that does what I am looking for.
Thanks
Tilak
Your example that you provided is in very similar lines with what I am looking for.
What I meant by tabs, can be best illustrated by a sample website URL : http://news.yahoo.com/s/ap/20060428/ap_ ... an_nuclear .
If you see on top, the tabs called "Home", "US" , "Business", "World" etc. That is what I am looking for. Also, these tabs may well go beyond one single row into two rows in which case they will show up within the same width but in multiple rows. This is what I want to achieve.
Secondly, with the tabs that you showed me in the example, I am assuming that I can add the vertical menu in the same page as the horizontal tabs. Is that a fair statement ?
Have been very much helped by your examples, advice, suggestions and code snippets. Thank you so much.
Awaiting eagerly, another innovative code snippet that does what I am looking for.
Thanks
Tilak
Hi
please accept my comment, in terms of this menu, these are not "tabs" these are menu items of an additional menu, with an addional styling. So where is the problem? The term "tabs" is confusing. You can place multiple menus on one page, each of them having its own position and/or own style.
Michael
please accept my comment, in terms of this menu, these are not "tabs" these are menu items of an additional menu, with an addional styling. So where is the problem? The term "tabs" is confusing. You can place multiple menus on one page, each of them having its own position and/or own style.
Michael