Community Forums › Forums › Archived Forums › Design Tips and Tricks › Sticky Sidebar Widget – Smart Passive Income Theme
Tagged: Sticky Sidebar, sticky widget
- This topic has 30 replies, 2 voices, and was last updated 7 years, 6 months ago by Brad Dalton.
-
AuthorPosts
-
September 23, 2016 at 4:03 am #193575rogerpParticipant
I am setting up a site for a client with the Smart Passive Income Theme
On the original version used by Pat he had a sticky sidebar widget which after about 10 seconds of scrolling placed a sidebar which stuck as you scrolled.
I want to implement this feature as the client has asked for it specifically when I said we can use this theme.
But how?
Thanks
Roger
Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the FutureSeptember 23, 2016 at 4:22 am #193577Brad DaltonParticipantSeptember 23, 2016 at 5:38 am #193580rogerpParticipantThanks Brad,
The Q2wd does what it says on the tin, but have to be careful about which widgets you stick as they just overwrite one below.
The one used on the Smart Passive Income Blog was immense but suspect this is custom code
http://web.archive.org/web/20160406064855/http://www.smartpassiveincome.com/blog/
It runs through the sidebar then when you get to the end throws in some custom content which sticks for the rest of the way down the page.
Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the FutureSeptember 26, 2016 at 4:02 am #193709rogerpParticipantI have found this tutorial which seems to be exactly what I am looking for to make the last widget in the sidebar fade in and then stick
How to Fade In the Last Sidebar Widget in WordPress using jQuery
However I need to find the sidebar element for div tag
This is what I believe is the correct one div#genesis-sidebar-primary
However it is not working, so this was my first checkpoint to make sure the div id for the sidebar was correct
Thanks
Roger
Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the FutureSeptember 26, 2016 at 4:07 am #193710Brad DaltonParticipantSeptember 26, 2016 at 4:07 am #193711rogerpParticipant//* Enqueue Scripts and Styles
add_action( 'wp_enqueue_scripts', 'spi_enqueue_scripts_styles' );
function spi_enqueue_scripts_styles() {wp_enqueue_style( 'spi-fonts', '//fonts.googleapis.com/css?family=Roboto:300,400,400italic,700,900', array(), CHILD_THEME_VERSION );
wp_enqueue_style( 'dashicons' );wp_enqueue_script( 'spi-responsive-menu', get_stylesheet_directory_uri() . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0', true );
$output = array(
'mainMenu' => __( 'Menu', 'smart-passive-income-pro' ),
'subMenu' => __( 'Menu', 'smart-passive-income-pro' ),
);
wp_localize_script( 'spi-responsive-menu', 'SPIL10n', $output );
wp_enqueue_script( 'stickywidget', get_template_directory_uri() . '/js/wpb-fadein-widget.js', array('jquery'), '1.0.0', true );
}Also checking that this is the right place to enque the javascript
Regards,
Roger
Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the FutureSeptember 26, 2016 at 4:11 am #193712Brad DaltonParticipantChange
get_template_directory_uri()
to
get_stylesheet_directory_uri()
September 26, 2016 at 5:57 am #193717rogerpParticipantThanks for your replies Brad,
Still no go - I have tried every option in the js file
var sidebarElement = $('div#genesis-sidebar-primary');
var sidebarElement = $('div#sidebar-primary');
var sidebarElement = $('div#.sidebar-primary');
var sidebarElement = $('div#primary');In the tutorial they are not using a . before?
The theory is the last widget will fade in and stick.
Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the FutureSeptember 26, 2016 at 7:42 am #193718Brad DaltonParticipantSeptember 26, 2016 at 8:00 am #193719rogerpParticipantGET http://www.rogerperkin.co.uk/wp-content/themes/smart-passive-income-pro/js/wpb-fadein-widget.js?ver=1.0.0
(index):275 WPP: OK. Execution time: 0.003449 secondsThis is all that shows?
Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the FutureSeptember 27, 2016 at 2:35 am #193737Brad DaltonParticipantThe js file should be uploaded to your child themes js folder. Please check that it is and that its not in the Genesis folder.
September 27, 2016 at 4:50 am #193751rogerpParticipantYes, this is in the child theme -
jQuery(document).ready(function($) {
/**
* Configuration
* The container for your sidebar e.g. aside, #sidebar etc.
*/var sidebarElement = $('div#genesis-sidebar-primary');
// Check if the sidebar exists
if ($(sidebarElement).length > 0) {// Get the last widget in the sidebar, and its position on screen
var widgetDisplayed = false;
var lastWidget = $('.widget:last-child', $(sidebarElement));
var lastWidgetOffset = $(lastWidget).offset().top -100;// Hide the last widget
$(lastWidget).hide();// Check if user scroll have reached the top of the last widget and display it
$(document).scroll(function() {// If the widget has been displayed, we don't need to keep doing a check.
if (!widgetDisplayed) {
if($(this).scrollTop() > lastWidgetOffset) {
$(lastWidget).fadeIn('slow').addClass('wpbstickywidget');
widgetDisplayed = true;
}
}
});
}
});
Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the FutureSeptember 27, 2016 at 5:40 am #193754Brad DaltonParticipantSeptember 27, 2016 at 6:24 am #193756rogerpParticipantAhhh! That could be the problem
filename is wpb_fadein_widget.js and the enqueue script is wanting wpb-fadein-widget.js
Renamed js file and now it is accessible
Still not working though,
But one step forward..
Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the FutureSeptember 27, 2016 at 6:36 am #193757rogerpParticipantWhen I debug the page it fails to load this
http://www.rogerperkin.co.uk/wp-content/themes/genesis/js/wpb-fadein-widget.js?ver=1.0.0
But the functions.php has this on the enqueue - so is it defaulting to the parent theme?
wp_enqueue_script( 'stickywidget', get_stylesheet_directory_uri() . '/js/wpb-fadein-widget.js', array('jquery'), '1.0.0', true );
Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the FutureSeptember 27, 2016 at 10:00 am #193765Brad DaltonParticipantSeptember 27, 2016 at 10:14 am #193766rogerpParticipantSo what is the correct path, as this really breaks it
wp_enqueue_script( 'stickywidget', get_stylesheet_directory_uri() . '//rogerperkin.co.uk/wp-content/themes/smart-passive-income-pro/js/wpb-fadein-widget.js', array('jquery'), '1.0.0', true );
the child theme is in the same directory as genesis?
Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the FutureSeptember 27, 2016 at 11:09 am #193768Brad DaltonParticipantwp_enqueue_script( 'stickywidget', get_stylesheet_directory_uri() . '/js/wpb-fadein-widget.js', array('jquery'), '1.0.0', true );
And add the wpb-fadein-widget.js file in your child themes js folder not genesis.
Never touch Genesis.
September 27, 2016 at 2:49 pm #193777rogerpParticipantThanks Brad,
now not getting any errors on page load., but the last widget is still not fading in... and sticking?
Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the FutureSeptember 28, 2016 at 2:17 am #193794Brad DaltonParticipantWorks when i test it but not a complete solution because the last widget in the sidebar remains fixed even after the footer widgets so that means the code needs extending.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.