Jump to content

jpeter

Member
  • Posts

    182
  • Joined

  • Last visited

  • Days Won

    1

jpeter last won the day on January 28

jpeter had the most liked content!

Recent Profile Visitors

1,219 profile views
  1. @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>
  2. @St Lukes The issue is the <main> HTML element has a max-width: 1080px style applied to it. The following CSS below will break the banner outside of it's parent container, but still maintain it's place in the flow of the page: CSS /* Make the banner image the full width of the page */ #block-yui_3_17_2_1_1705198057319_10582 { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* Adjust the slide images to be the full width of the page */ #block-yui_3_17_2_1_1705198057319_10582 .sqs-gallery-design-stacked-slide img { object-fit: cover; width: 100% !important; }
  3. @sunjo Remove #siteWrapper.site-wrapper from your selector. The new selector should be: section[data-section-id="65c47f89c55103377481a7fa"] .sqs-button-element--tertiary{ }
  4. @joshlee The issue is your code below is relying on jQuery. Instead of relying on jQuery as a dependency, you can replace the following code: $(document).ready(function() { $('div#block-yui_3_17_2_1_1707375123858_6165').appendTo('.header-title-logo a'); }); With this code: (function(){ const headerLogo = document.querySelector('.header-title-logo a'); const lottiePlayer = document.querySelector('div#block-yui_3_17_2_1_1707375123858_6165 lottie-player'); if(headerLogo && lottiePlayer) { // Hide existing image const img = headerLogo.querySelector('img'); if(img) { img.style.display = 'none'; } // Append lottie image headerLogo.appendChild(lottiePlayer); } })() Remember to place the JS code between <script></script> tags.
  5. @StudioFine Add the following JavaScript code to the Footer using Code Injection. Just update the LINKS array to whatever relative or absolute path(s) you'd like to add the query parameters to. This script loop through all of the links on the page and add the query parameters from the URL to the links that are defined in the LINKS variable. (function () { const LINKS = [ '/some/relative/path', 'https://www.example.com/donate' ]; // Function to attach query parameters to a list of links function attachQueryParametersToLinks() { const selectors = LINKS.map(link => `a[href="${link}"]`); const links = document.querySelectorAll(selectors.join(',')); const urlSearchParams = new URLSearchParams(window.location.search); // Iterate over the links and update their href attributes links.forEach(link => { const originalHref = link.getAttribute('href'); const linkSearchParams = new URLSearchParams(link.search); const mergedSearchParams = new URLSearchParams([...urlSearchParams, ...linkSearchParams]); link.setAttribute('href', `${originalHref}?${mergedSearchParams.toString()}`); }); } if (document.readyState == 'complete') { attachQueryParametersToLinks() } else { window.addEventListener('DOMContentLoaded', attachQueryParametersToLinks); } })() Be sure to place the javascript between <script> tags e.g.: <script> // Add JS here </script>
  6. @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. @GarySmith What template are you using? I'll try to replicate it on my end. For the template I'm using, the events are hidden by the CSS styling as well, but are technically still there on the page.
  8. @Angelica_Cream You can add the JavaScript below to the Footer using Code Injection to change the text of the pagination label: JavaScript (function() { // Define constants for the desired text labels const NEXT_LABEL = 'More Work'; const PREV_LABEL = 'Previous Work'; // --- Pagination Label Updates --- // Get the pagination element from the page const pagination = document.querySelector('.blog-list-pagination'); // Conditionally find the "prev" and "next" label elements within the pagination const prevLabel = pagination && pagination.querySelector('.prev-label'); const nextLabel = pagination && pagination.querySelector('.next-label'); // Update the text content of the labels if they exist if (nextLabel) { nextLabel.textContent = NEXT_LABEL; } if (prevLabel) { prevLabel.textContent = PREV_LABEL; } })(); Be sure to place the code in between <script> tags like so: <script> // Add JS code here </script>
  9. @GarySmith My previous comment about me replicating the issue was me seeing the issue logged in on the configuration page. When I was trouble shooting, I noticed I was still getting old content while logged in. Perhaps you can follow the steps I took while troubleshooting in the Chrome browser to see if you get fresh content like I did: Clear Chromes storage. This article has an example of what I did. Once you've cleared the storage, close the entire Chrome application, including all open windows and tabs. Keyboard shortcut for Mac, Command (⌘) + Q Keyboard shortcut for Windows, Ctrl + Shift + Q Log back into site and check to see that fixed the caching issue
  10. @GarySmith I was able to replicate your issue on my end and it's definitely a browser caching issue. Event after clearing browser cache it was still happening. However, quitting my browser all together and re-opening it resolved the issue.
  11. 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; }
  12. @TheSavvyChameleon @colin.irwin Here are some defaults that can be used and should fix the issue with inline CSS and JS as well by leveraging the 'unsafe-inline' and 'unsafe-eval' CSP directives. Also added blob: and data: directives to handle media related to blobs and data attributes. <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval' data: blob: *.squarespace.com *.squarespace-cdn.com *.squarewebsites.com *.google.com *.google-analytics.com *.googleapis.com *.gstatic.com *.googletagmanager.com *.doubleclick.net *.typekit.net *.youtube.com *.jquery.com https://youtu.be"> Tips On Figuring out which websites to allow with Content Security Policy: If you're setting up Content Security Policy (CSP) for your website but are unsure which websites to allow access to, here's a tip: Open Google Chrome's developer tools: Click the three dots in the top right corner of your Chrome window, then select "More tools" and then "Developer tools". Find the Console: Look for the tab labeled "Console" within the developer tools window. Add the CSP metatag to your website: This tells your browser which websites are allowed to send resources like images, fonts, and scripts to your page. Reload your website: This triggers the CSP checks. Watch for console errors: Any blocked resources will show up in the console as errors. Look for the website address (URL) mentioned in the error. See screenshot below Whitelist the necessary websites: Based on the console errors (screenshot below for example), add the relevant URLs to your CSP metatag using wildcards if needed (e.g., *.typekit.com instead of https://use.typekit.com). This allows resources from those websites to load on your page. Remember: Adding too many websites to your CSP can compromise security, so only allow the ones your website truly needs.
  13. @DomDom282 It looks like your website uses Ajax to load new content in without refreshing the page. Because it's using Ajax to refresh the page, you'll want to wrap your code with window.Squarespace.onInitialize(Y, function() {}) . This will cause the code to re-run on every ajax request. Added new JS code below that should resolve your issue. New JavaScript window.Squarespace.onInitialize(Y, function() { fetch('https://ipapi.co/json/') .then(response => response.json()) .then(data => { if (data.country_code === 'AU') { window.location.href = 'https://www.louisedemasi.com/my-art-supplies-au'; } }) .catch(err => console.log('Error:', err)); }); Be sure to keep the JS code wrapped in <script> tags like so: <script> // Add JS code here </script>
  14. @GarySmith I tested it out and it appears to be working when I added the CSS in an incognito window. I'm thinking it may have been a browser cache issue. You may need to do a hard refresh of your browser to see the changes.
  15. @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; }
×
×
  • 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.