Jump to content

melaniejaane

Circle Member
  • Posts

    80
  • Joined

  • Last visited

Everything posted by melaniejaane

  1. 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? 🙂
  2. 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
  3. 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
  4. @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?
  5. 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 🙂
  6. @tuanphan How do I achieve what you did with the accordion?
  7. 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? Change the # in URL: Page won't move at all. OR moves to wrong place. Click button (#) to anchor link on same page: Only works for tab open on first page load. Otherwise nothing happens. Open anchor link in new tab via button(#): Works every time (all first load). Thanks so much!
  8. <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.
  9. @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
  10. @RebeccaRichard did you figure this out? I'm trying to achieve the same thing but nothing I try is working. 😕
  11. 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!
  12. @tuanphan would you know how to achieve this? Thanks! 🙂
  13. 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.
  14. 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: #support-tab-team #support-tab-providers #support-tab-practices #support-tab-services Site: https://beehyve.squarespace.com/adhd-support Thank you 🙂
  15. Clip.mov 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; }
  16. 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
  17. 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! 🙂
  18. 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 🙂
  19. Yes exactly like that! 😄
  20. Hey @tuanphan I've tried adding it to the Footer but it's still not working. Any idea why? Thanks again 🙂
  21. 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! 🙂
  22. 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 🙂
  23. 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-teampassword: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; } }
  24. 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 🙂
  25. 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 🙂
×
×
  • 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.