Hi, my header functions correctly and fits the way I want it in the space (ignore the actual images, I know they're not the right size yet) but it won't show up unless I mouseover it! Then it closes immediately when I mouse off. This is the script I have which looks to be correct (like others I've seen that work)... what am I doing wrong?

<script type="text/javascript">

window.addEvent('domready', function(){
var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:309, border:0, onOpen:function(e,i){location=(i);}});
});
</script>

Hi thanks for the post. I am trying to get this to work and though it works locally when I run the downloaded .htm file, no luck when it is uploaded to my website space. All the files and folders are the same. Maybe you have some advice on this :) it can be seen at http://yournukes.com/imagemenu/index.htm

Also I am unsure what is meant by download Mootools and the FX.Elements plugin. Is it not included with Phatfusion's download? If not why is it working on my local computer? Thanks :)

I eventually want to include this with an different effect but first I think I need to get it working live.

There's a good chance that the plugin has bugs now since the newer releases of MT. Until I go through the plugin in more detail and refresh my memory on this I can't really provide much help.

To answer your second question, you need to download the mootools core and more library from http://mootools.net/download

Good luck!

Hi there, I love the imagemenu, and it displays and works perfectly on firefox...and *shock* IE.....but it doesnt quite work properly on chrome? The images seem to disappear a bit etc and its just not quite right...I wonder if you have any ideas? Seeing as you seem to have fixed nearly everyones problem so far as I've been reading down :) If you wouldn't mind checking it out for me, the url is http://www.gravamen.co.uk/treatments/karin-herz... ..... hopefully its something really simple? It's close! Cheers, (ps. I applied your fix, but it hasn't changed the behaviour on chrome)

Are you using the latest chrome version? I have checked chrome and the demo works fine for me. Also, the sites I've used it on are ok too.

thanks for the speedy response...good to hear that its working well on your chrome...rebooted the pc...checked the version and it says its up to date....maybe the pc is having some strange problems? Ill check it on some other machines...but fingers crossed it's just a local problem...cheers dude

sorry, I just read your response again....do you mean you checked mine in chrome and it looks ok? or...the demo works ok in chrome?

Ok...I fixed it :) I was calling the .css file after one of the .js files....slightly different I gues as I'm using it through Joomla aswell...hope it can help someone!

I doubt that a css file called afterwards would make the difference, js files would though. Thanks for posting, glad to see you fixed it!

Hi! Thanks for sharing. I have a question though. When i click on say Landscapes, I want some corresponding text to appear in a div. Is this possible? Similarly I want the other tabs to show some text when it is clicked.
Thanks!

I got the Phatfusion Image Menu to work beautifully in my major Mac browsers, but in WinXP with IE 6 it BREAKS... same on my client's Win Vista (or 7, I don't know). Also, how can I add more images? I'm not a coder, btw

Thanks, anyone, in advance...

Thanks a great deal for reworking this code. It works well, except that my original implementation does not. The original implementation was instantiated with the following:

var myMenu = new ImageMenu($$('#slide .slide'),{openWidth:400, onClick:managecontainers()});

The intention here is to pass managecontainers() the slide number and state. This routine handles various display attributes for divs that are parred with each image (slide). I believe this was accomplished by the following in my previous version of ImageMenu:

el.select = function(){
if(options.selected == i){options.selected = -1}else{options.selected = i}
options.onClick(options.selected,options.open);
options.open = options.selected;
};

I say "believe" because I'm not well versed enough (I've tried and tried) to make this adjustment to your new code so that my old code works. Hopefully, it's a relatively painless adjustment/addition to your code to accommodate my old code. Hopefully, you can suggest to me what changes to make. I greatly appreciate any help you can give me.

Thanks, Nikkie

Hi Nikkie,

Without going into the plugin, I couldn't really say, but just looking at your code, I think one problem you have there is you're calling the function managecontainers() when it should be without the (). Otherwise the function is called on the spot, and not when the onClick occurs.

Thanks for the info. I included the parens as I was trying anything and everything. The requirement is to simply call a js function in response to a mouse click that hides or displays div's according to the index value. If the state is open the div is shown, otherwise it is hidden.

Thanks a great deal for reworking this code. It works well, except that my original implementation does not. The original implementation was instantiated with the following:

var myMenu = new ImageMenu($$('#slide .slide'),{openWidth:400, onClick:managecontainers()});

The intention here is to pass managecontainers() the slide number and state. This routine handles various display attributes for divs that are parred with each image (slide). I believe this was accomplished by the following in my previous version of ImageMenu:

el.select = function(){
if(options.selected == i){options.selected = -1}else{options.selected = i}
options.onClick(options.selected,options.open);
options.open = options.selected;
};

I say "believe" because I'm not well versed enough (I've tried and tried) to make this adjustment to your new code so that my old code works. Hopefully, it's a relatively painless adjustment/addition to your code to accommodate my old code. Hopefully, you can suggest to me what changes to make. I greatly appreciate any help you can give me.

Thanks, Nikkie

This image menu has been driving me crazy!! I downloaded the files from phatfusion and made the change you recommended on line 18 but im still not getting any sliding functionality?? any help of advice would be greatly appreciated!!

