Develop Reference

How to store the value of circular slider in a variable and display it in console?

I have written code for round slider which is mentioned below. I am unable to figure out how to store the value of the slider in a variable and display it in the console using javascript.
I want to store the value of the tooltip in a variable and display it in the console so that it can be used for other functions.
$("#slider").roundSlider({
radius: 180,
min: 10,
max: 30,
startValue: 24,
circleShape: "pie",
sliderType: "min-range",
value: 50,
editableTooltip: false,
startAngle: 315,
tooltipFormat: "changeTooltip",
});
window.updateBox = function(e) {
var profit = Math.round(this.options.value * 0.005);
}
window.changeTooltip = function(e) {
updateBox.call(this);
return e.value + "°C";
}
body {
background-color: black;
}
#slider {
position: absolute;
top: 20%;
left: 40%;
z-index: 1000;
}
.rs-control .rs-range-color {
background-color: #45a8f8;
}
.rs-control .rs-path-color {
background-color: #191917;
}
.rs-control .rs-handle {
background-color: #4b8aff;
}
.rs-control .rs-bg-color {
background-color: #000000;
}
#slider .rs-border {
border-color: transparent;
}
#slider .rs-tooltip-text {
font-size: 50px;
font-weight: bold;
font-color: white
}
.rs-tooltip.rs-tooltip-text {
font-size: 19px;
font-weight: 500;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-color: White;
background-color: White;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.js">
.
</script>
<div id="slider"></div>

As the documentation suggests, you can add several events to your roundSlider
beforeCreate, create, start, stop, change, drag
In this case, you can use the change event trigger.
$("#slider").roundSlider({
radius: 180,
min: 10,
max: 30,
startValue: 24,
circleShape: "pie",
sliderType: "min-range",
value: 50,
editableTooltip: false,
startAngle: 315,
tooltipFormat: "changeTooltip",
change: "traceChange",
});
window.updateBox = function(e) {
var profit = Math.round(this.options.value * 0.005);
}
window.changeTooltip = function(e) {
updateBox.call(this);
return e.value + "°C";
}
function traceChange(e) {
console.log(e.value);
}
body {
background-color: black;
}
#slider {
position: absolute;
top: 20%;
left: 40%;
z-index: 1000;
}
.rs-control .rs-range-color {
background-color: #45a8f8;
}
.rs-control .rs-path-color {
background-color: #191917;
}
.rs-control .rs-handle {
background-color: #4b8aff;
}
.rs-control .rs-bg-color {
background-color: #000000;
}
#slider .rs-border {
border-color: transparent;
}
#slider .rs-tooltip-text {
font-size: 50px;
font-weight: bold;
font-color: white
}
.rs-tooltip.rs-tooltip-text {
font-size: 19px;
font-weight: 500;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-color: White;
background-color: White;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.js">
.
</script>
<div id="slider"></div>

You can add an onchange event on the slider tag in HTML and get the value in JavaScript using textContent.
Try this
const getValue = (e) => {
let value = e.textContent.split('°')[0];
console.log(value);
console.log(e.textContent);
}
<div id="slider" onchange="getValue(this)"></div>

Auto-scroll items in navbar according to active section

Can anyone tell me how to make categories navbar like from delivery-club app?
Here is what i have already, you can check it by this link - http://testingsite.tmweb.ru/delivery/
But i can't make autoscroll items in navbar when we scroll from section to section.
I see that new web apps use front-end frameworks but i not good at it yet so i use Jquery.
I tried some stuff but it doesn't work. So some code for you guys as well, hope you can help me.
Html
!-- category navigation -->
<div class="catnav_wrap">
<nav class="catnav" data-toggle="sticky-onscroll">
<span role="button" class="catnav_item" data-scroll="pizza">
pizza
</span>
<span role="button" class="catnav_item" data-scroll="burgers">
burger
</span>
<span role="button" class="catnav_item" data-scroll="salats">
салаты
</span>
<span role="button" class="catnav_item" data-scroll="drinks">
Напитки
</span>
<span role="button" class="catnav_item" data-scroll="souce">
Соуса
</span>
<span role="button" class="catnav_item">
Другое
</span>
<span role="button" class="catnav_item">
Пицца
</span>
</nav>
</div>
<!-- category navigation -->
Jquery
$(document).ready(function(){
$('.catnav span').on('click', function() {
var scrollAnchor = $(this).attr('data-scroll'),
scrollPoint = $('section[data-anchor="' + scrollAnchor + '"]').offset().top - 70;
$('body,html').animate({
scrollTop: scrollPoint
}, 500);
return false;})
// Custom function which toggles between sticky class (is-sticky)
var stickyToggle = function (sticky, stickyWrapper, scrollElement) {
var stickyHeight = sticky.outerHeight();
var stickyTop = stickyWrapper.offset().top;
if (scrollElement.scrollTop() >= stickyTop) {
stickyWrapper.height(stickyHeight);
sticky.addClass("fixed");
}
else {
sticky.removeClass("fixed");
stickyWrapper.height('auto');
}
};
// Find all data-toggle="sticky-onscroll" elements
$('[data-toggle="sticky-onscroll"]').each(function () {
var sticky = $(this);
var stickyWrapper = $('<div>').addClass('sticky-wrapper'); // insert hidden element to maintain actual top offset on page
sticky.before(stickyWrapper);
sticky.addClass('fixed');
// Scroll & resize events
$(window).on('scroll.sticky-onscroll resize.sticky-onscroll', function () {
stickyToggle(sticky, stickyWrapper, $(this));
});
// On page load
stickyToggle(sticky, stickyWrapper, $(window));
});
$(window).scroll(function() {
var windscroll = $(window).scrollTop();
if (windscroll >= 0) {
$('.main .productscat').each(function(i) {
if ($(this).position().top <= windscroll - -80) {
$('.catnav span.active').removeClass('active');
$('.catnav span').eq(i).addClass('active');
}
});
} else {
$('.catnav span.active').removeClass('active');
$('.catnav span:first').addClass('active');
}
}).scroll();
});//Jquery
Css
/*category nav*/
.catnav_wrap{
height: 56px;
width: 100%;
}
.catnav{
height: 56px;
width: 100%;
overflow-x: auto;
background: rgb(255, 255, 255);
display: flex !important;
-webkit-box-align: center;
align-items: center;
top: 0px;
z-index: 99;
will-change: box-shadow;
transition: box-shadow 150ms ease 0s;
user-select: none;
}
.catnav::before, .catnav::after {
content: " ";
display: block;
width: 12px;
height: 56px;
flex: 0 0 auto;
}
.fixed {
position: fixed;
box-shadow: rgb(0 0 0 / 10%) 0px 2px 4px 0px;
}
.catnav_item{
display: block;
margin: 4px;
height: 32px;
color: rgb(69, 75, 84);
font-weight: 500;
font-size: 14px;
line-height: 32px;
padding: 0px 16px;
border-radius: 16px;
flex: 0 0 auto;
opacity: 0.6;
transition-property: opacity;
transition-duration: 200ms;
}
.catnav_item.active {
margin: 4px;
height: 32px;
background: rgb(243, 243, 247);
/*background: rgb(255, 240, 230);
color: rgb(186, 78, 0);*/
font-weight: 500;
font-size: 14px;
line-height: 32px;
padding: 0px 16px;
border-radius: 16px;
flex: 0 0 auto;
opacity: 1;
}
/*end category nav*/

jQuery animated number counter from zero to value - counter shows wrong value when a value is hundreds of thousands

I have tried to animate the numbers with the help of this URL: jQuery animated number counter from zero to value and followed this code:
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 3000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
The issue is, I gave a number 800 000 to increment in the numeric counter. Randomly this value is incremented and decremented again to 0. For e.g. After incrementing the value up to 800 000, it is again animating back to value 0.
Counter for zero to value is working fine for smaller values in thousands.

While researching how to do it, I realized that all solutions in the stack are with jquery. Now I write native (vanillajs) in projects, my solution is as follows.
var getCountItems = document.querySelectorAll('.count-item');
if(getCountItems){
getCountItems.forEach(function (countItem) {
var counterValueElement = countItem.querySelector('strong');
var storeCurrentValue = parseInt(counterValueElement.textContent);
var fromZero = 0;
if(fromZero === 0){
counterValueElement.textContent = "0";
}
setInterval(function () {
if(++fromZero <= storeCurrentValue){
counterValueElement.textContent = fromZero.toString();
}
}, 15); // set your speed (decrease)
});
}
section#countdown{
margin: 50px 0;
width: 100%;
color: #1C1E23;
}
section#countdown h3{
font-size: 28px;
text-align: center;
position: relative;
padding-bottom: 20px;
}
section#countdown h3:after{
content: ' ';
position: absolute;
bottom: 0;
left: 10%;
height: 1px;
width: 80%;
background: rgba(28, 30, 35, 0.44);
}
section#countdown .count-item{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
font-size: 24px;
color: rgba(28, 30, 35, 0.7);
margin: 15px 0;
/* set your anim count text for "all" */
transition: all .3s ease, color .4s ease-in;
}
section#countdown .count-item:hover{
transform: scale(1.25);
color: #C22429;
}
section#countdown .count-item span{
font-size: 18px;
color: rgba(28, 30, 35, 0.44);
}
#media only screen and (max-width: 992px){
section#countdown h3 + div{
flex-direction: column;
}
section#countdown .count-item{
transform: scale(1.5);
margin: 30px 0;
}
}
<section id="countdown" class="box-p">
<h3>STATISTICS</h3>
<div class="d-flex align-items-center justify-content-around">
<div class="count-item">
<strong>47</strong>
<span>YEAR EXPERIENCE</span>
</div>
<div class="count-item">
<strong>100</strong>
<span>EXPORT COUNTRIES</span>
</div>
<div class="count-item">
<strong>200</strong>
<span>BRANDS</span>
</div>
<div class="count-item">
<strong>500</strong>
<span>EMPLOYEE</span>
</div>
<div class="count-item">
<strong>7</strong>
<span>SUB BRANDS</span>
</div>
<div class="count-item">
<strong>2</strong>
<span>FACTORY</span>
</div>
</div>
</section>
UPDATE
Added, Pure JS version below the code;
var getCountItems = document.getElementsByClassName('count-item');
for(var i = 0; i < getCountItems.length; i++){
let item = getCountItems[i];
let counterValueElement = item.children[0]; // strong
let storeCurrentValue = parseInt(counterValueElement.textContent);
let fromZero = 0;
setInterval(function () {
if(fromZero <= storeCurrentValue){
counterValueElement.textContent = (fromZero++).toString();
}
}, 15); // set your speed (decrease)
}

