Marquee animation doesn't run smooth - javascript

I create a top bar with a marquee effect. It is important that the marquee content (text) is immediately loaded because it's the first thing the user will see.
I have the following code:
window.requestAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
var speed = 5000;
(function currencySlide(){
var currencyPairWidth = $('.slideItem:first-child').outerWidth();
$(".slideContainer").animate({marginLeft:-currencyPairWidth},speed, 'linear', function(){
$(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));
});
requestAnimationFrame(currencySlide);
})();
.slider{
width:100%;
overflow:hidden;
position:relative;
margin:0;
}
ul{
background:#ddd;
overflow:hidden;
width:1000%;
margin:0;
}
li{
list-style:none;
display:inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='slider'>
<ul class="slideContainer">
<li class="slideItem" >
NEW +
</li>
<li class="slideItem" >
NEW +
</li>
<li class="slideItem" >
NEW +
</li>
<li class="slideItem" >
NEW +
</li>
<li class="slideItem" >
NEW +
</li>
<li class="slideItem" >
NEW +
</li>
<li class="slideItem" >
NEW +
</li>
<li class="slideItem" >
NEW +
</li>
<li class="slideItem" >
NEW +
</li>
<li class="slideItem" >
NEW +
</li>
<li class="slideItem" >
NEW +
</li>
<li class="slideItem" >
NEW +
</li>
<li class="slideItem" >
NEW +
</li>
<li class="slideItem" >
NEW +
</li>
<li class="slideItem" >
NEW +
</li>
<li class="slideItem" >
NEW +
</li>
<li class="slideItem" >
NEW +
</li>
<li class="slideItem" >
NEW +
</li>
<li class="slideItem" >
NEW +
</li>
<li class="slideItem" >
NEW +
</li>
<li class="slideItem" >
NEW +
</li>
<li class="slideItem" >
NEW +
</li>
<li class="slideItem" >
NEW +
</li>
</ul>
</div>
The problem: Every 5 seconds the animation is not smooth anymore. It shakes a little bit.
Tested in Google Chrome browser on MacOS.
What changes can I make to my code so that the animation is always smooth?
I appreciate your time. Thanks!

Turns out the problem is with display: inline-block causing an "invisible margin". More information here: https://css-tricks.com/fighting-the-space-between-inline-block-elements/
I used the solution mentioned in the article and added the following CSS:
ul {
font-size: 0;
}
ul li {
font-size: 16px;
}
Now it's working as expected!

Related

active anchor link not being highlighted

I have been staring at this code for far too long, unfortunately I do not see the problem.
I am trying to get the active menu entry highlighted when the relevant div gets scrolled into view. But nothing is happening and no errors are being thrown in the console.
My menu html:
<section class="LeftAnchorNav" style="display: block;">
<nav id="LeftAnchorNav">
<div class="container" style="padding-left: 50px;">
<div class="col-md-4 LeftAnchorNavWrapper">
<ul class="LeftAnchorNavMenu">
<li class="leftanchorlink">
<a class="leftlink" href="#20a51af3-f8b0-4ef9-ba73-cf3cd0a321b9">About us</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#d736bc13-a2a7-48d4-8ecc-75b9a17f801b">Demo Center</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#545a6339-87e4-41ed-ad51-70c3788cedee">Testimonial</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#9355324a-6219-4300-ae97-aa77bf67dab4">Newsletter</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#0c70b0db-3e70-4faa-ab98-154b4eae498e">Blog</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#4903bc53-b862-42f0-a600-e21061204e42">Contact</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#002f6fd7-758b-4b27-8c75-0ce087ee826a">Solution Finder</a>
</li>
</ul>
</div>
</div>
</nav>
</section>
An example div:
<div class="block anchorblock col-lg-12 col-md-12 col-sm-12 col-xs-12 span12 "><div id="20a51af3-f8b0-4ef9-ba73-cf3cd0a321b9"></div>
</div>
My jquery/js:
if ($('.LeftAnchorNav').length > 0) {
// prepare the variables
var lastID;
var anchorMenu = $(".LeftAnchorNavMenu");
var anchorMenuHeight = anchorMenu.outerHeight() + 100;
var anchorMenuItems = anchorMenu.find(".leftlink");
var anchorMenuItemsTarget = anchorMenuItems.map(function () {
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
// bind everything to the scrolling
$(window).scroll(function () {
// get anchornav container scroll position and add buffer
var fromTop = $(this).scrollTop() + anchorMenuHeight + 300;
// get ID of the current scroll item
var currentItem = anchorMenuItemsTarget.map(function () {
if ($(this).offset().top < fromTop)
return this;
});
// get the ID of the current element
currentItem = currentItem[currentItem.length - 1];
var id = currentItem && currentItem.length ? currentItem[0].id : "";
if (lastID !== id) {
lastID = id;
// Set/remove active class
anchorMenuItems.removeClass("highlightleftnavactive")
anchorMenuItems.filter("[href='#" + id + "']").addClass("highlightleftnavactive");
}
});
}
It's quite fiddly to do the arithmetic for scrolling so this snippet uses IntersectionObserver instead. This has the added benefit of less processing overhead as it just gets informed when the elements come in or go out of view, not every time the user scrolls a bit.
It sets up the observer to observe when any of the relevant elements come into or go out of the viewport. When alerted to that it adds or removes the highlighting class to the related navbar link.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<style>
.LeftAnchorNav {
position: fixed;
z-index:1;
}
.tall {
width: 100vw;
height: 100vh;
background-image: linear-gradient(cyan, magenta, yellow, black);
}
.highlightleftnavactive {
background-color: yellow;
}
</style>
</head>
<section class="LeftAnchorNav" style="display: block;">
<nav id="LeftAnchorNav">
<div class="container" style="padding-left: 50px;">
<div class="col-md-4 LeftAnchorNavWrapper">
<ul class="LeftAnchorNavMenu">
<li class="leftanchorlink">
<a class="leftlink" href="#20a51af3-f8b0-4ef9-ba73-cf3cd0a321b9">About us</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#d736bc13-a2a7-48d4-8ecc-75b9a17f801b">Demo Center</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#545a6339-87e4-41ed-ad51-70c3788cedee">Testimonial</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#9355324a-6219-4300-ae97-aa77bf67dab4">Newsletter</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#0c70b0db-3e70-4faa-ab98-154b4eae498e">Blog</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#4903bc53-b862-42f0-a600-e21061204e42">Contact</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#002f6fd7-758b-4b27-8c75-0ce087ee826a">Solution Finder</a>
</li>
</ul>
</div>
</div>
</nav>
</section>
<div class="tall"></div>
<div class="block anchorblock col-lg-12 col-md-12 col-sm-12 col-xs-12 span12 "><div id="20a51af3-f8b0-4ef9-ba73-cf3cd0a321b9">
An example block coming into and going out of view it belongs to the About us link in the navbar</div>
</div>
<div class="tall"></div>
<script>
let callback = (entries) => {
entries.forEach(entry => {
let id = entry.target.firstChild.id;
let leftLink = document.querySelector("a.leftlink[href='#"+ id + "']");
if (entry.isIntersecting) { leftLink.classList.add('highlightleftnavactive');}
else { leftLink.classList.remove('highlightleftnavactive');}
});
};
const observer = new IntersectionObserver(callback);
const anchorBlocks = document.querySelectorAll('.anchorblock');
anchorBlocks.forEach( (anchorBlock) => {
observer.observe(anchorBlock);
});
</script>

How to set active link on page reload?

I want to add active link on page reload, but I don't know how to do this. The fact is that when I put active based on bootstrap 4, the active link doesn't work. I try many things but I really don't know how to interact with this jquery's plugin. Please help me.
I don't know how to make this on existing code.
HTML
<ul id="myNav" class="nav mt-7 mb-5">
<li class="nav-item">
<a class="nav-link active chiffres" href="tgn.php">01</a>
</li>
<li class="nav-item">
<a class="nav-link chiffres" href="oprah.php">02</a>
</li>
<li class="nav-item">
<a class="nav-link chiffres" href="innocent.php">03</a>
</li>
<li class="nav-item">
<a class="nav-link chiffres" href="reveal.php">04</a>
</li>
<li class="nav-item">
<a class="nav-link chiffres" href="maison21g.php">05</a>
</li>
</ul>
JAVASCRIPT
(function($){
$.fn.linkUnderlineAnim = function(options) {
var defaults = $.extend({
"speed" : 300,
"color" : "#DB3340",
"thickness" : 2,
"distance" : 0,
"bottom" : 0
}, options);
return this.each(function() {
var items = $("li a");
var o = defaults;
items.css("position", "relative")
.css("text-decoration", "none")
.css("padding-bottom", o.distance);
var id = this.id;
if (id !="") {
// it has id, so we will use it to customize the style sheet
}
else {
// it does not have id, so we generate a unique one to
customize the style sheet
this.id = '_' + new Date().getTime(); // it is important to
prefix the id with any character, because only numbers not working in
CSS selection
id = this.id;
}
//it is not possible to access :before in JavaScript/jQuery, so
we add a stylesheet instead. But we used/generated the id to avoid
styling non selected (ul) elements
var css = '#' + id + ' li a {position: relative; text-decoration:
none;}' +
'#' + id +' li a:before {content: "";position: absolute;
width: 100%; height: ' + o.thickness + 'px; bottom: ' + o.bottom +
'px; left: 0;'+
'background-color: ' + o.color + ';' +
'visibility: hidden; -webkit-transform: scaleX(0); transform:
scaleX(0);' +
'-webkit-transition: all ' + o.speed/1000 +'s ease-in-out 0s;
transition: all ' + o.speed/1000 + 's ease-in-out 0s;}' +
'#' + id +' li a:hover:before {visibility: visible; -webkit-
transform: scaleX(1); transform: scaleX(1);}' + '#' + id +'li
a:active{background:red;}' ,
head = document.head || document.getElementsByTagName('head')
[0],
style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
});
}
})(jQuery);
Try this solution it will take the path from your url and set active class into it.
$(function($) {
let url = window.location.href;
$('li a').each(function() {
if (this.href === url) {
$(this).closest('li').addClass('active');
}
});
});
.active {text-decoration: underline}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul id="myNav" class="nav mt-7 mb-5">
<li class="nav-item">
<a class="nav-link chiffres" href="tgn.php">01</a>
</li>
<li class="nav-item">
<a class="nav-link chiffres" href="oprah.php">02</a>
</li>
<li class="nav-item">
<a class="nav-link chiffres" href="innocent.php">03</a>
</li>
<li class="nav-item">
<a class="nav-link chiffres" href="reveal.php">04</a>
</li>
<li class="nav-item">
<a class="nav-link chiffres" href="maison21g.php">05</a>
</li>
</ul>

