Javascript modification of a mootols script

I am trying to modify the phatfusion's script (http://www.phatfusion.net/imagemenu/index.htm) of a sliding menu to work on our website. Unfortunately my JavaScript knowledge is minimal and I need to add two customizations:

- every image should be a link to a different page (critical)
- first or the last image should be expanded by default (optional)

Can somebody help us with it?
MisUszatekAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Jason C. LevineDon't talk to me.Commented:
Hi MisUszatek,

Could you please post the HTML and js code relevant to the issue?
MisUszatekAuthor Commented:
The easiest way to lookup the code is to go to http://www.phatfusion.net/imagemenu/index.htm and save the complete page with files.

To see the example you need the following files:
- mootools.js - generic mootols library files (get is as above)
- imageMenu.js (get is as above)
- imageMenu.css (get is as above)

You also need this piece of code in the index.html file:

-------------------------
<div id="kwick">
  <ul class="kwicks">
     <li class="kwick opt1"><span>Transportation</span></li>
     <li class="kwick opt2"><span>Redevelopement</span></li>
     <li class="kwick opt3"><span>Schools</span></li>
     <li class="kwick opt4"><span>Housing</span></li>
     <li class="kwick opt5"><span>Public</span></li>
     <li class="kwick opt6"><span>Energy</span></li>
  </ul>
</div>

<script type="text/javascript">
var myMenu = new ImageMenu($$('#kwick .kwick'),{openWidth:664});
</script>
-------------------------

Let me know if you need anything else.
Jason C. LevineDon't talk to me.Commented:
Okay, easy one first.

In imageMenu.js, you can set which element of the array is open at the start by changing the start option below

      initialize: function(myElements,options){
            options = Object.extend({
                  onClick: Class.empty,
                  start: -1,
                  openWidth: 0,
                  smallWidth: 0,
                  itemWidth: 0,
                  selected: -1,
                  open: -1,
                  transition: Fx.Transitions.quadOut
            }, options || {});

by default, it is set to -1, so no element will be open.  To change that, simply assign the number of the element you want.  So for the first element, set it to 0, 2nd = 1, 3rd = 2, etc.

Still looking at the link issue.  What is happening is the onclick handler is currently defined to select the image and keep it open, and that overrides any <a> tag embedded in the HTML.  You would either have to 1) disable that part of the javascript which would then allow the <a> to process or 2) write an if or case statement in the javascript that send you to the target.
Price Your IT Services for Profit

Managed service contracts are great - when they're making you money. Yes, you’re getting paid monthly, but is it actually profitable? Learn to calculate your hourly overhead burden so you can master your IT services pricing strategy.

MisUszatekAuthor Commented:
Great - it works!

As to the link thing I don't need the behavior to select image / keep it open with the onclick handler. Where do I disable it?
Jason C. LevineDon't talk to me.Commented:
Hang on, I'm still looking at it.  The select() function in the script is also what keeps the item open on default, so I'm not sure that disabling it is all that easy.
MisUszatekAuthor Commented:
If it helps the link functionality is built-in on the mootols page: http://www.mootools.net/
Jason C. LevineDon't talk to me.Commented:
yeah, that helps a lot.  I now see what the PhatFusion guy did that's screwing me up.

Hang on again for a few minutes while I fiddle with the CSS to make it work.
Jason C. LevineDon't talk to me.Commented:
Okay, so you may want to fiddle with the source code and css little more, but here is the quickie modification that enables links:

index.htm = change the menu code to:

                  <ul class="kwicks">
                        <a class="kwick opt1" href="test1.html"><span>Lanscapes</span></a>
                        <a class="kwick opt2" href="test2.html"><span>People</span></a>
                        <a class="kwick opt3" href="test3.html"><span>Nature</span></a>
                        <a class="kwick opt4" href="test4.html"><span>Urban</span></a>
                        <a class="kwick opt5" href="test5.html"><span>Abstract</span></a>
                  </ul>

imageMenu.css = change all references of li to a

imageMenu.js = comment out the following lines to remove the onClick stuff:

                  el.addEvent('click', function(e){
                        el.select();
                  });

and

                        options.onClick(options.selected,options.open);

Works in FF2, IE6, and IE7 with a quick test.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
MisUszatekAuthor Commented:
Works perfectly! Thanks! One more questions: do you see in the code any option to change the speed of the sliding image?
Jason C. LevineDon't talk to me.Commented:
Sort of.  

There is a reference to the MooTools Transitions and I'm willing to bet if you look at the MooTools documentation you can find out where to tweak the transition: Fx.Transitions.quadOut to your preference.

That's digging pretty deep into the code though.
MisUszatekAuthor Commented:
That's OK - thank you anyway for your prompt and professional help.
Jason C. LevineDon't talk to me.Commented:
You're welcome!  Thanks for cluing me in to MooTools, I'm definitely going to be using those somewhere down the line.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.