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 MayaViolet

  1. Site URL: https://bywater-collective.squarespace.com/home Hey y'all - This animation was working earlier, but has recently stopped and I can't figure out why. I've targeted the "Footer-blocks--bottom," using javascript to add a class of ".loading-next" once the user has scrolled to the bottom of the page, then the animation is applied that blinks between different background colors of the "Footer-blocks-bottom" and the h2 text. I can see on inspection, that the script is executing correctly - so it seems that the CSS is the problem. I've played around, adding !important tags, and bringing the code to the bottom of the CSS block, using actual colors over the variables, but I can't get it to work... Any ideas appreciated! Thanks! Site: https://bywater-collective.squarespace.com/home (PW: byctest) .loading-next { -webkit-animation: loading01 8s ease-in-out 1 forwards; animation: loading01 8s ease-in-out 1 forwards; font-weight: 400 !important; } .loading-next h2 a { -webkit-animation: loading01 8s ease-in-out 1 forwards; animation: loading01 8s ease-in-out 1 forwards; font-weight: 400 !important; } @keyframes loading01 { 0% { opacity: 1; background-color: var(--color-f-bg-load-a) !important; } 20% { opacity: 1; background-color: var(--color-f-bg-load-b) !important; color: var(--color-f-text-load) !important; } 40% { opacity: 1; background-color: var(--color-f-bg-load-a) !important; } 60% { opacity: 1; background-color: var(--color-f-bg-load-b) !important; color: var(--color-f-text-load) !important; } 80% { opacity: 1; background-color: var(--color-f-bg-load-a) !important; } 100% { opacity: 1; background-color: var(--color-f-bg-load-b) !important; color: var(--color-f-text-load) !important; } }
  2. Hi @xoxngo - you'll want to add the CSS to your custom CSS section, the javascript to your Header Code Injection, and then the toggle code will need to be applied as html via a codeblock on the page/area you'd like to apply the mode toggle section. Having a baseline understanding of these languages definitely helps - it's also helpful to take a look at the codepens included in the tutorial, and see how they broke down the html, CSS and javascript sections! Hope that helps 🙂
  3. Hey y'all - was shared the link to this amazing tutorial if anyone is interested how to do this!
  4. Yes - the tag is actually the date beneath the title, "Nov 20 2020" then the comma, then a hidden tag titled "dark-light" that applies a CSS rule to keep the title dark text, and the intro paragraph light text. I applied the code in the Header Injection for the entire site, as well as in the Page Header Code Injection and the Post Blog Item Code Injection in attempt to get it to work!
  5. Site URL: https://bywater-collective.squarespace.com/photography-journal/madi-garrett Hey y'all - I'm using blog tags as way to target blog post for unique CSS application, and therefore have set the post to hide the names of these specific tags when displayed on the blog post header. However, this javascript is no longer hiding the loose comma that appears, between the visible tag, and the hidden and I'm not sure why.... Would appreciate any help! TIA! Note - would only like to remove commas of the meta item tag, not category <script> $('.Blog-meta-item .Blog-meta-item--tags').map(function(val, i) { this.innerHTML = this.innerHTML.replace(/,/g, ' '); }) </script> Site: https://bywater-collective.squarespace.com/photography-journal/madi-garrett PW: byctest
  6. Site URL: https://bywater-collective.squarespace.com/ Hi all - I am trying to use Jquery in order to give the ability for visitors to choose between a specific color theme on my client's 7.0 website. I have seen a number of tutorials walking through light vs dark mode, however I am trying to accomplish the following : Have three separate "color themes," that alter the index-page background color, and h1 font-color Depending on the "color theme" that is selected, have the logo image source, and photo image source within our mega-menu change accordingly. Here is an example of a website that displays the ability to toggle between "themes," and I've attached mockup examples of each "style". You can find my client site here, I appreciate any help and direction!
  7. Hey! I'm looking to do something similar on my website... were you able to find a solution? Would appreciate any tips/resources! Thanks!
  8. Hey y'all! I've reached the point where I'm very comfortable with my CSS knowledge, but feel limited with my broken understanding of the script languages. I've studied a bit of info off of w3schools, but I am looking for recommendations for any resources or courses that do a thorough job of explaining java/jquery - and then understanding how to apply it in a context such as SS. TIA!
  9. Ahh - that placement makes a lot of sense. That worked, thanks so much for your help!
  10. Hey y'all - very new to jquery here. I found this jquery posted on Stack Overflow on how to redirect the user to a new page once they have scrolled to the bottom of the original page with the following code: $(window).scroll(function() { if ($(window).scrollTop() + $(window).height() == $(document).height()) window.location = "page2.html"; }); However, I'd like the function to delay for about 2 seconds so the transition isn't so jarring. I've tried to implement setTimeout, but still don't have a solid grasp on jQuery syntax/language to figure it out. Would love any help, thank you!
  11. Hey all - I'm on a similar, but different quest. I am trying to redirect the "Back to all events" link to a different page itself. I have used the script below, but I'm missing something - I can't get it to work. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function() { $('.eventitem-backlink[href="/events-workshops?view=calendar&amp;month=07-2020"]').attr("href", "/workshops"); }); </script> Web page: https://fairfaxbackyardfarmer.squarespace.com/events-workshops/template-workshop I would appreciate any direction or ideas! Thank you!
  • Create New...