Archived topic
Block Elements / Hook / Counter with JS and CSS
5 replies · Started by Jan on November 17, 2021
Hi David,
I'm creating a 4-column-counter like this but w/o plugin this time.
The best template I found is this one on CodePen. I stripped-down both HTML and CSS to the very basics that I need for my use case.
The counter function works just fine on CodePen.
However something blocks the counter function on the page even though the Elements hook is active ;-(
- I copied the JS into an Elements Hook (see screenshot) and
- added the HTML to the relevant page (WP block = individual html) and
- added the CSS to the Customizer.
This is the code I added to the page:
CSS
/* WG Counter - Reference page */
body {
margin: 40px 0 0;
}
.counter {
text-align: center;
position: relative;
}
.counter value{
display: inline-block;
position: relative;
text-align: center;
}
.counter h3 {
text-transform: uppercase;
text-align: center;
}
@media screen and (max-width:990px) {
.counter {
margin-bottom: 30px;
}
}HTML
<html>
<head>
<title>counter</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<span class="value">199</span>
<h3>INTERVIEWS</h3>
</div>
<div class="col-md-3 col-sm-6">
<span class="value">61</span>
<h3>VERANSTALTUNGEN</h3>
</div>
<div class="col-md-3 col-sm-6">
<span class="value">27</span>
<h3>PANELS</h3>
</div>
<div class="col-md-3 col-sm-6">
<span class="value">60</span>
<h3>Podcast</h3>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script></script>
</body>
</html>JS
<script>
$(document).ready(function () {
$('.value').each(function () {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 3500,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
});
</script>What do you think is blocking the counter?
Thanks,
Jan
Hi Jan,
Unfortunately, we cannot provide help with custom solutions found online.
Couple things I would point out:
- <script> is usually added in the wp_footer hook unless the solution specify it to be in the wp_head.
- You would probably want this part in wp_head:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
crossorigin="anonymous">- Looks like the solution is loading Bootstrap which isn't a good idea to use with GP. See David's notes here:
https://generatepress.com/forums/topic/advice-about-a-bootstrap-modal/#post-1813285
https://generatepress.com/forums/topic/full-width-section-without-affecting-the-layout/#post-1655625
If you are not comfortable with implementing a custom solution, then I'd recommend going with a plugin.
Thanks for your understanding :)
Hi Leo,
thanks for getting back. Your advise was very helpful. The counter is working now ;-)
In the next step I have removed the Bootstrap and CSS part altogether.
<title>counter</title>
<div class="gb-container">
<div class="gb-inner-container">
<span class="value">199</span>
<h3>INTERVIEWS</h3>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script> Now I'd like to amend the HTML further in order to make it Generate Block standard / nativ (and be able to style the blocks using w/o additional CSS). I renamed the...
- top div class from "container" into "gb-container" and
- the inner div class from "col-md-3 col-sm-6" into "gb-inner-container"
What else is needed for the GP theme to recognize the individual HTML as native GP blocks?
Thanks,
Jan
Hi there,
Why not just build it with GenerateBlocks to begin with?
Instead of the <span class="value">199</span> you can use a Headline Block, then in Advanced > Additional CSS Classes add: value
Great. It works :-)
Many thanks for this advise, David!
Glad to hear that!
