Double Menu Follow Up

[bobwill]

In the thread viewtopic.php?t=3675, Kevin addressed the issue of a double menu that uses followscroll option.

I now have the need to have a double horizontal menu.

Kevins' example used screenpositon="center;top"; , which works very good, with the followscroll. I think it works because the menu is positioned basically at coordinates (0,0) of the screen.

I want to know if you can have a horizontal menu "Mainmenu" with an offset and the second horizontal menu, "Menu2" with an offset just below the "mainmenu" and have them both scroll, but postion themselves at the top of the browser window as you scroll??

I have tried this two menus with an offset, one below the other, but when they scroll the menus do not position themselves at the top of the browser window. They postion themselves at the "offset' position.

I hope some of this makes sense.

[kevin3442]

Hi Bob,

If I understand correctly, you'd like to have your main menu where it currently is (under the American Legion Baseball graphic), and to put a second menu under that one, then have them both start to follow scrolling when they hit the top of the window... right? You can do this if you modify your "mainmenu" and add a "mainmenu2" in your menu_data.js file, as shown below.

Code: Select all

with(milonic=new menuname("mainmenu")){
top=160;
menuwidth="100%";
style=style1;
alwaysvisible=1;
menualign="center";
followscroll="0,100,10";
orientation="horizontal";
//aI() stuff here
}

with(milonic=new menuname("mainmenu2")){
top=178;
menuwidth="100%";
style=style1;
alwaysvisible=1;
menualign="center";
followscroll="18,100,10";
orientation="horizontal";
//aI() stuff here
}

The only change in "mainmenu" is to set followscroll="0,100,10". This has the effect of making the menu start to follow the scroll when the top of the menu is 0 pixels from the top of the window; i.e., it'll stick to the top of the window once it gets there, without the 1-pixel gap that you currently have.

In "mainmenu2", top=178 because it looks to me like your "mainmenu" is 18 px high. So top=178 should place the top of "mainmenu2" right on the bottom of "mainmenu". followscroll="18,100,10" so that "mainmenu2" will start to follow when its top comes within 18px (the height of "mainmenu") of the top of the window. The "100,10" part of followscroll is the same in both menus so that both will follow at the same "rate" and "speed" (see below). You could play with these values, Bob, until you get an effect you like.

For the benefit of Bob and anyone else reading this thread...

The effect of followscroll depends on how you set the menu's initial vertical position. If you set the initial vertical position by setting the screenposition property to "top", "middle", or "bottom", then followscroll essentially acts as a boolean, where any value greater than 0 turns following on, and 0 turns following off. Note that you can still apply a vertical offset using the top property when using screenposition and followscroll together. So, if you wanted your menu to always hover 10px from the bottom of the window, you'd set screenposition="bottom"; top="offset=-10"; followscroll=1;

If you set the menu's initial vertical position using the top property instead of screenposition (e.g., top=25), then there are two different syntaxes for followscroll:

followscroll=x; - This seems to be the more common syntax. In this case, x is a value greater than 0 and has two effects. Effect #1 - The first effect depends on the relative values of x and top. If x < top, then the menu will start following the vertical scroll when its top comes within x pixels of the top of the window. if x = top, following movement will begin as soon as the user scrolls the window, and the menu will always remain in the same position relative to the top of the window. If x > top, then the menu will appear in its initial top location, and then automatically move to top=x when the page is loaded, and following will proceed from there (this could be a cool effect if you want your menu to look like it is dropping into position from above when the page is loaded... try setting top to a negative number and see what happens!). Effect #2 - Whenever the menu moves to catch up to a window scroll, the top of the menu will come to rest x pixels from the top of the window when the user stops scrolling. Since x must be at least 1 in this syntax, you will have at least 1 pixel of space between the top of your menu and the top of the browser window if you use this syntax (but see below). Also, when using this syntax, the values assigned to the global variables _followRate and _followSpeed, which are typically defined at the top of the menu_data.js file, may affect following. The menu "follows" by being moved incrementally, over time intervals, until it reaches its resting point (defined by x). _followRate defines the interval; the number of milliseconds between each successive movement of the menu (a millisecond is .001 of a second, so 1000 milliseconds in one second). _followSpeed defines the increment; the number of pixels the menu will move during each successive movement. I say that these variables may affect following, because they currently (v5.04) seem to have no effect, at least in IE6/Win2k... for now, it looks like there must be some internal default used for these, but that may be planned for a change in a later release.

