Replacing menu text on rollover

[Paul666]

Hi,

1 st I am truly impressed with your menuing system it has the features I am looking for with out having to write reems of code to add features to the menuing system I was using & so simple to implement to.

However there is one feature I cannot see, and that is the ability to replace text in a menu when the mouse runs over it. Can this be done.

To see what I mean have a look at the members menu at http://www.adslproject.net

And again I am truly impreesed.

Ta

[kevin3442]

Hi Paul,

I didn't see a members menu at the url you provided. Do you just want a text rollover that actually changes the content of the text, not just its color and style? E.g., Say you have a menu item with the text "Point at me". When you point at it, it might change to "Now click me". That sort of thing?

There's no built-in capability to do that, but if that's what you want, I could probably whip something up for you. Let me know.

Cheers,

Kevin

[Paul666]

Hi,

Yes that's what I am after.

Sorry about the url a . crept in there. I've now edited it.

http://www.adslproject.net/

[Ruth]

Just to remind Kevin, because he has done so many 'whip-ups' he probably doesn't remember, he already has one. Here's a demo for it. And, just to mention one thing I found out. You have to kind of make sure that the text is the same amount in the rollover, or the menu item changes size. I guess you could fix that by making the item a fixed size.

Ruth

[kevin3442]

Just to remind Kevin, because he has done so many 'whip-ups' he probably doesn't remember, he already has one. Here's a demo for it.

Well... although I am slightly addled at times , I did initially think of the mm_changeItemProperty() function. But it's sort of a general purpose function. And even though it'd work, I think it'd be more cumbersome than necessary. For example, the mm_changeItemProperty() function requires that you identify which item, in which menu, to change as part of the function call (five parameters passed each time). But for a rollover effect, the pointer is already on the target item in the target menu, so it'd be simpler (at least logically) to extract which item to change from the menu itself. And then there's the consideration of restoring the original text onmouseout. So, all things considered, I think it might be better to write code specific to this particular task.

And, just to mention one thing I found out. You have to kind of make sure that the text is the same amount in the rollover, or the menu item changes size. I guess you could fix that by making the item a fixed size.

An excellent point.

To quote the Governator, "I'll be back..."

Kevin

[kevin3442]

OK, here's the new whip-up:

Two globals and two small function definitions to be copied to the top of your menu_data.js file.

Code: Select all

var mm_rollOffText;
var mm_rollItem;

function mm_onText(rollOnText)
{
  mm_rollItem = _itemRef;
  mm_rollOffText = _mi[mm_rollItem][1];
  _mi[mm_rollItem][1] = rollOnText;
  BDMenu(_mi[mm_rollItem][0]);
  itemOn(mm_rollItem);
}

function mm_offText()
{
  _mi[mm_rollItem][1] = mm_rollOffText;
  BDMenu(_mi[mm_rollItem][0]);
  itemOff(mm_rollItem);
}

mm_onText() takes one parameter, rollOnText, which is the text that you want to substitiue into the menu item in the onmouseover state. Call mm_onText() from the menu item's onfunction property.

mm_offText() takes no parameters and should automatically restore the "rolled" item's original text onmouseout. Call mm_offText() from the menu item's offfunction property.

Here's how you use it in an item definition:

Code: Select all

aI("text=Point at me;url=whatever.htm;onfunction=mm_onText('Now click me');offfunction=mm_offText();");

Initially, the item's text would be "Point at me". When moused over, the item's text should become "Now click me". On mouseout, the text should revert to "Point at me".

Keep Ruth's comment about item width in mind. If you don't fix the item's width to accomodate the wider of "on text" and "off text", then the item will fluctuate in size for mouseon and mouseout states (might screw up your page layout).

If you want to fix the item width, throw in the itemwidth property, like so:

Code: Select all

aI("text=Point at me;url=whatever.htm;itemwidth=100;onfunction=mm_onText('Now click me');offfunction=mm_offText();");

