In this tutorial I show how we can slide out the contents of a widget area when visitors scroll to the bottom of pages in Genesis. In this example we are going to show Genesis eNews Extended plugin's widget in the slide out box. The box will slide back off the screen when the visitor scrolls up. Clicking the Close button will close the slide out box as expected. The solution is based on the Ultimate NYTimes jQuery Slidebox. Live Demo (scroll down to the bottom of page to see opt-in slide out) Summary of steps:
- register a custom "Slide Out Box" widget area
- load the required jQuery code in footer
- output the html of "Slide Out Box" widget area using
- populate the "Slide Out Box" widget area
Step 1a) Create a file named say, end-of-page-slide-out-box.js in child theme's
jsdirectory (create, if not existing) having the following code:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.