melaniejaane

@Beyondspace thanks for looking into this! 😊

www.beehyve.health/our-team
password:abc

On 7/25/2021 at 4:48 AM, JButler said:

Thanks Tuan. Sqspthemes provided me with a script that work's for the entire summary block:

window.Squarespace.onInitialize(Y, function(){
  openBundleLinksInLightbox('.summary-title[href]:not(.lightbox-link),.summary-title-link[href]:not(.lightbox-link),.summary-read-more-link[href]:not(.lightbox-link),.summary-thumbnail-container[href]:not(.lightbox-link)');

I'm using Lazy Summaries with this plugin though, and annoyingly the lightbox only seems to work for the first 30 posts in my summary and not those loaded by the Lazy Summaries plugin. Is there an obvious way I could get this script to read all the posts in my summary and include those that Lazy Summaries have included?

Hi @JButler I tried adding this script to footer and page code injection but doesn't seem to work. Did you add the script somewhere else or change any settings in lazy summaries to make this work? 

Thanks 🙂 

On 12/8/2022 at 3:42 AM, Beyondspace said:

This is the standard layout of Dom on summary block: 

The 'summary-metadata--primary' and 'summary-metadata--secondary' are not on the same level with the title and excerpt.

If you require this order, we need to implement js code to change some Dom element on summary block and set the right Css style for it.

Thanks for your insight @Beyondspace 
Is it relatively easy to set up JS code like this? I'm familiar with CSS and html but novice with JS. Do you know of any similar snippets I could use as a base? Thanks so much 🙂 

On 2/8/2021 at 10:52 AM, creedon said:

 

Add the following to your code block.

<script>

  $( ( ) => {
  
    // change tab when URL hash changes
    
    $( location.hash ).click ( );
    
    $( window ).on ( 'hashchange', function ( ) {
    
      $( location.hash ).click ( );
      
      } );
      
    } );
    
  </script>

This script does two things. First when the page is loaded it attempts to click a tab. The second it looks for URL hash changes and also clicks a tab. The later is for within page hash changes. If you add non tab related ids to the page then the script would probably need to be adjusted to only click on tab related elements.

One thing you might want to consider. Change the id attributes for the tab buttons to something more descriptive. Instead of tab-1, tab-2, etc. Use something like returns-policy, warranty, shipping, and terms-conditions. That way the URLs will be a bit more informative.

Let us know how it goes.

Hey @creedon is there a way to apply this code so the customised slugs are used when clicking on the actual tabs? It works perfectly for navigation links but when I click on the tab blocks themselves, the slugs revert back to #section:nth-child(2) etc.

https://beehyve.squarespace.com/adhd-support-2

Thanks so much! 😊

On 2/21/2023 at 1:10 PM, iamdavehart said:

Do it with Code

I know you said you'd prefer CSS, but newsflash is that it's easy in js and harder (but potentially not impossible) in css. Here's what I'd do: write a utility script that you stick in the footer injection of your site (or a code block in the footer) which creates the anchors and positions them at the top of each section. 

document.querySelectorAll("article>section").forEach(function(s) {
	const a = document.createElement("a");
  	a.setAttribute("id","section-link-"+s.getAttribute("data-section-id"));
  	a.setAttribute("style", "position:absolute;top:0;left:0;z-index:-1'");
    s.prepend(a);
})

must be in the footer so that the sections are in the document when you run the script (or put it in the header as an event handler after the DOM content as loaded).

Now you can just use standard links like #section-link-139408129035 to jump to each one. Add in the scroll-behavior:smooth thing referenced above to make it smooooooth.

Hey @iamdavehart this looks like magic code thanks so much for creating it!

By any chance is there a clever way to rename the links so instead of #section-link-139408129035 it could be #about, #contact, etc?

Thanks again 😊

<script>
	
 if (window.location.hostname == 'unityweek.squarespace.com') {

 clearTimeout(function(){
	window.location.href = '/resources-list'; /*existing page - blog*/
})();
 } else { 
   setTimeout(function(){
    
       window.location.href = '/resources'; /*redirect - new page */
         }, 000);
 }
</script>

UPDATE:
@tuanphan I've written the above snippet which half solves the problem. Maybe you can improve it?

It turns off the redirect function when using the Squarespace hostname, unfortunately I couldn't find a way to specify the config mode though. Would you know how to do this?
Thanks again! 😊

Squarespace url: unityweek.squarespace.com/resources-list

Public url: unityweek.co.nz/resources-list

17 hours ago, tuanphan said:

Suppose your site url is

melanie.squarespace.com

You can add this to url to disable code in edit mode

melanie.squarespace.com/config/safe

Thanks @tuanphan is there a way to do this automatically in the script, like adding an exemption if the source comes from the squarespace url as opposed to the public domain?

Just discovered the lazy summaries plugin won't work unless the source page is enabled and password free.  😞 Unfortunately need to go back through multiple websites, unlock the blog pages then set up redirects. Hoping to limit opt-in/out actions as much as possible for other site contributors. 🤞

On 11/4/2022 at 9:03 PM, tuanphan said:

Add this to old page header

<script>
window.location.href = "www.cascadia.school/schedule-tour-inquiry-form";
</script>

 

Hey @tuanphan is there a way to edit this script so it doesn't redirect when we're in config mode? Thanks 🙂 

On 9/17/2022 at 9:07 PM, tuanphan said:

Have you solved it yet?

@tuanphan @melmotz were you able to figure out a way to display tags on the blog landing page?

<!------DROPDOWN SUMMARY CONTENT------>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
   $(document).ready(function() {    
$(document).on("click", ".summary-item", function () {
    $(this).toggleClass('tp-list-des-open');
})
   })

</script>

<style>
.summary-content:hover /*, p.sqsrte-large strong*/{
    cursor: pointer;
}
p:empty, .summary-excerpt p, .summary-v2-block h4~* /*summary block description excluding para1 text)*/{
    height: 0!important;
    overflow: hidden!important;
    /* transition: all 0.1s ease!;*/
   transition: none!important;
  display:none!important;
}
  .tp-list-des-open .summary-excerpt p, .tp-list-des-open~* /*summary block description excluding para1 text)*/{
    height: 100%!important;
    /* transition: all 0.1s ease!;*/
   transition: none!important;
  display:block!important;
}

  .summary-title, .summary-metadata-container{pointer-events: none;}
</style>

<!------END DROPDOWN SUMMARY CONTENT------>

Wanted to post the solution for others looking in the future.
Thank you to Michael the The Lazy Summaries plugin creator for fixing the first couple lines of code and making this snippet work! 😄

On 2/18/2023 at 6:35 AM, Ziggy said:

Yes! Use a list section (auto section or people section), add the quotes and then use this guide:

https://www.will-myers.com/articles/auto-scroll-for-carousel-banner-slideshows-for-auto-layout-sections-in-squarespace-71

Is there a way to customize this so it works on all auto list sections without having to target them individually?

17 hours ago, juliaprather said:

Facing these same issues. Don't even know how to begin. Attached is an example: I'm using Paragraph 1 in the footer and am getting a message to label these titles built as text tags. Umm... huh? Sure would appreciate anyone who could tell me how to do this 🙏

https://borrowhappy.com/

@juliaprather I think I can actually help with this one! I had similar messaging originally so had to redo a bunch of headings / paragraphs.
Basically people who are visually impaired or use screen readers, can't see the distinctions in design, so rely on text hierarchy. So any text styled with H1, H2, ...etc will be given a "title tag" and anything marked as P will be given a "text tag".
Using your example, while I can obviously see that "Loan Types" is a heading, and below are the grouped links, a screenreader will just see it as another "text tag" because you're using P1. This makes it unclear that the links below are actually related. 
Equally if you style pulled out text in H4, the screen reader will mark it as a "title tag", which adds confusion when the text following it is either another heading or paragraph text that isn't actually related.
Does that all make sense?

There are code snippets you can use to change the text / title hierarchy on specific blocks if just a couple of one offs, but because I had consistently used H4 for pull outs, I had to change them all to P1 and then restyle both to match. A bit of a bother at the beginning but much easier for consistency in the long run!

My client is working towards WCAG compliance, they had their site assessed and received the below feedback. Can anyone please help?

• How do you add role="alert" or live regions to errors in a form?
• How do you add aria-described attributes to relate the invalid field to it's error message?

^ they reference the html codes required but I don't know how to add them into the form - assume I need Javascript? 

• Can you add direct links to the error messages / invalid fields?
   Or give screen readers the option to skip valid fields and labels when looking for error?
   

Website: http://brackenridge.squarespace.com/
password: GSPass

Below is screenshot of full feedback if helpful reference.

Thanks so much! 

On 2/10/2023 at 9:25 PM, tuanphan said:

I see you figured it out?

@tuanphan yes thank you! Luckily I found a new tutorial showing how to do it. I've popped the code below for anyone who may be looking for this in the future. 😊

 

@media screen and (min-width: 768px) and (max-width: 1500px) {
.user-items-list-simple[data-num-columns="4"] {
  grid-template-columns: repeat(~"4,1fr");
  grid-gap:0 3vw!important;
  }
}

@media screen and (min-width: 300px) and (max-width: 767px) {
.user-items-list-simple[data-num-columns="4"] {
  grid-template-columns: repeat(~"2,1fr");
grid-gap:7vw 4.5vw!important;
  }
}

On 8/14/2022 at 1:54 AM, tuanphan said:

@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="6202232f88dc2b5b45a75fcc"] {
    grid-template-columns: repeat(2,1fr) !important;
}
}

