Jump to content

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

Recommended Posts

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:

124108962_ScreenShot2020-12-27at12_57_13PM.thumb.png.4c811f1123994f8d45b8b360a1eee2d7.png

 

After the code injection:

850303665_ScreenShot2020-12-27at12_57_25PM.thumb.png.655e69928939074f36d691ce8c0621ad.png

 

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.

 

Link to comment
  • Replies 12
  • Views 607
  • Created
  • Last Reply

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

@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.

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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?

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

@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

🙏

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.