CherryTree

Did you ever figure out how to do this? I would like to do the same thing on my site.

Awesome, what code does that?

Site URL: http://www.cherrytreeinteriordesign.com

I'm wondering if there is a way to make a simple list with cards and make the cards themselves clickable to another page (I use 7.1). I'm aware you can add buttons, but I don't like the way they look. I want it to look more or less like the attached picture. Thanks!

I checked by taking out that code, and in fact that is what is causing it to flip on mobile. I added an accordion for the additional information and removed the above code, and that seems to be making it look the way I want. Thanks so much for helping me make the additional info smaller!

That part worked! But on the mobile, it's still switching spots. I'm wondering if it has something to do with the other code I have in there:

/*move product description*/
<script>
  jQuery(document).ready(function($) {
$('.ProductItem .ProductItem-additional').insertAfter('.ProductItem-details-excerpt');
});
</script>

http://www.cherrytreeinteriordesign.com/shop

Site URL: http://www.cherrytreeinteriordesign.com

I I'm having a couple issues with the product page.

1. I'd like to change the font of the additional information section to be smaller than the product information section. How do I do this?

2. When I switch to mobile view, the product information and additional information sections switch places. I'd like to keep the additional info section below the product info.

Thanks in advance!

Also, is there a way to exclude a particular page? I'd like to run a specific, static loading screen on the home page.

Okay, so after searching for the 50th time, I somehow stumbled across this Q&A that I hadn't seen before. So tweaking that, I got:

Header:

<div class="logoload"></div>
<style>
.logoload {
  /* SET BACKGROUND COLOR */
  background-color: #E6E4E8;
  /* SET BACKGROUND SIZE */
  background-size: 1000px;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-position: center;
  background-repeat: no-repeat;
}
</style>
<span id="top"></span>

Footer:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
  
 $(document).ready(function() {
     var arr = ["https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7c90a287971afb84858/1626073033610/LP+quote+1.png",
"https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7ccaa30721e650da8c5/1626073036294/LP+quote+2.png",
"https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7d2f229ba2ea8557b8e/1626073042282/LP+quote+3.png",
"https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7d4dc37083541d6b11d/1626073044510/LP+quote+4.png",
"https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7d6c22c005c93572b3a/1626073046893/LP+quote+5.png",
"https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7d9aa30721e650da8da/1626073049297/LP+quote+6.png",
"https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7db320dbd0de29ebff0/1626073051316/LP+quote+7.png",
"https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7dd66be7e490f2e65a8/1626073053378/LP+quote+8.png",
"https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7e0787dde1a90cc9e70/1626073056313/LP+quote+9.png",
"https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7e419a9f87deb91cefd/1626073060561/LP+quote+10.png",
"https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7e7566ded7d61cab84d/1626073063392/LP+quote+11.png",
"https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7ea2f3c4128e1a8c7e1/1626073066224/LP+quote+12.png",
"https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7edf4fe78435a5864d4/1626073069328/LP+quote+13.png",
"https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7f0f4fe78435a5864d5/1626073072035/LP+quote+14.png",
"https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7f22f3c4128e1a8c7ef/1626073074813/LP+quote+15.png",
"https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7f52c5c2f6215e738b9/1626073077525/LP+quote+16.png",
"https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebe7f892abcc18c414639a/1626073080218/LP+quote+17.png",
    ]; 

    document.querySelector(".logoload").style.backgroundImage = "url('"+arr[Math.floor(Math.random() * arr.length)]+"')";
});
  
$(window).load(function() {
    $(".logoload").delay(500).fadeOut("slow");
})
</script>

It works! Except, it doesn't look right on mobile, and I want to disable it for mobile. That brings me to the question I asked here: is there a way to disable that javascript code for mobile devices?

Good to know! I do need to disable the header animation and just have the regular header pop up for mobile, however. I tested it and the javascript animation causes the entire header to disappear, making it impossible to navigate the site from mobile. I tested it on my iPhone, for reference.

Site URL: http://www.cherrytreeinteriordesign.com

Hi all,

I have added a javascript animation to my header, but I need to disable it on mobile devices because it just makes the menu not appear. The code in question is below:

