Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

jpeter

Member
  • Content Count

    67
  • Joined

  • Last visited

3 Followers

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. @dnmddy Hello there! Increasing the specificity should do the trick, so try replacing the line: var elements = document.querySelectorAll('.event-time-12hr'); with var elements = document.querySelectorAll('.mega-menu-container .event-time-12hr'); This way it only target the times in the mega menu.
  2. Missing an = after the id attribute. Should be: <div id="anchor"> </div>
  3. @Triple8 Get rid of opacity: 1 !important; in the .image-caption-wrapper CSS ruleset and then increase the transition speed from 0.1s to something like 0.5s
  4. Oh ok I see the issue, the content of the mega menu is being dynamically added in using Ajax and on my end it take about 2 seconds for it to load in which is why changing that value to 5000 works. You can probably play around with that value and reduce to like 3000.
  5. @dnmddy Modified the code a bit, try this out: (function () { // Defer running the script in milliseconds. Default is 0. var DEFER_LOADING = 0; if (window.NodeList && !NodeList.prototype.forEach) { NodeList.prototype.forEach = Array.prototype.forEach; } if (document.readyState == 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } if(window.MutationObserver && typeof window.MutationObserver === 'function') { var targetNode = document.querySelector('.mega-menu-container'); if(targetNode) { var config = { attributes: true, childList: true, subtree: true }; var observer = new MutationObserver(init); observer.observe(targetNode, config); } } function init() { setTimeout(function(){ var elements = document.querySelectorAll('.event-time-12hr'); if(elements) { elements.forEach(function (el) { var time = el.textContent; el.textContent = time.replace(/^(\d+:\d+\s?(?:A|P)M).*$/, '$1'); }); } }, DEFER_LOADING); } })();
  6. @ChristopherBerman You can use the following code below. HTML Added a cta-button--outline class to the second button to style it different from the default, which is solid I removed the &nbsp; and used CSS margin to space the buttons apart <a class="button cta-button" href="https://www.elevated.no/priser">Se Priser</a> <a class="button cta-button cta-button--outline" href="https://www.elevated.no/tjenester">Kom i gang</a> CSS .button { border: 2px solid #2cd4d9; border-radius: 50px; background: #2cd4d9; display: inline-block; text-decoration: none; font-size: 15px; font-weight: 500; text-align: center; padding: 15px 20px; width: 103px; color: #000080 } .button:hover, .button:focus{ background: none; color: #FFF; opacity: 1 !important; transition: 0.5s !important; } /* Space buttons apart if they're next to each other */ .button + .button { margin-left: 1rem; } /* Create a class specific for buttons that are outlined */ .cta-button--outline { border: 2px solid #2cd4d9; color: white; background: none; } .cta-button--outline:hover, .cta-button--outline:focus { background: #2cd4d9; } Here's what it produces: jqtoGBvE9H.mp4
  7. You can add the following javascript code to handle this: (function () { addPolyfills(); if (document.readyState == 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } function init() { var imageWrappers = document.querySelectorAll('.image-block-outer-wrapper.layout-caption-overlay-hover'); imageWrappers.forEach(function(wrapper){ wrapper.style.cursor = 'pointer'; }); delegate(document, 'click', '.image-block-outer-wrapper.layout-caption-overlay-hover', function (evt) { var link = evt.target.querySelector('a'); if (link) { link.click(); } }); } function delegate(target, eventName, selector, handler) { target.addEventListener(eventName, function (event) { if (matches(event)) { handler(event); } }); function matches(event) { const element = event.target.closest(selector); return element !== null; }; } function addPolyfills() { if (window.NodeList && !NodeList.prototype.forEach) { NodeList.prototype.forEach = Array.prototype.forEach; } if (!Element.prototype.matches) { Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector; } if (!Element.prototype.closest) { Element.prototype.closest = function (s) { var el = this; do { if (Element.prototype.matches.call(el, s)) return el; el = el.parentElement || el.parentNode; } while (el !== null && el.nodeType === 1); return null; }; } } })(); Be sure to include the JS code in between <script> tags, e.g: <script> // Insert JS code here </script> See article on how to add JS code https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-HTML-CSS-and-JavaScript
  8. @dnmddy that tells me there may be javascript code for summary blocks that may be running after the code I wrote get's ran. If that's the case, I updated the code to defer when it get's ran after a period of time. I created a DEFER_LOADING variable you can update in the code below. I set it to 500 milliseconds for now. (function () { // Defer loading in milliseconds. var DEFER_LOADING = 500; if (window.NodeList && !NodeList.prototype.forEach) { NodeList.prototype.forEach = Array.prototype.forEach; } if (document.readyState == 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } function init() { setTimeout(function(){ var elements = document.querySelectorAll('.event-time-12hr'); if(elements) { elements.forEach(function (el) { var time = el.textContent; el.textContent = time.replace(/^(\d+:\d+\s?(?:A|P)M).*$/, '$1'); }); } }, DEFER_LOADING); } })();
  9. @dnmddy Try adding the code to the Footer rather than the Header. See screenshot:
  10. @Carrian You'll want to add another product variant. Here's an article describing how to do that https://support.squarespace.com/hc/en-us/articles/206540687-Adding-basic-product-variants
  11. @rodri333 You can get away with this using JS, here's the code: (function () { if (window.NodeList && !NodeList.prototype.forEach) { NodeList.prototype.forEach = Array.prototype.forEach; } if (document.readyState == 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } function init() { var elements = document.querySelectorAll('.event-time-12hr'); if(elements) { elements.forEach(function (el) { var time = el.textContent; el.textContent = time.replace(/^(\d+:\d+\s?(?:A|P)M).*$/, '$1'); }); } } })(); Be sure to add the JS code between <script> tag, e.g. <script> // Add JS code here </script> Here's a video of me running the script using Chrome's dev console: Nx2trLElSa.mp4
  12. @veganedge It appears to be working fine. Perhaps you just needed to give the DNS settings time to update. See video below: Nn92lGvCas.mp4
  13. @Ptphotography You can add the following JavaScript and CSS below. Feel free to update the TEXT variable in the JavaScript code to whatever you want: JavaScript (function(document){ // Customize TEXT variable. var TEXT = 'Cart'; /******************************************************************** * DO NOT MODIFY CODE BELOW, unless you know what you're doing. *******************************************************************/ if(document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } function init(){ var cartInner = document.querySelector('.Cart-inner'); if(cartInner) { var qty = document.querySelector('.icon-cart-quantity'); var div = document.createElement('div'); div.setAttribute('class', 'Cart-inner-content'); div.innerHTML = TEXT; cartInner.insertBefore(div, qty); } } })(document); CSS .Cart-inner { display: flex; align-items: center; } .Cart-inner-content { text-transform: uppercase; } .icon-cart-quantity, .sqs-cart-quantity { position: static; padding: initial; font-size: 0.8rem; } .icon-cart-quantity { margin-left: 5px; position: static !important; } .sqs-cart-quantity:after { content: ')'; } .sqs-cart-quantity:before { content: '('; } .header .header-actions-action--cart a.icon { width: auto; height: auto; padding: .8rem; background-color: #eee; } .header .header-actions-action--cart svg.icon--cart { width: 25px; height: 20px; padding: 0 5px 0 0; } .header-display { /* flex-wrap: wrap; */ } .header-actions--right { /* width: 100%; */ } @media (min-width: 1180px) { .header-actions-action--cart a.icon { position: absolute; bottom: -2rem; right: 1rem; } } Be sure to add the JavaScript between <script> tags and the CSS between <style> tags, example: <style> /* Add CSS Code here */ </style> <script> // Add JS code here </script> I would use Site-wide code injection, see article https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-HTML-CSS-and-JavaScript
  14. @Falconer You can add the JS below. This will treat the text as a clickable. JavaScript (function(document){ if(document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } function init(){ addClosestPolyfill(); delegate(document, 'click', '.gallery-caption-grid-masonry', function(evt){ var item = evt.target.closest('.gallery-masonry-item.has-clickthrough'); if(item) { item.querySelector('a').click(); } }); } function delegate (target, eventName, selector, handler) { target.addEventListener(eventName, function (event) { if (matches(event)) { handler(event); } }); function matches(event) { const element = event.target.closest(selector); return element !== null; }; } function addClosestPolyfill(){ if (!Element.prototype.matches) { Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector; } if (!Element.prototype.closest) { Element.prototype.closest = function(s) { var el = this; do { if (Element.prototype.matches.call(el, s)) return el; el = el.parentElement || el.parentNode; } while (el !== null && el.nodeType === 1); return null; }; } } })(document); Be sure to add the code to <script> tags, example: <script> // add js code here </script>
  15. @Falconer You can try adding the CSS below to the page .gallery-caption-grid-masonry { opacity: 0; z-index: -1; transition: all .2s; position: absolute; top: 50%; transform: translateY(-50%); left: 0; text-align: center; color: #fff; height: 100%; padding: 0; } .gallery-masonry-item:not(.has-clickthrough) .gallery-caption-grid-masonry:before { background-color: rgba(0, 0, 0, 0.4); content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; opacity: 0; transition: all .5s; } .gallery-masonry-item.has-clickthrough:hover .gallery-caption-grid-masonry { z-index: 0; opacity: 1; height: auto; } .gallery-masonry-item:not(.has-clickthrough):hover .gallery-caption-grid-masonry { z-index: 0; opacity: 1; } .gallery-masonry-item:hover .gallery-caption-grid-masonry:before { opacity: 1; transition: all .5s; } .gallery-caption-grid-masonry .gallery-caption-wrapper { display: flex; align-items: center; justify-content: center; } .gallery-caption-grid-masonry p.gallery-caption-content { z-index: 1000; font-size: 1.3rem; } This will add the following effect: z8f5SMZ9Is.mp4
×
×
  • Create New...