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

[Alan Dayley]

Jared,

You have gone the route of the obvious solution.  I have purposefully
avoided diving into the clock code for two reasons.

1. I wanted to learn a bit about javascript and about using functions
like this.  "Interesting.  I need to pass in a value here and there is
no way to do it.  Good challenge!"

2. I don't like to fork "upstream" code.  Not that this code is very
complex or even that I'll ever have a reason to need an update from
the original author.  I just don't like to tweak other people's stuff
that is intended to just be used.

I may give up a resort to doing something like you suggest, right in
the original code.

Alan

On Thu, Sep 10, 2009 at 4:01 PM, Jared Anderson <jared at thegoldenedge.com> wrote:
> 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
>
>
> _______________________________________________
> PLUG-devel mailing list  -  PLUG-devel at lists.PLUG.phoenix.az.us
> http://lists.PLUG.phoenix.az.us/mailman/listinfo/plug-devel
>
>