<script>
(function(){
    window.addEventListener('load', function() {
    var headerElements = document.querySelectorAll('header a')

    function fadeIn(element, time, delay) {
      var keyframes = {opacity: [0,1]};
      var timing = {
        duration: time,
        fill: 'both',
        easing: 'ease',
        delay: delay
      };
  
     element.animate(keyframes, timing)
    }

    function animateElements(element,animation,time,delay) {
        element.forEach((item,index) => {
            var delays = index*delay;
            item.style.display = 'inline-block';
            animation(item,time,delays)
        })
    };
    //Call animateElements function and set your timing and delay.
    animateElements(headerElements,fadeIn,2000,300);  
    })
})()
</script>

I'm also wondering if there is a way to disable it if someone happens to have a device without javascript, or how that works.

Thank you!

Site URL: http://www.cherrytreeinteriordesign.com

I have a js code that animates the header on all but my mobile pages. The code is as follows:

<script>
if (document.documentElement.clientWidth <740) {
 window.location = "/mobile";
}
</script>

<script>
(function(){
    window.addEventListener('load', function() {
    var headerElements = document.querySelectorAll('header a')

    function fadeIn(element, time, delay) {
      var keyframes = {opacity: [0,1]};
      var timing = {
        duration: time,
        fill: 'both',
        easing: 'ease',
        delay: delay
      };
  
     element.animate(keyframes, timing)
    }

    function animateElements(element,animation,time,delay) {
        element.forEach((item,index) => {
            var delays = index*delay;
            item.style.display = 'inline-block';
            animation(item,time,delays)
        })
    };
    //Call animateElements function and set your timing and delay.
    animateElements(headerElements,fadeIn,2000,300);  
    })
})()
</script>

I also have css animation for text that pops up on the home screen. I have it basically timed out to pop up when the header animation is complete, but depending on the load it is sometimes a bit off. (You can see it on my homepage on a desktop). I'm not sure if there is a way to point the css animation code to begin when the js code animation starts. The css code is here:

.fade-in-text {
  display: inline-block;
  font-family: FuturaPT, Helvetica, sans-serif;
  font-weight: 800;
  letter-spacing: 0.4em;
  text-align: center;
  font-size: 6em;
  color: white;
  opacity: 0;
  animation: fadeIn linear 300ms;
  animation-delay: 5650ms;
  -webkit-animation: fadeIn linear 300ms;
  -webkit-animation-delay: 5650ms;
  -webkit-animation-fill-mode: forwards;
  -moz-animation: fadeIn linear 300ms;
  -moz-animation-delay: 5650ms;
  -moz-animation-fill-mode: forwards;
  -o-animation: fadeIn linear 300ms;
  -o-animation-delay: 5650ms;
  -o-animation-fill-mode: forwards;
  -ms-animation: fadeIn linear 300ms;
  -ms-animation-delay: 5650ms;
  -ms-animation-fill-mode: forwards;
}

@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

Anyone have any idea how to do this?

Thanks!

Site URL: http://www.cherrytreeinteriordesign.com

Hi! I'm trying to make loading pages that will load a random image each time. The code I have so far is code I pulled from elsewhere (here) and tweaked - see below:

<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: #E6E4E8;
  /* SET BACKGROUND SIZE */
  background-size: 500px;
  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/5eebcfe57f948c024906fe27/t/60ebd829c22c005c9356a5d4/1626069033592/home-page-loading-screen.jpg/");
}
</style>
<script type="text/javascript">
$(window).load(function() {
    $(".logoload").delay(500).fadeOut("slow");
})
</script>

That code does work for a single image, but I don't know how to modify it to do what I want. I'd like the background image to randomize to be one of several images I have. Any ideas how I do this? Please be gentle - I am below newbie status when it comes to coding, so explain like I don't know anything (because I don't).

Thanks in advance!

I found the following code on the forum and added it to give me different home pages for desktop and mobile:

@media (max-width:640px){#your-desktop-page-URL {display:none!important}}

@media (min-width:640px){#your-mobile-page-URL{display:none!important}}

For my purposes, that means it is the following in my custom CSS section:

@media (max-width:640px){#home{display:none!important}}

@media (min-width:640px){#{display:none!important}}

When I added it, I checked it on my phone and it worked fine. But now I had some other people checking through my site, and they told me it wasn't working anymore. Sure enough, I checked my phone and...not working. It's only going to the desktop home page.

I hadn't changed the code. I rechecked it, and it seems to be what I am supposed to have. What am I missing?