Something like this should do the trick,
$('.count').each(function() {
$(this).prop('Counter', 8000)
.animate({
Counter: $(this).text()
}, {
duration: 3000,
easing: 'swing',
step: function(now, a) {
$(this).text(8000 - ~~this.Counter);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class='count'>0</span>
Hope this helps,

anime.js : Simple text animation won't show (with grid layout)

I am trying to animate a text in a grid layout using anime.js library, but the animation won't show. It only uses one HTML file.
The javascript:
<script>
import anime from 'animejs';
anime({
targets: 'container.decor1.HLF',
translateY: [
{ value: 100, duration: 1200 },
{ value: 0, duration: 800 }
],
duration: 2000,
loop: true
});
</script>
The html tags to be animated:
<div class = "container">
<div class = "decor1">
<p class = "HLF">
HLF
</p>
</div>
</div>
How to solve this problem? Thanks.
Here is the full code:
<!DOCTYPE html>
<html>
<head>
<script>
import anime from 'animejs';
anime({
targets: 'container.decor1.HLF',
translateY: [
{ value: 100, duration: 1200 },
{ value: 0, duration: 800 }
],
duration: 2000,
loop: true
});
</script>
</head>
<style>
.tweets {grid-area: tweets; background: rgb(240, 240, 240, 0.5); padding: 40px;
margin: 15px; font-family: arial}
.quotes {grid-area: quotes; background: turquoise; padding: 20px;
margin: 15px; font-family: helvetica; color: white; font-size: 20px}
.decor1 {grid-area: decor1; background: rgb(50, 50, 50, 0.5); padding: 5px;
margin: 15px; font-family: helvetica; text-align: center}
.HLF { color: white; font-size: 200px; margin:1px}
.distributor { color: white; font-size: 20px; margin:1px}
.visual {grid-area: visual; background: rgb(0, 50, 200, 0.6); padding: 20px;
margin: 10px; font-family: helvetica; font-size: 20px;
border: none; border-radius: 10px; color: white}
.product {grid-area: product; background: rgb(35, 35, 35, 0.7); padding: 20px;
margin: 10px; font-family: helvetica; font-size: 20px; border: none;
border-radius: 10px; color: white}
.container {
display: grid;
grid-template-areas:
'tweets quotes decor1'
'tweets visual product';
background-color: rgb(0, 100, 0, 0.8);
padding: 100px;
}
.quote-1,
.quote-2,
.quote-3 {
animation-duration: 20s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.quote-1{
animation-name: quote-1;
}
.quote-2{
animation-name: quote-2;
}
.quote-3{
animation-name: quote-3;
}
</style>
<body style = "background: white">
<div class = "container">
<div class = "tweets">
<center>
<a class="twitter-timeline" data-width="250" data-height="350" data-dnt="true" data-theme="dark" href="https://twitter.com/Herbalife24?ref_src=twsrc%5Etfw">Tweets by Herbalife24</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</center>
</div>
<div class = "quotes">
<p class = "quote-1">
"Tubuh kita memuat 65% air."
</p>
<p class = "quote-2">
"Tubuh kita memuat 65% air."
</p>
<p class = "quote-3">
"Tubuh kita memuat 65% air."
</p>
</div>
<div class = "decor1">
<p class = "HLF">
HLF
</p>
<p class = "distributor">
Independent Distributor
</p>
</div>
<button class = "visual" onclick = "alert('Under Development')"> Visualization </button>
<button class = "product"> Product </button>
</div>
</body>
</html>

A couple things:
The comments below your post appear to be recommending changes to import, I'm in agreement with them. I had to modify your import statement to point at a local copy of anime.min.js:
<script src="js/anime.min.js"></script>
You cannot script components that haven't been loaded by the DOM yet, so I moved your anime script block to the bottom of the HTML page, you had it 5 or so lines from the top.
I updated the target to be class .HLF which you specify - but this should probably be an id instead in your html.
<script>
anime({
targets: '.HLF',
translateY: [
{ value: 100, duration: 1200 },
{ value: 0, duration: 800 }
],
duration: 2000,
loop: true,
});
</script>
And the animation worked!

How to correct retrieve $(object).css(“margin”) and apply this value in .animate() in different browsers?

In jQuery API written what .css() return String. This String have view like value without quotes.
If I'll put $(object).css(“margin”) in my code like this:
condition: this != object
$(this).animate({
width: "toggle",
margin: $(object).css("margin"),
padding: ($(object).css("padding"))
}, time, "linear");
"Chrome" work out perfectly, but "IE 11" and last "Edge" work out incorrect.
If I'll add to $(object).css(“margin”) quotes, all browser work identically.
How identically, You can see in code below.
Eventually I need code which independent of content. How to fix it ?
$(document).ready(function() {
var time = 200;
var delay = time + 100;
$(".icon-language").click(function() {
slide($(".rightBlockMenu i"), $(this), time);
$(".hidden").delay(delay).animate({
width: "show"
}, time, "linear");
});
$(".icon-search-1").click(function () {
slide($(".rightBlockMenu i"), $(this), time);
});
$(".icon-user-o").click(function () {
slide($(".rightBlockMenu i"), $(this), time);
});
$(".icon-basket").click(function () {
slide($(".rightBlockMenu i"), $(this), time);
});
})
function slide(selector, object, time) {
if (selector.not(object).css("display") != "none") {
selector.not(object).animate({
width: "hide",
margin: "0px -1px",
padding: "9px 0px"
}, time, "linear");
$(object).animate({
margin: "0"
}, time).addClass("active_i");
}
if (selector.not(object).css("display") == "none") {
selector.each(function (){
if ($(this).is(selector.last())) {
$(this).animate({
width: "show",
margin: "0 0 0 6px",
padding: "\"" + $(object).css("padding") + "\""
}, time, "linear");
$(this).removeClass("active_i");
} else {
$(this).animate({
width: "show",
margin: "0 6px",
padding: "9px 18px"
}, time, "linear", function() {
if ($(this).is(selector.first())) {
$(this).css("margin-left", "0");
}
});
$(this).removeClass("active_i");
}
});
}
}
.header_top {
height: 100px;
position: relative;
}
.rightBlock {
max-height: 100%;
padding-right: 10px;
float: right;
right: 0;
text-align: right;
}
.rightBlockMenu {
color: hsla(0, 0%, 80%, 1);
font-size: 2.7em;
vertical-align: middle;
display: inline-block;
}
.rightBlockMenu i:last-child {
margin-right: 0;
}
.rightBlockMenu i:first-child {
margin-left: 0;
}
.rightBlockMenu i:hover {
color: hsla(0, 70%, 45%, 1);
cursor: pointer;
}
.rightBlockMenu i {
padding: 9px 18px;
margin: 0 6px;
vertical-align: bottom;
border: 1px solid hsla(0, 0%, 80%, 1);
display: inline-block;
}
.active_i {
color: hsla(0, 70%, 45%, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header_top">
<div class="rightBlock">
<div class="rightBlockMenu">
<i class="icon-language">aaa</i>
<i class="icon-search-1" >bbb</i>
<i class="icon-user-o" >ccc</i>
<i class="icon-basket" >ddd</i>
</div>
</div>
</div>

I tested your code on Firefox, Chrome and Edge and it seemed fine. Maybe clarify more what you are trying to achieve. In any case, your code seems a needlessly complicated.
Find below a shorter version of your code:
$(document).ready(function() {
var time = 200;
var delay = time + 100;
$(".rightBlockMenu i").click(function() {
var currentElement = jQuery(this);
var margin = "0 6px";
var padding = "9px 18px";
var toggle = "show";
if (!currentElement.hasClass("active_i")) {
currentElement.addClass("active_i")
margin = "0";
padding = "9px 0";
toggle = "hide";
}
currentElement.siblings().each(function(index, elemenet) {
jQuery(elemenet).removeClass("active_i").animate({
width: toggle,
margin: margin,
padding: padding
}, time, "linear", function() {
// Show element after it was hidden
if (currentElement.hasClass("icon-language")) {
setTimeout(function() {
jQuery(elemenet).animate({
width: "show",
margin: "0 6px",
padding: "9px 18px"
});
}, delay);
}
if (toggle == 'show')
$(".rightBlockMenu i").removeClass("active_i");
});
});
});
});
.header_top {
height: 100px;
position: relative;
}
.rightBlock {
max-height: 100%;
padding-right: 10px;
float: right;
right: 0;
text-align: right;
}
.rightBlockMenu {
color: hsla(0, 0%, 80%, 1);
font-size: 2.7em;
vertical-align: middle;
display: inline-block;
}
.rightBlockMenu i:last-child {
margin-right: 0;
}
.rightBlockMenu i:first-child {
margin-left: 0;
}
.rightBlockMenu i:hover {
color: hsla(0, 70%, 45%, 1);
cursor: pointer;
}
.rightBlockMenu i {
padding: 9px 18px;
margin: 0 6px;
vertical-align: bottom;
border: 1px solid hsla(0, 0%, 80%, 1);
display: inline-block;
}
.active_i {
color: hsla(0, 70%, 45%, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header_top">
<div class="rightBlock">
<div class="rightBlockMenu">
<i class="icon-language">aaa</i>
<i class="icon-search-1">bbb</i>
<i class="icon-user-o">ccc</i>
<i class="icon-basket">ddd</i>
</div>
</div>
</div>