followscroll="x,y,z"; - Note the double quotes around "x,y,z", as well as the commas separating one value from the next. x works very much like it is described in the first syntax above, with one important exception... x can be greater than or equal to 0. Setting x to 0 eliminates the one-pixel strip of space between the top of the window and the top of your menu. y is the "followrate"; the number of milliseconds between each successive movement of the menu (a millisecond is .001 of a second, so 1000 milliseconds in one second). Setting y too large results in very slow and potentially jumpy movement. z is the "followspeed"; the number of pixels the menu will move during each successive movement. Setting z too large can result in jumpy movement; setting z to 1 will make your menu shake continuously (so don't do that). This syntax is better IMHO because (a) the rate and speed parameters work with this syntax, and (b) you can define different scrolling properties for multiple scrolling menus on one page (e.g., make one arrive in its place sooner than another).

Hope that helps some of you scroll followers,

[EDIT: 2-6-06 by Ruth
As of version 5.742 in relation to this post on followscroll viewtopic.php?p=34741, it seems that using something like screenposition="center"; and a top=x; to get the menu to stop at other than the 0 top position, top=10; needs to be changed to top="offset=10"; Then setting followscroll=10; will set the stop position at 10px from the top.]

Kevin

[bobwill]

I tried what you said. Here is what is in my data file.

with(milonic=new menuname("mainmenu")){
menuwidth="100%";
style=style1;
top="offset=160";
alwaysvisible=1;
menualign="center";
screenposition="center;top";
followscroll="0,100,10";
orientation="horizontal";
//aI("Stuff

----------------------------------
with(milonic=new menuname("menubar2")){
top="offset=178";
menuwidth="100%";
style=style1;
alwaysvisible=1;
menualign="center";
screenposition="center;top";
followscroll="18,100,10";
orientation="horizontal";
aI("text=Invitation------

The menu would not load at all without the "screenposition" defined. Is "screenposition" and top="offset=178"; in conflict with each other?

The menu does scroll, but does not go to top of browser window. You can see results at http://www.baseball.legion.org/doublebar.htm

[John]

Can't get through to take a look, Bob. Getting a DNS error.

[bobwill]

Do not know why. I am on the site and it is working.

[John]

Still dead. Probably just netitis...

I'll try later.

[kevin3442]

Hi Bob,

I tried what you said. Here is what is in my data file.

Well, not quite... your two menus ("mainmenu" and "menubar2") are not defined as I suggested in the code I posted. Did you try the code I posted? The key differences are: Your code uses screenposition="center;top" and a top="offset...", but my code does not use screenposition and sets the top position of each menu directly. I can see a couple of logical issues with the way you have done it. (1) using "center" in screenposition has no effect when menuwidth="100%". (2) Using "top" in screenposition, in combination with setting an "offset" in top is essentially the same as just setting top to a straight numeric value. In other words,

Code: Select all

screenposition="top";
top="offset=30";

would be the same as

Code: Select all

top=30;

I wouldn't normally combine a top screenposition with a top offset, but I suggested doing so in Tim's approach to a double menu to overcome something else that wasn't working as expected. It doesn't appear to be working in your case, however.

Bottom line, I'd suggesting trying the code that I posted earlier. Actually, I'd tweak it some because of the yellow border you've added around the menus (adds to the height). Try these:

Code: Select all

with(milonic=new menuname("mainmenu")){ 
top=160; 
menuwidth="100%"; 
style=style1; 
alwaysvisible=1; 
menualign="center"; 
followscroll="0,100,10"; 
orientation="horizontal"; 
//aI() stuff here 
} 

with(milonic=new menuname("menubar2")){ 
top=181; 
menuwidth="100%"; 
style=style1; 
alwaysvisible=1; 
menualign="center"; 
followscroll="21,100,10"; 
orientation="horizontal"; 
//aI() stuff here 
}

I tried the above code with a local copy of your test page and it works well in IE6/Win2k.

Kevin

[bobwill]

OK Kevin, I pasted the code exactly as you presented it. I have to admit that you are the guru of "scroll". My menu now works just they way I want it to. The colors and borders is something that I was just playing with.

Thanks for your help and input. Until the next issues...Thanks

[kevin3442]

...I have to admit that you are the guru of "scroll"...

Nah... I just tinker a lot. But thanks.

...My menu now works just they way I want it to....

Glad it worked!

Cheers,

Kevin

[dbonneville]

Mine works too, now! Thanks Kevin.