WordPress.org

Ready to get started?Download WordPress

Forums

Countdown Timer
[resolved] CSS - Class or ID for each time increment (25 posts)

  1. bborman
    Member
    Posted 3 years ago #

    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/

  2. fergbrain
    Member
    Plugin Author

    Posted 3 years ago #

    @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> ";

  3. bborman
    Member
    Posted 3 years ago #

    @fergbrain:

    Perfect, thanks! Exactly what I was looking for.

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

    Well done.

  4. dbarned
    Member
    Posted 3 years ago #

    @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

  5. fergbrain
    Member
    Plugin Author

    Posted 3 years ago #

    @dbarned:

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

  6. dbarned
    Member
    Posted 3 years ago #

    @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

  7. dbarned
    Member
    Posted 3 years ago #

    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

  8. fergbrain
    Member
    Plugin Author

    Posted 3 years ago #

    @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).

  9. bborman
    Member
    Posted 3 years ago #

    @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?

  10. fergbrain
    Member
    Plugin Author

    Posted 3 years ago #

    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> ';

  11. fergbrain
    Member
    Plugin Author

    Posted 3 years ago #

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

  12. bborman
    Member
    Posted 3 years ago #

  13. dbarned
    Member
    Posted 3 years ago #

    @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.

  14. fergbrain
    Member
    Plugin Author

    Posted 3 years ago #

    @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/).

  15. dbarned
    Member
    Posted 3 years ago #

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

    Many thanks & have a great weekend :)

    Doug

  16. bborman
    Member
    Posted 3 years ago #

    @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?

  17. fergbrain
    Member
    Plugin Author

    Posted 3 years ago #

    @bborman

    Can you send me a URL to look at?

  18. bborman
    Member
    Posted 3 years ago #

    @fergbrain

    Sorry, my site is not live... Developing locally right now. A co-worker and I rewrote some of the output portions of the plugin, and I've got some more of the functionality I mentioned above, at least when the JS countdown is active... Not sure what the problem was, but posting my solution here wouldn't be helpful to most users since I changed the functionality somewhat.

    Thanks for all your help, though!

  19. H R
    Member
    Posted 3 years ago #

    @fergbrain

    And how about to separate the time number from time designation:
    ex: <span>12</span><span>Hours</span>,<span>10</span><span>Minutes</span>.

    Could you please help me on that?
    Thanks

  20. fergbrain
    Member
    Plugin Author

    Posted 3 years ago #

    @hnfr

    What's the goal? There may be a better way.

  21. H R
    Member
    Posted 3 years ago #

    @fergbrain

    I want to create a box for each, with a big number and a small designation
    ex:

    2 10 20
    Days Hours Minutes

  22. H R
    Member
    Posted 3 years ago #

    or... something like the guys from F1 driver Mark Weber's site made:
    http://www.markwebber.com/

  23. fergbrain
    Member
    Plugin Author

    Posted 3 years ago #

    @hnfr

    It's going to require a bit of modification to the code, what have you tried?

  24. H R
    Member
    Posted 3 years ago #

    Just what has been discussed here, but i'm lousy in javascript language.

  25. fergbrain
    Member
    Plugin Author

    Posted 3 years ago #

    @hnfr

    I'm happy to answer questions and help fix bugs. However, I don't have the time to help develop new code to one-off requests like this. If you are in need of someone to program, my services are available for hire.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic