Shopify themes, liquid, logos, and UX
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 <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 <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>
Solved! Go to the solution
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 <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 <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>
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.
Can you elaborate more please, thanks. I changed the const to var one one scoller and did nothing.
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 <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 <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>
I understand this now. I have to change the text after const! It works, nice. Thank you Alyd-Expatify
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025