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

Logo loading screen - code adjustment please

Question

Hi everyone, 

I bought a plugin from Squarestud.io and it appears that they dont respond to anyone's emails/facebook/instagram - I assume they have gone bust. Anyway, I need to tweak the plugin and I am not very good at .js and would appreciate some help. 

The plugin is a logo loading screen using the site's logo.  I am wanting to replace the image source (the existing site logo) with a gif that is stored in the site's CSS stored files - URL below.

Any help is really really really appreciated.

Thank you, 

Rob 
working site: https://pepper-clarinet-ctnt.squarespace.com/

GIF: 

https://static1.squarespace.com/static/5d9db9630e0cb109b5331185/t/5db877bc05d8093cb6fbfe15/1572370384602/mrnice-smiley.gif


Code Injection: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="logoload"></div>
<script>
$(function() {
  var loadLogo = $('header').find('img').attr('src');
  $('.logoload').css('background-image', 'url(' + loadLogo + ')');
});
</script>
<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;
}
</style>
<script type="text/javascript">
$(window).load(function() {
    $(".logoload").delay(500).fadeOut("slow");
})
</script>

 

Share this post


Link to post

9 answers to this question

Recommended Posts

  • 0

@rdreed Your code

<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/5d9db9630e0cb109b5331185/t/5db877bc05d8093cb6fbfe15/1572370384602/mrnice-smiley.gif");
}
</style>
<script type="text/javascript">
$(window).load(function() {
    $(".logoload").delay(500).fadeOut("slow");
})
</script>

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0

@tuanphan You've already helped me massively, I was wondering If I could ask for your expertise again? Do you think it is possible for this loading page animation to only run when landing on the homepage and (like presently) not when landing on every page? 

Share this post


Link to post
  • 0

@rdreed Try

Style & Script code: Page Settings > Advanced > Insert the code to Header

And insert this code to bottom of page (you can use Markdown Block or Code Block to insert)

<div class="logoload"></div>
Edited by tuanphan

You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0
On 10/30/2019 at 5:03 AM, rdreed said:

CSS stored files

Hey @tuanphan ! This is super helpful! I am attempting almost the same thing, but instead of inserting a gif as the image source, I want to insert the logo. I just need a loading page with a white background and black logo. Since The logo is stored on my computer and doesn't have a URL is there a way to upload my logo to squarespace and give it a url? I saw above Rdreed mentioned that his gif was "stored in the site's CSS stored files". 

Would appreciate any help you can give me! Thank you :) 

Share this post


Link to post
  • 0

@erinm892 you just have to upload the file to the CUSTOM CSS section under the DESIGN menu. There's an option to upload a file, and you click on it, and it should give you a Squarespace URL for it, as per the screenshot below. Once you upload the file, just click on it and the URL will appear on the code window. Just copy it, and there you have it!

 

742175716_ScreenShot2020-06-06at3_01_29PM.thumb.png.5b940500caf2343d0910036094a14681.png

Share this post


Link to post
  • 0

Hey @tuanphan, you're a life saver! While the screen is loading, I noticed the user can scroll down and up. Is it possible to disable scrolling during the time this loading screen is shown? I'm using it as a GIF animation intro to my page, so I don't want them to be able to scroll while it loads.

Share this post


Link to post
  • 0
On 6/7/2020 at 5:03 AM, victpo said:

Hey @tuanphan, you're a life saver! While the screen is loading, I noticed the user can scroll down and up. Is it possible to disable scrolling during the time this loading screen is shown? I'm using it as a GIF animation intro to my page, so I don't want them to be able to scroll while it loads.

Add to Page Settings > Advanced > Header

<script>
$(window).load(function() {
    $('body').css('overflow', 'hidden');
    setTimeout( function() {
        $('body').css('overflow', 'initial');
    }, 5000);
});
</script>

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...