melaniejaane

Hey @JessicaOddi what website did you do this for? Would love to see! 

Also what fixes did you implement to make internal pages more accessible? 🙂

I also want to split accordion block into two columns (1-3 left column, 4-6 right column) @tuanphan are you able to help? 🙂 

https://beehyve.squarespace.com/services/counselling#service-page-our-tools

Does anyone know how I can target the last visible tag on a summary item?

<script>
$(function () { 
$('.summary-metadata-item--tags > a:visible:last').addClass('mk-last-visible');
});  
</script>

I tried using the above script. It works in code-pen but not when I add it to code injection header in Squarespace.

Can anyone tell me why this isn't working and how I can fix it?

I have CSS already set up to target the summary block on the Healthcare Practices tab here:

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

8 hours ago, melody495 said:

@melaniejaane @tuanphan slightly off topic, but do you use this for all css? I thought most browsers support standard css. Or are these to support very specific cases that you need?

@melody495 I would love to know that as well @tuanphan if you have the answer?

I've always just used standard CSS but now I'm making much larger changes, I'm worried that the websites will look completely messed up if something isn't supported on a different browser.

Are there any basic rules of thumb for types of CSS that need prefixes, and some that don't?

I have a list of CSS prefixes in bold (using 'transform' style as example):

• transform:/* W3C */
• -webkit-transform: /* Safari and Chrome */
• -moz-transform:  /* Firefox */
• -ms-transform: /* IE 9 */
• -o-transform: /* Opera */

Is there a magic code that will automatically include prefixes for all CSS?

Figure there must be a smarter way – It just seems super complicated and time consuming to go through my entire stylesheet and duplicate every line 5 times over?

Thanks all 🙂

On 10/21/2023 at 11:02 PM, tuanphan said:

Can you send the tab code in Code Block?

I'm not sure if it is possible or not, but I used to do same thing with Accordion, you can access an example here

• https://tuanphan3.squarespace.com/anchor-links-accordion2#accordion-item3
• https://tuanphan3.squarespace.com/anchor-links-accordion2#accordion-item2
• https://tuanphan3.squarespace.com/anchor-links-accordion2#accordion-item1
• pass: abc

@tuanphan How do I achieve what you did with the accordion?

Screen Recording 2023-10-23 at 6.51.59 PM2.mov 

@tuanphan Attached video showing web response to 3 different actions.

You can see how it's not working consistently unless on first page load. Any ideas how to fix this?

1. Change the # in URL:
   • Page won't move at all.
   • OR moves to wrong place.