Hey @tuanphan I'm trying to achieve the same thing on my site but the code doesn't seem to be working. I've tried with my section id and without but nothing changes. Would you have any ideas? Thanks!

https://brackenridge.squarespace.com/how-we-can-help-you

password: GSPass

https://beehyve.squarespace.com/payment-policy

I want to add a sticky sidebar (made of various blocks) and apply it to multiple pages.

In 7.1 classic editor, I could make the sidebar blocks collectively sticky by targeting the column within the section, using the code below. Super quick and easy.

Is there a way to do this in fluid engine? Feels a lot cleaner than having to target each block for different top heights, especially as I want to add it to a few pages.

section[data-section-id="...."] .sqs-layout > .sqs-row > .sqs-col-3 {
	position: sticky!important;
	position: -webkit-sticky!important;
	top: 140px;
    z-index: 99999;
    }

Thanks all!

16 hours ago, Ziggy said:

It looks like you have blank paragraph spacing on the summary blocks which is where the excess spacing is coming from. It looks like you're using this in many places. I'm not sure what you're trying to achieve by using code to get rid of the space and adding it back with blank paragraphs in between text?

Hey @Ziggy

I've attached screenshots of before and after targeting the blanks spaces to hopefully show what I'm trying to achieve.

When I reduced the text margins, I needed a double hard return to make a visible paragraph break. However instead of the original 1rem margin break, the paragraph breaks became full text-line-height + reduced margins stacked on both sides. So I'm trying to globally target the empty spaces, to make standard looking paragraph breaks while also keeping reduced margins between different text styles.

