Jump to content

jpeter

Member
  • Posts

    182
  • Joined

  • Last visited

  • Days Won

    1

Reputation Activity

  1. Thanks
    jpeter got a reaction from earthwindflowermoon in How to add accordion functionality into product description ?!   
    @ellerxyz You can use the following CSS:
    .ProductItem .ProductItem-additional { order: 3; }
  2. Like
    jpeter got a reaction from Russell78833 in How to align 3 buttons centered below 2 buttons? Squarspace Grid 7.1   
    @AmoryLujo It's a pretty tight fit to have all 3 buttons on a single link and will likely cause horizontal scrolling on different mobile devices. I would actually recommend you stack the buttons for mobile to prevent horizontal scrolling. 
    Here's an example:

  3. Like
    jpeter got a reaction from Russell78833 in How to align 3 buttons centered below 2 buttons? Squarspace Grid 7.1   
    @AmoryLujo Updated the code in my original comment. Hopefully that works. You may want to play around with the translateX value(s). Here's what it looks like on my end:

  4. Love
    jpeter got a reaction from Russell78833 in How to align 3 buttons centered below 2 buttons? Squarspace Grid 7.1   
    @AmoryLujo You can align the buttons with the following CSS below by targeting each button container's ID. It moves them over to the left.
    CSS
    /* Adjust "Services" buttons to align with heading */ #block-3050c3c6eb259cb341aa, #block-3fa04d9eacb1867459b5, #block-42aa1aeaabdf5011da55 { transform: translateX(15px); } @media (min-width: 768px) { #block-3050c3c6eb259cb341aa, #block-3fa04d9eacb1867459b5, #block-42aa1aeaabdf5011da55 { transform: translateX(-28px); } }
  5. Like
    jpeter got a reaction from TBrungus in Form Block: Conditional Logic For "Other, Please Specify."   
    @TBrungus You can use the following JS below, which is a slight modification to the JS from this comment. 
    Here's an example of me targeting the "Message" field that has an id of, textarea-yui_3_17_2_1_1695075633023_1845.

    hnTQ0jboU0.mp4   JavaScript
    (function () { const DELAY = 500; // Delays code execution so other scripts can run const SLIDE_UP_SPEED = 200; // Speed in milleseconds const SLIDE_DOWN_SPEED = 200; // Speed in milleseconds setTimeout(() => { const field = new ToggleFields(); field .id('checkbox-f3d6a653-ba34-430b-a76c-97c1f32c8a7e-field') .hasValues([ 'Other', ]) .thenShow([ 'textarea-yui_3_17_2_1_1695075633023_1845' ]); }, DELAY); /********************************************************************* * DO NOT ALTER BELOW THIS LINE UNLESS YOU KNOW WHAT YOU'RE DOING *********************************************************************/ class ToggleFields { constructor() { this.parentEl = null; this.parents = {}; this.dependenciesFields = []; this.values = []; this.showFields = []; this.valueMapping = null; } id(id) { if (typeof id == 'string') { // Get the parent element const parentFieldId = document.querySelector('[id="' + id + '"]'); const parentFieldName = document.querySelector('[name="' + id + '"]'); if (parentFieldId) { this.parentEl = parentFieldId.closest('.field'); } if (parentFieldName) { this.parentEl = parentFieldName.closest('.field'); } this.parentEl.valueMap = this.parentEl.valueMap || {}; this.parents[this.parentEl.id || this.parentEl.name] = this.parentEl; if(!this.parentEl) { return this; } } return this; } hasValues(values) { if (!Array.isArray(values)) { return this; } this.values = values; if(this.parentEl) { values.forEach(value => { this.parentEl.valueMap[value] = this.parentEl.valueMap[value] || { fields: [], hidden: true }; }) } return this; } thenShow(fields) { if (!Array.isArray(fields)) { return this; } if(this.parentEl) { fields.forEach(field => { this.values.forEach(key => { this.parentEl.valueMap[key].fields.push(`#${field}`); }); }); } const fieldIds = fields.map(field => '#' + field); document.querySelectorAll(fieldIds.join(',')).forEach(el => { if(el.closest('.field')) { el.closest('.field').style.display = 'none'; } else { el.style.display = 'none' } }); this.onLoad(() => { // Load jQuery if not loaded if (!window.jQuery) { return this.loadJquery(this.thenShow(fields)) } this.showFields = fields; // Assign jQuery to a variable const $ = jQuery; Object.keys(this.parents).forEach(id => { const parentEl = this.parents[id]; if (!parentEl || parentEl.toggleFieldInit) { return; } parentEl.toggleFieldInit = true; // Show or hide the dependent field based on the PARENT_VALUE $(parentEl).on('change', (evt) => { const value = evt.target.value; Object.keys(parentEl.valueMap).forEach(key => { if(parentEl.valueMap[key].hidden == false) { $(parentEl.valueMap[key].fields.join(',')).slideUp(SLIDE_UP_SPEED); parentEl.valueMap[key].hidden = true; } else { $(parentEl.valueMap[value].fields.join(',')).slideDown(SLIDE_DOWN_SPEED); parentEl.valueMap[key].hidden = false; } }) }); }); }) return this; } loadJquery() { var s = document.createElement('script'); s.src = 'https://code.jquery.com/jquery-3.6.0.min.js'; s.onload = this.thenShow(this.fields); document.body.appendChild(s); } onLoad(callback) { // Initialize after the page has been loaded if (document.readyState === 'complete') { setTimeout(callback, DELAY) } else { document.addEventListener("DOMContentLoaded", function () { setTimeout(callback, DELAY); }, false); } } } })(); Make sure to include the JS between <script> tags like so:
    <script> // Add JS here </script>  
  6. Like
    jpeter got a reaction from Earvin in Active links in Archive Block   
    @maya_m
    STEP 1: 
    Add the following JavaScript code to the Footer using Code Injection.  This script adds an "active" class on the link that matches whatever filter is defined in the URL. 
    (function () { // Get all the links inside the specified container const links = document.querySelectorAll("#block-yui_3_17_2_1_1706047640137_2381 a"); // Loop through each link and check if its path matches the path in the URL links.forEach((link) => { // Add the "active" class if the pathname of in the URL matches if (window.location.pathname === link.pathname) { link.classList.add("active"); } }); })(); Be sure to add the JavaScript code above between <script> tags like so:
    <script> // Add JS here </script>  
    Step 2:
    You can now style the class like so using the following CSS:
    /* Style active filter link */ #block-yui_3_17_2_1_1706047640137_2381 .active { color: blue; }  
  7. Like
    jpeter reacted to St Lukes in Allow image to stretch to edge of browser window   
    Sorry @jpeter, you are correct that we are using a gallery for a makeshift rotating banner image. So, when I tried your code, it didn't work as expected. However, when I switched from using a gallery to using an animated GIF, everything worked like we wanted without any modifications. Unfortunately, an animated GIF is a much larger file and it is more difficult to make changes to.
    Thanks for your help, but I think we've got it working for us.
  8. Like
    jpeter got a reaction from nick_sh in Is targeting section id's on SS 7.1 not working?   
    @sunjo Remove #siteWrapper.site-wrapper from your selector. The new selector should be:
    section[data-section-id="65c47f89c55103377481a7fa"] .sqs-button-element--tertiary{ }  
  9. Like
    jpeter got a reaction from paul2009 in Form link works in Chrome but not Safari   
    @cludgate Looks like the target attribute on the <a> tag is using smart quotes(”) to wrap the _blank value. Try using regular quotes, e.g.:
    <a href="https://lodgeatbowlake.com/s/TheLodgeAtBowLake-Winter-Activity-Release-Waiver.pdf" target="_blank">click here</a>  
  10. Like
    jpeter got a reaction from tuanphan in Anyone have an idea how to Make the top menu item of a drop-down navigation NOT clickable in 7.0 Bedford   
    If you're using this template then you can leverage the pointer-events: none css rule set to prevent the element from being clicked. Here's the CSS you would add using the CSS editor based on the templates ID and classes being used:
    /* Prevent item from being clicked */ #mainNavigation .folder-toggle { pointer-events: none; }  
  11. Like
    jpeter got a reaction from tuanphan in Overlay an image on top of a slideshow   
    @sprucerow You can use the following CSS below. You'll need to update the URL of the background-image property to a transparent version of the brushstroke and then play around with the height property as well. 

    CSS
    [data-section-id="6566207a3608ec2faeee84dc"] .slideshow-wrapper:after { background-image: url('https://www.onlygfx.com/wp-content/uploads/2019/03/14-white-grunge-brush-stroke-6.png'); height: 60px; content: ''; width: 100%; bottom: 0; left: 0; display: block; z-index: 10; background-size: cover; position: absolute; background-repeat: repeat-x; background-position-y: top; }
  12. Like
    jpeter got a reaction from tuanphan in How do I disable scrolling while I have my mobile menu open?   
    @ghostpep___ Replace this line:
    $('html').addClass('html-burger-open'); With:
    $('html').toggleClass('html-burger-open');  
  13. Like
    jpeter got a reaction from tuanphan in Footer custom border   
    @LemonstrikeCreativeStudios For your site, you can use the following CSS:
     
    /* Ensure fixed header is above everyhting */ #header { z-index: 20 } /* Add image to the top of footer section */ #footer-sections { position: relative; z-index: 10; } #footer-sections:before { content: ''; display: block; background-size: cover; background-image: url(https://images.squarespace-cdn.com/content/6554f93572c370332e59a9a0/0076b61b-a133-4f36-b2e7-ad8496b62727/peanuts-grass-100px.png?content-type=image%2Fpng); width: 100%; height: 40px; top: -20px; left: 0; position: absolute; z-index: 10; }  
  14. Like
    jpeter got a reaction from tuanphan in Dropdown menu shows up on Home page but not other pages   
    @Teifi Looking at Chrome's dev tools, it looks like you have CSS on that page that is hiding the dropdown menu. I would update at CSS to the following:

    NEW CSS
    /* Change HEADER nav links on DESKTOP so it goes to home page instead of being anchor links on same page */ .header-nav-list > div:nth-of-type(1), .header-nav-list > div:nth-of-type(2), .header-nav-list > div:nth-of-type(3), .header-nav-list > div:nth-of-type(4) { display: none; margin-right: 0; } This will target the <div> tags that are direct children of the .header-nav-list element rather than ALL <div> tags.

    Screenshot of code causing the issue:

  15. Like
    jpeter got a reaction from tuanphan in Colour coding blog post "card"   
    @JoshA You can use the following CSS below. This adds CSS variables to the blog-item container and then uses them in the category-* classes that is set on each "card". 
    CSS
    .blog-item { --pamphlet: red; --report: blue; --definition: green; --imagination-lab: pink; --declaration: black; --article: gray; --data-study: tomato; } .category-pamphlet { background-color: var(--pamphlet) !important; } .category-report { background-color: var(--report) !important; } .category-definition { background-color: var(--definition) !important; } .category-imagination-lab { background-color: var(--imagination-lab) !important; } .category-declaration { background-color: var(--declaration) !important; } .category-article { background-color: var(--article) !important; } .category-data-study { background-color: var(--data-study) !important; }
    Screenshot
    Here's a screenshot of Chrome dev tools open. You'll notice that each card has a class set based on the category in with the following  format, "category-*" .

  16. Like
    jpeter got a reaction from tuanphan in Image Order from Newest to Oldest in Masonry Grid Image Gallery   
    @sian75 The following JS should do the trick as long as you place it in the Header using Code Injection. This will allow the script to run and re-order the elements before the site runs Squarespace's JS code that handles the masonry layout. 
    JavaScript
    (function(){ // Value of the "data-section-id" attribute of the element with a class of "gallery-masonry" const SECTION_ID = '65b13fd4e94d515c51c1e3cb'; /********************************************************************************* * DO NOT EDIT BELOW UNLESS YOU KNOW WHAT YOU'RE DOING *********************************************************************************/ if(document.readyState == 'complete') { reverseOrderOfGalleryItems(); } else { window.addEventListener('DOMContentLoaded', reverseOrderOfGalleryItems); } function reverseOrderOfGalleryItems() { // Get the parent element that contains the <figure> elements const gallery = document.querySelector(`.gallery-masonry[data-section-id="${SECTION_ID}"] .gallery-masonry-wrapper`); // Get a NodeList of all <figure> elements within the parent element const figureElements = gallery.querySelectorAll('figure'); // Convert the NodeList to an array and reverse it const reversedFigures = Array.from(figureElements).reverse(); // Remove existing <figure> elements from the parent figureElements.forEach(figure => figure.remove()); // Append the reversed <figure> elements back to the parent reversedFigures.forEach(figure => gallery.appendChild(figure)); } })() Remember to place the JavaScript code in between <script> tags, e.g.
    <script> // Add JS code here </script>  
  17. Like
    jpeter got a reaction from RobUSA in Anyone have an idea how to Make the top menu item of a drop-down navigation NOT clickable in 7.0 Bedford   
    If you're using this template then you can leverage the pointer-events: none css rule set to prevent the element from being clicked. Here's the CSS you would add using the CSS editor based on the templates ID and classes being used:
    /* Prevent item from being clicked */ #mainNavigation .folder-toggle { pointer-events: none; }  
  18. Love
    jpeter got a reaction from sprucerow in Overlay an image on top of a slideshow   
    @sprucerow You can use the following CSS below. You'll need to update the URL of the background-image property to a transparent version of the brushstroke and then play around with the height property as well. 

    CSS
    [data-section-id="6566207a3608ec2faeee84dc"] .slideshow-wrapper:after { background-image: url('https://www.onlygfx.com/wp-content/uploads/2019/03/14-white-grunge-brush-stroke-6.png'); height: 60px; content: ''; width: 100%; bottom: 0; left: 0; display: block; z-index: 10; background-size: cover; position: absolute; background-repeat: repeat-x; background-position-y: top; }
  19. Like
    jpeter got a reaction from Ziggy in How to align 3 buttons centered below 2 buttons? Squarspace Grid 7.1   
    @AmoryLujo It's a pretty tight fit to have all 3 buttons on a single link and will likely cause horizontal scrolling on different mobile devices. I would actually recommend you stack the buttons for mobile to prevent horizontal scrolling. 
    Here's an example:

  20. Like
    jpeter reacted to jcny85 in Is there a way to style this link?   
    @jpeteractually -- i take that back -- I just needed to add the <script> tags around the code you sent. Thank you so much! Works great!
  21. Like
    jpeter reacted to LemonstrikeCreativeStudios in Footer custom border   
    @jpeter THANK YOU! I think caching is preventing me from seeing it in my working browser, but I can see it in incognito and it looks fantastic. Thanks again for the assist 🙂
  22. Thanks
    jpeter got a reaction from LemonstrikeCreativeStudios in Footer custom border   
    @LemonstrikeCreativeStudios For your site, you can use the following CSS:
     
    /* Ensure fixed header is above everyhting */ #header { z-index: 20 } /* Add image to the top of footer section */ #footer-sections { position: relative; z-index: 10; } #footer-sections:before { content: ''; display: block; background-size: cover; background-image: url(https://images.squarespace-cdn.com/content/6554f93572c370332e59a9a0/0076b61b-a133-4f36-b2e7-ad8496b62727/peanuts-grass-100px.png?content-type=image%2Fpng); width: 100%; height: 40px; top: -20px; left: 0; position: absolute; z-index: 10; }  
  23. Love
    jpeter got a reaction from Teifi in Dropdown menu shows up on Home page but not other pages   
    @Teifi Looking at Chrome's dev tools, it looks like you have CSS on that page that is hiding the dropdown menu. I would update at CSS to the following:

    NEW CSS
    /* Change HEADER nav links on DESKTOP so it goes to home page instead of being anchor links on same page */ .header-nav-list > div:nth-of-type(1), .header-nav-list > div:nth-of-type(2), .header-nav-list > div:nth-of-type(3), .header-nav-list > div:nth-of-type(4) { display: none; margin-right: 0; } This will target the <div> tags that are direct children of the .header-nav-list element rather than ALL <div> tags.

    Screenshot of code causing the issue:

  24. Like
    jpeter got a reaction from paul2009 in How to align 3 buttons centered below 2 buttons? Squarspace Grid 7.1   
    @AmoryLujo It's a pretty tight fit to have all 3 buttons on a single link and will likely cause horizontal scrolling on different mobile devices. I would actually recommend you stack the buttons for mobile to prevent horizontal scrolling. 
    Here's an example:

  25. Like
    jpeter got a reaction from tuanphan in How can I move 'Simple List' buttons to the centre of my images?   
    @tuku You can use the following CSS:
    /* Setup the parent to allow button to be centered */ .user-items-list-simple .list-item { position: relative; } /* Add transparent background of black to parent item */ .user-items-list-simple .list-item::before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: block; background-color: rgba(0,0,0,.2); z-index: 1; transition: all .2s; } /* Darken the background when a user hovers over the link or uses the keyboard to focus in on the link */ .user-items-list-simple .list-item:has(.list-item-content__button:hover):before, .user-items-list-simple .list-item:has(.list-item-content__button:focus-visible):before { background-color: rgba(0,0,0,.6); } /* Center the button in the list-item */ .user-items-list-simple .list-item-content__button-wrapper { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } /* Bring the content layer on top of the transparent background image */ .user-items-list-simple .list-item-content { z-index: 1; } Here's an example of the above CSS working:
    kpZnrYORJU.mp4    
×
×
  • 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.