Jump to content

Added an awesome parallax code to my 7.1 site, now social icons have disappeared in header and footer!

Recommended Posts

Posted (edited)

Site URL: https://bensfriendsofthevine.squarespace.com/

I've used this code an several sites and it works brilliantly! For some reason on this particular site, the social icons disappeared today, they were working fine yesterday!
SITE:
https://bensfriendsofthevine.squarespace.com/
PW:
Ben

 

Here is the code: (Settings/Advanced/code Injestion -  placed in footer)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>

<script> 
  $('.has-background:not(:has(.sqs-video-background))').each(function() {
    var findImage = $(this).find('.section-background img');
    var imgUrl = findImage.data('src');
    var dimensions = findImage.data('image-dimensions');
    var imgWidth = dimensions.substr(0, dimensions.indexOf('x'));
    var imgHeight = dimensions.substr(dimensions.indexOf('x') + 1);
    $(this).parallax({
        imageSrc: imgUrl,
        naturalWidth: imgWidth,
        naturalHeight: imgHeight,
        speed: 0.5,
    })
});
document.getElementsByTagName("body")[0].onresize = function() {
    setTimeout(function() {
        jQuery(window).trigger('resize').trigger('scroll')
    }, 100)
}; 
</script>

<style>.has-background{background-color:transparent!important}.has-background .section-background{background-color:transparent!important}.has-background .section-background img{visibility:hidden!important}.has-background.background-width--inset{margin:4vw;padding:0!important}.has-background.background-width--inset:not(.content-collection):not(.gallery-section) .section-background{top:0!important;right:0!important;bottom:0!important;left:0!important}</style>
<style>

 

THIS IS WHERE I FOUND THIS AWESOME CODE!
Credit to:

https://schwartz-edmisten.com/blog/how-to-add-parallax-to-squarespace-7-1

Edited by kellijayne
  • Replies 2
  • Views 410
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted

Just checked the header icon code. It's similar to a case I encountered yesterday. Looks like the problem is not Parallax Code. Try accessing this link (link will disable all code on Edit Mode), if the problem still occurs, then you will need to contact SS Customer Care. If the problem goes away, try deleting each code and check again. Maybe the problem is not from Parallax code.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted
On 7/8/2022 at 9:27 PM, tuanphan said:

Just checked the header icon code. It's similar to a case I encountered yesterday. Looks like the problem is not Parallax Code. Try accessing this link (link will disable all code on Edit Mode), if the problem still occurs, then you will need to contact SS Customer Care. If the problem goes away, try deleting each code and check again. Maybe the problem is not from Parallax code.

Hi @tuanphan thanks so much for chiming in. I removed the code and the icons appear, paste the code back and the icons disappear 😞 I wish I could figure this out. It's definitely the best parallax I have found for 7.1 

Create an account or sign in to comment

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


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.