-
Posts
45 -
Joined
-
Last visited
Reputation Activity
-
tors reacted to jpeter in Change Blog Pagination from Prev/Next to Next/Prev
The JavaScript below should work. It swaps the URL and Title.
JavaScript
(function(){ // Get previous element url and title const prevEl = document.querySelector('.item-pagination-link--prev'); const prevUrl = prevEl && prevEl.getAttribute('href'); const prevTitleEl = prevEl && prevEl.querySelector('.item-pagination-title'); const prevTitle = prevTitleEl && prevTitleEl.textContent; const prevTitleWrapper = prevEl && prevEl.querySelector('.pagination-title-wrapper'); const prevIcon = prevEl && prevEl.querySelector('.icon'); // Get next element url and title const nextEl = document.querySelector('.item-pagination-link--next'); const nextUrl = nextEl && nextEl.getAttribute('href'); const nextTitleEl = nextEl && nextEl.querySelector('.item-pagination-title'); const nextTitle = nextTitleEl && nextTitleEl.textContent; const nextTitleWrapper = nextEl && nextEl.querySelector('.pagination-title-wrapper'); const nextIcon = nextEl && nextEl.querySelector('.icon'); // Handle when user is on first page if(!prevEl && nextEl && nextTitleWrapper) { const tpl = document.createElement('template'); tpl.innerHTML = `<div class="item-pagination-icon icon icon--stroke"><svg class="caret-left-icon--small" viewBox="0 0 9 16"><polyline fill="none" stroke-miterlimit="10" points="7.3,14.7 2.5,8 7.3,1.2"></polyline></svg></div>`; nextTitleWrapper.innerHTML = nextTitleWrapper.innerHTML.replace(/\bNext\b/g, 'Previous'); nextEl.classList.add('item-pagination-link--prev'); nextEl.classList.remove('item-pagination-link--next'); nextIcon && nextEl.removeChild(nextIcon); nextIcon && nextEl.prepend(tpl.content) } // Handle when user is on last page if(prevEl && !nextEl && prevTitleWrapper) { const tpl = document.createElement('template'); tpl.innerHTML = `<div class="item-pagination-icon icon icon--stroke"><svg class="caret-right-icon--small" viewBox="0 0 9 16"><polyline fill="none" stroke-miterlimit="10" points="1.6,1.2 6.5,7.9 1.6,14.7"></polyline></svg></div>`; prevTitleWrapper.innerHTML = prevTitleWrapper.innerHTML.replace(/\bPrevious\b/g, 'Next'); prevEl.classList.add('item-pagination-link--next'); prevEl.classList.remove('item-pagination-link--prev'); prevIcon && prevEl.removeChild(prevIcon); prevIcon && prevEl.appendChild(tpl.content) } // Set next element title and url with the previous if(nextEl && nextTitleEl && prevUrl && prevTitle) { nextEl.setAttribute('href', prevUrl); nextTitleEl.textContent = prevTitle; } // Set previous element title and url with the next if(prevEl && prevTitleEl && nextUrl && nextTitle) { prevEl.setAttribute('href', nextUrl); prevTitleEl.textContent = nextTitle; } })()
Make sure you add the JavaScript to the Footer using Code Injection and place it between <script> tags, e.g.
<script> // Add JS here </script>
Here's a video of me updating the JS via Chrome's dev tools to ensure it works.
9xlp5mzmcK.mp4
-
tors reacted to jpeter in Change Blog Pagination from Prev/Next to Next/Prev
@tors Updated the code above to account for the first and last books in the series.
-
tors reacted to iamdavehart in Reverse the order of blog posts (Oldest at the top)
First thing to know is that a CSS solution (or a client-side JS solution for that matter) can only affect elements that have already been loaded up. that means that you can only reverse the order of the first n posts which squarespace. (n is set in the blog page settings and can go up to a max of 20).
if you're ok with that, then it's actually pretty easy. just make sure that the blog container you're using is set to flex and then reverse the flex direction.
so in your case - as you're using side-by-side - just add this to your css.
.blog-side-by-side-wrapper { display:flex; flex-direction:column-reverse; } remember though, if your page is set to show n articles and you add n+1 articles to your blog then you won't get the oldest post. you'll get the oldest post of the first n newest posts.... your pagination would also be a bit weird.
PS. the first computer we ever had in our house was a TRS-80!
ADDENDUM: Pagination on item pages
I looked at your post and you want to swap the pagination links as well. A little trickier, as the next and previous are aligned and padded in specific ways with arrow icons. But you can do it.
reverse the flex direction invert the padding flip the icons 100% horizontal prefix the css rules with this particular blog collection-id as you don't want to change other pagination in the site
body.collection-642f14ee1e413265ff0d44f2 section#itemPagination { flex-direction: row-reverse; } body.collection-642f14ee1e413265ff0d44f2 a.item-pagination-link.item-pagination-link--next { margin-left: 0; margin-right: auto; flex-direction: row-reverse; } body.collection-642f14ee1e413265ff0d44f2 a.item-pagination-link.item-pagination-link--prev { margin-right: 0; margin-left: auto; flex-direction: row-reverse; } body.collection-642f14ee1e413265ff0d44f2 a.item-pagination-link.item-pagination-link--next .item-pagination-icon { padding-left: 0px; padding-right: 25px; } body.collection-642f14ee1e413265ff0d44f2 a.item-pagination-link.item-pagination-link--prev .item-pagination-icon { padding-right: 0px; padding-left: 25px; } body.collection-642f14ee1e413265ff0d44f2 a.item-pagination-link.item-pagination-link--prev { margin-right: 0; margin-left: auto; flex-direction: row-reverse; } body.collection-642f14ee1e413265ff0d44f2 a.item-pagination-link svg { transform: scaleX(-100%); }
-
tors reacted to tuanphan in Typewriter & delete effect? TypeIt or something similar
Just solved for 3 members. Add all to Code Block
<div class="container"> <h1> typewriter01 | <!-- The words that we want to have typerwriter effect --> <span class="txt-type" data-wait="3000" data-words='["consultancy", "food", "creative tech", "ranj"]'></span> </h1> </div> <style> /* CSS RESET */ /* ALIGN CONTENT */ .container { display: flex; /* Remove horizontal 'justify-content' center if you want the base text not to move */ justify-content: center; align-items: center; } /* ADD CURSOR */ .txt-type > .txt { border-right: 0.08rem solid #fff; padding-right: 2px; /* Animating the cursor */ animation: blink 0.6s infinite; } /* ANIMATION */ @keyframes blink { 0% { border-right: 0.08rem solid rgba(255, 255, 255, 1); } 100% { border-right: 0.08rem solid rgba(255, 255, 255, 0.2); } } #page .section-background {background: white;} #page section * {color: black !important;} #page .content { width: 100%; } </style> <script> class TypeWriter { constructor(txtElement, words, wait = 3000) { this.txtElement = txtElement; this.words = words; this.txt = ""; this.wordIndex = 0; this.wait = parseInt(wait, 10); this.type(); this.isDeleting = false; } type() { // Current index of word const current = this.wordIndex % this.words.length; // Get full text of current word const fullTxt = this.words[current]; // Check if deleting if (this.isDeleting) { // Remove characters this.txt = fullTxt.substring(0, this.txt.length - 1); } else { // Add charaters this.txt = fullTxt.substring(0, this.txt.length + 1); } // Insert txt into element this.txtElement.innerHTML = `<span class="txt">${this.txt}</span>`; // Initial Type Speed let typeSpeed = 50; if (this.isDeleting) { // Increase speed by half when deleting typeSpeed /= 2; } // If word is complete if (!this.isDeleting && this.txt === fullTxt) { // Make pause at end typeSpeed = this.wait; // Set delete to true this.isDeleting = true; } else if (this.isDeleting && this.txt === "") { this.isDeleting = false; // Move to next word this.wordIndex++; // Pause before start typing typeSpeed = 500; } setTimeout(() => this.type(), typeSpeed); } } // Init On DOM Load document.addEventListener("DOMContentLoaded", init); // Init App function init() { const txtElement = document.querySelector(".txt-type"); const words = JSON.parse(txtElement.getAttribute("data-words")); const wait = txtElement.getAttribute("data-wait"); // Init TypeWriter new TypeWriter(txtElement, words, wait); } </script> Notes: Haven't tested with SS 7.0
-
tors reacted to tuanphan in How to force mobile menu to remain on desktop site - v. 7.1
Thank you. I just tweaked your code to work on my site, 7.1
Here is code
/* 768 for tablet - desktop - 992 for desktop */ @media screen and (min-width:768px) { /* hide navigation */ .header-nav { display: none; } /* Hide header button */ .header-actions { display: none; } /* show burger */ .header-burger { display: flex; } /* Show overlay mobile menu */ .header--menu-open .header-menu { opacity: 1; visibility: visible; } }
-
tors reacted to tuanphan in Customisation of product pages (7.0 Wells)
Add to Last Line in Code Injection > Footer
<script> $(document).ready(function() { $('.product-description').insertAfter('div#productThumbnails'); }); </script>
-
tors got a reaction from Beyondspace in Customisation of product pages (7.0 Wells)
Site URL: https://podcastology.co/templates/solo-episode-planner
Hi,
I'm wondering if there's a way to use the space on a product page better than the default settings currently do. I'm using Wells and I'd like to move the .product-description section up under the image carousel if possible, but only on tablet and upwards (or wherever the two columns kick in) so that blank space on the left is filled a bit better.
Product Page: https://podcastology.co/templates/solo-episode-planner
If possible, I'd also like to put the price and the buy now button on the same line, is that doable?
Many thanks in advance!
Tors
-
tors got a reaction from Beyondspace in Customisation of product pages (7.0 Wells)
Thanks tuanphan, unfortunately that's made no difference to the layout. Just for clarity, I've upload an image to show what I'm after a bit better as I'm not sure I'm explaining it very well, and the change needs to be on desktop only please.
-
tors reacted to trekyourmarket in Redirect add to cart button
Once someone has clicked the add to cart button (and the item has gone to their cart). How do I automatically redirect them to another page within the site?
I thought maybe changing the ecommerce site to allow express checkout - so once they click purchase it redirects them to the checkout page - but instead would redirect to another page within the site.
Ex. They want to purchase a blanket within the shop. They select how many they need and then select "purchase". Once they click "purchase" they are then directed to a new page allowing them to purchase monogramming for that blanket.
Thanks ahead of time!
-
tors reacted to XaQQhcQtEhfdzDvpDdQb in Summary Block: How can I set the Carousel to "autoplay"?
I love the new Summary Block carousel. I'm curious if it's possible to "autoplay" the carousel much like galleries can do. I know this is possible using Developer Platform galleries, but would love to be able to use with Block Carousels.