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


Circle Member
  • Posts

  • Joined

  • Last visited

Everything posted by taylorroy

  1. @bangank36 Actually, sorry, the page links in the menu are no longer clickable. Is it possible that this script is causing that error, overriding the menu function? Potentially could be a conflict with other code on my site, but thought you might have insight. site: https://tjr-new-site.squarespace.com/portfolio/pw: troytroy
  2. I would like to apply this sort of feature to my Mobile Menu forced on desktop. As in, this menu opens on the right side and I'd like to be able to exit by clicking outside. What code could I use to close the menu when user clicks outside of the menu / over the main body, without using the 'x'? site: https://tjr-new-site.squarespace.com/portfolio/ pw: troytroy Thx!
  3. Still looking for insight on this, if anyone can help.
  4. Dave—Thanks for your generosity of time + knowledge to help me make sense of this. It was all a bit of a reach for my coding knowledge, but I learned quite a bit from your explanation! Thanks so much. I'll take a pass later, removing the containment and change how I'm targeting each image.
  5. Site URL: https://tjr-new-site.squarespace.com/ hey hey! I'm using a code block (with HTML + JS, then CSS) to create a draggable block section. Under 'About.' (Brine/Rally 7.0) These images under 'About' can be moved around the page with cursor by a visitor. I used CSS to set the starting location of each individual image. When you view the section of the index page as its own page, it works as it should. When the section is viewed within its index page home, the images cannot be moved to the left on the x-axis. Works (able to slide img around): https://tjr-new-site.squarespace.com/about Does not work (img can't move to the left past its starting place): https://tjr-new-site.squarespace.com scroll down to About pw: troysitehelp Any ideas on why it works in one place and not the other, and how to address? Thx.
  6. No prob! Yes, I want to avoid sliding in from the left to attach to the right. Should appear from the right, or just, appear.
  7. @tuanphan lmk if you have tips. please and thanks!
  8. link: https://tjr-new-site.squarespace.com/sandbox pw: troysitehelp
  9. Does anyone have code for changing the direction that the Mobile Menu (.Mobile-overlay) slides in from? On Brine / Rally, 7.0. I'm using the below code to anchor the menu fly-out to the right, but when it opens/appears it has a really awkward transition sliding in from the left. .is-mobile-overlay-active .Mobile-overlay {left:auto; right:0;}
  10. wow, of course haha. sometimes you're in too deep and need to be reminded of the simple things! Thank you!!
  11. Is there a way to apply this JS to only the home page? And it remains as normal on all other pages? Thanks.
  12. Site URL: https://tjr-new-site.squarespace.com/slider I’m looking to create an accordion / slider where each section expands on hover, as demonstrated in the gif mockup. I'm having trouble adapting the code snippets I'm finding to have the right animation, and formatting the content within each section (most I've seen use full background images with caption). The code I started with: https://www.cssscript.com/pure-css-horizontal-responsive-image-accordion-slider/ pw for my scary first attempt: troysitehelp I'd love anyone's input on how to "hack" this for squarespace—i.e. laying out content in SS editor, and adjusting the code to reference this, or if anyone would like to quote an estimate to build this.
  13. Hm, Ajax loading was already disabled. I turned it on + off again, but it still displays on page load (then when you scroll, it fades out for a moment before reappearing).
  14. hey @tuanphan, I see your back to top button referenced all over. I added it to my site, including the extra JS. Mostly works, but upon page load, the ^top button appears on the hero. It briefly fades out when you scroll before reappearing. I would like it to be hidden until you get towards the bottom of the page. Any tips on where to fix this? Thanks. site: https://clairepattee-wip.squarespace.com/ pw: cpc2021
  15. hey there @tuanphan! No CSS, here's the JS injected to header: <style> .sp-intro { text-align: left; } .sp-headline { margin: 0 !important; } .sp-intro b { font-weight: inherit !important; } .sp-intro { line-height: ; font-size: ; font-weight: 400 !important; font-style: initial; color: ; } .sp-words-wrapper { display: inline-block; position: relative; text-align: left; width: auto !important; } .sp-words-wrapper b { display: inline-block; position: absolute; white-space: nowrap; left: 0; top: 0; } .sp-words-wrapper b.is-visible { position: relative; } .no-js .sp-words-wrapper b { opacity: 0; } .no-js .sp-words-wrapper b.is-visible { opacity: 1; } .sp-headline.slide span { display: inline-block; padding: 0; } .sp-headline.slide .sp-words-wrapper { overflow: hidden; vertical-align: bottom; width: auto; } .sp-headline.slide b { opacity: 0; top: .2em; } .sp-headline.slide b.is-visible { top: 0; opacity: 1; -webkit-animation: fade 0.6s; -moz-animation: fade 0.6s; animation: fade 0.6s; } .sp-headline.slide b.is-hidden { -webkit-animation: fade-out 0.6s; -moz-animation: fade-out 0.6s; animation: fade-out 0.6s; } @-webkit-keyframes slide-in { 0% { opacity: 0; -webkit-transform: translateY(-100%); } 60% { opacity: 1; -webkit-transform: translateY(20%); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes slide-in { 0% { opacity: 0; -moz-transform: translateY(-100%); } 60% { opacity: 1; -moz-transform: translateY(20%); } 100% { opacity: 1; -moz-transform: translateY(0); } } @keyframes slide-in { 0% { opacity: 0; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } 60% { opacity: 1; -webkit-transform: translateY(20%); -moz-transform: translateY(20%); -ms-transform: translateY(20%); -o-transform: translateY(20%); transform: translateY(20%); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes slide-out { 0% { opacity: 1; -webkit-transform: translateY(0); } 60% { opacity: 0; -webkit-transform: translateY(120%); } 100% { opacity: 0; -webkit-transform: translateY(100%); } } @-moz-keyframes slide-out { 0% { opacity: 1; -moz-transform: translateY(0); } 60% { opacity: 0; -moz-transform: translateY(120%); } 100% { opacity: 0; -moz-transform: translateY(100%); } } @keyframes slide-out { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 60% { opacity: 0; -webkit-transform: translateY(120%); -moz-transform: translateY(120%); -ms-transform: translateY(120%); -o-transform: translateY(120%); transform: translateY(120%); } 100% { opacity: 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } } @media (min-width : 668px) and (max-width : 1024px) { .sp-intro { line-height: !important; font-size: !important; } } @media (max-width : 667px) { .sp-intro { line-height: !important; font-size: !important; } } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script> $(document).ready(function($){ var animationDelay = 2500, barAnimationDelay = 3800, barWaiting = barAnimationDelay - 3000, lettersDelay = 50, typeLettersDelay = 150, selectionDuration = 500, typeAnimationDelay = selectionDuration + 800, revealDuration = 600, revealAnimationDelay = 1500; initHeadline(); function initHeadline() { singleLetters($('.sp-headline.letters').find('b')); animateHeadline($('.sp-headline')); } function singleLetters($words) { $words.each(function(){ var word = $(this), letters = word.text().split(''), selected = word.hasClass('is-visible'); for (i in letters) { if(word.parents('.rotate-2').length > 0) letters[i] = '<em>' + letters[i] + '</em>'; letters[i] = (selected) ? '<i class=“in”>' + letters[i] + '</i>': '<i>' + letters[i] + '</i>'; } var newLetters = letters.join(''); word.html(newLetters).css('opacity', 1); }); } function animateHeadline($headlines) { var duration = animationDelay; $headlines.each(function(){ var headline = $(this); if(headline.hasClass('loading-bar')) { duration = barAnimationDelay; setTimeout(function(){ headline.find('.sp-words-wrapper').addClass('is-loading') }, barWaiting); } else if (headline.hasClass('clip')){ var spanWrapper = headline.find('.sp-words-wrapper'), newWidth = spanWrapper.width() + 10 spanWrapper.css('width', newWidth); } else if (!headline.hasClass('type') ) { var words = headline.find('.sp-words-wrapper b'), width = 0; words.each(function(){ var wordWidth = $(this).width(); if (wordWidth > width) width = wordWidth; }); headline.find('.sp-words-wrapper').css('width', width); }; setTimeout(function(){ hideWord( headline.find('.is-visible').eq(0) ) }, duration); }); } function hideWord($word) { var nextWord = takeNext($word); if($word.parents('.sp-headline').hasClass('type')) { var parentSpan = $word.parent('.sp-words-wrapper'); parentSpan.addClass('selected').removeClass('waiting'); setTimeout(function(){ parentSpan.removeClass('selected'); $word.removeClass('is-visible').addClass('is-hidden').children('i').removeClass('in').addClass('out'); }, selectionDuration); setTimeout(function(){ showWord(nextWord, typeLettersDelay) }, typeAnimationDelay); } else if($word.parents('.sp-headline').hasClass('letters')) { var bool = ($word.children('i').length >= nextWord.children('i').length) ? true : false; hideLetter($word.find('i').eq(0), $word, bool, lettersDelay); showLetter(nextWord.find('i').eq(0), nextWord, bool, lettersDelay); }else if($word.parents('.sp-headline').hasClass('clip')) { $word.parents('.sp-words-wrapper').animate({ width : '2px' }, revealDuration, function(){ switchWord($word, nextWord); showWord(nextWord); }); } else if ($word.parents('.sp-headline').hasClass('loading-bar')){ $word.parents('.sp-words-wrapper').removeClass('is-loading'); switchWord($word, nextWord); setTimeout(function(){ hideWord(nextWord) }, barAnimationDelay); setTimeout(function(){ $word.parents('.sp-words-wrapper').addClass('is-loading') }, barWaiting); } else { switchWord($word, nextWord); setTimeout(function(){ hideWord(nextWord) }, animationDelay); } } function hideLetter($letter, $word, $bool, $duration) { $letter.removeClass('in').addClass('out'); if(!$letter.is(':last-child')) { setTimeout(function(){ hideLetter($letter.next(), $word, $bool, $duration); }, $duration); } else if($bool) { setTimeout(function(){ hideWord(takeNext($word)) }, animationDelay); } if($letter.is(':last-child') && $('html').hasClass('no-csstransitions')) { var nextWord = takeNext($word); switchWord($word, nextWord); } } function showLetter($letter, $word, $bool, $duration) { $letter.addClass('in').removeClass('out'); if(!$letter.is(':last-child')) { setTimeout(function(){ showLetter($letter.next(), $word, $bool, $duration); }, $duration); } else { if($word.parents('.sp-headline').hasClass('type')) { setTimeout(function(){ $word.parents('.sp-words-wrapper').addClass('waiting'); }, 200);} if(!$bool) { setTimeout(function(){ hideWord($word) }, animationDelay) } } } function takeNext($word) { return (!$word.is(':last-child')) ? $word.next() : $word.parent().children().eq(0); } function takePrev($word) { return (!$word.is(':first-child')) ? $word.prev() : $word.parent().children().last(); } function switchWord($oldWord, $newWord) { $oldWord.removeClass('is-visible').addClass('is-hidden'); $newWord.removeClass('is-hidden').addClass('is-visible'); } document.addEventListener('pageChange', function(){ animationDelay = 2500; barAnimationDelay = 3800; barWaiting = barAnimationDelay - 3000; lettersDelay = 50; typeLettersDelay = 150; selectionDuration = 500; typeAnimationDelay = selectionDuration + 800; revealDuration = 600; revealAnimationDelay = 1500; initHeadline(); }); window.onload = watch; function watch(){MutationObserver=window.MutationObserver||window.WebKitMutationObserver;var a=new MutationObserver(function(a){for(var b=0;b<a.length;b++){var c=a[b];if("attributes"===c.type){var d=new Event("pageChange");document.dispatchEvent(d)}}});a.observe(document.body,{attributes:!0,attributeFilter:["id"]})} }); </script>
  16. Site URL: https://tjr-new-site.squarespace.com/ Hi there! I've perused a few forums and eventually found a nice, functional solution for having 1 word in a text block rotate through multiple words. (ex: Taylor is a "print"/"web"/"brand" designer...) Visual example, though not the code I'm using. I would like to know how I can tweak the JavaScript or HTML so that the affect applies to 2 instances in the same sentence. (ex: Taylor is a "print"/"web"/"brand" designer who has experience with "client1"/"client2"/"client3".) I'm not familiar at all with writing JS. Here's what I have in the text code block: <section class="sp-intro"> <h3 class="sp-headline slide"> <span>Taylor is a(n) <span class="sp-words-wrapper"> <b class="is-visible">organized</b> <b>brand</b> <b>print</b> <b>web</b> </span> designer who has experience with </span> <span class="sp-words-wrapper"> <b class="is-visible">branding</b> <b>consumer goods</b> <b>packaging</b> <b>websites</b> <b>books</b> </span>. </h3> </section> Of course, the first animation works fine, the second span class does not rotate through. I tried changing the 2nd instance to "sp-words-wrapper-b", and adding that throughout the Js, but also did not work. Here's my site, pw: troysitehelp
  • Create New...