hayleysb13

Hi! Yes I did. That lengthened the time of each slide, but not the transition itself. Does that make sense? Is there a way to make the transition slower?

Hello! I have scrolling testimonials on our website using a Custom CSS code. I have no problem adjusting the seconds between transitions to new slides; however, I'd like to make the transition itself slower, so it feels less jarring. Could someone please provide me with the right code for this?

Let me know! I've pasted my current code below for your reference:
 

<script>
  (function docReady(fn) {
    // see if DOM is already available
    if (document.readyState === "complete" || document.readyState === "interactive") {
      // call on next available tick
      setTimeout(fn, 1);
    } else {
      document.addEventListener("DOMContentLoaded", fn);
    }
  })(() => {
    if ( window.location == window.parent.location ) {
      const reelControls = document.querySelectorAll('section[data-section-id="630305ced17aa33b3d1a4e54"] .user-items-list-carousel__arrow-button--right');
      reelControls.forEach(reelControl => {
        (function reelTimer() {          
          setTimeout(() => {
            reelControl.click();
            reelTimer();
          }, 12000);  // change this value to change the speed
        })();       
      })
    }
  });
</script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-YQQGCZVL6V"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-YQQGCZVL6V');
</script>

16 hours ago, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
a.grid-item:hover .portfolio-overlay {
    opacity: 0 !important;
}
}

 

Amazing! Thank you so much!!

Site URL: https://www.theproductiveco.com/strategy

Hello! I have gotten my portfolio to a place where I like it on desktop view. I disabled clickthroughs which is great. It's almost there on mobile view (adjusted columns and font size), but I have one question: how do I get the mobile view to show the full color of the background image when clicked? It still looks like there is an overlay there, even when I click on it via my phone (see reference photo). 

On 12/1/2021 at 4:27 AM, tuanphan said:

(Backup code before replacing new code)

Try replace above code with this code

.design-layout-poster img{ -webkit-transition: 1s; -o-transition: 1s; transition: 1s}
.design-layout-poster:hover img{-webkit-transform: rotateY(180deg);transform: rotateY(180deg); -webkit-transition: 1s; -o-transition: 1s; transition: 1s} 
.image-card-wrapper{-webkit-transform:rotateY(180deg)!important;transform:rotateY(180deg)!important; opacity:0; -webkit-transition: 1s; -o-transition: 1s; transition: 1s;}
.design-layout-poster:hover .image-card-wrapper {opacity:1!important; -webkit-transform:rotateY(0deg)!important; transform:rotateY(0deg)!important; background: #ebe6e6; -webkit-transition: 1s; -o-transition: 1s; transition: 1s;}

@media only screen and (max-width:640px){ .design-layout-poster img{ -webkit-transition: 1s; -o-transition: 1s; transition: 1s} .design-layout-poster:active img{-webkit-transform: rotateY(180deg);transform: rotateY(180deg); -webkit-transition: 1s; -o-transition: 1s; transition: 1s}
.image-card-wrapper{-webkit-transform:rotateY(180deg)!important;transform:rotateY(180deg)!important; opacity:0; -webkit-transition: 1s; -o-transition: 1s; transition: 1s;} .design-layout-poster:active .image-card-wrapper {opacity:1!important;  -webkit-transform:rotateY(0deg)!important;  transform:rotateY(0deg)!important; background: #ebe6e6; -webkit-transition: 1s; -o-transition: 1s; transition: 1s;}}

 

Hi! Does this work on 7.1? For some reason I'm not sure how to create a poster image that works with this code.

7 hours ago, tuanphan said:

The url doesn't work. Can you check it again?

Also, you need to add above code to Home > Settings > Advanced > Code Injection > Footer, not Custom CSS

Yes! See this URL: https://www.theproductiveco.com/strategy

I have inserted the following code (which I found from another thread) into the Page Header Code Injection for this page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('a.grid-item').removeAttr('href');
});
</script>

That worked to disable the clickthroughs, but now the hover is gone on mobile. How do I get the hover back in mobile view?

On 8/22/2022 at 11:47 AM, bangank36 said:

There is one Css style that removes the event fire from link. It is pointer-events, but with this style, the hover effect is also removed too. So I suggest using the javascript to prevent the defaul action of clicking on the link

<script>
  const portItems = document.querySelectorAll('section[data-section-id="62fe84a32655a00e2cddb8f1"] .grid-item');

  if(portItems.length) {
    portItems.forEach(item => {
      item.addEventListener('click', (e) => {
        e.preventDefault();
      })
    })
  }
</script>

Hope it can help

Hi! I inserted this code above on the page, but nothing seemed to change. Is there something I'm missing?

On 8/22/2022 at 11:30 AM, bangank36 said:

I think it can be achieved by using some javascript code to set interval the clicking on next button

<script>
  (function docReady(fn) {
    // see if DOM is already available
    if (document.readyState === "complete" || document.readyState === "interactive") {
      // call on next available tick
      setTimeout(fn, 1);
    } else {
      document.addEventListener("DOMContentLoaded", fn);
    }
  })(() => {
    if ( window.location == window.parent.location ) {
      const reelControls = document.querySelectorAll('section[data-section-id="630305ced17aa33b3d1a4e54"] .user-items-list-carousel__arrow-button--right');
      reelControls.forEach(reelControl => {
        (function reelTimer() {          
          setTimeout(() => {
            reelControl.click();
            reelTimer();
          }, 2000);  // change this value to change the speed
        })();       
      })
    }
  });
</script>

Hope it can help

Thank you! This worked great!

Site URL: https://www.theproductiveco.com/

Hello! I am trying to make the testimonials for our website (created using 7.1 automated "people" section) auto-scroll. Could someone provide me with a Custom CSS for this?

Site URL: https://www.theproductiveco.com/portfolio-services

Hello! I am trying to disable the clickthru link on our website's portfolio while maintaining the hover effect. I want the portfolio to be presentational, not directing to any page in particular.

Also, I'd like to reformat the portfolio for mobile so it shows two boxes per row. 

Can these be accomplished using Custom CSS?