Conflict with Off-Canvas Sidebars

  • Hello–

    I have narrowed down to a plugin conflict with the Off-Canvas Sidebars plugin. We are using a Genesis base theme, so the the site structure was <body><div class="site-container"> and Off Canvas Sidebars adds <body><div id="sb-site" canvas="container"><div class="site-container"> to the structure. This seems to break the front-end functionality of Footnotes.

    However, I was able to resolve the Footnotes tooltip hover placement by adding css position: relative; to the .site-container div, but this did not resolve not being able to click back and forth between the footnote text and reference section. On some pages, it will move a slight amount and on other pages, nothing appears to happen. This behavior plus the position: relative; fix for the tooltip effect makes me think that the added <div id="sb-site" canvas="container"> is perhaps causing miscalculation in scroll distances? Anyone have any tips?

    An example of it appearing to do nothing when clicking on the footnotes in text or reference area is https://www.metapsychosis.com/reality-is-analog-philosophizing-with-stranger-things-part-one/ (first footnote is at the end of the second paragraph, styled in a shaded circle).

    Thanks!-
    Kayla

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi Kayla,

    The problem is that the new Slidebars version (2.x) changes the default structure of the document.

    Normally tools that auto-slide to location on a page use the body or document as the selector to scroll.
    When you use Slidebars, the scrolling container changes to the first canvas="container" child element (in your case <div id="sb-site" canvas="container">).
    So while the javascript is trying to scroll the body or document this element can’t be scrolled. Instead it should target #sb-site or [canvas=container] (in your case).

    I’m trying to contact to the Slidebars author though without any luck (yet).
    Just like the problem with fixed elements, I’ll probably add a experimental fix for this issue aswell. Not sure how to fix this yet though.

    Reverting to the old slidebars version (0.x) will fix this issue. You’ll need to downgrade your Off-Canvas Slidebars plugin installation to version 0.1.2 for this.

    Sorry I don’t have an easy fix for now, this is all still in development.

    Jory

    • This reply was modified 8 years, 5 months ago by Jory Hogeveen.
    Thread Starter kaylam

    (@kaylam)

    Thank you for your super-fast input, Jory! I think we could downgrade Off-Canvas since we do not need the top/bottom sidebars functionality. I was hopeful maybe there was an easy way I could tell the Footnotes plugin how to use the new container for calculations akin to my css position:relative fix and keep the most current versions of both plugins… but since I am not proficient in javascript, perhaps a downgrade of one is best if this is an unusual situation.

    Thanks again!–
    Kayla

    Hi @kaylam,

    Where did you took the script from? It is part of your theme or is it custom?

    I see that it’s atleast just echo’d in your footer instead of being a included .js file.

    Simply change this:

    
function footnote_moveToAnchor(p_str_TargetID) {        
	footnote_expand_reference_container();        
	var l_obj_Target = jQuery("#" + p_str_TargetID);        
	if(l_obj_Target.length) {            
		jQuery('html, body').animate({                
			scrollTop: l_obj_Target.offset().top - window.innerHeight/2            
		}, 1000);        
	}    
}

    To this:

    
function footnote_moveToAnchor(p_str_TargetID) {
	footnote_expand_reference_container();
	var l_obj_Target = jQuery("#" + p_str_TargetID);
	if(l_obj_Target.length) {
		var container = jQuery('html, body');
		if ( jQuery('[canvas=container]').length ) {
			container = jQuery('[canvas=container]');
		}
		container.animate({
			scrollTop: l_obj_Target.offset().top - window.innerHeight/2
		}, 1000);
	}
}

    It will solve the problem untill Slidebars provides a better solution ??

    Update:

    I’m currently working on this issue by changing the Slidebars CSS and my own JS handling to be more compatible with with common events on the body element.
    https://github.com/JoryHogeveen/off-canvas-sidebars/pull/25

    First results are positive, the only thing I can find is when using a mobile browser on a smartphone the address-bar hides when you scroll down. No problem here, but when a sidebar is active it needs a tiny bit of time to adjust it’s height. Again, no real problem in functionality but it doesn’t look as “neat”.
    Working to find a fix for this.

    Anyhow, let me know if this patch works for you aswell.

    Thanks, Jory

    Thread Starter kaylam

    (@kaylam)

    Hi Jory–

    I will certainly test the patch on our test environment and let you know in the next day or two. Footnotes is another WordPress plugin, but I didn’t know how they were interacting and what the conflict might be since I didn’t see js errors in the console. It was only because I could get the Footnote tooltips functionality back into shape with css that I was able to suspect the #sb-site container had something to do with it. But, I thought it was perhaps a problem on the Footnote end since Off-Canvas Sidebars continued to work as expected. I’m grateful you explained it!

    -Kayla

    Thread Starter kaylam

    (@kaylam)

    Hi Jory–

    I’m sorry, things got backed up and I haven’t actually been able to figure out to apply the patch with the multiple files. I am afraid I will make a mistake making the necessary series of changes manually. I see you have continued to work on it, as more files have been changed. Is there by chance a place to download a patched version of the plugin to help you test it?

    Thank you!-
    Kayla

    Hi Kayla,

    No problem! It’s already great that you would like to help testing.

    And yes, I’ve continued to work on the next release which will also feature a neat shortcode to implement triggers anywhere you like.

    I’m currently busy integrating this shortcode in the WP Editor. (just like links and galleries etc). So the upcomming changes will feature that aswell.

    There are two branches in GitHub. Master (current version) and Dev.
    The dev branche features all latest changes I’ve committed to #25.
    Dev link: https://github.com/JoryHogeveen/off-canvas-sidebars/tree/dev
    There is a green button “Clone or download” to download a zip file for the whole dev version of the plugin.

    Keep in mind that this will add some testfiles for GitHub aswell but these won’t be an issue.
    I’d advice to make a copy of the original plugin folder if you would like to update so you can always revert back easily.

    Thanks again, and if you have the time to test and find anything, let me know!

    Regards, Jory

    • This reply was modified 8 years, 4 months ago by Jory Hogeveen. Reason: Typo
    • This reply was modified 8 years, 4 months ago by Jory Hogeveen. Reason: Another one :)
Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Conflict with Off-Canvas Sidebars’ is closed to new replies.