Re: Scroller - multiple on same page - discrepancies

Solved

Scroller - multiple on same page - discrepancies

xnyjyh
Trailblazer
390 0 45

Hello, I have a few of the same Scrollers on the same page. I have changed id/class so they can be styled different. One is reversed and one is regular. Im on CodePen with boths codes in same workspace and still cant seem to find the discrepancy between these both. CAn someone please inspect this for me? that would be greatly appreciated! Only one scroller will work when both codes are together, Thanks - codes below:

 

<script src="https://cdn.jsdelivr.net/npm/node-marquee@3.0.6/build/cdn/index.min.js"></script>
<div class='marq4'>
<div id="marquee-reverse4">
  <span>REMEMBERING OUR SISTERS&nbsp;&nbsp;<img src="https://cdn.shopify.com/s/files/1/0564/3046/1030/files/mmiw_icon_58dfa734-74ca-4836-9e51-1e61f9cf3cc0.png?v=1711062378" width="24" style="margin-bottom:-3px;"></span>
</div>
</div>
<style>
  .marq4{
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  padding-top:7px;
  padding-bottom:4px;
  background-color:transparent;
  color:black;
  font-size:20px;
  font-family: work sans;
  font-weight:500;
  letter-spacing:0.06rem;
  }
</style>
<script>
  const reverse = document.getElementById('marquee-reverse4');
if (reverse) {
    nodeMarquee({
        parent: reverse,
        speed: -0.5,
    });
}
</script>

<br><br>

<div>
<script src="https://cdn.jsdelivr.net/npm/node-marquee@3.0.6/build/cdn/index.min.js"></script>
<div class='marq3'>
<div id="marquee-reverse3">
  <a>BUY NOW, PAY LATER&nbsp;&nbsp;<img src="https://cdn.shopify.com/s/files/1/0564/3046/1030/files/white_sun.svg?v=1710724460" width="20" style="margin-bottom:-5px;"></a>
</div>
</div>
<style>
  .marq3{
  padding-top:3px;
  padding-bottom:3px;
  background-color:#c00000;
  font-family: work sans;
  letter-spacing:0.06rem;
  color: white;
  font-size: 13px;
  font-weight: 600;
  }
</style>
<script>
  const reverse = document.getElementById('marquee-reverse3');
if (reverse) {
    nodeMarquee({
        parent: reverse,
        speed: -0.7,
    });
}
</script>
</div>

 

Accepted Solution (1)

aldy-expatify
Shopify Partner
57 5 10

This is an accepted solution.

Hi @xnyjyh you can try this code. The variable reverse is already used in the first javascript code, so you can not use the same variable in the second code. Because on one page it will read as the same variable. So you have to use the different variables.

 

<script src="https://cdn.jsdelivr.net/npm/node-marquee@3.0.6/build/cdn/index.min.js"></script>
<div class='marq4'>
<div id="marquee-reverse4">
  <span>REMEMBERING OUR SISTERS&nbsp;&nbsp;<img src="https://cdn.shopify.com/s/files/1/0564/3046/1030/files/mmiw_icon_58dfa734-74ca-4836-9e51-1e61f9cf3cc0.png?v=1711062378" width="24" style="margin-bottom:-3px;"></span>
</div>
</div>

<br><br>

<div class='marq3'>
<div id="marquee-reverse3">
  <a>BUY NOW, PAY LATER&nbsp;&nbsp;<img src="https://cdn.shopify.com/s/files/1/0564/3046/1030/files/white_sun.svg?v=1710724460" width="20" style="margin-bottom:-5px;"></a>
</div>
</div>

<style>
.marq4{
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  padding-top:7px;
  padding-bottom:4px;
  background-color:transparent;
  color:black;
  font-size:20px;
  font-family: work sans;
  font-weight:500;
  letter-spacing:0.06rem;
  }
.marq3{
  padding-top:3px;
  padding-bottom:3px;
  background-color:#c00000;
  font-family: work sans;
  letter-spacing:0.06rem;
  color: white;
  font-size: 13px;
  font-weight: 600;
  }
</style>

<script>
  const reverse1 = document.getElementById('marquee-reverse4');
if (reverse1) {
    nodeMarquee({
        parent: reverse1,
        speed: -0.5,
    });
}
  const reverse2 = document.getElementById('marquee-reverse3');
if (reverse2) {
    nodeMarquee({
        parent: reverse2,
        speed: -0.7,
    });
}
</script>
If you like our solution, please like and mark it as a solution.
Don't hesitate to reach us for more Shopify solutions. Thanks 🙂
Website: Expatify Indonesia
Email: guru@expatify.co.id
Whatsapp: Whatsapp

View solution in original post

Replies 4 (4)

tim
Shopify Partner
3926 399 1444

You can't use const reverse = document.getElementById(...)twice. 

Since it's const it can not be modified and redeclared again.

So either use a different variable name, or use var instead of const.

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
xnyjyh
Trailblazer
390 0 45

Can you elaborate more please, thanks. I changed the const to var one one scoller and did nothing.

aldy-expatify
Shopify Partner
57 5 10

This is an accepted solution.

Hi @xnyjyh you can try this code. The variable reverse is already used in the first javascript code, so you can not use the same variable in the second code. Because on one page it will read as the same variable. So you have to use the different variables.

 

<script src="https://cdn.jsdelivr.net/npm/node-marquee@3.0.6/build/cdn/index.min.js"></script>
<div class='marq4'>
<div id="marquee-reverse4">
  <span>REMEMBERING OUR SISTERS&nbsp;&nbsp;<img src="https://cdn.shopify.com/s/files/1/0564/3046/1030/files/mmiw_icon_58dfa734-74ca-4836-9e51-1e61f9cf3cc0.png?v=1711062378" width="24" style="margin-bottom:-3px;"></span>
</div>
</div>

<br><br>

<div class='marq3'>
<div id="marquee-reverse3">
  <a>BUY NOW, PAY LATER&nbsp;&nbsp;<img src="https://cdn.shopify.com/s/files/1/0564/3046/1030/files/white_sun.svg?v=1710724460" width="20" style="margin-bottom:-5px;"></a>
</div>
</div>

<style>
.marq4{
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  padding-top:7px;
  padding-bottom:4px;
  background-color:transparent;
  color:black;
  font-size:20px;
  font-family: work sans;
  font-weight:500;
  letter-spacing:0.06rem;
  }
.marq3{
  padding-top:3px;
  padding-bottom:3px;
  background-color:#c00000;
  font-family: work sans;
  letter-spacing:0.06rem;
  color: white;
  font-size: 13px;
  font-weight: 600;
  }
</style>

<script>
  const reverse1 = document.getElementById('marquee-reverse4');
if (reverse1) {
    nodeMarquee({
        parent: reverse1,
        speed: -0.5,
    });
}
  const reverse2 = document.getElementById('marquee-reverse3');
if (reverse2) {
    nodeMarquee({
        parent: reverse2,
        speed: -0.7,
    });
}
</script>
If you like our solution, please like and mark it as a solution.
Don't hesitate to reach us for more Shopify solutions. Thanks 🙂
Website: Expatify Indonesia
Email: guru@expatify.co.id
Whatsapp: Whatsapp
xnyjyh
Trailblazer
390 0 45

I understand this now. I have to change the text after const! It works, nice. Thank you Alyd-Expatify