Question

I have a site that is heavily based on javascript, but I still want to let it be easily modified by CSS.
Take this example… there is a div that it has its opacity modified when on hover through jQuery, but I would like to the designer to be able to choose the value of the opacity.
I was thinking on creating a block in css just to declare this constants, for example:

.constants_someid{
  opacity: 0.5;
}

and then through jQuery I take this opacity like

 var opacity = jQuery('css:constants_someid').attr('opacity');

I don’t know if this is a good way to do these constants declaration, but thats what came to mind right now.

What you guys think?

Thanks,
Joe

Answer 1

Define them in a Javascript file instead:

var settings = {
    opacity: 0.5
};

That kind of syntax should be easy enough for a designer to modify. You can then use it as settings.opacity.

You could then use $.extend to merge settings defined by the designer with your default settings:

var defaults = {
    opacity: 0.9,
    speed: 500
}

settings = $.extend({}, defaults, settings);
// returns { opacity: 0.5, speed: 500 }