how to specify to only apply jquery effect parameters based on div?

Question

Ok here is what I am trying to do.

I have a few effects I want to apply to several different div containers. Lets say I have a slide effect and a fadeTo effect. Rather then specifying what the div class/id is in the JS code, I would prefer to just be able to apply the effect by just giving the div a custom tag or an additional id/class. I always want to specify the parameters of the effect on the actual div.

For instance.

<div id="cssDesign SlideEffect" [Speed, Duration parameters somewhere]></div>

or

<div Customtag="SlideEffect" id="cssDesign" [Speed, Duration parameters somewhere]></div>

Make sense?

Answer 1

It's not valid XHTML, but you can always add non-standard attributes to html tags.

<div id="cssDesign" SlideEffect="Speed,Duration"></div>

Then you can write your selectors based on the attribute.

$("div[SlideEffect]").mouseover(function() {
    var speed = parseInt($(this).attr("SlideEffect").split(',')[0]);
    var duration = parseInt($(this).attr("SlideEffect").split(',')[1]);
});

(Read more about attribute selectors here.)

Answer 2

If you want to keep your pages conforming to the XHTML standard, you can use some existing but not used attribute, such as rel to store the data. It's not semantically correct but hey, it validates.

<div rel="slide,500"></div>

And jQuery:

$('div[rel^=slide]').each(function() {
    var data = $(this).attr('rel').split(',');
    var speed = data[1];
});

And so on. Instead of rel, you can also use id if you don't need it for anything else (in most cases, you can substitute the use of id with class).

Answer 3

Using custom tags or attributes is generally not recomended (the HTML document will not pass the validation, that could affect indexing by search engines). In similar situation i used one of the proper html tags, like class or id and place parsable info there:

<div id="mydiv_slide_500">...</div>

Then you have to extract the attribute value, and parse it with split('_'). It is a more complicated than using custom tags, but you get the valid HTML.

Answer 4

Forgive my complete JS n00bish here..

I can't figure out how to plug that in here:

$(document).ready(function() {

  $('#slidemarginleft button').click(function() {
    $(this).animate({
      marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
        $marginLefty.outerWidth() :
        0
    });
  });
});