Divi Fullwidth 'Draggable' Header - Combining jQuery 'draggable' interaction and Css in our Premium Layout

SUGGESTED POSTS

The following article assumes you have already read the articles on the side. Take a look!

The jQuery UI Powers and How to include it in your Divi Website

This Monday we launched on DiviCake Marketplace ( by the way if you are interested hurry up, until tomorrow you can enjoy 30% discount on all products on DiviCake! ) our new Premium layout: Fullwidth ‘Draggable’ Header.

It’s a Premium layout, so for obvious reasons we won’t explain all the steps and codes needed to reproduce it, however we want to give you a sneak peek on how we realized it and in particular how we used the ‘.draggable’ jQuery UI interaction in combination with the magic of Css.

So, let’s get started!

jQUERY UI INTERACTIONS

In our previous post we already talked about jQuery UI project in more detailed way. In this post we will focus on Interactions and on the ‘.draggable’ one in particular.

This interaction will allow us to make every html element ‘draggable’, moving it on the screen where we want, on vertical or horizontal axis, in a fluid way or not and so on: all depends from the options we will set in our ‘.draggable’ method.

MAKE THE SCROLL ICON ‘DRAGGABLE’

So, grounding on our Premium layout let’s see how we can make ‘draggable’ the scroll icon of a Fullwidth Header module.

First of all we have to go to Theme Options -> Integration -> <head> (or you can add all the code in a Code module in your post/page) and include the jQuery UI (Cdn) as we have seen in our previous post. Then we can add a new jQuery script, targeting our Scroll Icon and make it ‘draggable’:

// Include jQuery UI and add script

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js">
//SCRIPT FOR INCLUDING jQUERY UI AND DRAGGABLE METHOD
</script>

<script type="text/javascript">
 // SCRIPT FOR MAKE SCROLL ICON DRAGGABLE
 jQuery(document).ready(function() {

 var icon = jQuery(".full_icon .scroll-down");

 icon.draggable({ });
 });
</script>

However we want to make the icon draggable only on the x axis (horizontally) and we want, for example, to change the color of the icon while dragging it; so we can write something like:

// jQuery draggable code

<script type="text/javascript">
 // SCRIPT FOR MAKE SCROLL ICON DRAGGABLE
 jQuery(document).ready(function() {

 var icon = jQuery(".full_icon .scroll-down");

icon.draggable({ axis: "x",
 scroll: false,
 drag: function() {
 icon.css({
 "color": "blue"
 });

 }
 });
 });
</script>

And we get a similar result:

// Draggable Icon color on Start Position

// Draggable Icon color on dragging

LINK THE ICON POSITION WITH CSS: A REAL EXAMPLE

Finally – and here comes the magic of combining jQuery UI and Css – we can grab our Icon position thanks to the Javascript ‘.position’ method and link some css like the ‘display’ property according to specific position values:

// code to put inside the .draggable method

if (position.left >= 250) {
 content.css({
 "display": "block"
 });
 } else {
 content.css({
 "display": "none"
 });
 }

The final result will be something like this:

// Text is on the left on Start Position

// Text disappears when dragging to the left

FINAL THOUGHTS

Obviously there’s a lot of further and more technical code to get a final result like our Fullwidth ‘Draggable’ Header layout and if it fits your needs you can just buy it without touching any code. However the basic core idea behind the design is that and we hope you can find it useful for your ideas and your designs.

See you next post!