I’m using phatfusion’s Image Menu script on a new client project. It’s a pretty cool script, using a set of images to build a horizontal menu that expands and collapses as you rollover each individual image.
After seeing the demo script, my client requested that the “active” photo for each page be loaded as “open” when that page was accessed. This is something that should be apparent based on the developers’ description, but proved to be quite difficult to track down. Based on the basic documentation, setting the id or index of a menu item in the “open” field would open it on start, the default value being “null”. However, that was as far as the documentation went, leaving the rest to experimentation…
The first problem was where to set “the id or index of a menu item”… a few Google searches turned up a few old forum posts that indicated the id should be set on the ‘a’ in the menu HTML. However, using text strings caused the default images to revert to a nonactive state after any mouseover, so I went back to the default IDs: 0, 1, 2, 3. The HTML line looked like this:
var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:500,
open:0, border:0,onOpen:function(e,i){window.location=(e);}});
The key addition was “open:0″, which was not included in the default script files. However, the sticky image behavior worked for default IDs 1-3, but not 0. Based on my searching, I wasn’t the only to be confounded by this issue. Eventually, buried in a long comment thread, I found an answer. Changing this line in the JavaScript file:
if(this.options.open){,
to this:
if(this.options.open!=null){
fixed the problem. All of the images opened correctly and stayed open on their respective pages. Whew! A lot of non-billable time spent tracking down a behavior that could have been much more clearly documented in the code.
20 Comments
Hi,
Its still now working….
And I want a code that make it stayed open on their respective pages.
You’ll have to put a copy of the HTML/Javascript code on each page, changing the value of ‘open’ to match that page’s image ID.
Thanx for the fix, ElShaddai!
So far it’s working. My Imagemenu now automatically opens the left image after changing to “open:0,”.
The only problem is, that now I need to click twice on the openend image to activate the corresponding link (both in Firefox and in Chrome).
Only when I’m clicking on one of the other images in the menu, it works just after one click.
Do you have any idea what to do?
Thanx in advance!
Karsten
So instead of rolling over an image to see it expand, you have to click on one of the rolled up images to have it open? I seem to recall some discussion about that behavior – maybe in the local script code? Here’s what I ended up using:
window.addEvent(’domready’, function(){
var myMenu = new ImageMenu($$(’#imageMenu a’),{openWidth:500, open:0, border:0, onOpen:function(e,i){window.location=(e);}});
});
How does that match what you’re using?
No, rolling over an image expands it automatically as by default.
But additional every image is linked to another page which I can execute by clicking on the image. This works fine without the fix by clicking once on the chosen image. After installing the fix I must click twice on the already expanded left image (open:0). For all other images one click works.
I’ll send you my test link via email.
Thanks, Karsten
any solution for the “twice” problem?
No – I traded an email or two with Karsten, but never heard further if the problem was resolved. I didn’t encounter it with my project…
I have an idea about a workaround that may work in very limited situation — situations in which the menu consists of only 2 images.
Make it with 3 images — 2 real ones, and a transparent image in between.
Set the automatic expansion back to null (sorry!) but the existence of the transparent image in the middle will mean that the first image gets 2/3rds of the display area — which is pretty good. Naturally the transparent image will need to be linked to the same url as the first image, in order to make that entire 2/3rds appear to be one consistent link to the same url. The image on the right, when it slides into view, will only need 1 click, not 2.
Darn it — doesn’t work. The image menu doesn’t recognize transparency.
I’ve submitted this question to PhatFusion’s Image Menu inventor, Sam Birch. If any reply comes, I’ll share it here.
A “fix” to PhatFusion’s “2-clicks needed on pre-expanded items” problem?
Hi Sam, I am curious about whether you know of a fix to the “2-clicks needed on pre-expanded items” problem with the PhatFusion Image Menu?
The problem is that if one’s web page is written to set an item to be open (expanded) on start, that open (expanded) item must be clicked *twice* in order for the window.location=(e) to send the user to the desired url. Whereas all the other items correctly send a user to a desired url with a single click, as would be expected.
You may not have noticed this “two clicks” problem for preexpanded items because your demo does not implement a pre-expanded item, rather it starts out with all sharing an equal percentage. Also, you have your demo set to just display an altert rather than serve as a link (you have “alert(e)” rather than “window.location=(e)”), so perhaps the problem wouldn’t have come up for you.
So with that all said, do you know of a fix?
I’m sure the problem is somewhere in the following part of the imageMenu.js, but I don’t read java so I can’t tell what exactly. But this is the only part of the code that inolves ‘click’ so it must be what is to blame. It SHOULD just be that if it ever senses a ‘click’, that click should engage the url. Instead, I see variables… but I don’t know what they mean:
el.addEvent(‘click’, function(e) {
if(obj.options.onOpen){
new Event(e).stop();
if(obj.options.open == i){
obj.options.open = null;
obj.options.onClose(this.href, i);
}else{
obj.options.open = i;
obj.options.onOpen(this.href, i);
}
}
} )
}.bind(this));
if(this.options.open!=null){
if($type(this.options.open) == ‘number’){
this.reset(this.options.open);
}else{
this.elements.each(function(el,i){
if(el.id == this.options.open){
this.reset(i);
}
},this);
}
}
},
Thank you for examining this issue, either now or whenever you next update the script. I understand that you cannot respond to individual requests, as that would drive you bonkers. But there’s a few people posting about this bug, and it is reproducable, so I promise to share whatever I am told, if you reply. Thanks!
Got it! Solution to the “two clicks needed on pre-expanded items” problem!
Replace this…
el.addEvent(‘click’, function(e){
if(obj.options.onOpen){
new Event(e).stop();
if(obj.options.open == i){
obj.options.open = null;
obj.options.onClose(this.href, i);
}else{
obj.options.open = i;
obj.options.onOpen(this.href, i);
}
}
})
}.bind(this));
…With this…
el.addEvent(‘click’, function(e) {
if(obj.options.onOpen){
new Event(e).stop();
{
obj.options.onOpen(this.href, i);
}
}
} )
}.bind(this));
Thanks for all your digging on this, Will. On closer review, I see that I do have the problem on my client site – it’s just that (a) like the official demo, my “home” start point doesn’t have any of the images opened in a pre-expanded state, and (b) once I have an expanded image, it corresponds to the current page, so the user is unlikely to click on it as a primary nav option.
Is the solution that you’ve posted from PhatFusion or is this your own work?
That’s my own. I sent it on to Sam to double check, so if he replies I’ll post back.
Sorry for the mass of posts as I was working on this. Feel free to nix the irrelevant ones.
Thanx Will for the fix! It really seems to work now.
I will add the fix to my image menu on my website (see http://www.karsten-rau-photography.com under “Portfolio”).
Thanks again and also thanks to ElShaddai for providing this very helpful thread!
Karsten
Hi ElShaddai,
Thank’s for the explanation. The way I’ve integrated it, the first image stay open. But is it possible to have the clicked image stay open ?
Yak
Ok, I find the fix. I created 5 pages and integrate the header directly in the page so that the right image open to the right page. But I can’t find a way to have the image already open; it slice a second time when the page is downloaded. Have any ideas?
If I’m understanding you correctly, the question is how to keep the current page’s image expanded if the user clicks on that image after the page has loaded. In my implementation, I’m seeing two undesirable behaviors:
1. Click once on an expanded, active image, then move the mouse off the image and it will collapse to a non-expanded state.
2. You have to click twice on an expanded image (without moving the mouse off the image) to trigger the
hreflink.Have you implemented Will's fix that he provided in the comments above? That should address the second point above, and I would assume fix the first as well, but I have not yet had a chance to dig into the code.
Hi ElShaddai,
I don’t know why, but I didn’t nead to implement Will’s fix (I implemented it but it change nothing). When I click image, it start leading the new page and don’t colapse (even if I move the mouse from the image) until the new page is downloaded. But when the header reload (in the new page), all images appear as colapsed before the page’s image expand.
You can see it there : http://ecopolitique.ca/
I would like to have the page’s image already expanded when the page open.
Thank’s for taking time to post information on Phatfusion on your blog. It’s very helpfull.
Yak
Hi ElShaddai,
Thanks for sharing the code. Any idea how to show some corresponding text when I click on one of the images? I have a test page here http://74.52.32.68/~tempcom/slider/. i want text to appear in the green box when I click on the image. Any input would be appreciated! Thanks!
vielen Dank! Super Fix! So lange gesucht!