Detecting selected element

I have the following Javascript to operate my accordion menu.
<script src="http://thecodeplayer.com/uploads/js/jquery-1.7.1.min.js"></script>
<script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js"></script>
<script>
$(document).ready(function() {
$("#accordian a").click(function() {
var link = $(this);
var closest_ul = link.closest("ul");
var parallel_active_links = closest_ul.find(".active")
var closest_li = link.closest("li");
var link_status = closest_li.hasClass("active");
var count = 0;
closest_ul.find("ul").slideUp(function() {
if (++count == closest_ul.find("ul").length)
parallel_active_links.removeClass("active");
});
if (!link_status) {
closest_li.children("ul").slideDown();
closest_li.addClass("active");
}
})
$(".selected").parent().slideDown();
})
</script>
How do I modify the code to detect the 'selected' class and open the corresponding panel from the following html script.
<div id="accordian">
<ul>
<li>
<h3 class="mtop"> </h3>
</li>
<li>
<h3>Dashboard</h3>
<ul>
<li class="litop">Reports</li>
<li class="limid">Search</li>
<li class="limid">Graphs</li>
<li class="libot">Settings</li>
</ul>
</li>
<li>
<h3>Calendar</h3>
<ul>
<li class="litop">Current Month</li>
<li class="limid">Current Week</li>
<li class="limid">Previous Month</li>
<li class="limid">Previous Week</li>
<li class="limid">Next Month</li>
<li class="limid">Next Week</li>
<li class="limid">Team Calendar</li>
<li class="limid">Private Calendar</li>
<li class="libot">Settings</li>
</ul>
</li>
<li>
<h3>Favourites</h3>
<ul>
<li class="litop">Global favs</li>
<li class="limid selected">My favs</li>
<li class="limid">Team favs</li>
<li class="libot">Settings</li>
</ul>
</li>
<li>
<h3 class="mbot"> </h3>
</li>
</ul>
</div>
Here IS Fiddle Link - https://jsfiddle.net/p7wm4tL2/
You have old version of jquery,
Try updating your jquery version.
$(document).ready(function() {
$("#accordian a").click(function() {
var link = $(this);
var closest_ul = link.closest("ul");
var parallel_active_links = closest_ul.find(".active")
var closest_li = link.closest("li");
var link_status = closest_li.hasClass("active");
var count = 0;
closest_ul.find("ul").slideUp(function() {
if (++count == closest_ul.find("ul").length)
parallel_active_links.removeClass("active");
});
if (!link_status) {
closest_li.children("ul").slideDown();
closest_li.addClass("active");
}
})
$(".selected").parent().slideDown();
});
Once check working code here.