2. Click button (#) to anchor link on same page:
   • Only works for tab open on first page load.
   • Otherwise nothing happens.
3. Open anchor link in new tab via button(#):
   • Works every time (all first load).

Thanks so much!

<section class="coaching-tab-button-group">
<div class="tabs">    
  <nav class="tab-nav">
      <ul class="tabs-ul">
<li id="coaching-tab-executive"><a class="tab-btn" href="#tab1" ><span>Executive Coaching</span></a></li>                     
<li id="coaching-tab-parent"><a class="tab-btn" href="#tab2"><span>Parent Coaching</span></a></li>                       
<li id="coaching-tab-relationship"><a class="tab-btn" href="#tab3"><span>Relationship Coaching</span></a></li>
<li id="coaching-tab-nutrition"><a class="tab-btn" href="#tab4"><span>Nutrition Coaching</span></a></li>
						</ul>
					 </nav>
  </div><!-- /tabs -->
</section>


<script>
$(function () { 
    $("section:nth-child(4) section:nth-child(5) section:nth-child(6) section:nth-child(7)").hide().first().show();
    $(".tab-nav li:first").addClass("active");

    $(".tab-nav a").on('click', function (e) {
        e.preventDefault();
        $(this).closest('li').addClass("active").siblings().removeClass("active");
        $($(this).attr('href')).show().siblings('section:nth-child(4) section:nth-child(5) section:nth-child(6) section:nth-child(7)').hide();
    });

    var hash = $.trim( window.location.hash );

    if (hash) $('.tab-nav a[href$="'+hash+'"]').trigger('click');

});
  
$(function () {  

    let tab1 = 'section:nth-child(4)';
    let tab2 = 'section:nth-child(5)';
    let tab3 = 'section:nth-child(6)';
    let tab4 = 'section:nth-child(7)';
    let tab1Button = '#coaching-tab-executive';
    let tab2Button = '#coaching-tab-parent';
    let tab3Button = '#coaching-tab-relationship';
    let tab4Button = '#coaching-tab-nutrition';
   
    /*Initiate the Tabs*/
    $(tab2).add(tab3).add(tab4).addClass('tab-section-hide');
    $(tab1).addClass('tab-section-show');
    $(tab1Button).addClass('active');

    /*Add Actions to Each Button*/
    $(tab1Button).click(function(){
      $(tab1).addClass('tab-section-show').removeClass('tab-section-hide');
    	$(tab2).add(tab3).add(tab4).addClass('tab-section-hide').removeClass('tab-section-show');
      $(tab1Button).addClass('active');
      $(tab2Button).add(tab3Button).add(tab4Button).removeClass('active');
     // window.Squarespace.initializeLayoutBlocks(Y);
    });

    $(tab2Button).click(function(){
      $(tab2).addClass('tab-section-show').removeClass('tab-section-hide');
      $(tab1).add(tab3).add(tab4).addClass('tab-section-hide').removeClass('tab-section-show');
      $(tab2Button).addClass('active');
      $(tab1Button).add(tab3Button).add(tab4Button).removeClass('active');
     // window.Squarespace.initializeLayoutBlocks(Y);
    });

    $(tab3Button).click(function(){
      $(tab3).addClass('tab-section-show').removeClass('tab-section-hide');
      $(tab2).add(tab1).add(tab4).addClass('tab-section-hide').removeClass('tab-section-show');
      $(tab3Button).addClass('active');
      $(tab1Button).add(tab2Button).add(tab4Button).removeClass('active');
      //window.Squarespace.initializeLayoutBlocks(Y);
    });

     $(tab4Button).click(function(){
      $(tab4).addClass('tab-section-show').removeClass('tab-section-hide');
      $(tab2).add(tab1).add(tab3).addClass('tab-section-hide').removeClass('tab-section-show');
      $(tab4Button).addClass('active');
      $(tab1Button).add(tab2Button).add(tab3Button).removeClass('active');
     // window.Squarespace.initializeLayoutBlocks(Y);
    });
  });

</script>

@tuanphan your accordians look great! Here is the code I'm currently using for tabs + anchors on this page: https://beehyve.squarespace.com/services/coaching#tab3 
password: abc

It's working but not reliably – it will open any tab on first load, but on second load with different # the page won't move to new tab. Not sure how to fix.

Credit: Created the tabs ages ago but it was primarily based off Will Myers tutorials.
For anchor link code I trialled snippets from codepen, stackoverflow, and cssplay.co.uk. 

On 10/19/2023 at 10:21 PM, paul2009 said:

This example sounds like it may help you:

http://www.cssplay.co.uk/menu/cssplay-tabbed-pages.html

Did this help? Please give feedback by clicking an icon below  ⬇️

@paul2009 thanks for the suggestion, that's exactly the kind of thing I want!

Unfortunately it only seems to work when the tab buttons, targets, and content are all in the same section, not in multiple sections like Squarespace. Is there anyway around this?

Created both examples here: https://codepen.io/melaniejaane/pen/vYbBqrN

@RebeccaRichard did you figure this out? I'm trying to achieve the same thing but nothing I try is working. 😕 

On 9/10/2022 at 3:22 AM, paul2009 said:

The tabbed panels within a Menu Block do not have an ID that you can jump to like an anchor, so it is not possible to link directly to one of them using a link or QR code.

Instead they are selected using JavaScript which means you'd need some custom JavaScript to be written that selects the relevant tab panel when a visitor users a specific URL query. It's possible to do, but we'd need more information about the site. 

Hey @paul2009 does this mean a website would need custom code written for each anchor link/ tab instance or is there a way to create a universal system?

I have 4 tabs on the below page, each with a custom ID I thought could be used as an anchor link. Website example: https://beehyve.squarespace.com/adhd-support

I'm trying to learn JS, do you think it would be possible to create something like this: 

• On load check url
• if url contains #
• get name after # (variable)
• Find ID on page that matches (variable)
• Trigger click action

And that would open selected tab.

Thanks!

@tuanphan would you know how to achieve this? Thanks! 🙂 

On 10/12/2023 at 11:48 PM, Web_Solutions said:

 

See the vide 

 

Thanks for trying but unfortunately this video does not solve the issue.

I have anchor links set up on sections inside a "tab" structure. But the links won't go to / open the correct tab.

I want to create direct links for each tab but I can't seem to get them to flick to the right section.

Does anyone know how I can achieve this?

Tab ID's:

1. #support-tab-team
2. #support-tab-providers
3. #support-tab-practices
4. #support-tab-services

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

Thank you 🙂 

I tried adding the below code which worked when it was static but it messed up the transitions (video shows) so deleted it.

#gridThumbs .grid-item, a.grid-item {
position: relative!important;
left: auto!important;
top: auto!important;
  min-width:100%!important;
  height:auto!important;
  padding-bottom:0!important;
  overflow:hidden!important;
}

Can anyone tell my why after adding the below grid isotope plugin (https://isotope.metafizzy.co/faq), my portfolio grid goes from 3 columns to 4 with the last one empty? How can I fix this?

https://calliope-hexahedron-e848.squarespace.com/portfolio
Password: Square

On 1/20/2023 at 4:41 AM, paul2009 said:

 

Did this help? Please give feedback by clicking an icon below  ⬇️

Hey @paul2009 is there a universal class to target the filtered items in an isotope grid?

Like they add the class '.is-checked' for the filter buttons, but can't figure out how to relate this to the actual grid items.

Using the Isotope for a portfolio grid and trying to smooth the transitions between .grid-items but not sure what the other state would be.

If it helps https://greyhound-gar-9aft.squarespace.com/my-work
Password: Square

Thanks so much! 🙂

Hi does anyone know if there is a way to filter out or hide featured blog posts in a summary block?

I want to display two summary blocks:
• the first with the featured blog posts
• the second with all remaining posts (no double up)

If needed: https://beehyve.squarespace.com/adhd-support 
Tab 1 is Our Team (Featured Posts), Tab 2 other Healthcare Providers (want to exclude featured)

Thanks so much 🙂

On 5/14/2023 at 1:04 PM, tuanphan said:

Like this?

https://tuanphan.squarespace.com/balance-text?noredirect

pass: abc

Yes exactly like that! 😄 

On 6/4/2023 at 11:28 AM, tuanphan said:

Hi,

Add it to Sitewide Code Injection > Footer

Hey @tuanphan I've tried adding it to the Footer but it's still not working. Any idea why?

Thanks again 🙂 

On 2/15/2022 at 2:29 AM, tuanphan said:

try this new code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
 const lnames = document.querySelectorAll('.newsletter-block .last-name input')
   const lnameFields = document.querySelectorAll('.newsletter-block .last-name')
  $(document).ready(function(){

     lnames.forEach(lname => {
   lname.value = "-"
  })

     lnameFields.forEach(lnameField => {
     lnameField.style.display = "none"
  })
      
     
 });
</script>

 

Hey @tuanphan I tried adding this code to page settings and site wide code injection header but neither seem to have worked. Would you possibly be able to take a look please?

Newsletter block is at the very bottom of the page (sorry it's messy – being used for sidebar)

https://beehyve.squarespace.com/sidebar-2
password:abc

Thanks so much! 🙂 

Would anyone know how and where to add this code on Squarespace?
Would there be a way to get it to apply to all text? 

https://github.com/adobe/balance-text

Thanks all 🙂 

12 hours ago, tuanphan said:

Try to bottom of Design > Custom CSS

@media screen and (min-width:768px) {
#block-ce40accb5a73d7afee4c .sqs-gallery-design-autogrid-slide {
    width: calc(~"33.333% - 60px") !important;
    margin-left: 30px !important;
    margin-right: 30px !important;
}
}

Thanks @tuanphan this works almost perfectly! It's just the last summary item is sitting slightly off centre.
I tried changing justify-content but it would either move the whole summary block or keep the last item off centre. I also tried adding :last-child but has had no impact. 

What I've added below, would you have any ideas on how to fix? Thanks again 🙂 

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

/* Summary Block: Column Width + Center*/
@media screen and (min-width:768px) {
#block-ce40accb5a73d7afee4c .sqs-gallery-design-autogrid-slide {
  min-width:250px!important;  
  	width: calc(~"33.333% - 60px") !important;
    margin-left: 30px !important;
    margin-right: 30px !important;
}
#block-ce40accb5a73d7afee4c .sqs-gallery-design-autogrid-slide::last-child{
     justify-content:left!important;
}  

#block-ce40accb5a73d7afee4c .sqs-gallery-design-autogrid .summary-item-list {
  display: flex;
  flex-wrap: wrap;
  justify-content:space-evenly!important;
}  
}

19 minutes ago, tuanphan said:

I see you used some code to fix this?

#block-ce40accb5a73d7afee4c .sqs-gallery-design-autogrid-slide {
    width: 29.56827309236948%;
    margin-right: 5.647590361445783%;
    margin-bottom: 5.647590361445783%;
}

 

Hey @tuanphan unfortunately no,  I was just trialling something else so had my minimum width css turned off. I've turned it back on now.
Even with setting specific margins and width ratio, it still somehow goes all wonky.

Do you know if there's another way to fix this?
Thanks again 🙂 

How can I set minimum width for each item on summary block and space them evenly?

The CSS I added below almost worked but the spacing became oddly different on each row and sometimes columns. Could it be fixed or is there a better code to achieve this? If it makes a difference I'm also using lazy summaries plugin and have set columns for desktop (4), tablet (3), mobile (1).

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

 /* Column width + Center*/
.sqs-gallery-design-autogrid .summary-item-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly!important;
  }  
.sqs-gallery-design-autogrid-slide {
  min-width:250px!important;
  margin-left:auto;
  margin-right:auto;
clear: right!important; 
}

Thanks all 🙂