Strawberry Jellyfish

Hard to say exactly how to fix without what’s knowing what is going on.

Just to rule it out, check that the counter javascript is actually being enqueued properly and referenced in the page source – you should find links to these js files somewhere in your page source:

jellyfish-odometer.js
jellyfish-counter-loader.js

Then I’d suggest establishing if you get any errors showing when viewing the page in your web browser of choice with the developer tools / javascript console open, that might give some clues.

You should at least get a blank counter 000000 showing with
<?php echo do_shortcode('[jellyfish_counter]') ?>

Obviously, you’ll need to add parameters to get it to do what you want, eg:
<?php echo do_shortcode('[jellyfish_counter end=100 ....other params... ') ?>

If it isn’t showing, check the html source of the page. If there is a div in the source where the counter should be looking something like this <div id=”jellyfish-counter-shortcode-14……. then the shorcode is working but something is up with the JavaScript that actually turns the div into the counter. If you don’t get that div at all then something must be wrong with how you are calling the shortcode.

I’m not sure exactly where you want the image to show, so apologies if I’ve misunderstood. I had a quick play in Firefox & Chrome dev tools and I got the background showing at the edges of the page by setting the wrapper background-color to transparent.

If you want to get it showing in the main content area then you’ll have to also make the content div background transparent. I’m not familiar with the theme you are using but I’m guessing that style_dynamic.php is adding some very targeted styles based on theme settings in the admin maybe??

It seems you have to target the css very specifically to override this, this seems to work in devtools:

body.boxed .content, body.boxed .content .container {
    background-color: transparent !important;
}

Thanks for mentioning this, I’ll look into it. Strange it hasn’t be reported before.

That’s actually quite an interesting effect!

You have a pretty loose rule in your style sheet that’s applying a transition effect to all attributes of div, p, a, li and img elements (see line 76):

div, p, a, li, img{transition:all 2s;-moz-transition:all 2s;-o-transition:all 2s;-webkit-transition:all 2s;}

The counter div elements are inheriting this transition and you’re seeing a transition animation of positional changes of the digits that would normally be hidden.

To fix it you’ll have to either not apply the tranistions so globally or override transitions for the counter divs. This css will probably make the counter appear as it should:

.jcw-digit, .jcw-tenth {
  transition: none;
}

You’re right, the counter doesn’t store it’s value in the database it just calculates it realtime so the plugin may not be much use in this situation.

You can control it via JavaScript so it would be fairly easy to make it increment when a button was clicked, but there is currently no way of writing this back to the database.

That looks OK, like I said you can omit the speed param in a continuous counter as it doesn’t do anything, but I doubt that’s what is causing the problem.

No idea I’m afraid, I’ll have to test it out when I get a moment and let you know if I find anything.

I should probably add that the timestamp is in localtime and the one in the example was just the date / time I wrote the post, so substitute with your own.

Hmmmm, shortcode isn’t quite right.

The first widget counter on your page is a continuous counter with an interval of 0.05

The one you’ve made as a shortcode isn’t running in continuous mode which is also why it goes back to the start value on page reload (it’s missing the timestamp) and has an interval of 1, also speed has no effect on continuous counters so ignore that option.

Try something like this:

[jellyfish_counter start=400124910 end=999999999 interval=0.05 timestamp="2015-03-09 18:00:00" digits=9 direction="up" flat="true" format="000,000,000" digit_style="background: transparent; color: red;" tenths="false"]

timestamp is just a date time string reference point so the counter knows when it should have started counting from. A widget creates it’s own internal timestamp when it is created but as a shortcode has no notion of when it was created you need to specify one manually. Anyway, the timestamp just represents when the counter was 0 (or the starting value, 400124910 in your case) so you may want to adjust my example to tweak your desired values… If you wanted to you can make the start value 0 and the timestamp (400124910 * 0.05) seconds in the past and you’d get the same result.

Well that’s probably more info than you needed, play with the example I gave above and tweak your timestamp or start value as desired that should do the trick.

I was going to suggest looking at that example you mention for hints but looks like you had problems with that, anything specific?

Looks like you probably want to style the div that wraps all the digit divs that has a class of .jcw-odometer-div

Anyway an example probably illustrates this better, I just put this one together, the second example on this page is probably close to what you want:

https://demo.strawberryjellyfish.com/2015/03/06/round-counters/

Or if you want to use an image as a background, have a look at the last example on this page:

https://strawberryjellyfish.com/adding-borders-to-a-jellyfish-counter/

Glad we got there in the end ??

Ok, well I installed adament free version 1.2 onto a basic WordPress 4.1 install with most recent Jellyfish Backdrop plugin 0.6.8

See here https://demo.strawberryjellyfish.com/jellyfish-backdrop/

It appears to work fine in all browsers I have tried including latest Chrome on windows and osx, although I did set HTML container ID/class to #content rather than body.

If that does,’t work for you, you must have some customisations or other plugins that are interfering with it.

Hope taht helps

Strange, it appears to work making the change live in Chrome developer tools, maybe something else is overriding it.

It’s difficult to diagnose further from this end I’m afraid.

That should have been version version 1.4.2 not 0.6.7

Doh!

Similar to the otehr problem, adding this to your style sheet should fix it:

body {
  position: relative;
}