[PLUG-Devel] Javascript variable value into class parameter?
Joseph Sinclair
plug-devel at stcaz.net
Thu Sep 10 23:14:44 MST 2009
I must apologize, I actually sent this about a week ago, but I used the wrong account, the listserv blocked it, and I didn't notice that until this evening.
There are lots of options here, including modifying the CoolClock class to resize itself...
The quick-and-dirty approach, however, would be to write the canvas tag using document.write.
Something like this (may need a little work to handle the "'s):
<<<stuff to get to the right place in the page>>>
document.write('<canvas id="theclock" class="CoolClock:chunkySwissOnBlack:' + clocksize + '"></canvas>"');
<<<more stuff as needed>>>
Note, with this, you don't put the canvas tag in the page, the javascript puts it in.
Add this to something like Window.onLoad or have a button that triggers it (one labeled "start clock" works well).
Alan Dayley wrote:
> 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
>>
>>
> _______________________________________________
> PLUG-devel mailing list - PLUG-devel at lists.PLUG.phoenix.az.us
> http://lists.PLUG.phoenix.az.us/mailman/listinfo/plug-devel
>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: signature.asc
Type: application/pgp-signature
Size: 197 bytes
Desc: OpenPGP digital signature
Url : http://lists.PLUG.phoenix.az.us/pipermail/plug-devel/attachments/20090910/3ab5bedc/attachment.pgp
More information about the PLUG-devel
mailing list