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

[Jared Anderson]

If you don't want to modify the coolclock.js code, then you must ensure that
the class manipulation occurs before the coolclock stuff is loaded and
executed.  Put your code into a function and attach that function to the
window.onload event before the coolclock script is included.


On Thu, Sep 10, 2009 at 4:23 PM, Alan Dayley <alandd at consultpros.com> 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 --------------
An HTML attachment was scrubbed...
URL: http://lists.PLUG.phoenix.az.us/pipermail/plug-devel/attachments/20090910/241e3a4d/attachment.htm