The plugin used in this tutorial is jQuery UI widget.
You can download from repository directly or from the following link
Following code will go into integration section;
Divi > Integration > Above Head
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.17/jquery.scrollify.min.js"></script>
Following code will go into jQuesy script;
Dashboard > Settings > Jquery UI widget
jQuery(document).ready(function($) {
$.scrollify({ section : ".et_pb_section", });
});
Instead of effecting all sections, is there anyway we can have it execute on sections with a particular class?
Hi,
Sorry for late reply. I was on holidays.
Yes it is possible.
Just give your section a unique class and in jQuery change .et_pb_section to that class.
Example:
$.scrollify({ section : “.et_pb_section”, });
on above line inside inverted commas give your class and that’s it.
Now function will work only on your defined class.
Thanks
I tried the above, but it breaks hides all other content (ie – the scrolling gets screwed up; can’t view any content BUT the sections containing the set class).
Any ideas on a fix?
Hi Jeremy,
Can you share your url so I can have a look at issue.
Thanks
In $.scrollify({ section : “.et_pb_section”, }); I want to make two different class. How can I do that?
Hi,
I want this feature both in desktop and in mobile. And I need to put two classes for that. One for desktop and one for mobile. How do I do that?
You have to assign your custom classes to sections so that you system can differentiate between them and then you can duplicate js class like this
jQuery(document).ready(function($) {
$.scrollify({ section : “.custom_section_1”, });
$.scrollify({ section : “.custom_section_2”, });
});
Once I am duplicating js class the whole scrolling function in desktop is returning to default behavior which is normal scrolling.
I am using this in Custom jQuery Code:
jQuery(document).ready(function($) {
$.scrollify({ section : “.section-custom” , });
$.scrollify({ section : “.section-custom-mob” , });
});
Using .section-custom for desktop sections and .section-custom-mob for mobile sections.
hmm.. in this case have to check your issue in personal.
How do you propose doing that?
Hi, I can not at the moment … too busy in other projects. Sorry for this 🙂