Casperhj Posted October 29, 2020 Share Posted October 29, 2020 Site URL: https://casperkrohn.com Hi im desperate to get some help i have spent the last days working on my website and got really happy with the result, i was making an animated loading page through codes but didn't like how it looked so i thought i could just delete the codes and everything would be great but now there is a weird black field when i load pages, can you help ? CasperKrohn.com Link to comment
inunzi Posted October 29, 2020 Share Posted October 29, 2020 14 minutes ago, Casperhj said: Site URL: https://casperkrohn.com Hi im desperate to get some help i have spent the last days working on my website and got really happy with the result, i was making an animated loading page through codes but didn't like how it looked so i thought i could just delete the codes and everything would be great but now there is a weird black field when i load pages, can you help ? CasperKrohn.com I’m not really seeing any sort of black field. Is this happening on desktop only or is it just a glitch on sqaurespace or on your computer? Link to comment
Casperhj Posted October 29, 2020 Author Share Posted October 29, 2020 32 minutes ago, inunzi said: I’m not really seeing any sort of black field. Is this happening on desktop only or is it just a glitch on sqaurespace or on your computer? Hmm weird its happening on both mobiles and computers, i have even tried on different computers and checked after your answer and it is still there ? Link to comment
inunzi Posted October 29, 2020 Share Posted October 29, 2020 41 minutes ago, Casperhj said: Hmm weird its happening on both mobiles and computers, i have even tried on different computers and checked after your answer and it is still there ? Do you mind screen recording the issue? Link to comment
Casperhj Posted October 29, 2020 Author Share Posted October 29, 2020 1 minute ago, inunzi said: Do you mind screen recording the issue? hope this shows the problem 🙂 screen-recording.webm Link to comment
inunzi Posted October 29, 2020 Share Posted October 29, 2020 24 minutes ago, Casperhj said: hope this shows the problem 🙂 screen-recording.webm Does it have to be downloaded? Nevermind I’m going to watch the video and then let you know if it helps. Link to comment
Casperhj Posted October 29, 2020 Author Share Posted October 29, 2020 1 minute ago, inunzi said: Does it have to be downloaded? Nevermind I’m going to watch the video and then let you know if it helps. Thank you so much Link to comment
inunzi Posted October 29, 2020 Share Posted October 29, 2020 1 minute ago, Casperhj said: Thank you so much No problem 👍 Link to comment
inunzi Posted October 29, 2020 Share Posted October 29, 2020 27 minutes ago, inunzi said: No problem 👍 Ahh I see it now. Its the black box correct? Link to comment
inunzi Posted October 29, 2020 Share Posted October 29, 2020 5 minutes ago, inunzi said: Ahh I see it now. Its the black box correct? Ok so there’s one problem. I can’t inspect elements. Did you disable right click? Also may I see the code you used? Link to comment
Casperhj Posted October 29, 2020 Author Share Posted October 29, 2020 2 minutes ago, inunzi said: Ok so there’s one problem. I can’t inspect elements. Did you disable right click? yeah its the black box yeah have right clicks disabled to prevent theft of pictures but i have enabled it so you can help Link to comment
inunzi Posted October 29, 2020 Share Posted October 29, 2020 12 minutes ago, Casperhj said: yeah its the black box yeah have right clicks disabled to prevent theft of pictures but i have enabled it so you can help Can you send me the code that you used to do the loading screen? Because there might be something in the coding that’s messing with it. Link to comment
Casperhj Posted October 29, 2020 Author Share Posted October 29, 2020 2 minutes ago, inunzi said: Can you send me the code that you used to do the loading screen? Because there might be something in the coding that’s messing with it. yes of course this is the code i have used Inject This Code Into the Header HTML <!-- Loading Screen --> <div class="loadingscreen"> <span class="loading"><span class="loader-inner"><img class="logo-pulse" src="IMAGE URL" alt="ALTERNATE TEXT"></span></span> </div> <!-- End of Loading Screen --> Inject This Code Into the Footer HTML <!-- Loading Screen --> <script> window.onload = function() { document.querySelectorAll(".Header").forEach(x => x.style.visibility = "visible"); document.querySelectorAll(".loadingscreen").forEach(x => x.style.display = "none"); }; </script> <!-- End of Loading Screen --> Custom CSS CSS /* Loading Screen */ .Header { visibility: hidden; } .loadingscreen{ background: #FFF; opacity: 1; z-index: 2000; width: 100%; height: 100vh; } .loadingscreen > .loading { background: #FFF; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .loading img { height: 200px; width: 200px; } .logo-pulse{ animation-name: pulse; -webkit-animation-name: pulse; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes pulse { 0% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.7; } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(0.95); opacity: 0.7; } 50% { -webkit-transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(0.95); opacity: 0.7; } } Link to comment
inunzi Posted October 30, 2020 Share Posted October 30, 2020 2 hours ago, Casperhj said: yes of course this is the code i have used Inject This Code Into the Header HTML <!-- Loading Screen --> <div class="loadingscreen"> <span class="loading"><span class="loader-inner"><img class="logo-pulse" src="IMAGE URL" alt="ALTERNATE TEXT"></span></span> </div> <!-- End of Loading Screen --> Inject This Code Into the Footer HTML <!-- Loading Screen --> <script> window.onload = function() { document.querySelectorAll(".Header").forEach(x => x.style.visibility = "visible"); document.querySelectorAll(".loadingscreen").forEach(x => x.style.display = "none"); }; </script> <!-- End of Loading Screen --> Custom CSS CSS /* Loading Screen */ .Header { visibility: hidden; } .loadingscreen{ background: #FFF; opacity: 1; z-index: 2000; width: 100%; height: 100vh; } .loadingscreen > .loading { background: #FFF; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .loading img { height: 200px; width: 200px; } .logo-pulse{ animation-name: pulse; -webkit-animation-name: pulse; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes pulse { 0% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.7; } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(0.95); opacity: 0.7; } 50% { -webkit-transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(0.95); opacity: 0.7; } } Hmm the code seems ok. So did you delete the full code off of your site? Link to comment
Casperhj Posted October 30, 2020 Author Share Posted October 30, 2020 2 minutes ago, inunzi said: Hmm the code seems ok. So did you delete the full code off of your site? yes i deleted the entire code so it's pretty wiered Link to comment
inunzi Posted October 30, 2020 Share Posted October 30, 2020 1 minute ago, Casperhj said: yes i deleted the entire code so it's pretty wiered Yeah that’s weird. Would you like a new code to have a loading screen? Maybe that can fix the issue. Link to comment
Casperhj Posted October 30, 2020 Author Share Posted October 30, 2020 1 minute ago, inunzi said: Yeah that’s weird. Would you like a new code to have a loading screen? Maybe that can fix the issue. yeah sure Link to comment
inunzi Posted October 30, 2020 Share Posted October 30, 2020 2 minutes ago, Casperhj said: yeah sure I am not sure if you are on sqsp 7.1 or on 7.0 so I’m not sure this would work for you. But, it doesn’t hurt to test it😁. Add this code to your footer code injection. Thank you for this code tuan! Let me know how it goes. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <div class="logoload"></div> <style> .logoload { /* SET BACKGROUND COLOR */ background-color: #fff; /* SET BACKGROUND SIZE */ background-size: 90px; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background-position: center; background-repeat: no-repeat; background-image: url("https://static1.squarespace.com/static/5d2b34d977f80900014edb0d/t/5db97e10780a6c1bc1b16e3e/1572427397438/?format=1500w"); } </style> <script type="text/javascript"> $(window).load(function() { $(".logoload").delay(500).fadeOut("slow"); }) </script> Link to comment
Casperhj Posted October 30, 2020 Author Share Posted October 30, 2020 5 minutes ago, inunzi said: I am not sure if you are on sqsp 7.1 or on 7.0 so I’m not sure this would work for you. But, it doesn’t hurt to test it😁. Add this code to your footer code injection. Thank you for this code tuan! Let me know how it goes. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <div class="logoload"></div> <style> .logoload { /* SET BACKGROUND COLOR */ background-color: #fff; /* SET BACKGROUND SIZE */ background-size: 90px; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background-position: center; background-repeat: no-repeat; background-image: url("https://static1.squarespace.com/static/5d2b34d977f80900014edb0d/t/5db97e10780a6c1bc1b16e3e/1572427397438/?format=1500w"); } </style> <script type="text/javascript"> $(window).load(function() { $(".logoload").delay(500).fadeOut("slow"); }) </script> unfortunately it doesn't seem to work. im on 7.0 if that changes anything ? Link to comment
creedon Posted October 30, 2020 Share Posted October 30, 2020 I didn't see any black box on the site. I also couldn't find the page shown in the video. Please post the URL to the page show in the video. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Casperhj Posted October 30, 2020 Author Share Posted October 30, 2020 13 minutes ago, creedon said: I didn't see any black box on the site. I also couldn't find the page shown in the video. Please post the URL to the page show in the video. the reason you couldn't find the page in the video is that i have changed the homepage, but the problem is still present you can see it on https://casperkrohn.com/ Link to comment
creedon Posted October 30, 2020 Share Posted October 30, 2020 Ah. Thank you. I see it now! Don't know what is causing it but hopefully one of us will be able to help. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
inunzi Posted October 30, 2020 Share Posted October 30, 2020 20 minutes ago, Casperhj said: the reason you couldn't find the page in the video is that i have changed the homepage, but the problem is still present you can see it on https://casperkrohn.com/ Try inserting the code again, save it, then delete it , and then save. There might have been a glitch if you deleted the code quick enough. Im just guessing tho 😅 Link to comment
inunzi Posted October 30, 2020 Share Posted October 30, 2020 9 hours ago, inunzi said: Try inserting the code again, save it, then delete it , and then save. There might have been a glitch if you deleted the code quick enough. Im just guessing tho 😅 Did this work? Link to comment
Casperhj Posted October 30, 2020 Author Share Posted October 30, 2020 10 hours ago, inunzi said: Did this work? No unfortunately not Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.