I have a vertical marquee that works great if you have the height of the parent div set to a fixed height. However I need mine to be 80vh and be responsive, which means I can't have a fixed height. This causes the text to show to soon and start overlapping and go out of order.
I think the issue I'm having is that the top is set to 100 and not a % but I'm not sure how to correct this issue?
They're numbered and boxed to show the overlapping and spacing issue.
Here is a jsFiddle
Below is a working example of the issue.
window.verticalScroller = function($elem) {
var top = parseInt($elem.css("top"));
var temp = -1 * $('.js-cycle-list > li').height();
if(top < temp) {
top = $('.js-cycle-list').height()
$elem.css("top", top);
}
$elem.animate({ top: (parseInt(top)-100) }, 600, 'linear', function () {
window.verticalScroller($(this))
});
}
$(document).ready(function() {
var i = 0;
$(".js-cycle-list > li").each(function () {
$(this).css("top", i);
i += 100;
window.verticalScroller($(this));
});
});.cycle-text {
height: 80vh;
width: 100%;
overflow: hidden;
background: white;
}
.cycle__list {
position: relative;
width: 100%;
height: 80vh;
border: 1px solid red;
overflow: hidden;
margin:0;
padding:0;
list-style:none;
}
.cycle__list li {
position: absolute;
width: 100%;
height: 100px;
border: 1px solid blue;
overflow: hidden;
}
.cycle__list li p {
color: #f40000;
font-family: Arial;
font-size: 80px;
line-height: 100px;
text-align: right;
padding:0;
margin:0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="cycle-text ">
<ul class="cycle__list js-cycle-list o-pd-top-md o-pd-btm-md">
<li>
<p>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>2. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>3. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>4. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>5. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>6. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>7. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>8. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>9. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>10. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>11. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>12. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>13. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>14. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>15. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>16. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>17. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>18. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>19. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>20. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>21. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>22. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>23. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>24. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>25. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>26. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>27. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>28. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>29. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>30. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
</ul>
</section>Here you are, I fixed the height of li parent element with JS and made it equal to the sum of the li elements. Like this when you set top = $('.js-cycle-list').height() It really goes to the end of the div, because if you set a fixed value like 80vh the sum of li height could be more than 80vh and this causes the text to show overlapping and go out of order.
I hope I explained this well, This is my demo updated:
window.verticalScroller = function($elem) {
var top = parseInt($elem.css("top"));
var temp = -1 * $('.js-cycle-list > li').height();
if(top < temp) {
top = $('.js-cycle-list').height()
$elem.css("top", top);
}
$elem.animate({ top: (parseInt(top)-100) }, 600, 'linear', function () {
window.verticalScroller($(this))
});
}
$(document).ready(function() {
var i = 0;
// get total height of li elements
var ulHeight = 0;
$(".js-cycle-list > li").each(function () {
ulHeight = ulHeight + $(this).height();
});
$('.js-cycle-list').css("height", ulHeight - 200);
$(".js-cycle-list > li").each(function () {
$(this).css("top", i);
i += 100;
window.verticalScroller($(this));
});
});.cycle-text {
display: table;
width: 100%;
background: white;
overflow: hidden;
}
.cycle__list {
position: relative;
width: 100%;
height: 80vh;
border: 1px solid red;
overflow: hidden;
margin:0;
padding:0;
list-style:none;
}
.cycle__list li {
position: absolute;
width: 100%;
height: 100px;
border: 1px solid blue;
overflow: hidden;
}
.cycle__list li p {
color: #f40000;
font-family: Arial;
font-size: 80px;
line-height: 100px;
text-align: left
padding:0;
margin:0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="cycle-text ">
<ul class="cycle__list js-cycle-list o-pd-top-md o-pd-btm-md">
<li>
<p>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>2. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>3. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>4. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>5. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>6. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>7. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>8. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>9. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>10. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>11. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>12. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>13. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>14. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>15. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>16. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>17. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>18. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>19. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>20. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>21. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>22. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>23. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>24. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>25. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>26. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>27. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>28. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>29. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li>
<p>30. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
</ul>
</section>