WordPress.org

Forums

Number "Count Up" Plugin (8 posts)

  1. kazooky
    Member
    Posted 1 year ago #

    I've searched high and low for a simple number counter. Everything I find is a countdown plugin or relates to a visitor or other website stat.

    All I want is to add an arbitrary number and have it tick up, like you see on many themes. For example, this page: http://themes.moretech.it/?theme=zeta and scroll to the bottom in the blue.

    Anyone have any ideas on how to find a plugin like this?

  2. cubecolour
    ɹoʇɐɹǝpoɯ
    Posted 1 year ago #

    I couldnt see anything like that when I looked at the site you gave as an example. Can you describe your proposed usage of this element? If it isnt counting visitors or other stats, what does it indicate or represent?

  3. kazooky
    Member
    Posted 1 year ago #

    This is the correct URL: http://themes.moretech.it/zeta/about-us-standard/

    near the bottom, in the bright blue - the numbers that count up. Its really simple but I haven't seen a plugin like this. Just Jellyfish but I don't the odometer style.

  4. cubecolour
    ɹoʇɐɹǝpoɯ
    Posted 1 year ago #

    Jellyfish counter widget seems to be the only plugin in the WordPress.org theme directory that provides this functionality. It looks like it would be possible to override the default css with some new rules to make it display like the example you gave rather than the odometer style.

    If you install the plugin to your site and post a link to a page on your site where it is displayed, I will take a look at what tweaks might be required.

  5. kazooky
    Member
    Posted 1 year ago #

    Here is the page: http://rewards.kazooky.com/social-rewards/content-engagement/

    Thanks for the help!

  6. cubecolour
    ɹoʇɐɹǝpoɯ
    Posted 1 year ago #

    It looks like there are some plugin settings to adjust the font, the number of digits, and hide the animated 10ths digit. Can you configure those settings to appropriate values for your site please?

  7. kazooky
    Member
    Posted 1 year ago #

    Ok - I think it is all set now.

  8. cubecolour
    ɹoʇɐɹǝpoɯ
    Posted 1 year ago #

    It looks like you need to put some css into the widget itself to style it as it uses inline styles

    so put something like this into the digit style field:

    background: transparent; color: #900;font-family: Arial, monospace; font-weight: 900;

    Unfortunately the way the CSS is added in the plugin isn't very good for customizing so overriding the odometer-style shading is not as simple as I expected and required an edit to js/odometer.js
    change

    var style = {
            digits:        "position:absolute; height:"+this.digitHeight+"px; width:"+(this.digitWidth-(2*this.digitPadding))+"px; "+
                           "padding:"+this.digitPadding+"px; font-size:"+(this.digitHeight-(2*this.digitPadding))+"px; "+
                            "line-height:"+this.digitHeight+"px; "+
                           "background:black; color:white; text-align:center; "+this.fontStyle,
            columns:       "position:relative; float:left; overflow:hidden;"+
                           "height:"+this.digitHeight+"px; width:"+this.digitWidth+"px;",
            highlight:     "position:absolute; background:white; opacity:0.25; filter:alpha(opacity=25); width:100%; left:0px;",
            lowlight:      "position:absolute; background:black; opacity:0.25; filter:alpha(opacity=25); width:100%; left:0px;",
            sidehighlight: "position:absolute; background:white; opacity:0.50; filter:alpha(opacity=50); height:100%; top:0px;",
            sidelowlight:  "position:absolute; background:black; opacity:0.50; filter:alpha(opacity=50); height:100%; top:0px;"
        };

    to

    var style = {
            digits:        "position:absolute; height:"+this.digitHeight+"px; width:"+(this.digitWidth-(2*this.digitPadding))+"px; "+
                           "padding:"+this.digitPadding+"px; font-size:"+(this.digitHeight-(2*this.digitPadding))+"px; "+
                            "line-height:"+this.digitHeight+"px; "+
                           "background:black; color:white; text-align:center; "+this.fontStyle,
            columns:       "position:relative; float:left; overflow:hidden;"+
                           "height:"+this.digitHeight+"px; width:"+this.digitWidth+"px;"
        };

    The numbers are still scrolling, but the appearance is changed. I think that's probably as close as you can get with this plugin.

    An alternative would be to make or commission a new plugin, perhaps based on this script or a similar one if the license allows it: http://jsfiddle.net/YWn9t/

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.