Multiple lavel dropdown menu set active using jQuery

When I click a menu example "C" then I want to set class active. It also should be active after reload of the page.
<ul class="nav metismenu" id="side-menu">
<li>
Dashboards
<ul class="nav nav-second-level collapse">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
</li>
<li>
F
</li>
</ul>
To set a class active the code is :
<ul class="nav metismenu" id="side-menu">
<li class="active">
Dashboards
<ul class="nav nav-second-level collapse">
<li>A</li>
<li>B</li>
<li class="active">C</li>
<li>D</li>
<li>E</li>
</ul>
</li>
<li>
F
</li>
</ul>
First, I invite you to learn more about cookies .
So , for this case Here is Working Fiddle => jsFiddle
i used JQuery in the fiddle (dont forget to use Jquery in your sources)
ps: for security issues Snippet can't work here !!
JS :
$( document ).ready(function(){
if(typeof(getCookie("activeLi")) != "undefined" && getCookie("activeLi").length>0){
$('#side-menu ul a[ href=' + getCookie("activeLi") + ']').parent().addClass("active");
}
$("#side-menu ul a").click(function(a){
if(typeof(getCookie("activeLi")) != "undefined");
alert(getCookie("activeLi"));
removeActive();
$(this).parent().addClass("active");
setActiveCookie(this.getAttribute("href"));
});
});
function removeActive(){
$("#side-menu ul li").each(function(li){
$(this).removeClass("active");
})
}
function setActiveCookie(active){
//document.cookie="activeLi="+active;
var d = new Date();
d.setTime(d.getTime() + (30*24*60*60*1000)); // expire in 30 days
var expires = "expires="+d.toUTCString();
document.cookie="activeLi="+active+"; " + expires;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
}
return "";
}
CSS :
.active a {
color: green;
}
a {
text-decoration: none;
}
HTML :
<ul class="nav metismenu" id="side-menu">
<li>
Dashboards
<ul class="nav nav-second-level collapse">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
</li>
<li>
F
</li>

