We help IT Professionals succeed at work.

Javascript modification of a mootols script

823 Views
Last Modified: 2011-10-24
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?
Comment
Watch Question

Jason C. LevineDon't talk to me.
CERTIFIED EXPERT

Commented:
Hi MisUszatek,

Could you please post the HTML and js code relevant to the issue?

Author

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.
CERTIFIED EXPERT

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.

Author

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.
CERTIFIED EXPERT

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.

Author

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.
CERTIFIED EXPERT

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.
Don't talk to me.
CERTIFIED EXPERT
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

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.
CERTIFIED EXPERT

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.

Author

Commented:
That's OK - thank you anyway for your prompt and professional help.
Jason C. LevineDon't talk to me.
CERTIFIED EXPERT

Commented:
You're welcome!  Thanks for cluing me in to MooTools, I'm definitely going to be using those somewhere down the line.

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.