Customizing your Webflow site with jQuery

#beginners #jquery #design #webdev

If you’re a designer or web developer and you haven’t yet given Webflow a try, you’re missing out… especially if you’re familiar with jQuery.

First things first. What is Webflow?

Webflow is a unique website building platform used by over a million designers/developers to design modern web experiences with minimal to no code. The Webflow interface allows you to design highly customized web layouts, CSS animations, and frontend visuals in HTML, CSS and JavaScript, without actually having to write every line of code yourself. Also, Webflow has an amazing cadre of curated tutorials via Webflow University and a supportive community of designers/developers that can be found on YouTube, blogs, and the like.

So, why jQuery if Webflow writes the code for us?

jQuery is a rich, popular JavaScript library that makes things like DOM manipulation and event handling much simpler and easier to read. Also, Webflow automatically loads jQuery into all web projects so you don’t even have to import it.

In my experience, it is totally possible to design a great website in Webflow without writing a single line of code.

But… There are a number of instances when it’s easier, faster, and better to write just a few lines of jQuery. There might be situations where your design vision or site functionality would otherwise require a scale back without a bit of code. We’ll walk through a few Webflow-specific examples in a bit.

But… Why jQuery when we could just write JavaScript?

Okay, here’s a quick demo. Let’s say you want to add a ‘click’ event listener to a <button> element. When the button is clicked, text is added to a <p> paragraph element.

As opposed to writing something like this:



const paragraph = document.getElementById('appear-on-click');

document.querySelector('button').addEventListener('click', () => {
  paragraph.innerHTML = "Button has been clicked with JavaScript!"
})

You could write less code with arguably more readable jQuery… for instance:



const $paragraph = $("#appear-on-click");

$("button").click(() => {
  $paragraph.text("Button as been clicked with jQuery!");
});

Again, Webflow already loads the jQuery library on every site automatically.

Before the Click Event:

After the Click Event:

Disable Body Scroll with Open Menu Click

First use case for using jQuery in Webflow:

When creating a custom navigation menu in Webflow, there are a few features you’ll likely want to add to the menu that make the navigation experience more user friendly. One of the most common is to disable page scroll while the navigation menu is open. Here’s how you could handle that.

CREATE ‘scroll-disabled’ CLASS: Inside the Webflow designer, select the body element. You’ll want to add a class of ‘scroll-disabled’ to the body element. Then set that class to Overflow hidden. Then REMOVE that class by clicking backspace/delete within the style selector.
ADD jQuery TO PAGE: Inside the Webflow designer toolbar within the section titled ‘Before </body> tag’, just drop this jQuery function. Be sure to replace the placeholder class name below with the class name of your button. Just click publish in the Webflow designer, and voila!



// replace '.menu-btn-class-here' with the class name of your menu button element and use the jQuery .click method to add a ‘click’ event listener
$(".menu-btn-class-here").click(() => {
 // use jQuery .toggleClass method to add and remove the 'scoll-disabled' class on click
  $('body').toggleClass('scroll-disabled')
})

FYI: Custom code changes added before the page’s closing body tag section will NOT appear in preview BUT will be made to the live staging site after being published.

Close Menu when User Clicks Off Menu

Second use case for using jQuery in Webflow:

Here’s another custom navigation menu feature that is easy to fix with a few lines of jQuery. When creating a custom navigation menu, you’ll want users to be able to close the open menu when they click anywhere outside the menu itself. This provides another way for users to close the menu without actually clicking the close menu button. This really simple feature improves the user experience a ton.

ADD jQuery TO PAGE: Again… Inside the Webflow designer toolbar within the section titled ‘Before </body> tag’, just drop this jQuery function. Be sure to replace the placeholder class names below with your actual class names. Just click publish in the Webflow designer, and voila!



/ Again use the jQuery .click method on the element with the class name of your background div
$(".background-class-name-here").click(() => {
 // replace '.menu-btn-class-here' with the class name of your menu button element
 $(".menu-btn-class-here").click();
})

FYI it’s important that your menu <div> element is not (nested within) a child of the background <div> element as any click on or off the menu element would glitch and close the menu.

There are so many opportunities to upgrade your Webflow site with just a little bit of jQuery. Thanks for reading!

If you’re yearning for more, here are a couple of great resources that I personally reference often:

Timothy Ricks | an amazing Webflow Developer. Here’s a link to his YouTube tutorial on using jQuery in Webflow.
FinSweet | an amazing go-to for everything Webflow. Here’s a link to their page with some great jQuery hacks and tutorials.