Give it a whirl and let us know if it works for you.

Cheers,

Kevin

[Ruth]

Oooh, goody, so much easier. And, another demo for me

Ruth

[Paul666]

Hi,

I continue to be impressed and the easy of implementation has allowed me to published as it is so much better than the previous system.

http://www.adslproject.net

However 2 probs remain.

1) the 2nd rollover text method is better particually if you have 2 Alan's. However there is a prob, if u don't set the menu items to a fixed width and u move the mouse v quickly off the menu it does not close. I assume it is something to do with the dynamic rezising. The prob is however the fixed width does not work, for some resion evey time u roll over a menu item the menu strinks abit, till u get to a min size and this result in the menu not closeing prob, have a look u will see. My code looks like this:

Code: Select all

aI("text=Alan;url=/residents/alancarrol/;itemwidth=125;onfunction=mm_onText('Alan Carrol');offfunction=mm_offText();");

etc

I think it did this with the 1st method as well

2) I am using the floating menu and I start on a black line at the bottom of my page header. Unfortinatly my page headers are not always the same height. So what I do is put a 1 pixel image just under the black line and then top=document.images["pos"].offsetTop-29;. This works fine apart from on the members pages with pictures, Alan, Paul, Stephen, Yvonne. Here it look like the menu is been position as if the picture was not there. However it only does this the 1st time u visit this page and no amout of refereshing and cache clearing allows it to be repeated, but it does happen on multiple computers in multiple locations.

http://www.adslproject.net/residents/alantaylor/
http://www.adslproject.net/residents/paulgaunt/
http://www.adslproject.net/residents/stephencharles/

I did think it might be something to down with the table into which the pic is loaded only reaching its full height after the pic has been loaded (I am on a 2mg line), the black line goes below the table and the drawMenus(); is be called before full height is reached. I did try putting drawMenus(); into a onload in BODY but it did not like this big time and it does not explain why only once!

