UtopiaCreates

@creedon Just a quick question if you have a moment. This is all working great but I was wondering do you think the FadeIn part could be an actual fade so that the sections disappear and appear a bit slower instead of instanously. I know there is another way I could do the transition so that one fades out and the other fades without the timer part but since I got this all working I was hoping I could tweak this and make it perfect. Current working version: https://www.atgfnxt.net/mn2

Thanx! @creedon That was almost it. But it helped me get it working. The two things that were wrong were that I had pasted an altered version of the timer code so some of the selectors had been changed to section in my attempts to make it work instead of the original divs which messed it up and also I was forgetting to add the .roll class to the first section as it needed both to work. Here is the final working code. Just have to clean up a spacing issue. For some reason .page-section is forcing to position block instead of flex. <script> $( ( ) => { $('[data-section-id="611940b4602eec3d4070fbbd"]').addClass("loadingatgf"); $('[data-section-id="611940b4602eec3d4070fbbd"]').addClass("roll"); $('[data-section-id="611950f4e7841a61e1280c2d"]').addClass("roll"); var current = 0; var divs = $(".roll"); var timer = setInterval( () => { if (current < divs.length - 1) { divs.eq(current).hide(); current++; divs.eq(current).fadeIn("normal"); } else clearInterval(timer); }, 2500); } ); </script>

OK, @creedon that makes sense, I have another script that is adding the .roll and .loadingatg styles to the section class - So what I think needs to happen is add something to make sure the timer script does not run before that first script has added the styles? I am guessing there is probably a way to combine the two scripts into one script to make it work? The whole point of this is to create a fake loading section before the main content loads. In the version I have working I just used a two code blocks with the content and the class styles already part of that code. Guess I am going to have to teach myself some basic js. Here is what I have to add the styles: <script type="text/javascript"> $(function() { $('[data-section-id="611940b4602eec3d4070fbbd"]').addClass("loadingatgf"); $('[data-section-id="611950f4e7841a61e1280c2d"]').addClass("roll"); }); </script> and then this is the time: <script type="text/javascript"> var current = 0; var section = $(".roll"); var timer = setInterval(function() { if (current < divs.length - 1) { divs.eq(current).hide(); current++; section.eq(current).fadeIn("normal"); } else clearInterval(timer); }, 2500); </script>

@iamdavehart Thank you sir, this works perfectly.

Looking for some javascript help: I have this script that Shows One Div while Hiding another based on a timer and I am fine to get that to work but now I would like to make it work on a whole section. I tried changing the parts that say div to section/sections - but that didn’t seem to work. I have another script that adds the needed .roll class which works fine. https://www.atgfnxt.net/mn2 - The Second section is currently hidden as the .roll class has been applied. I have a working example here using just two divs within the same section. https://www.atgfnxt.net/minnesota - Note: There is a different script for the Button that hides the text to show the form. <script type="text/javascript"> var current = 0; var divs = $(".roll"); var timer = setInterval(function() { if (current < divs.length - 1) { divs.eq(current).hide(); current++; divs.eq(current).fadeIn("normal"); } else clearInterval(timer); }, 2500); </script>

Simple Question, is there a way via css or js/jq to have the autoplay for a full screen gallery section take longer than 10 seconds?

Just curious, is there a SEO or other technical reason that a text box defaults to Paragraph 2 (P2) for text boxes instead of P1 (Paragraph 1)?

@bangank36 or anyone else that may know the Google Charts API. I am good at taking code samples and editing them but I am not familiar enough with JS and the Google Charts API to build what I want from scratch. Is this something you could do? If so can you message me from my website (utopiacreates.com) and let me know how much something like this would cost. Basically what the client is looking for is a chart that shows a comparison of cost between two products over time based on a variable number that the visitor can change. I have a rough example here using Grid "https://lawyerdonedeal.squarespace.com/chart-test" The data for the chart would live inside a Google Spreadsheet. There would be multiple versions of the chart with slightly different numbers. What I would need is a nice base sample of code to get it to work. Ideally with as much as possible style wise controlled with css.

I am looking into a solution using Google Charts visualization API to create a chart on a website that has one area where a user can input a number that dynamically changes the chart and produces a different result. So for example the chart would show two products that have different price points and if the user enters one number (times used per month) it produces result A and if they enter a different number it would produce Result B. I have seen samples with a slider but would it be possible to do with a text (#) input?

@Agnete What did you end up using for your store locator?

Did this actually work? I can not get it to work. I think because even though when you hover the link looks like the file is on your site but in reality the file is being hosted on static.squarespace......

@Jovianshadow I ran into the same issue when trying to set up a small print website and the answer is that Squarespace is not really designed for variants like that. Even Shopify is not really a good option since it has a limit on options (although it might be enough for you). I would look at other options like Ecwid which you can embed into a Squarespace site if you want or maybe even check out the new square e-commerce website builder. There are of course other options depending on budget and needs. There are workarounds if you are determined to make it work on Squarespace; you could try depending on the complexity of your options breaking the options into different products altogether. So instead of having size as a variant, each size becomes a different product. I would also look into setting them all up on a spreadsheet and importing as it makes setting up all the SKU's simpler. https://support.squarespace.com/hc/en-us/articles/115000378108-Importing-products-from-a-csv

This works, I was having issues getting a muse parallax page with svg files working and for some reason uploading the styles and scripts via developer mode was not working so I tried this method and it actually works. So Happy.

Also another drawback is the fact that if you have active links set to a special colour it kills it so you don't see that colour when yo are in that folder.

This is a good work around but should totally be built into the folders. You should be able to set it like you would a pass through link on a gallery image.