/    Sign up×
Community /Pin to ProfileBookmark

Working with PhatFusion ‘imageMenu’

Copy linkTweet thisAlerts:
Aug 05.2009

Hi All,

I was hoping I could get some help using the imageMenu plugin located here: [URL]http://www.phatfusion.net/imagemenu/[/URL]

Its a great plugin, but so far I have been only about to use the default settings, because I don’t know how to customize for myself. So there are several things I want to do with the menu:

(1) On second click (onClose()) I want to run javascript. I tried something like this but it doesn’t work (note: setObjVis() is my own javascript function):

[CODE]170 <script type=”text/javascript”>
171 window.addEvent(‘domready’, function(){
172 var myMenu = new ImageMenu($$(‘#imageMenu a’),{
173 openWidth:310, border:2,
174 onOpen:function(e,i){window.location=e}});
175 onClose:[B]setObjVis(‘section’,’hidden’);[/B]
176 });
177 </script>
[/CODE]

This question boils down to whether I can add my own functions or not.

(2) The next question is that when I have clicked the menu once (onOpen), and then I hover over the other menu items I don’t want them to change widths.

Any ideas on how to do this. I really would appreciate the help. As a reference imageMenu.js is located in this other post ([URL]http://www.webdeveloper.com/forum/showthread.php?t=177890&highlight=imageMenu[/URL]). Thanks in advance!

Cheers,
ScKaSx

[QUOTE][/QUOTE]

to post a comment
JavaScript

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@ScKaSxauthorAug 05.2009 — Okay, so I solved question (1) and was able to get my own function to work for the onClose. However, instead of doing this from the function definition, I went into the javascript file for imageMenu.js and placed my code under 'reset:' (I highlighted the place in the code below, in case anyone is interested).

Still looking for an answer to my (2)! But I imagine I will have to alter this javascript code again for the answer.

[CODE]/**************************************************************
Script : Image Menu
Version : 2.2
Authors : Samuel Birch
Desc :
Licence : Open Source MIT Licence

**************************************************************/

var ImageMenu = new Class({
getOptions: function(){
return {
onOpen: false,
onClose: Class.empty,
openWidth: 200,
transition: Fx.Transitions.quadOut,
duration: 1000,
open: null,
border: 0
};
},

initialize: function(elements, options){
this.setOptions(this.getOptions(), options);

this.elements = $$(elements);

this.widths = {};

this.widths.closed = this.elements[0].getStyle('width').toInt();

this.widths.openSelected = this.options.openWidth;

this.widths.openOthers = Math.round(((this.widths.closed*this.elements.length) - (this.widths.openSelected+this.options.border)) / (this.elements.length-1))

this.fx = new Fx.Elements(this.elements, {wait: false, duration: this.options.duration, transition: this.options.transition});

this.elements.each(function(el,i){

el.addEvent('mouseenter', function(e){

new Event(e).stop();

this.reset(i);

}.bind(this));

el.addEvent('mouseleave', function(e){

new Event(e).stop();

this.reset(this.options.open);

}.bind(this));

var obj = 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));

if(this.options != 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);

}

}

},

reset: function(num){

if($type(num) == 'number'){

var width = this.widths.openOthers;

[B]setObjVis('section','hidden');[/B]

if(num+1 == this.elements.length){

width += this.options.border;

}

}else{

var width = this.widths.closed;

}

var obj = {};

this.elements.each(function(el,i){

var w = width;

if(i == this.elements.length-1){

w = width+5

}

obj[i] = {'width': w};

}.bind(this));

if($type(num) == 'number'){

obj[num] = {'width': this.widths.openSelected};

}

this.fx.start(obj);

}

});

ImageMenu.implement(new Options);
ImageMenu.implement(new Events);

/*************************************************************/[/CODE]
×

Success!

Help @ScKaSx spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...