Any ideas?[

[Ruth]

Hi Paul,
I found the shrinking after I experimented, and meant to come and note it for you. Sorry. As to the other problem on moving off quickly and it not closing. I haven't been able to reproduce it, but I've seen it in other cases. I think you may be right on the resizing. The only solution I found was to put a transparent spacer image in the first item of each column set at a width of 125, this keeps all items that width. I inserted it as an html image, not image= since that keeps the shrinking problem.

Code: Select all

aI("text=<img src=clear.gif border=0 width=125 height=10>;itemheight=10px;");

I couldn't get the itemheight to work, it just ends up the same height as all the other items, but I left that in.
The second issue is probably as you said a timing issue. I don't know if you could put the call for the menu at the bottom of the page, so that the page and images are all loaded before the menu gets called. I've seen that suggested in some cases.

Ruth

[Paul666]

Hi again, been busy with deploying.

Your surgestion for the rollovers did not work.

The img bit might have done the trick wrt the resize but fiddley, so I came up with a better way:

Code: Select all

aI("text=<FONT COLOR=black>Messe </FONT>Jimmy<FONT COLOR=black>nger</FONT>;url=whatever.htm;onfunction=mm_onText('Jimmy Messenger');offfunction=mm_offText('');");

Basically insted of img I am using the longer roll over text with the font set to the background as padding for the shorter. This works just fine but I still have the problem with the drop down not closing on occassions when thje mouse moves off it quickly.

U might be able to see this at http://www.adslproject.net . The Menu heading is in black just after the end upward pointing arrow and only the 1st colum has the variable width fix.

I might get round this by using images to construct this menu and use imgage rollovers. Would this work and would highlighting + pagebgcolor (that cool u r here feature) work. Just wondering b4 I start cutting up loads of images.

My draw menus was already at the bottom of the page, but not a prob as I only have 4-5 different header heights so was able to code a js fix. It might help in general if u could do drawmenu in a <BODY onload=...

One more thing I would like to do is this, if u look at http://www.adslproject.net
at the ends of menu u will see arrows pointing up and down. These are for goto top & bottom of page. What I would lile to do is stack them on top of each other so u have top&bottom of page on each side. So I think this means that I will need two overimages and two urls to a menu item. Is this possiable?

[Ruth]

Hi Paul,
That seems like a lot of work Especially since, if you upgrade to the newest version of the menu 5.718a the menu doesn't shrink when you specify a width with the text rollover. With that update, and this for that column menu

Code: Select all

with(milonic=new menuname("test1")){
style=menuStyle;
margin=3;
orientation="horizontal";
//style=vertStyle;
top="offset=2";
divides=4;
align="center";
aI("text=Alan;itemwidth=137;url=whatever.htm;onfunction=mm_onText('Alan Carrol');offfunction=mm_offText('');");
aI("text=Alan;itemwidth=105;url=whatever.htm;onfunction=mm_onText('Alan Taylor');offfunction=mm_offText('');");
aI("text=Cherlyn;itemwidth=125;url=whatever.htm;onfunction=mm_onText('Cherlyn Baldwin');offfunction=mm_offText('');");
aI("text=Ian;itemwidth=118;url=whatever.htm;onfunction=mm_onText('Ian Robinson');offfunction=mm_offText('');");
aI("text=Jimmy;url=whatever.htm;onfunction=mm_onText('Jimmy Messenger');offfunction=mm_offText('');");
aI("text=John;url=whatever.htm;onfunction=mm_onText('John Putman');offfunction=mm_offText('');");
aI("text=Larry;url=whatever.htm;onfunction=mm_onText('Larry O\\'Sullivan');offfunction=mm_offText('');");
aI("text=Lineye;url=whatever.htm;onfunction=mm_onText('Lineye Green');offfunction=mm_offText('');");
aI("text=Mor;url=whatever.htm;onfunction=mm_onText('Mor Dioum');offfunction=mm_offText('');");
aI("text=Paul;url=whatever.htm;onfunction=mm_onText('Paul Gaunt');offfunction=mm_offText('');");
aI("text=Stephen;url=whatever.htm;onfunction=mm_onText('Stephen Charles');offfunction=mm_offText('');");
aI("text=Tom;url=whatever.htm;onfunction=mm_onText('Tom McQuiston');offfunction=mm_offText('');");
aI("text=Tom;url=whatever.htm;onfunction=mm_onText('Tom O\\'Rahilly');offfunction=mm_offText('');");
aI("text=Tom;url=whatever.htm;onfunction=mm_onText('Tom O\\'Rahilly');offfunction=mm_offText('');");

}

everything works fine, no shrinking and you don't have to use any images.

As to the second question, there are 2 options I figured out:

1. code the Main Menu so the first two aI strings and the last two are these

Code: Select all

aI("image=mauyellow.gif;overimage=maublue.gif;url=#top;pagebgcolor=#000000;");
aI("image=madyellow1.gif;overimage=madblue.gif;url=#bottom;pagebgcolor=#000000;");

This will give you two arrows side by side.

2. Replace the existing aI coding for the arrows with this:

Code: Select all

aI("text=<table class='arrow' cellpadding=0 cellspacing=0 border=0><tr><td><a href='#top'><img src=mauyellow.gif align='center' border=0></a></td></tr><tr><td><a href='#bottom'><img src=madyellow.gif align='center' border=0></a></td></tr></table>;type=html;onbgcolor=#000000;pagebgcolor=#000000;");

You will need to resize your arrows to be 7px wide by 5px high. Then create a class in the head of the page

Code: Select all

<style type="text/css">
	.arrow{padding-top:1px;padding-right:0px;padding-left:0px;padding-bottom:1px;}
	</style>

You could put this in your style sheet if you have one. That's to put space between the arrows. You can do it by using the cellpadding=1 however that increases the height of the menu to about 30px.

Ruth