[PLUG-Devel] Javascript variable value into class parameter?

[Jared Anderson]

Alan,
It looks like you can modify the defaults in the configuration part of
coolclock.js.

In the html body, omit the radius, like this

*<canvas id="clockid" class="CoolClock:::"></canvas>*


Then, look for this default configuration in the coolclock.js javascript
file.

CoolClock.config = {
* **clockTracker: {},*
* **tickDelay: 1000,*
* **longTickDelay: 15000,*
* **defaultRadius: 85,*
* **renderRadius: 100,*
* **defaultSkin: "swissRail",*
*....... //more code omitted*


Change defaultRadius to something like
*     defaultRadius: window.innerWidth/2, *


window.innerWidth wont work with IE, but hopefully you get my drift.

Regards,
Jared



On Thu, Sep 10, 2009 at 2:52 PM, Alan Dayley <alandd at consultpros.com> wrote:

> Thanks for the thoughts, Mitch.  Your suggestion does not yet work.
>
> As a debug step I added some prints to the process and discovered that
> I can get the class string value by using .className instead of
> .class.  As:
>
>        document.write (document.getElementById("theclock").className);
>
> will print
>
>        CoolClock:chunkySwissOnBlack:250
>
> on the web page.
>
> Using
>
>        document.write (document.getElementById("theclock").class);
>
> gets
>
>        undefined
>
> printed on the page.
>
> The test code:
>
>        document.write ("size="+clocksize);
>        document.write (document.getElementById("theclock").className);
>
>  document.getElementById("theclock").className.replace(/:\d+/,":"+clocksize);
>        document.write (document.getElementById("theclock").className);
>
> prints
>
>
>  size=812CoolClock:chunkySwissOnBlack:250CoolClock:chunkySwissOnBlack:250
>
> and the clock size does not change.
>
> Time to ask the original author, I suppose.
>
> Alan
>
>
> On Thu, Sep 10, 2009 at 1:36 PM, Mitch Frazier <mitch at linuxjournal.com>
> wrote:
> > I'm not JavaScript expert, but try something like:
> >
> >  var newval = 300;
> >  ...
> >  document.getElementById("theclock").class.replace(/:\d+/,":"+newval);
> >
> >
> > That's an interesting way to invoke the clock:
> >
> >  ... class="CoolClock:chunkySwissOnBlack:250" ...
> >
> >
> >
> >
> >
> > Alan Dayley wrote:
> >> I, embedded developer and Scrum Master, am attempting to write
> >> javascript.  Yes, the danger of error is high.  However, your web
> >> pages are safe since this is a page for a specific and internal-only
> >> use.
> >>
> >> I am creating a page to have an official clock for the engineering
> >> team.  Seems our meetings tend start a minute or two late.  The
> >> discussion always leads to something like "Does anyone really know
> >> what time it is?"  So I want to create the canonical answer to this
> >> question!
> >>
> >> I'm starting with this really cool "Cool Clock"
> >> http://randomibis.com/coolclock/.  By slapping it on a page, it's good
> >> enough.  Except, I want the clock to fill the screen of Firefox in
> >> full screen mode.  Being a good programmer (just not with javascript)
> >> I want to solve the problem forever by making the page smart enough to
> >> resize the clock for the page it's on.
> >>
> >> The "class" parameter(?) has an argument to set the clock radius to a
> >> specified number of pixels.  I have javascript that gets the current
> >> browser window size and determines what the radius should be.  This
> >> radius value is stored in a javascript variable "clocksize."
> >>
> >> Now my problem:  How do I get the value of this variable into the
> >> "class" statement of the following line?
> >>
> >> <canvas id="theclock" class="CoolClock:chunkySwissOnBlack:250"></canvas>
> >>
> >> I want the 250 in the above to be replaced by the value of the
> >> "clocksize" variable.  Google searches give me all kinds of options
> >> like "document.write" and so on but I need to get the value into the
> >> string after the "class=" part of the canvas tag.
> >>
> >> Any tips or solutions from this group?
> >>
> >> Alan
> >> _______________________________________________
> >> PLUG-devel mailing list  -  PLUG-devel at lists.PLUG.phoenix.az.us
> >> http://lists.PLUG.phoenix.az.us/mailman/listinfo/plug-devel
> >>
> >
> >
> > --
> > Mitch Frazier
> > Associate Editor/Web Editor, Linux Journal
> > http://www.linuxjournal.com
> >
> > _______________________________________________
> > PLUG-devel mailing list  -  PLUG-devel at lists.PLUG.phoenix.az.us
> > http://lists.PLUG.phoenix.az.us/mailman/listinfo/plug-devel
> >
> _______________________________________________
> PLUG-devel mailing list  -  PLUG-devel at lists.PLUG.phoenix.az.us
> http://lists.PLUG.phoenix.az.us/mailman/listinfo/plug-devel
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.PLUG.phoenix.az.us/pipermail/plug-devel/attachments/20090910/5d75b7ad/attachment.htm