www.alvadesign.com

I think your problem is you're not creating an event which calls the class. See line 50 of the demo.

hmm.... im pretty new to javascript so im a little confused at this point. Thanks for the pointer I will try to figure it out, any other advice would be welcomed also!!

If you copy the code of the script tag where I mentioned and put it in the head of your document it should work. You may need to change the #imageMenu a bit to point to your image menu if you changed the IDs.

Respect!

Hi, i use the latest mootools, with the latest mootools-more.js and reflection etc plugins for mootolls.
imageMenu (taken from your demo) isn't working. Whatever i try i get a :
Error: this.elements[0] is undefined
Source File: http://www.googstock.gr/templates/whitebalance/...
Line: 28

the other plugins work. the elements class is included into mootools-more.js

Do you have any advice?
Thanks,
zam

@zam
From the looks of it you probably didn't pass the correct set of elements when calling the ImageMenu class. In other words:

var myMenu = new ImageMenu($$('#imageMenu a'))

The $$('#imageMenu a') bit is your elements you pass to the class.

I have gotten everything to work perfectly in Safari and Firefox, but IE is driving me bonkers. The roll-over/expanding effect doesn't happen in IE. Any ideas?

@klatty
I assume your talking about your own implementation? The demo was tested on IE 6-7 and it was fine for us.

The best way to pinpoint your problem is to strip the page of other html/css/js and slowly add bits until the menu stops working...

That's just the job - cheers!

@Warby - mea culpa! I didn't remove a ) when I should have... I've edited my comment accordingly. Just to be clear, it's meant to be :

Previously:
onOpen:function(e,i){alert(e);}});

Now:
onOpen:function(e,i){window.location = e;}});

Having problem using this as an actual menu. Visually works fine until I add the line as you suggested to loren.
Previously:
onOpen:function(e,i){alert(e);}});

Now:
onOpen:function(e,i){window.location = e);}});

Links work now but the sliding effects don't anymore.

Any help appreciated.

Hi, I have been trying to get this script to work for several days..I hope you can help. I think the problem may be due to one of three reasons:

Firstly I have a modal box script running on the page: http://www.e-magine.ro/web-dev-and-design/36/mo...

Secondly I have made the change to Fx.Transitions.Quad.easeOut on line 18

Thirdly I am running the light version of mootools which i got from the http://www.e-magine.ro/web-dev-and-design/36/mo... and I am not sure if i may require another version of mootools to get it runing.

visit the page with image menu here http://tinyurl.com/dawplw

I took a quick look and I'm pretty sure the problem is the order in which you call your javascripts. The order should be Mootools, ImageMenu, ImageMenu instantiation and I think yours is the opposite.

The mootools framework should always be the first script called before any other mootools scripts. Otherwise you're calling functions that don't exist yet.

No, MooTools 1.2.1 is mostly under the hood improvements and shouldn't require you to alter any code.

You should be able to just replace your 1.2 core file with the new one.

Nice, I was having trouble with compatibility in combination with an other mootools implementation, being able to use 1.2 solves that issue, thanks. Btw, are there going to be compatibility issues with mootools 1.2.1? Didn't try yet, was just wandering.

I've used the script before and am sure I had the same problem but the forum has been taken down since and with it the answer I recieved.

The image menu displays fine locally on both IE and Firefox. But when uploaded to a server on Firefox I can only see the list with no images displaying. On IE I see the borders and movement, but no images show. Would be very grateful of any help - this is driving me nuts! :)

Sounds to me like a linking problem in either you CSS or HTML... do you have a page I can look at? If you don't want to post your page on here just let me know and I'll remove it immediately once I receive it.

Sorry, thanks for pointing that out, please check again as I've fixed the problem. I left some console.log statements there while debugging.

I have tested this now on IE6-7, FF, Chrome, and Opera.

Hi,
I checked your website, and on my computer this still doesn't work. (no roll over effect). If you can fix this that would be great

@Loren
On line 51 of the source in my example link, the last property passed into the options parameter is a function:
onOpen:function(e,i){alert(e);}

To change the behaviour on that you can do something there, e.g.
onOpen:function(e,i){window.location = e;}

@Everybody
EDITED CLASS
I realise that this fix wasn't a complete fix. Loren's comment made me realise that the code isn't working properly as it doesn't seem to handle the passed on open and close events properly. I never noticed this because I usually just use this for straight links (I suppose that's why noones complained yet :) )

The new fix takes into account the way Options handles event properties (e.g. "onClose") in the options property since this image menu class also implements Events (see notes in the Class.Extras > Options part of MT1.2 docs).

Love the image menu but I can't it to work properly. How do I update the href url and have them open a new page instead of the popup box?

Your compatibility fix was the most helpful for me ! Thanks a lot

@Viktor
If you save the demo page onto your computer it should work.... just go to the demo page in the link of the post and press the "Ctl" and "s" keys at the same time.

Does the online demo not work on your browser? If so which browser are you using?

Hi! What's wrong with this script? I can't run it anyway.
Where I have to find my mistake?

If you can send me offline working copy? I'll be on seven clouds!
Respect! Viktor.

P.S. Sorry for my bad English..