Page 1 of 1

Class name or custom attribute

Posted: Tue Jul 03, 2007 6:51 pm
by superdezign
I'm writing a JavaScript class to generate different effects. I've hit a dilemma as to how to identify objects that the effects will take place on.

One way that I am considering is placing the effects into element definitions. However, I don't know whether to put it into a class name or create a custom attribute. i.e.

Code: Select all

<!-- Generate a shadow at an angle of 45 degrees -->
<p class="vol shadow(45)">Text</p>
<p effect="shadow(45)">Text</p>
The first is valid markup, but may cause difficulty with adding class name. It requires that one of the classes be 'vol' before parsing the name is considered, and the effects must be given parameters. I've thought it through, at least.
The second is invalid markup, but gets straight to the point. I'm not sure if I'd want to use invalid mark up though.

Then there's the option of simply doing it all manually.


Which would you recommend?

Posted: Tue Jul 03, 2007 7:12 pm
by feyd
How about the sIFR way?

Posted: Tue Jul 03, 2007 7:22 pm
by superdezign
From what I see, you tell sIFR what elements to alter by class/id that you choose yourself. Correct?

That sounds like a good idea. Better than imposing my own class names.


Oh, and a question. Should I implement styles that the effects use through JS or CSS?I'm currently doing CSS, but to be customizable, I don't know which would be more user-friendly.

Posted: Tue Jul 03, 2007 7:26 pm
by feyd
That would generally depend on the effect, among other things.

Is this for jquery (or another library) or your own?

Posted: Tue Jul 03, 2007 7:30 pm
by superdezign
My own.

Posted: Tue Jul 03, 2007 8:12 pm
by Luke
I agree with feyd... something like this would be cool:

Code: Select all

<script type="text/javascript">

  var options = {
    'selector' : '.pretty-effect',
    'effect' : 'shadow',
    'params' : {'angle' : 45}
  }

  SDeffectsInit(options);

</script>

Code: Select all

<a href="#" class="pretty-effect">Some stuff!</a>
<p class="pretty-effect">Some other element that needs to be pretty!</p>

Posted: Tue Jul 03, 2007 8:17 pm
by superdezign
Ooh. I like that format. I'll work on that. :D