GabrielaS Posted June 24, 2020 Share Posted June 24, 2020 Site URL: http://gabrielasilveira.squarespace.com Hi there, I'm trying to change the logo on my website when scrolling down, I've tried all css/javascript codes I could find around with no joy. If anyone has a workaround for that on 7.1 that would be much appreciated, password for the website is hello Thank you! Link to comment
Solution rwp Posted June 24, 2020 Solution Share Posted June 24, 2020 jQuery 3.5.1 (you will need to add in the jQuery script as well, its available from https://code.jquery.com/ I use minified. Upload the image that you want to use as the top image to the header in Squarespace Supply the url for top image and scroll image (its important that this matches the one you uploaded) The code will set the image class to "logo", it does this by using your alt tag, which is the only identifier Squarespace gave that img tag. After scrolling more than 100px, it will replace the image, change the value from 50 if you want it more or less. var topIMG = ""; var sclIMG = ""; $('img[alt="Gabriela Silveira"]').attr("class", "logo") $(window).scroll(function() { var value = $(this).scrollTop(); if (value > 50) $(".logo").attr("src", sclIMG); else $(".logo").attr("src", topIMG); }); Link to comment
GabrielaS Posted June 25, 2020 Author Share Posted June 25, 2020 @rwp thank you SO MUCH, it finally worked! rwp 1 Link to comment
yeshidesigns Posted July 2, 2020 Share Posted July 2, 2020 On 6/24/2020 at 6:30 PM, rwp said: jQuery 3.5.1 (you will need to add in the jQuery script as well, its available from https://code.jquery.com/ I use minified. Upload the image that you want to use as the top image to the header in Squarespace Supply the url for top image and scroll image (its important that this matches the one you uploaded) The code will set the image class to "logo", it does this by using your alt tag, which is the only identifier Squarespace gave that img tag. After scrolling more than 100px, it will replace the image, change the value from 50 if you want it more or less. var topIMG = ""; var sclIMG = ""; $('img[alt="Gabriela Silveira"]').attr("class", "logo") $(window).scroll(function() { var value = $(this).scrollTop(); if (value > 50) $(".logo").attr("src", sclIMG); else $(".logo").attr("src", topIMG); }); Hey there, are you able to share the full code needed? I added in the jQuery 3.5.1 script but was confused where to add images and format the above. Link to comment
tuanphan Posted July 5, 2020 Share Posted July 5, 2020 On 7/3/2020 at 1:37 AM, yeshidesigns said: Hey there, are you able to share the full code needed? I added in the jQuery 3.5.1 script but was confused where to add images and format the above. Have you solved it yet? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
samasplen Posted July 6, 2020 Share Posted July 6, 2020 On 7/2/2020 at 7:37 PM, yeshidesigns said: Hey there, are you able to share the full code needed? I added in the jQuery 3.5.1 script but was confused where to add images and format the above. I would also like to know this! Link to comment
rwp Posted July 6, 2020 Share Posted July 6, 2020 Please link to your pages so I can check what needs to be done. Link to comment
samasplen Posted July 6, 2020 Share Posted July 6, 2020 3 hours ago, rwp said: Please link to your pages so I can check what needs to be done. thanks @rwp! in progress site is here: https://endive-swordfish-kjf7.squarespace.com password: temppassword2020 I'd just like to transition the current logo featured in the header to another png that incorporates the company name upon scrolling Link to comment
samasplen Posted July 9, 2020 Share Posted July 9, 2020 hey again @rwp! You kindly directed me here from the other forum. Any further help really would be so appreciated! I must admit there's a bit of guess work going on here from my end but this is where I'm at with it... I've copied the code from above and added in links to the images I uploaded via the 'manage custom files' section in Custom CSS. I've also added in all the code from jQuery 3.x and then pasted everything into the code injection for the Header section (not sure if this is the best location for it?). Do you know where I'm going wrong..? My site and password is above and the code is below: <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script> var topIMG = "https://static1.squarespace.com/static/5ede1a2e999dc0531d6f9ebf/t/5ee8e35dfcadf46aef884a77/1592320861718/Eleven_circle_solo.png"; var sclIMG = "https://static1.squarespace.com/static/5ede1a2e999dc0531d6f9ebf/t/5ee8d2ecb1f80f408deb0b1e/1592316654032/Eleven_lockup_white02.png"; $('img[alt="Eleven"]').attr("class", "logo") $(window).scroll(function() { var value = $(this).scrollTop(); if (value > 50) $(".logo").attr("src", sclIMG); else $(".logo").attr("src", topIMG); });</script> Link to comment
tuanphan Posted July 15, 2020 Share Posted July 15, 2020 On 7/9/2020 at 7:48 PM, samasplen said: hey again @rwp! You kindly directed me here from the other forum. Any further help really would be so appreciated! I must admit there's a bit of guess work going on here from my end but this is where I'm at with it... I've copied the code from above and added in links to the images I uploaded via the 'manage custom files' section in Custom CSS. I've also added in all the code from jQuery 3.x and then pasted everything into the code injection for the Header section (not sure if this is the best location for it?). Do you know where I'm going wrong..? My site and password is above and the code is below: <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script> var topIMG = "https://static1.squarespace.com/static/5ede1a2e999dc0531d6f9ebf/t/5ee8e35dfcadf46aef884a77/1592320861718/Eleven_circle_solo.png"; var sclIMG = "https://static1.squarespace.com/static/5ede1a2e999dc0531d6f9ebf/t/5ee8d2ecb1f80f408deb0b1e/1592316654032/Eleven_lockup_white02.png"; $('img[alt="Eleven"]').attr("class", "logo") $(window).scroll(function() { var value = $(this).scrollTop(); if (value > 50) $(".logo").attr("src", sclIMG); else $(".logo").attr("src", topIMG); });</script> have you solved it yet? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
samantha4 Posted July 28, 2020 Share Posted July 28, 2020 (edited) @rwp @tuanphan Hi there! I was wondering if you could help me with the code for my site as well. Thank you! site : https://chipmunk-clementine-pb8z.squarespace.com/ password: letstalk Edited July 29, 2020 by samantha4 Link to comment
rwp Posted July 30, 2020 Share Posted July 30, 2020 You will need to follow the instructions for adding jquery. You will also need to put in the URL for the other image. var topIMG = $(".Header-branding-logo").attr("src"); var sclIMG = ""; $(window).scroll(function() { var value = $(this).scrollTop(); if (value > 50) $(".Header-branding-logo").attr("src", sclIMG); else $(".Header-branding-logo").attr("src", topIMG); }); samantha4 1 Link to comment
samantha4 Posted August 3, 2020 Share Posted August 3, 2020 @rwp THANK YOU! This worked perfectly. One last question - is it possible to have a transition between the two logos (rather than just changing). Link to comment
rwp Posted August 3, 2020 Share Posted August 3, 2020 (edited) It is possible, but not with the code you are using now. I will have to look into it. Edited August 3, 2020 by rwp Link to comment
jambamoose Posted September 13, 2020 Share Posted September 13, 2020 Trying to figure out this same issue @rwp -- Followed all of the steps, isntalled JQ in the header injection, uploaded the two logos, inserted them into your above code in the header injection, and no dice! Appreciate your help. Website: https://copper-mustard-c87b.squarespace.com/ PW: HBA2020 Link to comment
tuanphan Posted September 14, 2020 Share Posted September 14, 2020 17 hours ago, jambamoose said: Trying to figure out this same issue @rwp -- Followed all of the steps, isntalled JQ in the header injection, uploaded the two logos, inserted them into your above code in the header injection, and no dice! Appreciate your help. Website: https://copper-mustard-c87b.squarespace.com/ PW: HBA2020 I think above code not for 7.1. 7.1 use different logo class name. Do you still need help on this? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
jambamoose Posted September 14, 2020 Share Posted September 14, 2020 @tuanphan Yes, please! I'm trying to change it to a different logo on the header when scrolling in 7.1. Link to comment
jambamoose Posted September 22, 2020 Share Posted September 22, 2020 @tuanphan Just checking in on this in case this got buried.. Link to comment
rwp Posted September 22, 2020 Share Posted September 22, 2020 @jambamoose give this a shot var topIMG = $(".header-title-logo img").attr("src"); var sclIMG = ""; $(window).scroll(function() { var value = $(this).scrollTop(); if (value > 50) $(".header-title-logo img").attr("src", sclIMG); else $(".header-title-logo img").attr("src", topIMG); }); Link to comment
jambamoose Posted October 1, 2020 Share Posted October 1, 2020 On 9/22/2020 at 1:27 PM, rwp said: @jambamoose give this a shot var topIMG = $(".header-title-logo img").attr("src"); var sclIMG = ""; $(window).scroll(function() { var value = $(this).scrollTop(); if (value > 50) $(".header-title-logo img").attr("src", sclIMG); else $(".header-title-logo img").attr("src", topIMG); }); @rwp I inserted that into my header code, and then inserted the URLs for the two image uploads in the spots you have marked in quotes, but it doesn't seem to be working. Guessing I'm doing something wrong...Feel free to check my code. Link to comment
tuanphan Posted October 3, 2020 Share Posted October 3, 2020 On 10/2/2020 at 2:06 AM, jambamoose said: @rwp I inserted that into my header code, and then inserted the URLs for the two image uploads in the spots you have marked in quotes, but it doesn't seem to be working. Guessing I'm doing something wrong...Feel free to check my code. wrap above code in script tag, It should be <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> rwp code </script> creedon 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
jambamoose Posted October 12, 2020 Share Posted October 12, 2020 @tuanphan Thanks for the reply...Here's my code, still having some trouble.. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> var topIMG = $(".header-title-logo img").attr("src"); var sclIMG = "https://static1.squarespace.com/static/5f2adc20b7290058dd53441e/t/5f5e7c1988ce6e3f57804e53/1600027673615/HBA-Logo-Website.png"; $(window).scroll(function() { var value = $(https://static1.squarespace.com/static/5f2adc20b7290058dd53441e/t/5f5e7c1988ce6e3f57804e53/1600027673615/HBA-Logo-Website.png).scrollTop(); if (value > 50) $("https://static1.squarespace.com/static/5f2adc20b7290058dd53441e/t/5f5e7c1988ce6e3f57804e53/1600027673615/HBA-Logo-Website.png").attr("src", sclIMG); else $(".header-title-logo img").attr("src", topIMG); }); </script> Link to comment
scottneufeld Posted July 22, 2021 Share Posted July 22, 2021 Hello, Looking to continue this transition above but also change the cart & burger menu images. Any advice? var logoTopIMG = "insert photo file"; var logoSclIMG = "insert photo file"; var burgTopIMG = "insert photo file"; var burgSclIMG = "insert photo file"; var cartTopIMG = "insert photo file"; var cartSclIMG = "insert photo file"; $(window).scroll(function() { var value = $(this).scrollTop(); if (value > 800) $(".header-title-logo img").attr("src", logoSclIMG); $(".burger-box").css("background-image").attr("src", burgSclIMG); $(".cart").css("background-image").attr("src", burgSclIMG); /\/\/\/\/\/\/\/\/\/\/\/\/\/\/\Obviously incorrect, any pointers??? else $(".header-title-logo img").attr("src", logoTopIMG); etc... });</script> Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment