Follow Scrolling and Relative Positioning

timothy · Post by **timothy** » Tue Apr 06, 2004 12:21 am

I would like to use follow scrolling, but this doesn't seem to work if the menu uses relative positioning. Is there anything I can do to set this up? If not, how would I use absolute positioning so that my menu appears in the same place in both IE, NS, and Mozilla? I'd rather not use magic numbers and instead have this computed somehow.

My site:
http://members.rogers.com/haritunt/personal/

As a side question, my menu doesn't center properly in IE (works in Firefox though!). Any help on this would be great too!

Maz · Post by **Maz** » Tue Apr 06, 2004 12:35 am

The menu won't work in a div.

To get what you want remove postion relative, use top=?; and left=?;
followscroll=1;

and take out the drawmenus from the div.

Regards,
maz

timothy · Post by **timothy** » Tue Apr 06, 2004 1:13 am

Yikes, that's a bit more of a redesign than I wanted to do. I guess I'll just leave things as they are for the time being. Other than the inability to use follow scrolling, are there any other disadvantages to placing the menu in a div?

Thank you for the fast reply!

Maz · Post by **Maz** » Tue Apr 06, 2004 3:29 am

You really need to remove it from the div, the submenus won't work properly. If you are using css styles without tables you really need to place the menu on top and position it absolute.

You can place it in a table, but I never advise it because it works so much better cross platform on top.

Its really easy, look:

with(milonic=new menuname("Main Menu")){
style=menuStyle;
top=14;
screenposition="center";
menualign="center";
followscroll=1;
alwaysvisible=1;
orientation="horizontal";
aI("text=Home;url=index.html;");
aI("text=About Me;showmenu=About Me;");
aI("text=Projects;showmenu=Projects;");
aI("text=Games;showmenu=Games;");
}

you might want to include
menuwidth="250px"; or more
menuheight="25px";
itemwidth="??"; if you want all the items the same length, or place item width in any menu item without quotes.

If you want to change the submenu colors just duplicate the styles and give it a new name instead of menuStyle

If you want to add any style to a menu item just leave off the quotes around the value.

Simple once you get it.

maz

Post by **Ruth** » Tue Apr 06, 2004 10:42 am

I agree with Maz on removing it from the div. Besides, Maz gave you the code you need so not much work

and it would followscroll, and not have unknown issues come up because it's in a div.

Ruth

timothy · Post by **timothy** » Wed Apr 07, 2004 4:06 am

Thank you for all your input in this matter. I have gone ahead and switched my menu to use absolute positioning. It was rather easy to get the layout correct once I made sure my stylesheet rendered both IE and FF identically.

A couple final questions, where should I place the script tag which contains the call to drawMenus()? Right now, it is located just before </body>.

Also, I am using a JavaScript which allows the user to turn follow scrolling on and off. I am using a *slightly* modified version of the code in a sample on the Milonic website. Here is the part which does the work:

Code: Select all

  var menu = getMenuByName("Main Menu");
  
  if (!document.options || document.options.followscroll.checked) {
    _m[menu][5]  = null;
    _m[menu][2]  = 15;
    _m[menu][3]  = 45;
    //_m[menu][19] = 1;
    followScroll(menu,50,2);
    setFollowScrollCookieValue("true");
  }
  else {
    _m[menu][5]  = "top;left";
    _m[menu][2]  = "offset=15";
    _m[menu][3]  = "offset=45";
    //_m[menu][19] = 0;
    setFollowScrollCookieValue("false");
  }

  _setPosition(menu)

You will see two lines commented out. The menu seems to work fine with these removed. In fact, I'd almost say it works better when these lines are commented out. What purpose do they serve?

Thanks for all your help!

Maz · Post by **Maz** » Wed Apr 07, 2004 4:11 am

A quick guess is the drawmenus should go at the end of the menu-data and the js stuff either your template or possibly at the top of the the menu_data just after the first top lines.

My post Random image may be similar.

maz

Post by **Ruth** » Wed Apr 07, 2004 5:20 am

That is the reference number in the menu coding [I'm sure I'm not using the correct terms] to followscroll. I guess everything has a number reference inside the coding. 19 refers to followscroll, so maybe it works better commented out because you are setting a function of your own for it? As Schultz would say "I know nothing!"

Ruth

Maz · Post by **Maz** » Wed Apr 07, 2004 7:51 am

I think drawmenus has to go back into menu_data.js at the bottom because you aren't using a table.

Then something like followscroll script is true goes on the html page after menu_data script. And a reference to activate the main menu on menu_data.

But I'm not sure how followscroll is actived.

maz