The Jellyfish Counter plugin for WordPress provides a widget and shortcode enabling you to easily add animated counters to your WordPress based website.
Counters can display as a manually updated total, an automatic counter that updates over time or just as an animated visual effect. Each counter can count upwards or downwards making them suitable for both incrementing totals or countdown situations. A great visual effect for travel blogs or any website that wants to display a running total or countdown of anything and is not limited to counting jellyfish!
Jellyfish Counters are highly configurable through the widget interface, and being generated using CSS and JavaScript, they require no external graphics files. You may have as many counters as you wish on a page, all can have individual settings for totals and appearance.
New Shortcode support allows you to generate a counter directly within any post or page content making counters no longer limited to your sidebar or other widgetable area.
Advanced users will find that Jellyfish Counter objects are fully accessible via JavaScript and may be controlled and reconfigured as desired though your own custom scripting.
Demo
You’ find several of examples of the counter on this page
Installation
Either install and activate the plugin via your WordPress Admin
Or
Download the archive from the WordPress plugin repository. Extract the zip file and just drop the contents in the wp-content/plugins/ directory of your WordPress installation and then activate the Plugin from the Plugins page.
After activation you’ll find a new Counter widget in the widgets panel of your WordPress admin, drag as many counter widgets as you need to your sidebar and other widgetable areas. Each counter widget has it’s own settings.
You can also use the [jellyfish_counter] shortcode with page or post content to display a counter within your page or post. Shortcode counters can be configured just as much as their widget counterparts. See Usage for details.
Upgrading from a previous version
Existing counters should not be effected by an upgrade but it is always good practice to backup your database and installation before performing an upgrade.
After an upgrade visit the widget admin page to check the new options available to your counters.
Note:
There have been changes in class names after version 1.0, if you have added custom counter styles to your WordPress theme you may need to make minor changes to reflect the new CSS classes applied to counter elements. If you have made any changes to the plugin files they will be lost if you upgrade.
Usage
Widgets
On your WordPress widgets admin page simply drag a counter widget to your sidebar and adjust it’s settings to suit your needs.
There are three basic modes of operation:
Static
If you want the counter to simply display a non animated number just set a Start Value to the desired number for the counter and set the Counter Type to static
Animated
If you supply both start value and end value in the widget, the counter will increment upwards or downwards depending on the chosen Counter Type until it reaches the end value. Speed of the count is controlled by the Animation Speed option. Be aware that this counter has no memory, it will reset when a page is reloaded or changed but it is great for a visual effect where start and end values are relatively close together.
Continuous
If you want to count over a long period of time and need your counter to continue to count irrespective of page loads then just select the continuous option in the widget. Then choose the interval between the counter increments, in seconds. As soon as you save the widget the counter will “start” and will continue to tick away even if nobody is viewing your blog. Changing the setting on an active continuous counter will not effect the count value and it will keep count, if you wish to reset an active continuous counter just change the start value and save the widget and the counter will restart from the new starting value.
Note: In continuous mode, animation speed and display tenths have no effect.
General Options and Settings
The counters are very configurable through the widget panel. You can define the digit height, width and font as well as animation speed (animated mode only) and bustedness (odometer style misalignment of the digits).
You can further customise the appearance of an individual counter via the Digit Style input that will accept a valid CSS style attributes such as font-family, colour, background etc.
Note: the size of the font here as is automatically calculated from the height, width and padding settings.
Need a flat looking counter? Disable 3D effect removes the CSS shading effect.
If you want to display a prefix on the counter or include separating characters, use the Format input. Just enter a string here representing your desired counter appearance, a 0 represents a counter digit, any other character will be displayed as it is. The Format option overrides the number of digits option, if a format string exists then the counter will use the total number of 0 characters as the number of digits.
Example Formats:
$0.00 1,000,000 0000 km
Shortcode
You can generate a counter directly within page or post content using the [jellyfish_counter] shortcode. The shortcode accepts a full range of parameters to provide identical functionality to the widget version.
The following parameters may be used within a shortcode:
digits : a number, Number of digits in the counter
format : a string, representing any fancy display format
tenths : true/false, display tenths digit or not
digit_height : number, pixel height of digits
digit_width : number, pixel width of digits
digit_padding : number, pixel padding for digits
digit_style : a string, custom css styles for the digits
alignment : ‘left’, ‘center’, ‘right’ or ‘inline’ By default a counter will appear centred on it’s own line. You can change this to left or right or use inline to make the counter appear with a line of content.
bustedness : a number, misalignment of digits
flat : true/false, don’t show 3d effect, show 3d effect
speed : a number, 0 – 100, animation speed
start : a number, starting value for the counter
end : a number, ending value for the counter
direction : a, string ‘up’ or ‘down’
interval : The number of seconds between updates of a continuous counter
tick_multiplier : The number of units to update every interval
timestamp : false or a string representing the starting time for the counter
id : by default a shortcode counter gets a unique id based on the time it is created, this means it’s id will change every time a page loads which may not be desirable if you want to use the id to identify it for styling or scripting. To give the counter a permanent id just supply a sting through the id option. The string is prepended with ‘jellyfish-counter-shortcode-‘ and so for example in your shortcode id=”mycounter” would result in the counter having an id of #jellyfish-counter-shortcode-mycounter
If you don’t specify a parameter it’s default value will be used.
Shortcode Examples:
[jellyfish_counter end=100]
The above shortcode translates as: Display a counter that animates upwards from 0 to 100
[jellyfish_counter start=999 end=123456 direction="up" digit_style="background: transparent; color: red;" flat=true; timestamp="2019-09-28 9:20:21" interval=300 ]
The above shortcode translates as: Display a counter that starts at 999, counting upwards until it reaches 123456. It has red digits on a transparent background with no 3D shading effect. It is a persistent counter that started counting at 9:20:21 on 2019-09-28 and has been incrementing by one every 300 seconds (5 minutes) since then.
[jellyfish_counter digits=8 start=1 end=99999999 interval=10 tick_multiplier=42 timestamp="2020-01-24 21:00:00"]
This shortcode sets up a continuous counter that will increase by 42 every 15 seconds.
Styling
You can modify the appearance of an individual counters text through the widget control panel or through shortcode parameters. This should be sufficient for most uses.
However, if you need to globally override the default counter style or make other CSS changes to the counter digits or container, take a look at jellyfish-counter.css for the appropriate class names. You should override this in you theme rather than modifying this css file as any changes made would be lost when the plugin upgrades..
Download
You can download this plugin from the WordPress plugin repository
http://wordpress.org/extend/plugins/jellyfish-counter-widget/
Hello my friend,
Excellent counter widget, I just started using it. Just a question- Is it possible to have the counter widget on different pages displaying different numbers?
Kind Regards,
Daniel
Each counter is the same site wide but you can easily do what you want by creating multiple counters (you can have as many different counter widgets as you need). If you use a widget logic type plugin (Some here: http://wordpress.org/plugins/search.php?q=widget+logic) you can define which page(s) each individual counter would appear on.
Hello! Thank you for your good plugin/ I need some help to do it better.
I needcounter with different speed. So, if delay is 1 second
In standart i can get:
1
2
3
..
But i neet this something like:
1
3
9
12
13
20
i think one of parameters(interval or speed) must be random.
Sorry for my english/
Hi Valery
To get the counter to do want you want you’ll need to make changes in the updateOdometer() function starting at line 358 in the plugin php file. Look for a variable called counterNow, you need to chnage the amount this variable is incremented by every interval. If you want to incrememnt randomly the easiest way is possibly something like this:
function updateOdometer() {if (persist == true) {
counterNow=counterNow+Math.random();
wholeNumber=wholeNumber+0.15;
if ...
You’ll probably want to play around with the maths a bit to suit your requirements but this should give you a place to start. Note that this will only effect how much the counter increments. The interval remains constant as set in the widget options. Also this code change will only effect a “Continuous Counter”
It appears you’ve changed the code in this plugin significantly since you gave these instructions for the random functionality. I don’t see any code like this near line 358 or anywhere in the PHP file. I’m trying to achieve the random incrementing effect too. Please help.
Hi Julie,
I’ll have to take a look at the code again, it’s been a while since i did this but I’m sure I have a version somewhere with a random feature. Drop me an email if you still need it and I’ll see if I can point you in the right direction for changes to the current version.
hello! congratulations for the excellent plugin. I need help because I would like to insert a picture above the counter …
thank you!
I can’t get a static counter to stay. I delete the end value and when I save the last value populates the box. How do I get a static counter that I can manually update?
Looks like there is a slight bug there that means you can’t have a blank end value at present, but you can still have a static counter by making the start and end values the same number. Will be fixed in the next update.
This has now been corrected in the latest version
Hi thanks for the plugin.
The end value on my installation goes back to 100 so won’t stay blank but anyway it works as a static counter.
Is there a chance that you could add a text box above and below the counter that could allow text and/or images?
Thanks
Colin
Hi Colin,
The behaviour of the end value was changed last update, not sure the readme reflected that, it was a little confusing, basically it needs to be less than the start value to trigger static behaviour (not blank).
However, the next update changes the widget settings to allow selecting cout up / down /static in a more logical manner. Coincidentally I’ve also added options for text before/after the counter display!
latest version (1.0) will be available in a day or two.
Hi Rob
Thank you for updating the plugin but it is clashing with another plugin I am currently using.
If I add text in either of the text boxes, I get a photo and text from another plugin called Pet Manager. It’s outputting the Pet Display widget which is part of Pet Manager.
Any chance you could have a look to see what is happening.
Thanks
Colin
I’ve had a quick test and can reproduce the problem, incidentally I also get the pet display showing up in some other third party widgets I tried. The same thing happens with any widgets that use the the_content() filter on their output on a Pet Manager page.
If you are comfortable editing the counter plugin a quick workaround would be to change line 444 from
echo apply_filters('the_content', $before_text);To
echo $before_text;and line 450 from
echo apply_filters('the_content', $after_text);To
echo $after_text;That will stop the pet manager content leaking through but also means you won’t be able to use shortcodes etc in the counter description blocks which is hopefully not a major issue.
Hi Rob
Thanks for being so quick and looking at my problem. It also does it with other plugins in the Content area on other pages, like AddThis.
Your fix works and I don’t see the need to add shortcodes anyway so that has solved my problem.
Thanks again
Colin
It’s a great plug-in. But for some reason, when I put it my blog, it works only in certain browsers (doesn’t work in firefox).
The really strange thing is, the counter on your own site works perfectly in firefox. Is it a different version? (I’ve installed version 1.0 – which is the only version I could find)
Running version 1.0 here, the current release that’s on WordPress.org
I ususally use Firefox and haven’t noticed an issue with the current or previous versions. What version are you using? If you have the firefox firebug extension installed see if the console is showing any javascript errors on a page with the counter on, that may give a clue. Alternatively if you have a URL where you are experiencing the problem I can take a look to see if I can reproduce the error.
Awesome plugin, it works great! I just need to figure out how to add an increase increment. I want to be able to have the counter increase by a set number everyday. Like everyday it adds 2500. Is that possible?
Hey Alex,
if you need it to add 2500 in one go everyday that’s going to require some modification to both the plugin code and the odometer JavaScript as currently the counter only increments/decrements by 1… I’m not sure how well the current code would adapt to such a large increment without trying it. But it’s fine for a small number, this post may give you some pointers, (bear in mind that was for an older version of the plugin and code and line numbers have changed since)
But you can of course easily make your counter gradually increase by 2500 over a 24 hour period. First a little maths:
24 hours * 60 = 1440 minutes
1440 * 60 = 86400 seconds in a day
86400 / 2500 = 34.56 seconds
So, if you set up a continuous counter with an interval of 34.56 seconds it should mean the counter increments by a total of 2500 every 24 hours….
That’s the theory anyway. Unfortunately, the counter only allows an integer as an interval so you can choose an interval of 34 and get 2541.17 every 24 hours or 35 and get 2468.57 every 24 hours.
I checked out your solution here
https://wordpress.org/support/topic/count-by-custom-number?replies=4
However, I’m not seeing this anywhere in the newest version of the plugin. Is there a different way to achieve this now?
In version 1.4.2 that line is in jellyfish-counter-widget/jellyfish-odometer-class/js/jellyfish-odometer.js (line 228)
I can’t remember offhand if there are any other changes that might stop this working, give it a try and let me know if you have problems.
I’m having issues with the counter not, you know, counting anything. It can be inserted and styled just fine but it just sits at zero.
Also, when the page is refreshed the digits seem to sometimes get vertically off-kilter. Any fix for this?
Thanks.
The JavaScript is at least generating the counter which is a start. As for being stuck at 0, that sounds like there may be something wrong with your start / end values. I’d need to see all the settings to be sure. Do you have a URL where I can see a non working counter?
The alignment is designed behaviour to simulate an old beat up mechanical counter. If you make the give “Bustedness” a value of 0 it will disable this effect.
The counter is viewable at http://proctologypledge.org
Thanks re: the bustedness value. Must’ve glossed over that.
Hello,
I am wanting to increase the digit size to show full width on the screen, but even though I keep increasing the height and width nothing changes.
This is the code I have.
[jellyfish_counter end=654321 digit_style="background: rgb(0,0,0); color: #ffffff";
digit_height="50"; digit_width="50"; digit_padding="0"]
Thanks,
Additionally, my shortcode is: [jellyfish_counter direction="up" flat=true alignment="center" digit_style="background: transparent; color: #8CC0E8;" digit_height=14 digit_width=10 digit_padding=0 bustedness=0 start=0]
Hmmm, I think I may have removed the previous “count upwards forever if there is no end value” behaviour.
Try adding something like end=999999 to your shortcode.
HI – thanks for the plugin! Is there anyway to add comma separators between the numbers?
Sure, you’ll want to use the format option which you can specify as either a widget or shortcode option, just use a 0 to represent a digit and a comma where you want it. e.g 0,000
Hey Rob – I am also trying to get commas on my counter. Can you please specify what you mean by “you’ll want to use the format option”? Are you saying to add in [format=”0,000″] in the shortcode, or should it be added differently in a different area (i.e. in the jellyfish-counter.css file)? Please provide more specifics! Also, the time stamp feature appears to be off. When I set the time to today and right now, the counter doesn’t start at the starting number I specified. Thanks for your help!
Hi Mike, yes if using a shortcode include something like format=”0,000″ as a shortcode parameter.
e.g [jellyfish_counter end=1000 format="0,000"]
The format can also be set using the widget version by entering the format string in the format input of the widget settings interface.
I’m not sure about the timestamp issue sounds like it may be timezone related, it should respect your WordPress tiemzone setting. Do you have an example? What timezone are you in and what timezone is WordPress using?
Hi.
Is there a way to get this speed to go faster than its current maximum speed? We want to quickly run up to several thousand.
Also, we want our counter lower on the page. If we use lazy load, will it wait to start until it’s scrolled to and loaded?
The maximum speed is limited by animation constraints… but if you are not already using the tenths digit you could try enabling that and edit the CSS for the tenths digit to match the other digits, then you’ll get a counter that appears to be running at 10 times the speed of the normal maximum. Hope that makes sense.
By default the counter will be triggered by the document ready event, see: jellyfish-counter-loader.js You could maybe modify this to be trigger on an alternative event, such as scroll position.
Alternatively, you can control the whole counter directly with JavaScript. There are several useful functions available which I’ve yet to document that but I can point you in the right direction if this is something you are interested in.
Hi Rob, awesome plugin! You should charging for this soon 😉
A couple of things I would like to do that maybe you can help with.
1. Be able to loop the counter with a certain delay between loops. For example, i’m trying to loop a counter from 0 to 60, it pauses for a few seconds for effect, then starts the count again. The delay is probably more complicated, but any easy way in your code to make it loop? The best I can do so far is to show a 2-digit counter with max set to 9999 and it loops 0 to 99 and starts again.
2. Start the counter only when scrolling to where it is on shows on the page. Where in the code should I look to do this? I’m new to JS so a few pointers would help.
Cheers,
Reemus.
You should be able to do both of these fairly easily with JavaScript. There are several functions in jellyfish-odometer.js that are primarily intended to allow interacting with a counter via JavaScript. This isn’t something that I have particularly documented so far but the functions are commented at least… I’m actually in the process of converting jellyfish-odometer.js into a proper jQuery plugin with plenty of extra features that will make controlling counters much easier, among other things….. so this will probably be much easier to do in a future version.
I’m not sure I can cover these in a simple manner as it’s maybe requires a basic understanding of JavaScript at least. But let’s give it a shot.
Firstly, let’s assume we set up a counter that just counts up to 10 with a shortcode something like this:
[jellyfish_counter id='testid' end=10]The id is important but can be anything, it just allows us to target this counter directly with JavaScript or css with #jellyfish-counter-shortcode-testid
1. Handily, counters call a function called completedFunction() when they stop. This function can be customised, so basically we’ll want to just make the completed function wait a while, then restart the counter. You can give a counter a suitable custom completedFunction with some JavaScript something like this:
$('#jellyfish-counter-shortcode-testid').data('jellyfishCounter').completedFunction=function(){var counter = this;
window.setTimeout( function() {
counter.set(0);
counter.start();
}, 5000);
};
Basically this is just setting up a timeout function that is run when the counter ends, the timer starts and after 5 seconds it sets the counter back to 0 and starts it, when we reach 10 again the process repeats and so on….
For the above to work it needs to be run after the counter has been generated on page load. A simple way to do this would be to modify jellyfish-counter-loader.js to include it. Or you could edit jellyfish-odometer.js and replace the default completedFunction() definition with your desired one (this would also be run by any counter you created).
2. You can create a shortcode counter that starts paused by using active=’false’ in the shortcode. eg:
[jellyfish_counter id='testid2' end=10 active='false']Then it’s just a case of calling the start method on the counter when you want to, triggered by scroll position or whatever…. The trigger on scroll topic is quite an extensive one and 101 ways to do it – that’s probably something to poke Google about. A library like Waypoints might be useful.
In essence it’s as simple as making some JavaScript to call this on a certain event:
$('#jellyfish-counter-shortcode-testid2').data('jellyfishCounter').start();Well that’s the basic idea, obviously in all these examples replace ids as appropriate for your counter. Hope that gets you started, and feel free to drop a tip in the jar anytime 🙂
Hi Rob – ace plug-in, thankyou 🙂
I have a slight problem in that it display fine in a widget on a sidebar but if I try using a shortcode in a page it just displays the settings. For example:
If I use:
[jellyfish_counter direction="up" flat=true alignment="center" digit_style="background: transparent; color: #8CC0E8;" digit_height=14 digit_width=10 digit_padding=0 bustedness=0 start=0]
It displays as:
class=”jellyfish-counter”
data-digits=”6″
data-format=””
data-tenths=”1″
data-digit-height=”14″
data-digit-width=”10″
data-digit-padding=”0″
data-digit-style=”background: transparent; color: #8CC0E8;”
data-alignment=”center”
data-bustedness=”0″
data-flat=”true”
data-wait-time=”20″
data-start-value=”0″
data-end-value=”0″
data-direction=”up”
data-timestamp=””
data-active=”1″
data-interval=”1″>
I’ve tried pasting as text and visual and I’ve also tried using a plug in that allows widgets to be displayed on pages, added the counter in widgets and saved and it’s still the same. Has anyone else had this problem?
Cheers, David
Hmmm, not sure what is going on there, very odd indeed. The plugin is obviously parsing the shortcode and setting up the correct element with the necessary data attributes. I can only assume the html is getting broken somehow or maybe escaped by… something. Hard to say without seeing the whole html output. What theme and plugins are you using?
Hi Rob – thanks for the quick reply. I will deactivate all non-standard plugins and see if that cures it – I’m using Citrus theme by Sean Lowery.
Also, I love the look of this and reading some comments above it appears that the plug in can be set to increment at set rates. I would like to use it as an energy savings counter on a website where it would be programmed with the known annual savings figures and increase by the second from Jan 1st (or whatever date it’s started on the continuous counter). The problem is, I would like 3 counters, all increasing at their own rates so assume I would have to have the plugin cloned 2 more times with slightly different settings for each. Are you available for hire to bespoke this for me? If so, whats the best way to contact you?
David
Hello,
I know it is a silly question, but I used the short code for a counter on one of my posts like this:
[jellyfish_counter start=10 end=100 speed=100]
and still the counter doesn’t stop at 100, but continues.
What should I do? Thanks 🙂
Best,
Polly
That should work OK, just tried it myself and it stopped at 100 as I would have expected. No sure what to suggest, do you have a url where it’s happening taht I can take a look at? maybe the generated HTML and JavaSCript will reveal some clues.
Hello,
I have the same problem. The first example at this page also doesn’t stop at 100 (The above shortcode translates as: Display a counter that animates upwards from 0 to 100)
Could you please help me?
I used the same code as you gave to Francel:
[jellyfish_counter digits=4 digit_height=50 speed=100 digit_width=50 digit_padding=0 end=200 flat="true" digit_style="font-family: 'GothamRounded-Book',arial,helvetica,sans-serif;background:transparent;color:#000;" id='news']
Best regards,
Jonne
This is puzzling. Can you send me a screenshot of what you are seeing when it fails to stop, maybe the Tenths option is causing confusion?
For reference I’ve just pasted your shortcode into a test page here: http://demo.strawberryjellyfish.com/2016/03/stop-test/ along with a version with tenths disabled. Both stop at 200 as anticipated on anything I have tried it on.
Hello Rob,
your test does not stop at 200; it just keeps on counting.. So, it seems to be a problem with my computer, right? Do you know what it could be?
I cannot send a screenshot in this comment. As mentioned, I used this shortcode:
[jellyfish_counter digits=4 digit_height=50 speed=100 digit_width=50 digit_padding=0 end=200 flat="true" digit_style="font-family: 'GothamRounded-Book',arial,helvetica,sans-serif;background:transparent;color:#000;" id='news']
The counter is already over 1000…
Best regards,
Jonne.
Hi Jonne,
Before we start looking elsewhere, I’ve changed the previous demo. Check out the link in my previous comment. You should see two counters, I’ve reduced the count so you don’t have to wait around aal that long until they (should) stop.
You should see the top one stop at what looks like 200 and the lower counter stop at 020.
Let me know if this does or doesn’t happen and also what OS/Browser version you are using.
Hi Rob,
it works!! Thank you so much!
Jonne
Hi
thanks for the nice widget.
A small query. Can i use this for total site visitor count at bottom as widget?
second Can the counter be set to start from custom value as i have migrated by blog from blogger to wordpress and wants to shows previous visits of 25000 on the migrated blog.
regards
Veren
No, there is currently no way to track visitor numbers with the counter. But yes you can set the start value to any number you like, although I’m not sure that is much use to you given my first answer!
May I know whether I can customize the fonts and the color or theme of the counter so that it can be look like website plugin? Thanks.
Sure, you can change fonts and colours using the digit_style option of either the widget or shortcode. It accepts any valid CSS style values. Some examples are in the General Options and Settings section on this page.
is there any way to change counting number to a random number or anything except +1/-1 in continuous counter?
Not in the current version without modifying the plugin code, but that feature does exist in the new development version, I’m not sure when this will be released though as it’s quite a large rewrite
i just figure out how to do that.
thank you anyway.
yes its possible in current version, i do that.
you can test it here.
http://www.dirindirn.ir
Rob, I’m wondering when your newest release will be made that allows for random intervals. I’m really needing a counter that can count at random intervals upwards.
Thanks!
Not sure to be honest, I don’t have much time to work on these plugins at the moment and really would want to redesign the whole counter animation and drawing side of things (long overdue for modernization) before adding new features. It might sneak into a maintenance release though as it’s not that complex. Sorry I can’t be more precise.
after i change wordpress language to persian (RTL ), all counter flipped.
orginal counter show this number : 2156828
after change wordpress language : 8286512
number are flipped, what am i supposed to do ?
Hello I used your counter and appreciate it for it’s ease of use.
On the other side, if you look at this page (http://strawberryjellyfish.com/wordpress-plugins/jellyfish-counter/), it’s consuming a LOT of CPU, raising my own from 800Mhz to 3Ghz just to display it (and consumption raised from 1W approx. to sometimes more than 18W). Seems it’s all but optimised.
Is it possible in another iteration to optimise it? regards
Yeah, the animation was never really optimal. Originally I’d never imagined anybody wanting more than one counter so it wasn’t a major priority at the time… but over time more features and configurability have meant the counters can be pretty resource hungry in some circumstances. Particularly noticeable when there are many counters of different types and configurations and speeds running on one page (like there is here)
I have actually totally rewritten the counter JavaScript to something much more efficient as well as including some nice new features. This may appear as a V2.0 version sometime in the future but I can’t say when as I’m busy with actual work projects at the moment. (At the moment it’s not totally backwards compatible and I don’t want to release a version that may break things for existing users)
Hi Rob
Your plugin is amazing, and really makes my site look so much better.
I was wondering, I have a shortcode that counts the number of uploads a user makes on my site and i use that to display that information to the user on their dashboard after they log in. Would it be at all possible to make your plugin count to the number that my shortcode outputs?
I’m sure there is a way that could be done, but it would mean hacking the plugin. Exactly how would depend on what you shortcode is doing and how. You could maybe extend the counter plugin shortcode handling to accept an additional flag, such as “download_count” and add some logic to substitute the end_value with your download count if the flag is present (if it’s not too complex you could just replicate the code your shorcode uses to get the total as a function in the counter plugin).
Hi Rob, thanks for the great plugin!
I have this up on the home page of a client site here: http://www.pridephilanthropy.com. Unfortunately, there appears to be a bug with this instance. The dollar figure starts at $940,583,000 and counts UP. But when it ticks up 999 times, it goes up 1 million instead of of increasing it one in the thousands column.
Here is my shortcode: [jellyfish_counter end=100000000 tenths=false interval=0.1 speed=100 format=$940,583,000 digit_height=24 digit_width=24 flat=false]
See anything wrong in there or is this a bug in the plugin?
Ah, an odd side effect of misusing the format option. In a format string a 0 acts as a placeholder for a digit, any other character is printed as is. So when your counter reaches 1000 it displays a 1 in the fourth digit position from the right as expected but in your case the fourth 0 is where the million digit would be. That’s the why, here’s how to fix: use the format for just formatting and add a start value to set the start at the desired number. Your end value needs an extra digit too (based on the value you put in format).
[jellyfish_counter start=940583000 end=1000000000 tenths=false interval=0.1 speed=100 format="$000,000,000" digit_height=24 digit_width=24 flat=false]
Hi Rob,
Your plugin is awesome and easy to use but I have a little bit question.
How can I script or change/add the script to display more counts “applications/connections” connect on your website? Do you have Idea how to apply on this?
I just apply this plugin in my website and something change the script, since your plugin is more on counter up by timestamp. I just want something different, I mean.. I want to display more connections on my website automatically added the connection when someone click the website.
Thank you!
The counter can’t track visitors to your website or page views, but it can be made to show any value you can obtain in from within WordPress template file for example and you can also set the counter value using JavaScript. You would need some extra code that would keep track of the total you want that pass that value to the counter.
Hi Rob,
Is it possible to define a period like “day” or “month” and then have the counter count from “start” to “end” in that period?
i.e. if period = “day”, it will count from “start” to “end” every day, resetting at the end of the day, so it can start over at the beginning of the next day.
Thanks,
Mads
An interesting idea. It’s not something that is currently supported or would be easy to do without some modifications to the plugin itself.
If you always wanted the counter in a specific place you could also use the WordPress do_shortcode() function to call the counter shortcode directly within a WordPress php template file where you could also calculate the start, end or any other values you needed and inject them into the shortcode.
Thanks. Guess we will try to code a plugin ourselves then.
Hi,
Is it possible to animate the counter when on a timestamp? exmple your counter
[jellyfish_counter start=999 end=123456 direction="up"
digit_style="background: transparent; color: red;" flat=true;
timestamp="2014-09-28 9:20:21" interval=300 ]
could it animate until the current number?
Thank you
Sorry, I’m not sure what you mean by “animate until the current number” ?
this is a exelent counter because it has many future realy i like it but when i installed from word press plugins it’s not showing this counter option at any where can you help me plzzzz…
You’ll need to add a counter widget to one of your side bars to see the options panel. You can do this on either the Widget or Customise pages in the Appearance section of your WordPress admin.
If you can’t see the Counter Widget listed with the other widgets in those two places than go to the Plugins section of your WordPress admin and check that you have activated the Jellyfish Counter Widget plugin.
Hi How are you. I really like this plugin. But there’s a little blug, the End never stop. What it could be? You can see it in http://lab.botonescreativos.com.ve/wp3/ down.
My code is:
[jellyfish_counter digits=3 digit_height=50 speed=1000 data-tenths="true" digit_width=50 digit_padding=0 active="false" end=200 direction="up" alignment="center" flat=true digit_style="font-family: 'GothamRounded-Book',arial,helvetica,sans-serif;background:transparent;color:#000;" timestamp="" interval=150000 id='news']
EXCUSE ME I SEND IT AGAIN
Hi How are you. I really like this plugin. But there’s a little bug, the End never stop. What it could be? You can see it in http://lab.botonescreativos.com.ve/wp3/ down.
My code is:
[jellyfish_counter digits=3 digit_height=50 speed=1000 data-tenths="true" digit_width=50 digit_padding=0 start=0 end=200 direction="up" alignment="center" flat=true digit_style="font-family: 'GothamRounded-Book',arial,helvetica,sans-serif;background:transparent;color:#000;" timestamp="" interval=150000 id='news']
Looking at your page I can see that the counter does stop when it’s supposed to, it just might not look that way because the first digit is hidden, although you want to count to 200, as you have tenths active it will actually end at 200.0 If you use digits=4 you’ll see the full counter. Hope that makes sense.
There are also a couple of problems with this shortcode which might be effecting how the values are parsed:
Some of the parameters you are specifying are also default values so you can actually condense the shortcode down into this for the same result:
[jellyfish_counter digits=4 digit_height=50 speed=100 digit_width=50 digit_padding=0 end=200 flat="true" digit_style="font-family: 'GothamRounded-Book',arial,helvetica,sans-serif;background:transparent;color:#000;" id='news']Thanks I’m gonna check it and I will tell you. Thanks again
Hi Rob! thanks for you help. It works! Now i have a question. I would like to add a text at the end of numbers like a this site at the end http://www.acceso.com/. How i could get it? I saw something in other comment but i just want to know if is there another way? Could you explain it please and sorry
You’ll want to use the Format option, documented on this page. Basically uses a string as a template for the counter where a 0 is replaced by a counter digit and any other character is printed as it is.
For example, assuming you have a counter with a current value of 12345, here are some example format results:
format=”00000 km” counter displayed as: 12345 km
format=”$000.00” counter displayed as: $123.45
format=”0 ten thousands, 0 thousands, 0 hundreds, 0 tens and 0” counter displayed as: 1 ten thousands, 2 thousands, 3 hundreds, 4 tens and 5
So that last one was a little extreme, but it illustrates what is possible. Note that anything in the format string will also get the same styling as the digits.
Hi, thanks for this great plugin! It works like a charm and is real easy to use. Great job.
However, I have a question: I use this counter to fool people. But if you see the source code, all the code is right there (starting at for example 5000, ending at 999999, etc). Is there a way that this code is ‘behind the curtains’ and not in the main html code?
Thanks
Not really. You’d need to totally rewrite things. Theoretically you could generate the counter just using the JavaScript class, but even then you’ll still be able to see the parameters if you inspect the script source.
Thanks for you help. So that gets it to count by the increment I want, but when I refresh the page, it resets the starting point to be the number of minutes that has passed and then starts counting by my custom increment again.
For example:
Lets say I am counting by a custom increment of 50 and my time interval is 1 minute.
If I let it run for 7 minutes and then refresh the page, the starting point becomes 7 and then it starts adding my 50.
Ideally, in that scenario, the starting point should be 350 (interval * increment)
I tried playing the code some more and am not getting it to do what I want. Does that make sense and is that doable? I’ll buy you a whole bag of coffee if we can get this working. Any assistance is greatly appreciated!
Ok, I see what you mean, I forgot about the continuous counter complication, there is a quick hacky fix. You should be able to just multiply the current value of the counter when it initializes. Try modifying jellyfish-odometer.js,
change line 56
this.currentValue = this.startValue;
to
this.currentValue = this.startValue * 50;
That should correct the count when the counter is initialized and it will work fine from there…. it should work anyway, I haven’t actually tested this 🙂
tried it, seems like the start value is only increasing by 1 every minute 🙁
If its any help, this real world example I am working on.. mid page.
https://webcorp.datacandytest.com/
starting value = 055711633
custom increment = 248
interval = 60 (1 minute)
timestamp= 2015-07-23 14:17:00
Well I just noticed that the 1.4.2 release had some stray Javascript in the plugin folder that shouldn’t have been there. It’s possible that you did what I did when I just tried the edits and edited the wrong file 😐
Anyway, I’ve just uploaded version 1.4.4 to the plugin repository, this removes the potentially conflicting files, fixes a bug and includes a sneaky new shortcode option that could possibly solve your problems! Update to this version and add tick_multiplier=248 to your shortcode and you should get your counter whizzing up by 248 every 60 seconds. Obviously change the number to anything you want.
Hope that helps.
Example here: http://strawberryjellyfish.com/blog/2015/07/24/increment-jellyfish-counter-by-more-than-1/
Works great! One bug I found is that if you make the starting value any other number than 1, it does not seem to work. As a work around I was able to fudge my starting date get the starting number I wanted, aside from that it seems to be working great!!
Thanks for the update. I’ll look into the start value issue, as you discovered the start value is a little redundant if you are using the continuous mode as a shortcode as you can just set the timestamp in the past.
I really should get on with finishing off V2.0 which includes a whole heap of features people often request, such as this one. But it is a major rewrite of both WordPress plugin and supporting JS counter and may not be fully backwards compatible.
Lovely plugin–it’s so close to working perfectly for my client. For some reason, maybe a theme plugin conflict, it won’t speed up. I’ve tried fiddling with shortcode paramaters but no luck. Perhaps there are php paramaters I could try? Would greatly appreciate any suggestions!
Currently shortcode is set as
[jellyfish_counter digits=5 format="00,000" tenths=false digit_style="background: transparent; color: #d04631;" flat=true speed=100 start=1 end=25000 interval=2 tick_multiplier=25]
Changing speed paramater has a small effect, but interval and tick_multiplier have no effect.
I found your plugin from a Google search. My theme’s counter cannot format with thousands separator (eg 00,000) so I thought Jellyfish would be a great alternative.
interval and tick_multiplier only work with a continuous mode counter (which needs a timestamp to define when it started to count). As you don’t have a timestamp is running as a regular counter which has a max speed of 100. If you need a regular counter to “look” like it’s counting much faster you can always enable tenths, divide your endvalue by 10 and tweak the css to make the tenths digit class match the regular digits.
Thanks for the reply re: fudging the speed by using the tenths digit. That worked to tweak the speed, but it killed the thousands separator. Perhaps a “feature request” could be to increase the speed parameter in a future release.
Hi it´s a realy nice plug in but I have a problem.
I have 5 different counters and it looks broken when a counter have value 1000000
and I set digits for all to 8 look not smart 🙁 .
I creat counter in loop user give me the interval and tick_multiplier, if user typ e.g. tick_multiplier = 1000 i become a incredibly large value.
So what i need is the value that i can say ok counter your value 1000000 ok digits=8.
Is this possible??
Code snippet:
$interval = get_sub_field(‘interval’);
$tick = get_sub_field(‘tick’);
echo do_shortcode(‘ [jellyfish_counter digits=8 start=0 end=99999999 interval='.$interval . ' tick_multiplier='.$tick.' timestamp="2015-08-01 21:00:00"]‘);
I hope you understand what i tried to explan 🙂 sry for my english.
Hi Rob – Is there any way I can apply this counter to a site not created in wordpress. I created my site in dreamweaver and was wondering if I could insert the counter directly into the code. I’m guessing the plugin would be useless to me since I don’t have a wordpress site. Any help would be greatly appreciated.
It should be quite easy actually. Counters are all generated by a JavaScript class that just reads the desired settings from data attributes of a HTML div that will contain the counter. (The WordPress plugin just inserts the appropriate markup in the page of the JavaScript to transform). A version of the counter JavaScript is available as a standalone jQuery plugin on my github – https://github.com/strawberryjellyfish/jQuery_Jellyfish_odometer
There is no documentation as yet so you will have to do a bit of experimentation. Look at the source of this page to see how the data attributes are set up on a div, then do something similar on your page, include the JavaScript and initialise a jellyfishOdometer on the element. Don’t have time for a more detailed example at the moment, but let me know if you get stuck.
I need to create a continuous counter with a design similar to like an odometer (like this: http://thumbs.dreamstime.com/z/odometer-6030091.jpg) that:
That starts on: 200,000,012
That goes up 50k per day
That equals 833 per minute
Forever
It will replace the current counter beneath the main slider. I’m not even sure where I can generate the short code.
Thanks in advance.
Hi, I am struggling with making the timestamp work for me. This is the shortcode. Can you please help me understand what is wrong here. The result I get is 000,000,000.
[jellyfish_counter start=771917421 tenths=true format="000,000,0000" digit_height=40 digit_style="font-family: Montserrat;background: transparent;" flat=true; timestamp="2015-08-27 14:23:40" interval=1 tick_multiplier=50]
That’s very odd. I can reproduce your problem, but not sure why it is happening. I’ll have to investigate further.
Hi,
My question is how to display counter on page, created using a widget?
You can only display widget counters in widgetable areas of your theme, such as a sidebar. If you want to display a counter with the page content you need to write a shortcode.
Shortcodes need to be written manually, see the examples on this page for some hints.
We are trying to add 8 to the total number of clients we have helped every day.
I’ve accomplished this using an interval of 10,800
The only issue I’m having, is that the number doesn’t really look dynamic…is there a way to scroll from 0 to the new number, so it catches the user’s eye?
Sorry, there is not really a way to do that at present.
Hi, i wonder if there is a way to enter the function “continuous counter” in shortcode.
A shortcode just needs to have interval and timestamp parameters set to make it run in continuous mode.
See the shortcode examples higher up on this page.
Hi again friend! I have the same problem like the other day. See in this page
http://www.monitoreodigital.com/
The numbers that i need en the second and last column are: 434693 and 540, i’ve tried with the differents texts explained up but i can’t get it, thanks again
And the other stuff is how can i do because the two last numbers is not in the same line like the rest
I want to report dynamic data using your widget on out WP site: allpowerlabs.com. E.g. total kilowatt hours generated. Can I have the counter advance based on a data table rather than timing cycles? I am a content and design person, but do have some coders on our staff who might help. Reading other comments I presume we could somehow dig into that jQuery you have posted and modify or add javascript. Have you seen this application implemented with Jellyfish or any other widget?
Yes, one option would be to use javascript assuming you have some way of getting the totals you need. It would be quite easy to set the counter value on document ready or other suitable event.
But if you don’t actually need to use it as a plugin you could also just use the javascript class from the plugin and initialise it manually, the javascript that builds the counter simply reads data attributes from the HTML element it’s initialised on. That may also be an option. It depends on how you are going to obtain the dynamic data.
I don’t have any detailed examples of how to do this, but could maybe point you in the right direction.
Hi ,
Any idea why the transparency not working proper?
Please see systemtrans.de
The last counter started not working proper with the transparency.
Thank you
Try adding flat=true to your shortcode to remove the shading
Was already flat=true
Fixed it.
It seems that I had the flat=true; I removed the ; and it’s fine now
Hi again friend! I have the same problem like the other day. See in this page
http://www.monitoreodigital.com/
The numbers that i need en the second and last column are: 434693 and 540, i’ve tried with the differents texts explained up but i can’t get it, thanks again. And the other stuff is how can i do because the two last numbers is not in the same line like the rest
Hi Rob,
I am still struggling with this. I have tried all possible combinations. Even tried to give it to some of my best developers debug this, but no luck 🙁
This is what I am trying to do. But the resulting numbers have absolutely no co-relation with the start numbers mentioned here.
[jellyfish_counter start=77191742 end=10000000000 tenths=false format="000,000,000" digit_height=35 timestamp="2015-09-28 09:00:00" interval=1 tick_multiplier=50 digit_style="font-family: Montserrat;background: transparent;" flat=true;]
[jellyfish_counter start=21519014 end=10000000000 tenths=false format="00,000,000" digit_height=35 timestamp="2015-09-28 13:00:00" interval=1 tick_multiplier=2 digit_style="font-family: Montserrat;background: transparent;" flat=true;]
[jellyfish_counter start=4562030968 end=10000000000000 tenths=false format="$0,000,000,000" digit_height=35 timestamp="2015-09-28 09:00:00" interval=1 tick_multiplier=480 digit_style="font-family: Montserrat;background: transparent;" flat=true]
Any help from your side will be highly appreciated!!
Thanks,
Avinash
what numbers are you getting?
The numbers seem totally disconnected from what I am defining as start values.
for example, in this case, start=4562030968. But the number on the screen starts with 9,xxx,xxx. Thats more than double the start value. And considering that the start timeline is not too distant, with the defined interval, the number cannot jump from 4 billion to 9 billion in such a short period of time.
This pattern is observed for the other numbers as well, but it is not as wide as this one.
I want to remove this counter, i already deactivate this plugin, still it is display on header.
Please give me solution
If the plugin has been deactivated then it can’t possibly show. Do you have a cache plugin running? Try clearing the page cache if you do. That’s the only thing I can think of.
Dear Rob,
Fingers crossed, I am hoping that your plug-in is the perfect thing for a bit of fun on our online magazine. Luxurious Magazine is the most viewed English-language news provider on Google Plus and across all channels we get 30,000,000+ views per month. If my math is correct, this equates to 685 views per minute. I was wondering how to set the plug-in to count from 0 when someone goes onto a page and then increases at a pace of 685 per minute? I hope that you can help? Kind regards, Paul
Hi,
How can I set the continuous mode in to [jellyfish_counter digits=5 start=4000 ] I want to show views, so no seconds (the comma)
Hello. I’m having an issue getting your plugin to add up correctly. I’ve tried this shortcode [jellyfish_counter digits=9 direction=up start=148594000 end=948652000000 interval=1 timestamp="2015-10-27 16:30:00" tick_multiplier=5 format=$000,000,000]
I’m trying to start with 148,594,000 on Ocotber 27th ,go up 5 every second, and display it in dollar signs.
Thanks for any help,
Chris
Hi there, I need to show people how many years, months and days we have been incident free. Is there a counter anyone knows of that can set the years, months and days then have it continue counting and adding to this please?
Something like: 16 years – 6 months – 2 weeks – 4 days we have been LTI FREE!
Is there a code that will make this plugin display like this?
Great plugin Rob. I use this to one my my client website and customize the CSS to make a different look and he really likes it. I use this to showcase his monthly income on his website.
Rob, love the counter but is there a way to reduce the space in-between digits so called kerning. Below is my code:
[jellyfish_counter start=2147483647 end=3000000000 tenths=false interval=20 digits=10 digit_padding=-5 digit_height=20 digit_width=20 direction="up" flat="true" format="0,000,000,000" digit_style="background: transparent; color: #1a007a; font-family: arial, helvetica, sans-serif;" tenths="false" tick_multiplier=1
timestamp="2015-11-14 21:00:00"]
Did you ever get a reply to your padding question? I need to completely eliminate the padding between digits, too. Somebody please help. Thank you.
There may be padding between digits if the digit_height and digit_width ratio isn’t in proportion to the font proportions. You may be able to reduce spacing between digits by reducing the digit_width value, but if it looks like the height shrinks too then you have gone too far and will start to get padding above and below the digits…. That statement may only make sense if you see it happen.
Hello mate,
Great counter but I can’t still do what I want. I want an end less counter that would start at 500 and finishes at 1000000 by increasing of 2500 per day.
Can your plugin do that ?
Thanks very much
Best
Exemple at the bottom of this page : https://branch.io/
Hello,
I love the plugin! I have a few working, but one I can’t get to work: [jellyfish_counter digits=3 start=120 end=67 direction="down" tenths="false" flat="true"]. It just shows the end number without counting down. If I reverse the numbers and change down to up, it does work. Can you help me?
Thanks!
I’m trying to use your plugin to display realtime updating numbers. Specifically, the number of blogs created on my network using a php code that was converted to a shortcode. Is this something that’s possible?
hi there! it’s a nice plugin and i like your website too …
the counter works fine, speed and everything. all i want is that it counts “thousands” instead of “ones”.
i just would like too add “000” (static) at the end. you know what i mean?
can you please tell me where i have to add this?
Theoretically you should be able to do this with the format option but unfortunately that uses a 0 to represent a digit and populates them right from the right so you’d end up with 000 at the front of the number. I cant thin of a way to do it without editing the JavaScript code a little to use a different character to represent the digits in format strings.
I can explain this further if you still need a solution.
Hi! Would like to be able to speed up more, but my question is more regarding formatting. I am using an animated counter with start and end. When it’s done counting, the final number is skewed vertically. The “9” is much lower than the “1” to the left… Is this by design?
[jellyfish_counter start=10 end=19 speed=100 format="$000" digit_style="background: transparent; color: green;" ]
It’s by design. Try adding
bustedness=0to your shortcodeHey Rob
Great plugin, very useful. A friend of mine added it to my personal site and recently I had a crash and hard to rebuild the site. I noticed he had a couple of lines of code in the “Text Before Counter” and “Text After Counter” fields:
Profits Since Inception:
CLICK TO SEE TRADING REPORTS
For whatever reason when I place that text in there again, it will not save, it simply strips the code and leaves the text. Any reasonthis is happening?
Hey Rob
Awesome Plugin I really like it. Theres just one thing I dont like too much and I can´t really fix it. I try to describe my issues as good as i can (sorry for my English). So to me it seems like the digits are placed in an odd way, like if there was a line below every digit the line was bowed. What I´m trying to say is that it looks like the digits are not placed in a row correctly like the letters in this text here for example.
Here is the code that I am using: [jellyfish_counter start=11053166 end=555555555555 format="00.000.000" direction="up" digits=6 digit_width=22 digit_height=33 flat=true
digit_style="font-family:Arial;background:transparent;color:#bcbcbc;" flat=true timestamp="2016-02-19 08:40:00" tick_multiplier=1 interval=3 ]
I hope you can help me.
hey, you have to add: bustedness=0
like below
[jellyfish_counter start=11053166 end=555555555555 format="00.000.000" direction="up" digits=6 digit_width=22 digit_height=33 bustedness=0 flat=true
digit_style="font-family:Arial;background:transparent;color:#bcbcbc;" flat=true timestamp="2016-02-19 08:40:00" tick_multiplier=1 interval=3 ]
Quite right
Hi Rob,
Awesome Plugin I really like it.
Sorry, I am a beginner with wordpress and I was wondering where can I add the short code you suggested (e.g. [jellyfish_counter digits=8 start=1 end=99999999 interval=5 tick_multiplier=42])
where do I have to paste it?
Thank you!
Hi Paolo
Shortcodes are used within a page or post content. Just type it in the post editor where ever you want it to appear within the post. You may find it easier to use the Text tab of the editor rather than the Visual editor to avoid the Visual Editor converting the shortcode erroneously.
Hey Rob, thx for the awesome plug in.
I am looking for two things:
1) I would like the counter to work only from 8am until 6.30pm (from Monday to Saturday) so that it does not count over night.
2) The ability to pause the counter (Sundays)
Are there any possibilities?
Thank you again very much!
This isn’t something that this plugin can do, it could be potentially customised to do this but it’s not a quick change.
Great plugin! Very unique and complete, I need this and I’m glad to offer you something for your help! I try to add a Shortcode Mapper with the same example’s parameters, but the plugin don’t count. Still freeze at zero. What I done wrong?
http://imgbox.com/0Ax8IICj
I’ve not used Shortcode Mapper so I can’t say what might be happening without trying it out. Do you have an example of the actual shortcode it is creating?
Hello Rob,
Thanks for great plugin 🙂
This is my shortcode:
[jellyfish_counter digit_height=100 digit_width=100 start=150000000 digits=10 end=9999999999 interval=10 tick_multiplier=30 timestamp="2016-04-18 21:00:00" flat=true]
And this is the number on the client side:
45560101126701981001
The numbers is running as expected but this is not the number that need to be displayed. It shold be somthing around 150001000.
Help from any kind will be much appreciated.
Thanks!
I’m not sure how you are getting a 20 digit number when using the digits=10 option, that’s really not possible and not what I observe testing that shortcode.
However with regards the unexpected number. With the options you have selected the counter will have started at 4500000000 not including any increments since the start time. The tick_multiplier option multiplies all the ticks the counter has made so far, which includes any specified in the start value. Although you can set a start value when using a timestamp it can be confusing, ideally when using a timestamp the start value should be 0 and the start time stamp set to an appropriate time in the past to make the counter read whatever you need it to be as it’s essentially a “counting since” style behaviour.
But if you don’t want to work out when your counter should have started you can just do as you have but also divide the start value by the tick multiplier (start=5000000) that should give you the initial number you are expecting without effecting the increment value/speed.
See a demo here:
http://demo.strawberryjellyfish.com/2016/04/counter-tick_multiplier-demo/
Hello Rob,
WOW! Thanks for the very detailed answer. It was very helpful 🙂
Hey there, what a great plug-in. I managed to get it going with the options in the widget bar, but the text shows in black – but I have a black background, so it doesn’t show at all. Is there a way I can change the font colour of the text that goes before and after the numbers (as the numbers are showing fine… 🙂 ) – Oh, and if there is a way, could you share it at beginner’s level please? Thank you!!
The before and after counter text doesn’t have any styles set in the plugin so it should be inheriting whatever is the default for the widget area in your theme. It’s a little odd that it’s black on black but easy enough to fix adding a CSS rule….. but possibly not easy beginners level 😉
Before I dive in and confuse you, do you have a link to where this is happening? it may be easier for me to see what is going on before advising how to fix, just in case of unexpected complications which is often the case when delving into the realms of CSS.
Hi,
Is it possible to remove the zero at the beiginning.
for example start = 0 end =9999. I don’t want to see 0001 but only 1…
Thanks
I found how to resolve this probleme. thank you for the plugin it’s great
Can’t you explain how to do ?
Hello,
Thank you for the plugin, it is very good!
I found a problem with the “Continuous” mode. After a while I realized that the counter value was lagging versus real value. The only way to find the real value was to refresh the web page. 🙁
I changed some code in your updateOdometer function in jellyfish-odometer.js file and function jellyfish_cw_shortcode_handler in jellyfish-counter widget.php file and everything works perfectly … for now 😉
The thing I did is instead to increment the starting valur after each iteration I recalculate the starting value depending of the time elapsed since the timestamp.
Here’s the code I changed in updateOdometer:
this.updateOdometer = function () {
if (this.timestamp) {
var start = Date.parse (this.timestamp);
var end = Date.now ();
var elapsed = (end – start) / 1000;
this.currentValue = (this.direction == ‘down’)? this.startValue – (elapsed / this.interval) this.startValue + (elapsed / this.interval);
this.wholeNumber this.startValue = + (elapsed / this.interval);
if (this.wholeNumber> = this.tickMultiplier) {
this.wholeNumber = 0;
this.waitTime this.interval * = 1000;
} Else {
this.waitTime = 1;
}
} Else {
this.currentValue = (this.direction == ‘down’)?
this.currentValue – 0.01: this.currentValue + 0.01;
}
if (&& this.active
(This.direction! = ‘Down’ && (! This.endValue || (this.currentValue this.endValue))
) {
this.set (Math.round (this.currentValue));
That var = this;
window.setTimeout (function () {
that.updateOdometer ();
} This.waitTime);
} Else {
this.active = false;
this.completedFunction ();
}
};
For jellyfish-counter widget.php I just put in remark few line in the code.
jellyfish_cw_shortcode_handler function ($ att, $ content = null) {
global $ post;
// Merge shortcode args with default values
Shortcode_atts $ a = (
array (
‘Id’ => time ()
‘Digits’ => 6
‘Format’ => ”,
‘Tenths’ => true,
‘Digit_height’ => 40,
‘Digit_width’ => 30,
‘Digit_padding’ => 0,
‘Digit_style’ => ”,
‘Alignment’ => ‘center’,
‘Bustedness’ => 2,
‘Flat’ => false,
‘Speed’ => 80,
‘Start’ => 0
‘End’ => 0
‘Direction’ => ‘up’
‘Timestamp’ => false,
‘Interval’ => 1
‘Tick_multiplier’ => 1,
‘Active’ => true
) $ Att);
$ Element_id = ‘jellyfish-counter shortcode-‘. esc_attr ($ a [ ‘id’]);
if ($ a [ ‘timestamp’]) {
$ Init_timestamp = strtotime ($ a [ ‘timestamp’], current_time ( ‘timestamp’));
if ($ init_timestamp) {
/ * If ($ a [ ‘direction’] == ‘down’) {
$ A [ ‘start’] – = round ((current_time ( ‘timestamp’) – $ init_timestamp) / $ a [ ‘interval’]);
if ($ a [ ‘start’] = $ a [ ‘end’]) {
$ A [ ‘start’] = $ a [ ‘end’];
}
}
* /
}
} Else {
$ Current_value = $ a [ ‘start’];
}
wp_enqueue_script ( ‘jellyfish_cw_odometer’);
wp_enqueue_script ( ‘jellyfish_cw_loader’);
$ Counter_html = ‘
‘;
return $ counter_html;
}
Thanks
And the cpu performance looks better since the change 🙂
I reposted the code since my copy/paste doesn’t work correctly.
this.updateOdometer = function() {
if (this.timestamp) {
var start = Date.parse(this.timestamp);
var end = Date.now();
var elapsed = (end – start) / 1000;
this.currentValue = (this.direction == ‘down’) ? this.startValue – (elapsed / this.interval) : this.startValue + (elapsed / this.interval);
this.wholeNumber = this.startValue + (elapsed / this.interval);
if (this.wholeNumber >= this.tickMultiplier) {
this.wholeNumber = 0;
this.waitTime = this.interval * 1000;
} else {
this.waitTime = 1;
}
} else {
this.currentValue = (this.direction == ‘down’) ?
this.currentValue – 0.01 : this.currentValue + 0.01;
}
if (this.active &&
(this.direction != ‘down’ && ( ! this.endValue || (this.currentValue this.endValue))
) {
this.set(Math.round(this.currentValue));
var that = this;
window.setTimeout(function() {
that.updateOdometer();
}, this.waitTime);
} else {
this.active = false;
this.completedFunction();
}
};
And
function jellyfish_cw_shortcode_handler( $atts, $content = null ) {
global $post;
// merge shortcode args with default values
$a = shortcode_atts(
array(
‘id’ => time(),
‘digits’ => 6,
‘format’ => ”,
‘tenths’ => true,
‘digit_height’ => 40,
‘digit_width’ => 30,
‘digit_padding’ => 0,
‘digit_style’ => ”,
‘alignment’ => ‘center’,
‘bustedness’ => 2,
‘flat’ => false,
‘speed’ => 80,
‘start’ => 0,
‘end’ => 0,
‘direction’ => ‘up’,
‘timestamp’ => false,
‘interval’ => 1,
‘tick_multiplier’ => 1,
‘active’ => true
), $atts );
$element_id = ‘jellyfish-counter-shortcode-‘ . esc_attr( $a[‘id’] );
if ( $a[‘timestamp’] ) {
$init_timestamp = strtotime( $a[‘timestamp’], current_time( ‘timestamp’ ) );
if ( $init_timestamp ) {
/* if ( $a[‘direction’] == ‘down’ ) {
$a[‘start’] -= round( ( current_time( ‘timestamp’ ) – $init_timestamp ) / $a[‘interval’] );
if ( $a[‘start’] = $a[‘end’] ) {
$a[‘start’] = $a[‘end’];
}
}
*/
}
} else {
$current_value = $a[‘start’];
}
wp_enqueue_script( ‘jellyfish_cw_odometer’ );
wp_enqueue_script( ‘jellyfish_cw_loader’ );
$counter_html = ‘
‘;
return $counter_html;
}
Tnaks and sorry about multiple post.
Interesting. I’ll have to take a good look at that, I know there are a few curve balls in the JavaScript code.
To be honest the code is suffering a bit from too may features added that were never originally intended, it’s due a major refactor if not complete rewrite. This was actually started for v2.0 a long while ago, unfortunately other things have taken priority.
I am not getting the result I want with this code. It is showing 999,999,999
Our charity is serving 23 meals a second and we have so far served at least 3 billion meals.
This is the code I have now:
[jellyfish_counter start=310531660 end=9999999999 format="000,000,000" direction="up" digits=10 digit_height=30 bustedness=0 flat=true
digit_style="font-family:Verdana; background: transparent; color:#ff6633;" flat=true timestamp="2016-04-20 20:40:00" tick_multiplier=23 interval=1 ]
I have the code way down the bottom of the page to test it out.
Hi Paul,
I pasted your shortcode here http://demo.strawberryjellyfish.com/2016/05/23-meals-a-second/ which appears to work ok once it was formatted onto one line and the duplicated flat=true removed (not sure if that was just a copy pase error in this comment).
Note that if you are using start value and a tick multiplier value > 1 then you need to make the start parameter in the shortcode equal the initial counter value divided by the tick multiplier, again see the example on the test site linked above. I think this is probably what you are after.
Hello,
One more time, thank you for this wonderful plugin!
I just wanted to share my web site that uses a lot of Jellyfish counter. So for those who would like to see a good example of what we can do with this plugin you can visit: world-realtime-stats.com
Thanks!!!
Hi, this is a great plugin but I need help customizing it! I’ve tried all sorts of things following your instructions but I can’t seem to get it right. Specifically, I need a counter that will start at 199,000,000 and stop at 200,000,000. I want it to very quickly get to the end number once someone views the screen that the counter is on. Can you help me by showing me what the shortcode should look like to achieve this? Thank you so much in advance!
Hi Mercy
It’s going to take quite a long time to add 1,000,000 to the counter even at the fastest settings. Sorry, I don’t think you can achieve the effect that you want without some major customisation of the plugin.
Hello,
The Continuous type doesnt work in the last version WP + this Plugin.
It restart all time after page reload
Hi Vladyslav,
This isn’t something that I have noticed, StrawberryJellyfish.com is always running the most recent release version of WordPress (at the time of writing that is 4.5.3) and there are no issues.
Can you give me a (not)working example of this issue and I’ll check it out.
Hello! Thank you for reading. The name of my company is called Tees That Feed. We give breakfast to children as we sell our t shirt brand. 1 t shirt sold will give 5 breakfasts to children in need. Now, we are just starting up, and we need to show how many breakfasts we supply upon sales. Can I put these numbers in manually with this plugin? I do not need a running total or anything animated. As we sell, we will change the amount. Example we’ve already sold 76 t shirts x5 = 380 breakfasts given in total. How can I show just 380 ? Then just change numbers as we continue to make sales. Please reply, I think your plugin can work though from what I see in the examples above. Just want to be sure.
Hi Rob, Love the widget. I’m putting a shortcode into a page and I think I’ve figured out all the parameters except one. For some reason even when I use the “inline” parameter, the counter displays with any text I type following it, but it starts on it’s own line, one down from any text I put prior to the short code. On the editor page, the code looks like this:
Currently:[jellyfish_counter digit_height="24" digit_width="15" alignment="inline" digit_style="background: transparent; color: black;" bustedness="0" Flat="true" start="115" end="115" speed="0" tenths="false"] members to interact with.
Which I expect to show on the frontend as: Currently 00115 members to interact with.
but here’s what it actually looks like:
Currently:
00115 members to interact with:
Suggestions? Thanks! Brad
Hi Brad, that sounds like the CSS is improvising, possibly a width issue. Do you have an example URL?
I’m not able to get the animation going. It’s not the browser. Not sure what else to check.
What settings are you using?
I’ve tried various short codes. Currently it’s this:
[jellyfish_counter tenths:true start=148375 speed=1 direction="up" alignment="center" timestamp="2015-09-28 9:20:21"]
Now it’s working, though I’m not sure what happened. I took off the time-stamp. Anyway, thanks.
Rob, I’ll buy you some coffee soon. I’m all about internet safety. I want to show a fast running counter that resets every day, which shows the number of google searches for porn related topics so far that day. (13,000 per second) can jellyfish do that? I’m a wp noob.
I just figured out that I can make the units of the counter 1000s so that means it will only have to tick up by 13 every second….but can it reset itself everyday. looking over other forum posts…I fear not. confirmed?
You are correct. The current version does not have a daily reset capability.
Hi John,
I think that dealing with such large numbers may not suit the animated nature of the counter. The existing plugin would probably need some modifications to handle this. Initially I’d suggest faking it by updating just 13 a second and using the format parameter to add a static “,000″…. however I’ve just realised that won’t work because format uses a 0 as a placeholder for a digit. Sorry, I’m not sure there is an easy out of the box solution
Thank you for creating this plugin. I’m trying to create an open-ended currency counter, but the format shortcode option seems to create an unintended problem. When using the format option to set the format to currency, we are forced to explicitly define a static number of zeros. However, this limits the number of digits that the counter can count up to because it is limited by that same static number of zeros.
For example, let’s say I want a counter that can count to some arbitrarily high number (3.g., $1,000,000,000,000,000), but I don’t want an ugly number (e.g., $000,000,000,000,778,493) with unnecessary leading zeros displayed while the counter is still in the low range (e.g., $100). How can we eliminate all those leading zeros while still having an open-ended currency counter?
Hi Julie,
Sorry, you can’t remove the leading zeros. By design the counter has a fixed number of digits. It would take quite a few modifications to break away from that fixed odometer style as it’s going to have an impact on how the animation is implemented as well as layout.
Hey Rob 🙂 Just wondering if there was a way to connect the counter to a crowd map post submission.
I have a map, where people can submit locations & Id love to have a counter that goes up according to when a location is submitted? Does this plugin do that somehow? I do know some basic coding, if you know a trick on how to do it 🙂
Thanks so much!
I am trying this.. Actually I want manipulated visitor counter.. I am trying to use this counter. I hope this works..
I have installed plugin but i am not getting from where to change variables.. There is nothing in settings
hello great plug inn!
is there a way to integrate it within a FB page? or somehow use it within a fb page?
thanks
No, sorry that’s not supported, this can only be used in WordPress.
Hello,
Thanks for this widget. I use it on LayerSliderWP with shortcode on a layer. The problem is that the counter only appear at first connection on website; after refreshing or reloading the page, the counter disappears.
I don’t understand why. Could you help me please ?
That is the shortcode used: [jellyfish_counter start=1039 end=1039 digits=4 tenths=false]
Thank you in advance,
Best regards,
Hey,
I want a counter where in the countershould only increase and should not be set to its default value again for every visitor or every session as it is getting reset now again and again.
Also when using timestamp parameter counter stops working.
please help.
Thank You
That is what the continuous counter / timestamp is intended for.
Most issues when trying to use a timestamp are caused either an invalid timestamp value or a missing or expired end value. Let me know what parameters you are using.
Hello, is it possible to have the numbers animate when using a timestamp? Could this be included in a future version? Thanks for the widget!
Not possible at present but on the list for the future.
Hi,
Excellent counter. I’m using in widget form (to put it in sidebar), not shortcode, so I don’t know how to set a “timestamp” value in widget. The reason is that I want to count up the number of days from a specific date in the past, so I need to set the timestamp to that date in past. In widget I can only the “start” value, any suggestion
When using the widget counter the timestamp is set to the current time when you save the widget. To do what you want you’ll have to work out what value your counter should be now and enter that as the start value. Ensure you check the continuous mode checkbox in the widget settings and save.
Any way to slow down the animation on a continuous counter? I have a counter that’s increasing by 1 every 8 seconds but would like to show the number rolling over for the whole 8 seconds. Is this possible?
Sorry, that’s not possible in the current version
I’m trying to use the timestamp option but the counter does not start. What is the latest working/tested WP version?
I’m using [jellyfish_counter start=1 end=99999 interval=2 timestamp="2017-01-01 01:00:00"] and it shows 099999
When using [jellyfish_counter digits=8 start=1 timestamp="2017-02-04T24:00"] it shows 00000000
I only test the preview, does that matter? I’m a Noob to WordPress.
Thanks in advance.
The plugin hasn’t been updated for a while but’s it’s working without issues here on the current WordPress (4.7.2 at the time of writing)
It looks like the first example as working correctly as it would only take a few days to reach the end value so it would have effectively stopped counting around the 3rd or 4th Jan 2017 (just a rough guess based on seconds)
Second version would work if you add an end value as well , for some reason that is a requirement for a counter with a timestamp, I should probably change that at some point as there is no real reason why it requires it. Maybe something like
[jellyfish_counter digits=8 start=1 end=99999999 timestamp="2017-02-20 00:00" ]
Still works with 5.2.3 …
Hi,
I would like to count number of clicks for a checkbox for different users and show the total. Would that be possible with this plug-in?
Thank you
No, sorry that’s not currently supported. Maybe in a future version.
hi there Rob and thank you for this amazing plugin. Still works on latest version of WP 🙂
I was wondering if you could give me hints regarding an “issue” im facing with the plugin (not an actual issue, i just cant get the output correct).
So the shortcode i am using has as follow
[jellyfish_counter format="000.000.00" start=312022 end=999999999 direction="up" timestamp="01-10-2017 00:00:01" digit_style="background: transparent; color: black;" flat=true; interval=10 tick_multiplier=0.0158]
and my case has as follow. I want to start from 312022 on Oct. 1, 2017. My interval is 10 seconds and my multiplier is 0.0158. My output should (formated) be someting like xxx.xxx,xxx (example 313.392,808)
An output like xxx.xxx would be fine (integer) but since the multiplier is very small, 2 or 3 decimal values would be nice to see the animation.
Is there any way to do that ?
Thank you in advance and again thank you for this amazing plugin
Jan
Hi Jan,
I think the tick multiplier value may be causing you problems there. If I remember correctly the tick multiplier needs to be an integer >= 1
The counter is really just an integer, any formatting applied to it is is just decorative. There was a reason for this but I can’t recall now!
I suspect you never see any animation because the tick multiplier is being rounded down to 0 while the counter is running on the page.
I’m not sure what result you are looking for, How did you calculate the tick multiplier value?
Is it okay with wordpress version 4.9.8?
Yes, works up to current version (5.3.2 at the time of writing this)
Hi.
Is there a way to get this speed to go faster than its current maximum speed? We want to quickly run up to several thousand.
Also, we want our counter lower on the page. If we use lazy load, will it wait to start until it’s scrolled to and loaded?
No, sorry that’s not currently supported.
Maybe in a future version… the code is rather old now and although still compatible with current WordPress it definitely would benefit from a rewrite to include suggested features and make better used of improved WordPress features and indeed web technologies!
I need 100.000 up per second like this one: https://www.internetlivestats.com/google-search-statistics/ Is that posible? I can’t do it…
It would be difficult to achieve this effect, the plugin was originally designed to animate the digits with a scroll rather than just change the entire number. It’s not really suited to that style of update.
The documentation says to set “Counter type to static” to have a static counter. How do you represent that in the shortcode?
Hi Tim, apparently you’ll need to set both start and end values to the same number. There may be an easier way, it’s been a while since I looked at this code!
With a static counter in a widget, is there an easy way to update the number? I want a non-technical person to be able to update the number. i.e. they shouldn’t have to click through to the widget UI to update the number.
You mention that you can set an ID for each counter, perhaps I could create a shortcode on a page with the same ID as the widget? Would that work?
I can’t think of a non techy UI way of updating it, the options have become somewhat confusing over the years.
If your users are comfortable with shortcodes then you can add a counter as a shortcode, although the options could get complicated.
Is there a way to get the script to reset the counter at midnight, every night?
Fantastic plugin nonethless!
Sorry, this isn’t possible