WordPress.org

Support

Support » Plugins and Hacks » Countdown Timer » [Resolved] [Plugin: Countdown Timer] CSS – Class or ID for each time increment

[Resolved] [Plugin: Countdown Timer] CSS – Class or ID for each time increment

  • As far as I can tell, this plugin spits out one long string for the event countdown, like this:

    <abbr title = "December 19th, 2010, 9:00 am" id = 'x5d36226f8e7f295de740a90c94dd5bee' class = 'fergcorp_countdownTimer_event_time'>in 5 days,  9 hours,  7 minutes,  23 seconds</abbr>

    In order to have more flexibility with the CSS, I would like to be able to have:

    <abbr title = "December 19th, 2010, 9:00 am" id = 'x5d36226f8e7f295de740a90c94dd5bee' class = 'fergcorp_countdownTimer_event_time'>in <span id="day_number">5</span> <span id="day_title">days</span>,  <span id="hour_number">9</span> <span id="hour_title">hours</span>,  <span id="min_number">7</span> <span id="min_title">minutes</span>,  <span id="sec_number">23</span> <span id="sec_title>">seconds</span></abbr>

    (or something like that – I just threw in span tags for simplicity)

    Where in the PHP file would I edit to modify the HTML output? Or is this even possible without breaking the plugin?

    Thanks in advance…

    http://wordpress.org/extend/plugins/countdown-timer/

Viewing 15 replies - 1 through 15 (of 24 total)
  • Plugin Author fergbrain

    @fergbrain

    @bborman:

    The best place to do it would be between lines 522 and 617. The $s variable is where the output string is built.

    You could modify, for example, the code from something like:

    $s .= sprintf(_n("%d minute, ", "%d minutes, ", $resultantMinute, "fergcorp_countdownTimer"), $resultantMinute)." ";

    to

    $s .= '<span id="fergcorp_countdownTimer_min">' . sprintf(_n("%d minute, ", "%d minutes, ", $resultantMinute, "fergcorp_countdownTimer"), $resultantMinute)."</span> ";

    @fergbrain:

    Perfect, thanks! Exactly what I was looking for.

    I appreciate devs like you who create quality plugins backed by outstanding support!

    Well done.

    @fergbrain – This looks like just what I’m trying to do, but it doesn’t seem to be working. Not sure why. Any tips?

    Thanks for the help and the plugin β€” it’s just great!

    Doug

    Plugin Author fergbrain

    @fergbrain

    @dbarned:

    Can you pass along the URL you’ve implemented this on so I can take a look at the HTML output?

    @fergbrain

    Thanks for your quick reply!

    I’m afraid it was just me being an idiot πŸ™‚ works perfectly!

    Again, many thanks for taking the time developing and supporting your work.

    Doug

    Well, actually I spoke too soon. I get:

    <li class = 'fergcorp_countdownTimer_event_li'><abbr title = "July 17th, 2011, 3:00 pm" id = 'xa93f086a6806c83f405519636a9ec090' class = 'fergcorp_countdownTimer_event_time'>in <span id="timermonth">5 months, </span> <span id="timerday">14 days, </span> <span id="timerhour">4 hours, </span> <span id="timermin">27 minutes, </span> <span id="timersec">43 seconds, </span></abbr></li>

    But I can’t seem to get it to reflect any CSS styles I give each span.

    If I switch each span to div I get my desired result (each value on a different line) it seems to break and display 2 sets of the data, the top one works but isn’t on separate lines and the bottom one is on separate lines but doesn’t count down πŸ™

    I’m not allowed to put a live link on here I’m afraid.

    Thanks for any ideas…

    Doug

    Plugin Author fergbrain

    @fergbrain

    @dbarned:

    Two things:

    1) I think that “id” should actually be “class”, especially if you have more than one timer.

    2) Try disabling JS updating for the timer. The time is updated by re-writing the inner HTML of abbr with a given unique id (e.g. xa93f086a6806c83f405519636a9ec090).

    @fergbrain:

    I just now got around to editing the code, and am having the same issue as dbarned.

    Disabling the JS upating DOES allow the code wrappers to work, but of course a live countdown is a must.

    Is there any way that we can have both live updating and custom IDs?

    Also, this may be a question for another thread, but would it be difficult to show the countdown with leading zeros?

    Plugin Author fergbrain

    @fergbrain

    Yes. You can also modify js/fergcorp_countdownTimer_java.js the same way you modified the PHP. I did my best to port the script from PHP to JS, so things should look familiar.

    You’ll need to modify strings where the “s” variable is set, which is between lines 113 and 207.

    Using the above example, you’d modify:

    s = s + sprintf(_n(fergcorp_countdownTimer_js_language['minute'], fergcorp_countdownTimer_js_language['minutes'], resultantMinute), resultantMinute) + ' ';

    to

    s = s + '<span class="fergcorp_countdownTimer_min">' + sprintf(_n(fergcorp_countdownTimer_js_language['minute'], fergcorp_countdownTimer_js_language['minutes'], resultantMinute), resultantMinute) + '</span> ';

    Plugin Author fergbrain

    @fergbrain

    @bborman: Do you mean something more than the “Strip non-significant zeros” options? If so, can you start a new thread?

    @fergbrain β€”Β That did the trick, thank you! I do get an erroneous comma ‘,’ after seconds now though… but that’s not the end of the world.

    Plugin Author fergbrain

    @fergbrain

    @dbarned:

    Perhaps not the end of the world, but still annoying…and I don’t like annoying.

    Solution:

    There’s a regex replace at the end of the JS file that needs to be modified to:

    return s.replace(/(, <\/span> *)$/, "<\/span>"); //...and return the result (a string)

    I think that’s right….regex can be tricky (https://www.xkcd.com/208/).

    @fergbrain – You, Sir, are a scholar and a gentleman!

    Many thanks & have a great weekend πŸ™‚

    Doug

    @fergbrain

    Thanks for all the help with this!

    So, when I enable the JS countdown, and modify the JS file as mentioned above, The result is two countdown timers – one live, and one that updates on refresh.

    Where am I going wrong?

Viewing 15 replies - 1 through 15 (of 24 total)
  • The topic ‘[Resolved] [Plugin: Countdown Timer] CSS – Class or ID for each time increment’ is closed to new replies.
Skip to toolbar