I'm just struggling to find a code that targets all empty spaces between text without also impacting other elements. Would you have any ideas? Thanks again! 🙂 

On 1/26/2023 at 2:48 AM, Ziggy said:

Can you share your website URL? As well as examples?

It sounds like you need to reduce the margins after the headings, I can help you reduce that site-wide with a little CSS.

Hi @Ziggy 

This is the page I've been testing code / paragraph format on:
https://beehyve.squarespace.com/test-page
password: abc

I figured out how to adjust the margins to decrease the space between headers and paragraphs. Unfortunately the reduced margin made proper paragraph breaks too small, but a double hard return was still too big. I've been trying to find a way to target just the empty spaces between text but keep coming up against issues.

The below code is what I've come up with so far but I've already noticed it's not working with summary blocks.  Would you have any ideas on how to improve this or a different solution that may work better? 

Thanks so much!

h1, h2, h3{ 
  margin-bottom: .7rem!important;
  margin-top: 0!important;}

h4, .sqsrte-large , p, .sqsrte-small, ul, li, ol{
  margin-bottom: 0.3rem;
  margin-top: 0.0rem;
}

.list-item-content :empty, .sqs-block-html .sqs-block-content *:empty{
margin: 0!important;
 height:1rem!important;
}

Is there any way to reduce the spacing of a hard return after a heading? Is there also a way to reduce the size of empty space between paragraphs when you use a double hard return?

