Re-evaluating extenders
1 view
Skip to first unread message
Kris
Jul 21, 2010, 6:37:18 AM7/21/10
to eCSStender Mailing List
Hi all,
I want to set up a customisable colour scheme where I can change the
site's palette at run-time via javascript. I've created an extender
which looks for -color-variable and assigns a colour based on the
given value. In this case, it's picking up on color1 and using a
default value stored in myColor. That part works fine. However, I then
want to change the colour at the click of a button from red to blue.
My question is, how can I tell eCSStender to re-evaluate my extender
such that it updates BODY with the new colour stored in the myColor
variable?
/* stylesheet.css */
body
{
-color-variable: color1;
}
/* script.js (using jquery) */
var myColor = '#ff0000';
eCSStender.register({ 'property': '-color-variable' }, false, function
(selector, properties) {
switch (properties['-color-variable']) {
case 'color1':
$(selector).css({ 'color': myColor });
break;
}
});
/* page.html */
<body onclick="myColor = '#0000ff'; eCSStender.?????();">
Thanks,
Kris
I want to set up a customisable colour scheme where I can change the
site's palette at run-time via javascript. I've created an extender
which looks for -color-variable and assigns a colour based on the
given value. In this case, it's picking up on color1 and using a
default value stored in myColor. That part works fine. However, I then
want to change the colour at the click of a button from red to blue.
My question is, how can I tell eCSStender to re-evaluate my extender
such that it updates BODY with the new colour stored in the myColor
variable?
/* stylesheet.css */
body
{
-color-variable: color1;
}
/* script.js (using jquery) */
var myColor = '#ff0000';
eCSStender.register({ 'property': '-color-variable' }, false, function
(selector, properties) {
switch (properties['-color-variable']) {
case 'color1':
$(selector).css({ 'color': myColor });
break;
}
});
/* page.html */
<body onclick="myColor = '#0000ff'; eCSStender.?????();">
Thanks,
Kris
Aaron Gustafson
Jul 21, 2010, 8:49:24 AM7/21/10
to eCSStender Mailing List
On Jul 21, 6:37 am, Kris <k...@splittgerber.id.au> wrote:
> I want to set up a customisable colour scheme where I can change the
> site's palette at run-time via javascript. I've created an extender
> which looks for -color-variable and assigns a colour based on the
> given value. In this case, it's picking up on color1 and using a
> default value stored in myColor. That part works fine. However, I then
> want to change the colour at the click of a button from red to blue.
>
> My question is, how can I tell eCSStender to re-evaluate my extender
> such that it updates BODY with the new colour stored in the myColor
> variable?
You have a couple of options, but probably your best bet would be to
> I want to set up a customisable colour scheme where I can change the
> site's palette at run-time via javascript. I've created an extender
> which looks for -color-variable and assigns a colour based on the
> given value. In this case, it's picking up on color1 and using a
> default value stored in myColor. That part works fine. However, I then
> want to change the colour at the click of a button from red to blue.
>
> My question is, how can I tell eCSStender to re-evaluate my extender
> such that it updates BODY with the new colour stored in the myColor
> variable?
create an external method using addMethod[1]. You can then access your
custom function as eCSStender.methods.yourMethodName(). Another option
may be to use the new extension redefinition capability[2].
[1] http://ecsstender.org/documentation/api/core-methods#addMethod
[2] http://ecsstender.org/documentation/dynamic-extension-redefinition/
Let us know if you have further questions.
Reply all
Reply to author
Forward
0 new messages