Creating dynamic ul li for a carousel with Jquery

I am building a carousel with a ul li dynamically using the following code:
var arrEanSample = [];
var arrPathSample = [];
var arrValSample = [];
var thecookie = $.cookie("sample");
var cookies = thecookie.split("|");
cookies.forEach(function(item){
var barcode= item.split('~')[0];
var value = item.split('~')[1];
var path = item.split('~')[2];
arrEanSample.push(barcode);
arrPathSample.push(path);
arrValSample.push(value);
});
var output='<ul class="slides">';
for(var i = 0; i < arrEanSample.length; i++)
{
output+= '<li ean="' + arrEanSample[i] + '">\
<img src="' + arrPathSample[i] + '" alt="pix" draggable="false">\
<a imgpath="' + arrPathSample[i] + '" value="' + arrValSample[i] +'" ean="' + arrEanSample[i] +'" class="unselectsample-thumb" data-statsaction="coupon-basket-remove" data-statscategory="coupon-buttons" title="Remove" href="#">\
<i aria-hidden="true" class="fonticon fonticon-close-neg">\
<span class="sr-only">Remove</span>\
</i>\
</a>\
</li>';
}
output+='</ul>';
$('.flexslider').empty().append(output);
The code above is generating a html that looks like this(unnecessary codes removed):
<div class="flexslider">
<ul class="slides">
<li ean="9904153320507">
<li ean="9904153300509">
<li ean="9904153441004">
<li ean="9911199120503">
<li ean="9911199071003">
</ul>
</div>
My problem is, i have to group all the LI's in sets of 10, whereby one li would countain a ul with 10 such LI's. As follows:
<div class="flexslider">
<ul class="slides">
<li>
<div class="list-samples">
<ul class="reset">
<li> li number 1 </li>
<li> li number 2 </li>
<li> li number 3</li>
<li> li number 4</li>
<li> li number 5</li>
<li> li number 6</li>
<li> li number 7</li>
<li> li number 8</li>
<li> li number 9</li>
<li> li number 10</li>
</ul>
</div>
</li>
<li>
<div class="list-samples">
<ul class="reset">
<li> li number 11 </li>
<li> the list goes on - as sets of 10's ... </li>
</ul>
</div>
</li>
</ul>
</div>
Can anyone please help me on achieving the above code with my starting JS
Any help would be appreciated
Thanks
output = '<ul class="slides"><li><div class="list-samples"><ul class="reset">';
for(var i = 0; i < arrEanSample.length; i++){
if(i % 10 == 0 && i != 0){
output += '</ul></div></li><li><div class="list-samples"><ul class="reset">';
}
output+= '<li ean="' + arrEanSample[i] + '">\
<img src="' + arrPathSample[i] + '" alt="pix" draggable="false">\
<a imgpath="' + arrPathSample[i] + '" value="' + arrValSample[i] +'" ean="' + arrEanSample[i] +'" class="unselectsample-thumb" data-statsaction="coupon-basket-remove" data-statscategory="coupon-buttons" title="Remove" href="#">\
<i aria-hidden="true" class="fonticon fonticon-close-neg">\
<span class="sr-only">Remove</span>\
</i>\
</a>\
</li>';
}
}
output += '</ul></div></li></ul>';

Categories