In the past I showed elements like header and navigation can be made to stick to top of page when the user scrolls past using jQuery script and jQuery.Pin. In this article I show how jQuery Waypoints Sticky Elements shortcut can be used to do the same. Upload waypoints.min.js and waypoints-sticky.min.js to child theme directory/js. […]
jQuery
Adding Flow Slider in WordPress
To view the full content, please sign up for the membership. Already a member? Log in below or here.
Changing WordPress widget title heading tag using jQuery
On a site that I worked on today it was required to change the widget title HTML output from <h4 class="widget-title widgettitle">Meta</h4> to <h2 class="widget-title widgettitle"><span>Meta</span></h2> for a specific widget for styling it uniquely. i.e., before: after: While it is possible to customize title markup for all widgets in Genesis using genesis_register_sidebar_defaults filter, I do […]
Scroll animations in WordPress using Animate.css, Jack In The Box and Waypoints
In this article I share my findings on animating elements as they come into view in WordPress. Yesterday I came across Jack In The Box. From the github page: Reveal CSS animation as you scroll down a page. By default, you should use it to trigger animate.css animations. Jack In The Box is kind of […]
Implementing Responsive-Tabs jQuery script in WordPress
Pete Love’s Responsive-Tabs jQuery script can be used to display content in tabs at regular desktop widths which automatically collapses to a accordion view at a specific width (767px by default, configurable). Follow the steps below to use it in your WordPress site. First, screenshots. 768px and above: 767px and below: Screencast: Step 1 Upload […]
Cross-browser animations using Animate.css
To view the full content, please sign up for the membership. Already a member? Log in below or here.
Adding a responsive side menu in Genesis using Sidr
In this article I show how Sidr can be used to display Primary Navigation menu items in the left side when a hamburger menu icon font link is clicked. I am using Genesis Sample as the active theme in this example. Here’s the flow: Primary navigation bar appears in its entirety at screen width of […]
Using jQuery.Pin to make any element sticky in WordPress
jQuery.Pin is an excellent jQuery script to pin any element to the top of a container. In this article I shall go over implementing jQuery.Pin in WordPress to make Primary Navigation menu and a widget in News Pro (a Genesis child theme) stick to the top of screen as the rest of the page content […]
How to fade away an element when scrolling down and fade it back when scrolling up in WordPress
In Agency Pro, a Genesis child theme the welcome text content gradually fades away when scrolled down and appears in full opacity when scrolling back up. In this article I am going to provide an example of using Agency Pro’s JavaScript in Minimum Pro. This can be applied in any WordPress theme. Screencast: In the […]
Using Animate.css with Waypoints jQuery
To view the full content, please sign up for the membership. Already a member? Log in below or here.
Recent Comments