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

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’:
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:
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:
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!

SupportHost

You have Successfully Subscribed!

CodeCanyon Plugins

You have Successfully Subscribed!

Elegant Themes

You have Successfully Subscribed!

Try Divi!

You have Successfully Subscribed!

Divi Plugins

You have Successfully Subscribed!

Advanced Blurbs Plugin

You have Successfully Subscribed!

Bloom!

You have Successfully Subscribed!

Divi Cake Layouts

You have Successfully Subscribed!

Divi Cake Plugins

You have Successfully Subscribed!