Question

I’m making a very simple pop up where I can choose from 8 types of content, all using the same format. It works by clicking on hidden divs that show on hover on the top section, of course as you can see I came up with a very long and large code for something that can probably be done with much less bolts and wires.

Since it’s a lot of lines I pasted all this in jsFiddle

Is there a way to make this lighter?

SOLVED… Yeees!

Thanks to all… here is the final script: jsFiddle Final in case someone else has the same difficulty

Answer 1

I see three things you could do to end up with less code:

• Use the hover shortcut
• Use anonymous functions
• Use a parameterized function

First, jQuery has the hover method to replace mouseover/mouseout behavior:

$('#scrollbtnR8').bind('mouseover', R8);
$('#scrollbtnR8').bind('mouseout', R8b);

Can be replaced as

$('#scrollbtnR8').hover(R8, R8b);

That’s just a little less code though 🙂

---

Second, you are now defining a function for each eventhandler but you are only using these functions once. If you only use them once, you could create anonymous functions like this:

$('#scrollbtnR1').bind('click', esta1);

becomes

$('#scrollbtnR1').click(function() { 
    $("#scrollcontrol").animate({"left":-240},500, "swing", null);
});

---

Finally, you can use a function to encapsulate the common parts of the code and pass the changing parts as parameters.

You could implement it like this:

<div id="scrollcontrol" animate="swing" swingLeft="-240">

$('div[animate='swing']').click(function() { 
    $(this).animate({"left": $(this).attr("swingLeft")}, 500, "swing", null);
});

The “div” selector uses the Attribute Equals Selector. You could also assign a class to all “animate” divs and select them using the class selector: $("div.animate") which would select all <div class="animate">.

What happens here is:

• Select all divs that have the value ‘swing’ for the animate attribute.
• Call jQuery swing animate BUT use $(this).attr("swingLeft") as the left property.

attr("wingLeft") gets the value for the swingLeft property as defined in your HTML markup.

I stopped looking at your code at this point, the key is: Look at the code to be executed and see if you notice a pattern, something that you can generalize. You could then perhaps simplify the code further.
Also worth noting: Some people don’t like adding properties like “animate”, “swingLeft” etc to the HTML. Update As per pimvdb’s comment, you can use the jQuery data to be a bit ‘cleaner’.

The code could look like this then:

<div id="scrollcontrol" class="swing" data-swingLeft="-240">

$('.swing').click(function() { 
    $(this).animate({"left": $(this).data("swingLeft")}, 500, "swing", null);
});