code tweak help needed with https://squarestud.io/ plugin (they are not responsive)

Site URL: https://saxophone-strawberry-bx4g.squarespace.com/glossary

login is:  tbs

Guys I am looking to fix why this happens... It is an accordion plug in from squarestud.io (paid for.. ugh) and it leave a 'gap' as a visible black bar between the section and the footer.

Before the code screenshot:

After the code injection:

Here is the code in question (supposed to go INTO the site footer) but note that I only want to target a single page:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
init();             //Start the code when the page loads
  
})

function init(){
    $('.sqs-block-markdown').nextUntil('.sqs-block-markdown, .sqs-block-code').delay(1000).slideUp();      //Your code (wrapped in a function)
    $('.sqs-block-markdown').unbind().click(function(){
        $('.sqs-block-markdown').not(this).nextUntil('.sqs-block-markdown, .sqs-block-code').slideUp(),
        $('.sqs-block-markdown').not(this).removeClass('activedrop'),
        $(this).nextUntil('.sqs-block-markdown, .sqs-block-code').slideToggle();
        $(this).toggleClass('activedrop')
    });
  $('.sqs-block-markdown').css('cursor','pointer');;
}

document.addEventListener('pageChange', function(){             //When the change page event fires due to ajax
    init();                                                     //Call the code again
});

/*This stuff listens for an ajax page change*/
window.onload = watch;
function watch(){MutationObserver=window.MutationObserver||window.WebKitMutationObserver;var a=new MutationObserver(function(a){for(var b=0;b<a.length;b++){var c=a[b];if("attributes"===c.type){var d=new Event("pageChange");document.dispatchEvent(d)}}});a.observe(document.body,{attributes:!0,attributeFilter:["id"]})}
</script>
<style>
  .sqs-block-markdown {
    border-bottom: solid 1px #ddd;
    cursor:pointer;
  }
  .sqs-block-markdown .sqs-block-content:before {
    content: "+";
    float: right;
    font-size: 150%;
    line-height: 120%;
    color: #aaa;
    font-weight: 100;
  }
  .activedrop .sqs-block-content:before {
    content: "-" !important;
    float: right;
    font-size: 150%;
    line-height: 100%;
    color: #aaa;
    font-weight: 100;
  }
</style>

Help please!!  no clue why this is happening.

I don't think this is the fault of the plug-in/developer as more of a problem how SS implemented the design of the template. I've seen several instances of black bands popping up in some circumstances.

To workaround the issue in your case I suggest adding the following to Design > Custom CSS.

body {

  background-color: white;

  }

Let us know how it goes.

@creedonYou nailed it!  I don't know ANYTHING about coding... so I just tossed your code into the end of my code and all worked as hoped... let me know if I should have this placed elsewhere within the code....

That will work fine. If you do come across the issue on another page then you could move that into Design > Custom CSS or just add it to the page like you did for this one. Which ever works for your needs.

@creedonso the issue is happening on another page. (my index page)

I put just your code above in the page advanced header and it does not sort that black band out.

what do you suggest?

and if I have other pages with say a non white background, do I have to address each page locally?  (not all pages will have a white background, so assuming not to apply a global site fix?

Let me know what you suggest.  I can see that the page you fixed even on mobile when you pull down to refresh, the back is white.. looks great.. while the home page which does not show the black band has a black background when you pull down to refresh.. and same with the page (index) which has both the black band and the background on refresh.

Very confused.

27 minutes ago, tbracher said:

so the issue is happening on another page. (my index page)

I put just your code above in the page advanced header and it does not sort that black band out.

what do you suggest?

Did you wrap it in a style tag?

<style>

  body {
  
    background-color: white;
    
    }
    
  </style>

I used the code here locally for your index page and it fixed it right up.

To double check that it's working or not. Bring up that page in an Incognito window. Sometimes things that don't appear to be working will for your site visitors.

51 minutes ago, tbracher said:

and if I have other pages with say a non white background, do I have to address each page locally?  (not all pages will have a white background, so assuming not to apply a global site fix?

If you are going to have non white background pages then you may want to address each one as needed. Or, if a majority of your pages are going to be white background then you could apply the fix to Custom CSS and then only address the non white background ones with Page Header Code Injection.

It's a personal preference on how you want to organize your code.

43 minutes ago, tbracher said:

I can see that the page you fixed even on mobile when you pull down to refresh, the back is white.. looks great.. while the home page which does not show the black band has a black background when you pull down to refresh.. and same with the page (index) which has both the black band and the background on refresh.

Instead of targeting body we could go for #sitewrapper.

<style>

  #siteWrapper {
  
    background-color: white;
    
    }
    
  </style>

Does that make the pages behave more consistently?

@creedonthank you for this... so Its probably me, I don't understand where to place the site wrapper fix. (Your advice to wrap the code in the <style> code worked on each page I dropped that into the header.)

I like the idea there is a global fix, so long as this does not make problems for new pages I add with different colored backgrounds?

I guess you can say its not clear why this is happening in the first place which is sorta annoying. I guess from the accordion plug-in?  If so then it is what it is as I need that functionality.

That said, I want the details to be right and consistent, so the wrapper being consistent is important to me.

Know that I would like to have a few pages have a darker or other color background (Actually would like to have even some sections shift (fade if you know how!) between dark, middle and white as you scroll through the page (like THIS site).  

To save your time, please be very literal with your advice on where and how to place the code, I will do exactly as you suggest.  :0

🙏

10 hours ago, tbracher said:

I guess you can say its not clear why this is happening in the first place which is sorta annoying. I guess from the accordion plug-in?  If so then it is what it is as I need that functionality.

I don't know exactly what is happening. My theory is that in some circumstances a page section is to short to cover up the body background color behind it. Hence the black background shows through.

In some cases it happens naturally in that the user didn't do anything to cause the background to show through, i.e. no custom code. So in those cases I consider it an SS bug.

In other cases like your use of the accordion, the issue presents because the default height of the elements becomes shorter than SS coded for. Hence we need to try to workaround the issue.

I don't know if my advice will cover all your use cases now and in the future. Here is my current recommendation.

Replace the following CSS you have already installed...

<style>

  body {
  
    background-color: white;
    
    }
    
  </style>

...with...

<style>

  #siteWrapper {
  
    background-color: white;
    
    }
    
  </style>

Only add this to pages where you notice the black band issue. Add it to Page Settings > Advanced > Page Header Code Injection. Change the color to suit the color of your pages.

When it comes to having multi-colored page sections on a single page then this workaround may not work. I can't hazard a guess until I see what the issue is for that particular case.

11 hours ago, tbracher said:

Know that I would like to have a few pages have a darker or other color background (Actually would like to have even some sections shift (fade if you know how!) between dark, middle and white as you scroll through the page (like THIS site).  

I suggest starting a new thread when you are ready to tackle this effect.

Thank you for helping end 2020 on a high!  Circling back on the background transitions... thanks a ton for the help I needed. Appreciate your kindness in support.