@tuanphan hi just wondering if it's possible to change your JQuery so it also applies to summary items after the 'load more' button?

https://www.beehyve.health/adhd-support

Current code:

<!------DROPDOWN SUMMARY CONTENT------>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
 $('.summary-item').each(function(i, e) {
      $(this).click(function() {
  $(this).toggleClass('tp-list-des-open');
});
 })
});
</script>
<style>
.summary-content:hover /*, p.sqsrte-large strong*/{
    cursor: pointer;
}
p:empty, .summary-excerpt.summary-excerpt-only p, .summary-v2-block h4~* /*summary block description excluding para1 text)*/{
    height: 0;
    overflow: hidden;
    /* transition: all 0.1s ease!;*/
   transition: none!important;
  display:none;
}
  .tp-list-des-open .summary-excerpt.summary-excerpt-only p, .tp-list-des-open~* /*summary block description excluding para1 text)*/{
    height: 100%;
    /* transition: all 0.1s ease!;*/
   transition: none!important;
  display:block;
}

  .summary-title, .summary-metadata-container{pointer-events: none;}
</style>

<!------END DROPDOWN SUMMARY CONTENT------>

Hey @tuanphan have you had any luck amending this code to work with items below load more button? Thanks so much!
Site: https://www.beehyve.health/adhd-support 

So I'm trying to change the order of content in my summary block to:

1. Title
2. Primary Metadata (Categories)
3. Blog Excerpt
4. Secondary Metadata (Tags)

The css I've created below successfully does this on all blocks except the Metadata, because they are in a lower class. Is there a way to take Primary and Secondary Metadata out of their shared class, so they can be treated as independent elements like the summary title and excerpt?

.summary-content.sqs-gallery-meta-container , .summary-content.sqs-gallery-meta-container .summary-metadata-container.summary-metadata-container--below-title
{ display: flex;
  flex-wrap: wrap;}

.summary-title{
  order:1!important;}

.summary-metadata.summary-metadata--primary{
  order:2!important;}

.summary-excerpt{order:3!important;}

.summary-metadata.summary-metadata--secondary{order:4!important;}

Website: https://www.beehyve.health/resources
Password: abc

Hi @tuanphan I'm also interested in this code to change the order of summary block content if you made it? I'm hoping to have primary metadata above the excerpt and secondary metadata below the excerpt. 

Website: https://www.beehyve.health/resources
Password: abc

19 hours ago, tuanphan said:

Can you share link to page where you have problem? We can adjust code easier

@tuanphan Sorry link was at the beginning, it's Site: https://www.beehyve.health/adhd-support 

Thanks so much!

Site: https://www.beehyve.health/adhd-support

Hey @tuanphan I received this response on the plugin support forum:

Quote

"From what I can see, the issue isn’t CSS, it’s the jQuery you are using for the accordion style function. This function only modifies the elements that are already on the page, but when you click load more, it doesn’t run again. You’d need to re-write or run it again on ‘load more’ by using one of the hooks in the plugin."

Seems to be issue with the JQuery you helped with on other question (below) not targeting posts below load more button. Would you please be able to help me hook this in?

This is the final code snippet I used for the dropdown / accordion feature.

<!------DROPDOWN SUMMARY CONTENT------>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
 $('.summary-item').each(function(i, e) {
      $(this).click(function() {
  $(this).toggleClass('tp-list-des-open');
});
 })
});
</script>
<style>
.summary-content:hover /*, p.sqsrte-large strong*/{
    cursor: pointer;
}
p:empty, .summary-excerpt.summary-excerpt-only p, .summary-v2-block h4~* /*summary block description excluding para1 text)*/{
    height: 0;
    overflow: hidden;
    /* transition: all 0.1s ease!;*/
   transition: none!important;
  display:none;
}
  .tp-list-des-open .summary-excerpt.summary-excerpt-only p, .tp-list-des-open~* /*summary block description excluding para1 text)*/{
    height: 100%;
    /* transition: all 0.1s ease!;*/
   transition: none!important;
  display:block;
}

  .summary-title, .summary-metadata-container{pointer-events: none;}
</style>

<!------END DROPDOWN SUMMARY CONTENT------>

Thanks so much again! 🙂