Block Elements / Hook / Counter with JS and CSS

This topic has 5 replies, 3 voices, and was last updated 4 years, 4 months ago by David.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
November 17, 2021 at 2:46 pm #2008507
Jan
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
November 17, 2021 at 3:06 pm #2008523
Leo
Staff
Customer Support
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 🙂
November 18, 2021 at 2:46 am #2008983
Jan
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
November 18, 2021 at 5:04 am #2009162

David
Staff
Customer Support

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

November 19, 2021 at 1:36 am #2010535

Jan

Great. It works 🙂

Many thanks for this advise, David!

November 19, 2021 at 6:01 am #2010851

David
Staff
Customer Support

Glad to hear that!
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

[Resolved] Block Elements / Hook / Counter with JS and CSS

Popular Articles

[Resolved] Block Elements / Hook / Counter with JS and CSS

Popular Articles

Start building better websites today.