Enter jQuery. jQuery is a lightweight Javascript library included with every Divi install that helps simplify implementing common Javascript tasks with very little code. This coupled with some of the other Javascript libraries included with Divi, really opens the door to a ton of creative posibilities.
Don’t worry if this sounds complicated, in this post we are going to walk you through an overview of a piece of jQuery code, and then show you two examples of how you can start writing your own creative jQuery functions that are ready to wow your clients.
So, let’s start by taking a look at a few ways we can include jQuery code into our Divi website.
How to add some jQuery code to Divi
There are technically 3 ways to add jQuery code to Divi, but we will only be covering the 2 most common methods here but will mention the 3rd. The method you choose will depend on where you would like the code to run.
Divi Integration Tab
This is where you would add your jQuery code if you want it on every page throughout your website. An example of this might be if you wrote a function that changed the background color of your site header as the user scrolls through a page.
To find the Integration Tab you browse to your Divi Options page, then click on the Integration Tab. The code will be placed between open and closing <script> tags inside the <head> of your site.
Divi Code Module
The code module is great when you are adding some jQuery that will only impact a single page on your site. The example we will cover is having fixed blurbs appear and disappear on screen as we scroll up and down a page. You can add the code module to any row on the page your want the jQuery to be executed on. Similar to the integration tab, this code needs to be placed between open and closing <script> tags inside the code module.
Quick overview of a jQuery function
Let’s take a look at some jQuery code that will add a class to an element once the user has started scrolling.
<script> </script>
These are always required to “open” and “close” any Javascript or jQuery code that you enter into either the Integration Tab or Code Module. It just tells the browser that you are about to write some code. The “type=“text/javascript” is just us telling the browser that this is Javascript code. This is required.
jQuery(document).ready(function( $ )
This basically means that our code will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. This is required.
function check_from_top_de()
Now we are getting to some actual custom code. This is where we create our function, the piece of code that will execute to do something cool on our site. We named our function check_from_top_de, because we are going to see how far the user has scrolled then do something, but you can name this whatever you want.
var scroll = $(window).scrollTop();
We have created a variable called scroll which gets assigned the distance that we have scrolled from the top of the page. This value gets returned in pixels which we can then use to apply some logic to add our class to our target selector.
if (scroll >= 300)
If the user has scrolled down the page 300 pixels or more
$("#your-target-element").addClass("class-to-be-added");
So first we point out (or select) which element we want the class to be added to, then we tell it the class name that we are adding. You would replace those with your own selectors and classes, but you get the idea.
else
If the user has not scrolled down 300 pixels or more, we want to do something else.
$("#your-target-element").removeClass("class-that-we-added");
We are going to remove the class we added if the user scrolls back up on the page.
check_from_top_de();
This runs our awesome function that we just coded as soon as the browser is ready to run code. Remember, we gave our function the name check_from_top_de, so enter your function name if you used a different one.
$(window).scroll(function()
If the user is busy scrolling, we also want to check how far they have scrolled, so we need to run our function as the user scrolls.
check_from_top_de();
Our function will be run if the user is detected scrolling on the page.
Practical applications of adding jQuery to your Divi site
Up next is two examples with code of using what we just learned to add some jQuery to your Divi site.
Changing the site header color on scroll
In this example, we wrote a function that changes the background color of our site header as the user scrolls through a page.
Preview:
Take a look at the code below, then we will briefly cover what you need to do to add this to your site.
$("#main-header").addClass("change-bg-color") This code is going to look for the #main-header element on our site and then add the class “change-bg-color” to that element. This CSS class is what will handle changing the color. You can call this class anything, just remember, it is good to use descriptive names.$("#main-header").removeClass("change-bg-color") We want to restore the original color of the header when the user has scrolled up, so best to remove the class that changed the color..change-bg-color {
background-color: springGreen!important;
} This code is pretty self-explanatory, we are just changing our background to “springGreen”. We added the !important operator to override any other colors assigned to the header backgroundYou can do so many other things by simply adding CSS classes to elements. This should really get the gears turning. With just one line of CSS we can even change the logo on scroll.
Add the following line of code below the CSS you just saved into the CSS box in your Divi Theme Options.
.change-bg-color #logo {
content: url('https://your-image-url/logo.png'
} This single line of code will select the #logo in the element you added the .change-bg-color class to, in this case our #main-header. We then change the URL to that logo image to the one we want to display on scroll. Check out the awesome result below.
Making fixed blurb modules appear and disappear on scroll
For the second example we made some cool blurbs that fade in as you scroll over three fullwidth header modules, then fade out again as you scroll up.
Preview:
Take a look at the code below, then we will briefly cover what you need to do to add this to your site.
-
- Add 4 modules/rows/section on the page that will trigger our waypoint code
- Add #start-top to the first element, and #module-one, #module-two, #module-three to the subsequent elements
- Create a 3-column row at the bottom of your page and add a blurb to each row
- Set the “position” setting for this row to “fixed” and “z-index” to “9”
- For the blurbs, give the first blurb assign #one, second #two, third #three and add “display: none;” to the “main element” box in the custom CSS
$('#module-one').waypoint(function() This is telling the Waypoint.js library which module we are watching for the scroll.$('#one').fadeIn(); Here we are telling Waypoint.js that we want the element selected by #one to be faded in once #module-one has been scrolled into view.{offset: '25%'}); Lastly, the offset checks how far we need to have scrolled from the top of the window to execute the code in our waypoint. This can be expressed in either a percentage or pixels. We went with 25%.Conclusion
Adding jQuery to your Divi site is a powerful tool that now firmly sits on your belt. We only scratched the surface on what is possible when using jQuery and Divi together, but hopefully, this was helpful in showing what is possible. Keep an eye out, because we intend to release some more posts about adding features and effects to your Divi sites with the power of jQuery.
0 Comments