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

tuanphan

Circle Member
  • Content Count

    6,303
  • Joined

  • Last visited

  • Days Won

    61

Everything posted by tuanphan

  1. don't understand what you mean. Can you describe in detail include screenshot? Thank you.
  2. Add to Home > Design > Custom CSS @media screen and (max-width:640px) { .Main-content { padding-top: 0; } div#block-yui_3_17_2_1_1583906902259_41269 { padding-top: 0 !important; } }
  3. Can you share link to an example post on your site or on SS 7.1 template? Some CSS can solve this
  4. Add to Home > Design > Custom CSS /* reduce spacing betweens content - navigation */ main#page { padding-top: 20px; } /* resize iframe */ main#page { max-width: 100%; }
  5. You can use SVG html code. It work work in Personal Plan. I did for a client 3-4 months ago. I will check again to see if I can find the code.
  6. Add to Home > Design > Custom CSS @media screen and (max-width:767px) { html, body { overflow-x: hidden; } }
  7. Add to Home > Design > Custom CSS .nav-toggle-label:before { visibility: visible; content: "HERE IS MENU"; color: #000; font-size: 20px; background: #f1f2f8; padding: 10px 20px; border-radius: 20px; }
  8. Can you share link to an example post? Some CSS can solve this
  9. Add to Home > Design > Custom CSS @media screen and (max-width:640px) { header#topBar { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; } }
  10. Some CSS can solve. Can you share link to your site?
  11. Which page you want to add? Like this? Add to Page Settings > Advanced > Header <style> section#page .main-content #galleryWrapper #slideshowWrapper:before { content: "A little text placeholder generator of Jeff Goldblum awesomeness."; display: block; margin-bottom: 20px; text-align: center; } </style>
  12. Hi I updated code in the guide.
  13. You can't add code to Squarespace to remove search bar & change links color. They are in iframe content. You need to edit at BatchGeo.com
  14. Difficult to move to bottom. if you want to hide it, let me know I will send the code.
  15. Which plan do you use? Personal or Business..?
  16. I think your site uses 640, not 768 ✌️
  17. I see it works... Demo: https://robin-triangle-z47x.squarespace.com/countdown?password=abc
  18. Use HTML <section class="counters"> <h3 class="counter" aria-label="$65.3M">$65.3M</h3> <h3 class="counter" aria-label="872K">872K</h3> <h3 class="counter" aria-label="$491">$491</h3> <h3 class="counter" aria-label="9875">9875</h3> </section> CSS @import url("https://fonts.googleapis.com/css?family=Barlow+Condensed:300,400,700&display=swap"); html { display: -webkit-box; display: flex; min-height: 100%; font-family: 'Barlow Condensed', sans-serif; box-sizing: border-box; } html * { font-family: inherit; } html *, html *::before, html *::after { box-sizing: inherit; } body { margin: 50px; width: 100%; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; background: -webkit-gradient(linear, left top, left bottom, from(red), to(transparent)), -webkit-gradient(linear, right bottom, left top, from(lime), to(transparent)), -webkit-gradient(linear, left bottom, right top, from(blue), to(transparent)); background: linear-gradient(red, transparent), linear-gradient(to top left, lime, transparent), linear-gradient(to top right, blue, transparent); background-size: cover; background-repeat: no-repeat; background-blend-mode: screen; } .counters { display: -webkit-box; display: flex; background: rgba(255, 255, 255, 0.75); padding: 20px; border-radius: 10px; box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2); } .counter { letter-spacing: 0.125rem; line-height: 1; position: relative; display: -webkit-box; display: flex; overflow: hidden; -webkit-box-align: center; align-items: center; height: 3.125rem; font-size: 3.125rem; margin: 0 1.25rem; font-weight: 400; } .counter > span { z-index: 1; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; height: 100%; -webkit-transition: -webkit-transform 2s ease; transition: -webkit-transform 2s ease; transition: transform 2s ease; transition: transform 2s ease, -webkit-transform 2s ease; -webkit-transform: translateY(0); transform: translateY(0); line-height: 1; } .counter > span span { -webkit-box-flex: 0; flex: 0 0 100%; height: 100%; } .counter:nth-child(1) > span { -webkit-transition-delay: 0s; transition-delay: 0s; } .counter:nth-child(2) > span { -webkit-transition-delay: 0.375s; transition-delay: 0.375s; } .counter:nth-child(3) > span { -webkit-transition-delay: 0.75s; transition-delay: 0.75s; } .counter:nth-child(4) > span { -webkit-transition-delay: 1.125s; transition-delay: 1.125s; } .counter:nth-child(5) > span { -webkit-transition-delay: 1.5s; transition-delay: 1.5s; } .counter:nth-child(6) > span { -webkit-transition-delay: 1.875s; transition-delay: 1.875s; } .counter:nth-child(7) > span { -webkit-transition-delay: 2.25s; transition-delay: 2.25s; } .counter:nth-child(8) > span { -webkit-transition-delay: 2.625s; transition-delay: 2.625s; } .counter:nth-child(9) > span { -webkit-transition-delay: 3s; transition-delay: 3s; } .counter:nth-child(10) > span { -webkit-transition-delay: 3.375s; transition-delay: 3.375s; } .counter:nth-child(11) > span { -webkit-transition-delay: 3.75s; transition-delay: 3.75s; } .counter:nth-child(12) > span { -webkit-transition-delay: 4.125s; transition-delay: 4.125s; } .counter:nth-child(13) > span { -webkit-transition-delay: 4.5s; transition-delay: 4.5s; } .counter:nth-child(14) > span { -webkit-transition-delay: 4.875s; transition-delay: 4.875s; } .counter:nth-child(15) > span { -webkit-transition-delay: 5.25s; transition-delay: 5.25s; } .counter:nth-child(16) > span { -webkit-transition-delay: 5.625s; transition-delay: 5.625s; } .counter:nth-child(17) > span { -webkit-transition-delay: 6s; transition-delay: 6s; } .counter:nth-child(18) > span { -webkit-transition-delay: 6.375s; transition-delay: 6.375s; } .counter:nth-child(19) > span { -webkit-transition-delay: 6.75s; transition-delay: 6.75s; } .counter:nth-child(20) > span { -webkit-transition-delay: 7.125s; transition-delay: 7.125s; } .counter:nth-child(1) { color: #EF8354; } .counter:nth-child(2) { color: #0EB1D2; } .counter:nth-child(3) { color: #2D3142; } .counter:nth-child(4) { color: #698F3F; } JavaScript <script> const stats = document.querySelectorAll(".counter"); stats.forEach(stat => { // pattern used to seperate input number from html into an array of numbers and non numbers. EX $65.3M -> ["$65.3M", "$", "65", ".", "3", "M"] const patt = /(\D+)?(\d+)(\D+)?(\d+)?(\D+)?/; const time = 1000; let result = [...patt.exec(stat.textContent)]; let fresh = true; let ticks; // Remove first full match from result array (we dont need the full match, just the individual match groups). result.shift(); // Remove undefined values from result array where they didnt have a match in one of the optional regex groups result = result.filter(res => res != null); while (stat.firstChild) { stat.removeChild(stat.firstChild); } for (let res of result) { if (isNaN(res)) { stat.insertAdjacentHTML("beforeend", `<span>${res}</span>`); } else { for (let i = 0; i < res.length; i++) { stat.insertAdjacentHTML( "beforeend", `<span data-value="${res[i]}"> <span>&ndash;</span> ${Array(parseInt(res[i]) + 1) .join(0) .split(0) .map( (x, j) => ` <span>${j}</span> ` ) .join("")} </span>` ); } } } ticks = [...stat.querySelectorAll("span[data-value]")]; let activate = () => { let top = stat.getBoundingClientRect().top; let offset = window.innerHeight * 3 / 4; setTimeout(() => { fresh = false; }, time); if (top < offset) { setTimeout(() => { for (let tick of ticks) { let dist = parseInt(tick.getAttribute("data-value")) + 1; tick.style.transform = `translateY(-${dist * 100}%)`; } }, fresh ? time : 0); window.removeEventListener("scroll", activate); } }; window.addEventListener("scroll", activate); activate(); }); </script>
×
×
  • Create New...