Requirement:
Needed to add custom scale numbers to the range slider from the Rangeslider.js plugin, so that whenever it slides over the horizontal line it needs to display the selected number range from the console
Actual Results:
Whenever I tried to add custom numbers the whole design including marker gets ruined. Here is the below codes of the snippet which needs to add custom number scales
Code I:
init(1, 10);
function init(min, max) {
$("#io").append($("<div style='text-align:center;'><div><input type='range' id='slider' min='" + min + "' max='" + max + "' step='1' value='3' data-rangeslider><output id='val'></output></div></div>"));
$('head').append('<link href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.css" rel="stylesheet" type="text/css">');
$.getScript("https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.js")
.done(function(script, textStatus) {
console.log(textStatus);
//Preform here
initRangeSlider($("#slider"));
});
}
function initRangeSlider(ele) {
ele.rangeslider({
// Deactivate the feature detection
polyfill: false,
// Callback function
onInit: function() {
//valueOutput(this.$element[0]);
},
// Callback function
onSlide: function(position, value) {
console.log('onSlide');
console.log('position: ' + position, 'value: ' + value);
},
// Callback function
onSlideEnd: function(position, value) {
console.log('onSlideEnd');
console.log('position: ' + position, 'value: ' + value);
}
});
}
.rangeslider--horizontal {
height: 6px !important;
width: 66% !important;
}
.rangeslider__handle {
background: white;
background-image: none;
background-size: auto;
border: 1px solid #ccc;
cursor: pointer;
display: inline-block;
width: 24px !important;
height: 25px !important;
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<b>Range Slider</b><br/>
<div id='io'></div><br/><br/>
Code II:
Here the below code of snippets doesn't seem to fit for my project. This was my actual result when I tried to integrate. So I need to modify the above code I with the below code II snippets
var $r = $('input[type="range"]');
var $ruler = $('<div class="rangeslider__ruler" />');
// Initialize
$r.rangeslider({
polyfill: false,
onInit: function() {
$ruler[0].innerHTML = getRulerRange(this.min, this.max, this.step);
this.$range.prepend($ruler);
}
});
function getRulerRange(min, max, step) {
var range = '';
var i = 0;
while (i <= max) {
range += i + ' ';
i = i + step;
}
return range;
}
.rangeslider,
input[type='range'] {
max-width: 400px;
height: 6px !important;
width: 66% !important;
float: center !important;
}
.rangeslider__ruler {
cursor: pointer;
font-size: .7em;
margin: 20px 3px 0 3px;
position: relative;
top: 100%;
text-align: justify;
}
// Workaround to justify only one-line.
// Extra element to force a new line.
.rangeslider__ruler:after {
content: "";
display: inline-block;
width: 100%;
}
.rangeslider__handle {
background: white;
background-image: none;
background-size: auto;
border: 1px solid #ccc;
cursor: pointer;
display: inline-block;
width: 24px !important;
height: 25px !important;
position: absolute;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(0, 0, 0, 0.1)));
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.min.css" integrity="sha256-F8gzbY2A1VTf49iOrc8Lst/UvcUtoFr3myix0WMiNqA=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.min.js" integrity="sha256-vFhEtGnaQ2xB+yjBTSXxssthNcfdbzu+lmLYhCdp2Cc=" crossorigin="anonymous"></script>
<!--
rangeslider.js example
https://github.com/andreruffert/rangeslider.js
by André Ruffert - #andreruffert
-->
<br/>
<input type="range" min="0" max="4" step="0.5">
Here is a resulting snapshot showed after integrating the code II to my project
Expected Result:
Code I needs to be integrated/modified taking the code from the Code II snippets
OR
Apart from rangeslider.js plugin if in case, if there are any other procedures needs to be followed.
Related
Before appending the loader to my page carousel works fine. But after adding loader to my page data not appending in the carousel. It appends after carousel. I want to show data inside carousel. I have tried but have not been able to figure out the problems. In this code, I am not fetching the data from the server but I have hard-coded data which is showing using local storage.
let movieData = JSON.parse(localStorage.getItem("movies"));
//console.log(movieData)
function sortLH() {
let data = JSON.parse(localStorage.getItem('movies'));
sort_data = data.sort(function(a, b) {
return a.rating - b.rating;
});
displayDOM(sort_data);
console.log(sort_data);
}
function sortHL() {
let data = JSON.parse(localStorage.getItem('movies'));
sort_data = data.sort(function(a, b) {
return b.rating - a.rating;
});
displayDOM(sort_data);
}
function displayDOM(data) {
let parent = document.querySelector('.carousel');
parent.innerHTML = null;
data.forEach(function(el) {
let container = document.createElement("div");
container.className = "carousel-cell";
let poster = document.createElement("img");
poster.src = el.poster;
let name = document.createElement("p");
name.innerText = `Movie: ${el.name}`;
let release = document.createElement("p");
release.innerText = `Year: ${el.release_Date}`;
let rating = document.createElement("p");
rating.innerText = `Rating: ${el.rating}`;
container.append(poster, name, release, rating)
parent.append(container);
});
}
////Loader/////
getme_dataPromise = new Promise(function(resolve, reject) {
setTimeout(function() {
let data = movieData;
if (data != null) {
resolve(data);
} else {
reject(`ERR: Server could not get your data`);
}
}, 5000);
});
//console.log(getme_dataPromise)
getme_dataPromise.then(function(res) {
displayDOM(res);
}).catch(function(err) {
console.log('err:', err);
});
* {
box-sizing: border-box;
}
div>img {
display: block;
margin: auto;
margin-left: 20%;
}
/* changes seen after refresh */
body {
font-family: sans-serif;
background: #0c111b;
}
.carousel {
/* background: #0c111b; */
width: 95%;
margin: auto;
margin-top: 49px;
padding: 8px 8px;
}
.carousel-cell {
width: 24%;
height: 500px;
margin-right: 80px;
margin-bottom: 40px;
/* border: 2px solid red; */
border-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
.flickity-page-dots {
display: none;
}
/* cell number */
.carousel-cell>img {
height: 80%;
width: 100%;
border-radius: 5px;
}
.carousel-cell>p {
color: #fff;
font-size: 0.8em;
text-align: center;
}
<link rel="stylesheet" href="./body-carousel.css">
<link rel="stylesheet" href="https://unpkg.com/flickity#2/dist/flickity.min.css">
<body>
<button onclick="sortLH()">Low to High</button>
<button onclick="sortHL()">High to low</button>
<div class="carousel" data-flickity='{ "cellAlign": "left", "contain": true }'>
<!-- gif image for loader -->
<img src="./uxplanet.gif" alt="gif">
</div>
</body>
<script src="./data.js"></script>
<script src="./body.js"></script>
<script src="https://unpkg.com/flickity#2/dist/flickity.pkgd.min.js"></script>
Why are you calling same function three times?
1.displayDOM(sort_data);inside SortLH()
2.displayDOM(res); inside .then
3.displayDOM(sort_data); inside SortHL().
i am calling the function that generates our html one time only that is inside my .then
I am just mimicking the data with an array of objects & checked cells are appended inside .carousel.
Update:Added Loading Animation Before Promise is Resolved or Timeout
Duration.
The svg will be generated(length of movieData)times.fore.g in this
case we have 2 movies so there are two loading circles.
I don't think there is any other issue. feel free to respond if you think otherwise
/*let svg = `<svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
<path fill="#e72f2f" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
dur="1s"
from="0 50 50"
to="360 50 50"
repeatCount="indefinite" />
</path>
</svg>`;*/
let movieData = [{
name: "CuttPutlli",
release_Date: "2022",
rating: "5.9/10 ImDb",
poster: "https://img1.hotstarext.com/image/upload/f_auto,t_web_vl_3x/sources/r1/cms/prod/6531/1326531-v-e6302c49fcd9"
},
{
name: "Thor:Love & Thunder",
release_Date: "2022",
rating: "6.5/10 ImDb",
poster: "https://img1.hotstarext.com/image/upload/f_auto,t_web_vl_3x/sources/r1/cms/prod/8317/1328317-v-56412010beba"
}
];
const getme_dataPromise = new Promise(function(resolve, reject) {
/*let parent = document.querySelector(".carousel");
let i = 0;
while (i < movieData.length) {
parent.innerHTML += svg;
i++
}*/
setTimeout(function() {
let data = movieData;
if (data != null) {
resolve(data);
} else {
reject(`ERR: Server could not get your data`);
}
}, 2000);
});
//console.log(getme_dataPromise)
getme_dataPromise
.then(function(res) {
displayDOM(res); //<--------------------Calling The DisplayDom Fuction.
})
.catch(function(err) {
console.log("err:", err);
});
function displayDOM(data) {
let parent = document.querySelector(".carousel");
/*parent.innerHTML = "";*/
data.forEach(function(el) {
let container = document.createElement("div");
container.className = "carousel-cell";
let poster = document.createElement("img");
poster.src = el.poster;
let name = document.createElement("p");
name.innerText = `Movie: ${el.name}`;
let release = document.createElement("p");
release.innerText = `Year: ${el.release_Date}`;
let rating = document.createElement("p");
rating.innerText = `Rating: ${el.rating}`;
container.append(poster, name, release, rating);
parent.append(container);
});
}
* {
box-sizing: border-box;
}
/* changes seen after refresh */
body {
font-family: sans-serif;
background: #0c111b;
}
.carousel {
/* background: #0c111b; */
width: 95%;
margin: auto;
margin-top: 49px;
padding: 8px 8px;
}
.carousel-cell {
width: min-content;
/*let it take the size of the image*/
/*height: 500ox; let it take the space it needs*/
margin-right: 80px;
margin-bottom: 40px;
/* border: 2px solid red; */
border-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
.flickity-page-dots {
display: none;
}
/* cell number */
.carousel-cell>img {
height: 60%;
/*width: 100%; change only one of height or width to maintaint the aspect ratio*/
border-radius: 5px;
}
.carousel-cell>p {
color: #fff;
font-size: 0.8em;
text-align: center;
}
svg {
width: 200px;
height: 200px;
margin-bottom: 100px;
display: block;
}
<link rel="stylesheet" href="https://unpkg.com/flickity#2/dist/flickity.min.css">
<div class="carousel" data-flickity='{ "cellAlign": "left", "contain": true }'></div>
<script src="https://unpkg.com/flickity#2/dist/flickity.pkgd.min.js"></script>
Okay, starting over as I'm new at all of this and, as Sebastian points out, the problem is likely elsewhere.
This is a combination lock which was created by Derek Hill. I've reformatted it by cutting its size in half. In doing so, the size of the dial after spinning doesn't work out right -- when you spin the numbers, you can see that the height of the numbers begins dropping and is no longer vertically centered. It creeps down by about 0.5px each time.
I first notice the problem at the variable "temporTopEarlier". I cannot understand why the "top" for the dial is 0.5px more than it should be (-157 instead of -157.5). I think this is causing my problems. I expected a truncation of decimals, but I don't see where that would happen.
I'm new at this, so apologies for the many poor elements to the code, format, and question. Thanks!
<html lang="en">
<head>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<style>
#lock-plate{
padding: 15px 0;
border: 0.5px solid #cfd3d6;
background: #ccc;
text-align: center;
width: 243px;
background: -webkit-linear-gradient(top, #eee 0%,#949ba0 100%);
background: linear-gradient(to bottom, #eee 0%,#949ba0 100%);
border-radius: 2px;
margin: 10px auto;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
position: absolute;
top: 6%;
left: 43%;
transform: translate(-50%, -50%);
}
#lock-wrapper{
width: 220px;
padding: 0 10px 0 4px;
border-radius: 3.5px;
height: 60px;
border: .5px solid rgba(255, 255, 255, 0.6);
box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.9);
background: -webkit-linear-gradient(top, #c4c4c4 0%,#676767 100%);
background: linear-gradient(to bottom, #c4c4c4 0%,#676767 100%);
overflow: hidden;
margin: 0 auto;
}
.lock-dial{
height: 60px;
width: 34px;
margin-left: 5.5px;
background: -webkit-linear-gradient(top, #8c9093 0%,#b6babd 9%,#ccd2d6 18%,#ffffff 55%,#ccd2d6 82%,#b6babd 91%,#8c9093 100%);
background: linear-gradient(to bottom, #8c9093 0%,#b6babd 9%,#ccd2d6 18%,#ffffff 55%,#ccd2d6 82%,#b6babd 91%,#8c9093 100%);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
float: left;
position: relative;
cursor: move;
}
#lock-wrapper .lock-dial ul{
margin: 0;
padding: 0;
text-align: center;
list-style: none;
font-size: 26.5px;
line-height: 35px;
color: #414f6b;
text-shadow: 0 -1px 0 #212c42;
transition: box-shadow .45s linear, color .25s linear;
-webkit-transition: box-shadow .45s linear, color .25s linear;
}
</style>
</head>
<body style="background-color: #012443">
<div id="lock-plate">
<span></span><span></span><span></span><span></span>
<div id="lock-wrapper">
<!-- <div class="welcome-message">WELCOME!</div> -->
<div class="lock-dial" id="dial-one"><ul data-combo-num="0"><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>0</li><li>1</li><li>2</li><li>3</li><li>4</li></ul></div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js" integrity="sha256-hlKLmzaRlE8SCJC1Kw8zoUbU8BxA+8kR3gseuKfMjxA=" crossorigin="anonymous"></script>
<script>
$(function(){
var comboArray = [0, 0, 0, 0, 0];
var combination = [4, 3, 9, 2, 0];
var gridIncrement = $( ".lock-dial ul" ).css('line-height').replace('px', '')/2; // this is correct, 17.5
var numNums = $( ".lock-dial:eq(0) ul li" ).length; // 10 numbers
var halfHeight = gridIncrement*numNums; // this is correct, 175
var initTop = -(halfHeight-gridIncrement); //this is correct, -157.5
$( ".lock-dial ul" ).css('top', initTop); // this is correct -157.5
$( ".lock-dial ul" ).draggable({
grid: [ 0, gridIncrement ],
axis: 'y',
drag: function(){
var dragDir = $(this).css('top').replace('px', '') < initTop ? "up" : "down";
if(dragDir == "up"){
var curNum = parseFloat($(this).find('li:last-child').text()) + 1;
if(curNum < 10){
$(this).append('<li>'+curNum+'</li>');
}else{
$(this).append('<li>0</li>');
};
}else{
var curNum = parseFloat($(this).find('li:first-child').text()) - 1;
var thisTop = parseFloat($(this).css('margin-top')); //seems right, starts at 0 and goes down by 35s
$(this).css({
marginTop: thisTop-(gridIncrement*2)
});
if(curNum > -1){
$(this).prepend('<li>'+curNum+'</li>');
}else{
$(this).prepend('<li>9</li>');
};
};
var temporTopEarlier = parseFloat($(this).css('top')); // this is wrong -157, should be -157.5
console.log("tempor top earlier " + temporTopEarlier);
},
stop: function(){
//MATHS
var halfHeight = 175;
var initTop = -157.5;
var negOrPos = $(this).css('margin-top').replace('px', '') > 0 ? 1 : -1;
var tempor_top = parseFloat($(this).css('top')); // this is wrong -174.5, should be -175
console.log("tempor_top " + tempor_top);
console.log(this);
var thisTopTotal = parseFloat($(this).css('top')) + Math.abs(initTop); // this first part is wrong, -17 instead of -17.5
var marginMinified = parseFloat(Math.abs($(this).css('margin-top').replace('px', ''))) - thisTopTotal;
var numIncs = Math.floor(marginMinified/(halfHeight*2));
var totalDif = numIncs*(halfHeight*2);
var topTen = (marginMinified - totalDif)*negOrPos;
var activeIndex = Math.abs(topTen/(gridIncrement*2)) + (halfHeight/(gridIncrement*2));
console.log("halfHeight " + halfHeight);
console.log("initTop " + initTop);
console.log("thisTopTotal " + thisTopTotal);
console.log("marginMinified " + marginMinified);
console.log("numIncs " + numIncs);
console.log("topTen " + topTen);
console.log("totalDif " + totalDif);
console.log("activeIndex " + activeIndex); // this should be a number in 0.5 increments and it's not
$(this).attr("data-combo-num", $(this).find('li').eq(activeIndex).text()).css({
top: -157.5,
marginTop: topTen
}).find('li').slice(20).remove();
for(var i=0; i<$( ".lock-dial ul" ).length; i++){
comboArray[i] = $( ".lock-dial ul:eq("+i+")" ).attr("data-combo-num");
}
}
});
})
</script>
I have searched extensively for the same but none of the solution worked so asking here
I want to change the background image [basically change the class of an element], in a loop. But the really tricky part for me [being new to JavaScript] is that setTimeOut stops after a fix number of times. Here's the code:
function addHomeInnerClass(selector, imageNumber = 0) {
imageNumber += 1;
if (imageNumber === 1) {
selector.classList.add('home-content-1');
}
if (imageNumber === 2) {
selector.classList.add('home-content-2');
}
if (imageNumber === 3) {
selector.classList.add('home-content-3');
}
if (imageNumber === 4) {
selector.classList.add('home-content-4');
imageNumber = 0;
}
setTimeout(() => addHomeInnerClass(selector, imageNumber), 1000);
}
document.addEventListener('DOMContentLoaded', function() {
const homeInner = document.querySelector('.home-inner');
addHomeInnerClass(homeInner, 0);
});
Here's my HTML section for the same:
<section class="home" id="home">
<div class="home-inner">
</div>
</section>
Here's my CSS3:
.home {
background-image: linear-gradient(to right, #ff5517 0%, #ff7000 40%, #db1d5e 80%);
height: 88.98vh;
.home-content-1 {
height: 98%;
border-bottom-right-radius: 20rem;
background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.9) 80%), url("/app/assets/images/slider/ (2).jpg") no-repeat center center/cover;
z-index: 1;
}
.home-content-2 {
height: 98%;
border-bottom-right-radius: 20rem;
background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.9) 80%), url("/app/assets/images/slider/ (3).jpg") no-repeat center center/cover;
z-index: 1;
}
.home-content-3 {
height: 98%;
border-bottom-right-radius: 20rem;
background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.9) 80%), url("/app/assets/images/slider/(4).jpg") no-repeat center center/cover;
z-index: 1;
}
.home-content-4 {
height: 98%;
border-bottom-right-radius: 20rem;
background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.9) 80%), url("/app/assets/images/slider/ (1).jpg") no-repeat center center/cover;
z-index: 1;
}
}
I know CSS & HTML code hardly matter here but if I could get some other method to do what I want to, that would be great.
What I want to do?
Use pure javascript to get the fade in and fadeout image effect.
Where am I stuck?
Cannot figure out how to run setTimeOut infinite times?
NOTE: I don't want to use any third party library. It's a learning project.
As I said in a comment, the problem isn't that the timer stops running. It's that you're not removing the old classes when you add the new one. Here's how you could do that while also simplifying the code:
function addHomeInnerClass(selector, imageNumber = 0) {
selector.classList.remove('home-content-' + imageNumber);
imageNumber = imageNumber % 4 + 1;
selector.classList.add('home-content-' + imageNumber);
setTimeout(() => addHomeInnerClass(selector, imageNumber), 1000);
}
Live Example (I modified the CSS at bit to make it easy to see the changes; I also added the missing } after the .home rule):
function addHomeInnerClass(selector, imageNumber = 0) {
selector.classList.remove('home-content-' + imageNumber);
imageNumber = imageNumber % 4 + 1;
selector.classList.add('home-content-' + imageNumber);
setTimeout(() => addHomeInnerClass(selector, imageNumber), 1000);
}
document.addEventListener('DOMContentLoaded', function() {
const homeInner = document.querySelector('.home-inner');
addHomeInnerClass(homeInner, 0);
});
.home {
height: 88.98vh;
}
.home-content-1 {
height: 98%;
border-bottom-right-radius: 20rem;
background: url("https://via.placeholder.com/100/0000C0/FFFFFF?text=1") no-repeat center center/cover;
z-index: 1;
}
.home-content-2 {
height: 98%;
border-bottom-right-radius: 20rem;
background: url("https://via.placeholder.com/100/0000C0/FFFFFF?text=2") no-repeat center center/cover;
z-index: 1;
}
.home-content-3 {
height: 98%;
border-bottom-right-radius: 20rem;
background: url("https://via.placeholder.com/100/0000C0/FFFFFF?text=3") no-repeat center center/cover;
z-index: 1;
}
.home-content-4 {
height: 98%;
border-bottom-right-radius: 20rem;
background: url("https://via.placeholder.com/100/0000C0/FFFFFF?text=4") no-repeat center center/cover;
z-index: 1;
}
}
<section class="home" id="home">
<div class="home-inner">
</div>
</section>
As suggested in the comments, setInterval is exactly tailored for your needs. It allows you to run a function (like addHomeInnerClass in your case) every x milliseconds. Please note however that using this function requires you to change your imageNumber logic a bit.
Additionally, as mentioned in the comments as well, you should remove the old classes before adding new ones.
I would suggest the following approach:
let imageNumber = 0;
function addHomeInnerClass(selector) {
selector.classList.remove('home-content-' + imageNumber);
imageNumber++;
if(imageNumber === 5) imageNumber = 1;
selector.classList.add('home-content-' + imageNumber);
}
document.addEventListener('DOMContentLoaded', function() {
const homeInner = document.querySelector('.home-inner');
setInterval(() => addHomeInnerClass(homeInner), 1000);
});
I'm trying to Gsap a Horizontal scrolling text, but when I want to receive the width of the div element for check it's width (depending on a dynamic .txt file) It returns me a wrong width.
Sometimes when I refresh the page (brackets) it gives me the good width but when I refresh again always become wrong again!
Only when I let the page refresh without looking active window, and check it after a sec from being auto-refreshed it bring the exact value.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
#font-face {
font-family: aclonica;
src: url(./fonts/Aclonica-Regular.ttf);
}
div {
display: inline-block;
position: relative;
font-family: aclonica;
}
div.hijos{
white-space: nowrap;
display: inline-block;
text-align: right;
vertical-align: bottom;
background-color: lightblue;
left: 160px;
width: 300px;
height: 50px;
overflow: hidden;
}
div.Titulos {
display: block;
left: 160px;
width: 300px;
height: 25px;
}
.nombres {
padding-top: 2px;
}
.dinero {
padding-top: 2px;
color: #53a9ea;
}
.Titulos{
margin-top: 2px;
margin-bottom: 2px;
text-align: right;
vertical-align: middle;
color: #53a9ea;
font-family: aclonica;
font-size: 24px;
text-shadow: 0px 0px 3px rgba(0, 0, 0, 1),1px 1px 5px rgba(0, 0, 0, 1), 0px 0px 4px rgba(0, 0, 0, 1), 0px 0px 4px rgba(0, 0, 0, 0.5);
}
.hijos{
display: block;
text-align: right;
color: #ffffff;
font-family: aclonica;
font-size: 22px;
text-shadow: 0px 0px 3px rgba(0, 0, 0, 1),1px 1px 5px rgba(0, 0, 0, 1), 0px 0px 4px rgba(0, 0, 0, 1), 0px 0px 4px rgba(0, 0, 0, 0.5);
}
.info{
padding-top: 2px;
}
span {
line-height: 100%;
display: inline-block;
}
#Top1{
display: block;
white-space: nowrap;
position: relative;
background-color:blue;
}
.NoWrap {
white-space: normal;
}
#Tinfo{
padding-left: 5px;
padding-right: 25px;
}
#Tinfo2{
padding-left: 5px;
padding-right: 25px;
}
#Sline{
line-height: 200%;
}
.Inline{
display: inline-block;
vertical-align:top;
}
#Inside1{
position: relative;
display:inline-block;
background-color: chocolate;
}
#Inside2{
position: relative;
display:inline-block;
background-color:chartreuse;
}
#TDonator{
display: block;
}
</style>
<script src="js/jquery.js"></script>
<script src="js/TimelineLite.min.js"></script>
<script src="js/TimelineMax.min.js"></script>
<script src="js/TweenMax.min.js"></script>
<script type="text/JavaScript">
setTimeout("location.href = 'TwitchAlerts.html';",30000);
</script>
</head>
<body bgcolor="#E6E6FA">
<div id="5Don" class="Titulos" >Last 5 Donators</div>
<div id="Donators" class="hijos"></div>
<div id="LastF" class="Titulos" >Last Follow</div>
<div id="Follower" class="hijos" class="NoWrap"></div>
<div id="TopDonator" class="Titulos" >Top Donator</div>
<div id="TDonator" class="hijos"></div>
<div id="salida1" ><h1></h1></div>
<div id="salida2" >holaaaaa</div>
<div id="salida3" ></div>
<script>
function hola(){
$("#Follower").load("../StreamLabs/most_recent_follower.txt");
$("#Donators").load("../StreamLabs/session_donators.txt");
$("#TDonator").load("../StreamLabs/all_time_top_donator.txt");
}
hola();
function animation(){
//var width1 = $Inside1.width();
var tl = new TimelineMax();
tl.staggerFrom(".Titulos", 0.5, {left:400, autoAlphalpha:0, ease: Back.easeOut.config(1.7)},0.25);
//.from("#Inside1", 5, {left:500, autoAlphalpha:0, ease: Linear.easeNone},0.25);
var $hold = $("#Inside1");
var $holdclone = $("#Inside2");
var listWidth = $("#Inside1").width();
//var listWidth = 253.36; //Real Value//
//listWidth = document.getElementById("Inside1").offsetWidth;;
document.getElementById("salida1").innerHTML = listWidth;
var salida2 = document.getElementById("Tname").offsetWidth;
//var salida2 = " uno "
document.getElementById("salida2").innerHTML = "hola a todos si "+salida2;
var infinite = new TimelineMax({repeat: -1, paused: false});
var time = 10;
infinite.fromTo($hold, time, {left:0}, {left: -listWidth, ease: Linear.easeNone}, 1);
infinite.fromTo($holdclone, time, {left:0}, {left:-listWidth, ease: Linear.easeNone}, 1);
infinite.fromTo($hold, time, {left:0}, {left: -250, ease: Linear.easeNone}, 11);
infinite.fromTo($holdclone, time, {left:0}, {left: -250, ease: Linear.easeNone}, 11);
//infinite.set($hold, {left: 50});
//infinite.to($holdclone, time, {left: -listWidth, ease: Linear.easeNone}, time);
//infinite.to($hold, time, {left: 0, ease: Linear.easeNone}, time);
}
$(document).ready(function(){
var str = document.getElementById("Donators").innerHTML;
var res = str.split(" ");
document.getElementById("Donators").innerHTML ="";
for (i = 1; i < res.length; i+=2) {
document.getElementById("Donators").innerHTML += '<span class="nombres">'+res[i-1] +'</span>';
document.getElementById("Donators").innerHTML += ' <span class="dinero">'+res[i] +' </span> ';
}
var str2 = document.getElementById("TDonator").innerHTML;
var res2 = str2.split(" ");
document.getElementById("TDonator").innerHTML ="";
document.getElementById("TDonator").innerHTML += '<div id="Top1"><div id="Inside1" ><div class="info2 nombres" id="Tname" >'+res2[0] +' </div><div class="info2 dinero" id="Tinfo">'+res2[1] +'</div></div></div>';
$('<div id="Inside2"><div class="info2 nombres" id="Tname2" >'+"hola" +' </div><div class="info2 dinero" id="Tinfo2"> '+"res2[1]" +'</div></div>').insertAfter("#Inside1");
var str3 = document.getElementById("Follower").innerHTML;
document.getElementById("Follower").innerHTML = '<span class="info" id="Fline">'+str3 +' </span><br><span class="info" id="Sline">'+str3+'</span>';
animation();
});
</script>
I have a form that I am using to calculate the sum and average of an array of numbers. I am using a button to trigger the form to appear and then users can add extra input fields to enter as many values as they wish. When they click the 'Calc' button, they receive an alert of the sum and average. This much is working fine. The problem is when I click the trigger again to close and then to reopen the form, the same number of input fields as the user selected appear and, despite having been able to clear their values, I have not been able to empty the associated array. Thus, when the user inputs values the second time and attempts to perform the calculation, the previous values are being added to these new ones.
On top of this, I would like for the the dynamically added inputs to appear one on top of the other and for the '.remove-field' div (or at least the icon it contains) to appear to the right of each input field. I have tried various display values, positioning, etc. but nothing seems to produce a consistent look.
Here is my HTML markup:
<button class="form-launch" data-icon="">AVG</button>
<div class="form-space">
<form role="form" action="/wohoo" method="POST" class="form-add-remove">
<label class="label">Average Calculation</label>
<div id="horizontal_bar"></div>
<div class="multi-field-wrapper">
<div class="add-field"><i class="fa fa-plus-circle"></i></div>
<div class="multi-fields">
<div class="multi-field">
<input type="text" name="stuff[]" class="input-field"/>
<div class="remove-field"><i class="fa fa-minus-circle"></i></div>
</div>
</div>
</div>
<button type="button" class="check">Calc</button>
</form>
</div>
My CSS:
.form-launch {
position: absolute;
top: 20px;
left: 20px;
}
.form-space {
opacity: 0;
}
.form-add-remove {
font-family: "DJB Chalk It Up";
color: #FFF;
font-size: 30px;
width: 600px;
height: 300px;
padding: 20px;
border: 2px solid #FFF;
border-radius: 25px;
box-shadow: 0px 0px 10px 5px #000;
background: transparent url("http://mrlambertsmathpage.weebly.com/files/theme/blackboard.jpeg") repeat-y scroll left center;
text-align: center;
vertical-align: middle;
display: inline-flex;
-moz-box-pack: center;
justify-content: center;
align-items: center;
-moz-box-orient: vertical;
opacity: 1;
position: absolute;
top: 50%;
left: 50%;
margin-left: -300px;
margin-top: -125px;
display: inline-block;
}
.label {
position: absolute;
top: 20px;
left: 20px;
}
#horizontal_bar {
position: absolute;
top: 60px;
left: 0px;
width: 95%;
height: 4px;
border-radius: 2px;
background: #00A2E8 none repeat scroll 0% 0%;
margin: 2.5%;
box-shadow: 0px 0px 6px 3px #000, 0px 0px 1px #000 inset;
}
.multi-field-wrapper {
height: 130px;
width: 90%;
padding: 20px;
margin-left: 0px;
margin-top: 80px;
border: 2px dashed rgba(255, 255, 255, 0.1);
border-radius: 10px;
transition: all 1.5s ease-in-out 0.5S;
overflow-y: scroll;
}
.multi-field-wrapper:hover {
border: 2px solid rgba(255, 255, 255, 0.1);
transition: all 1.5s ease-in-out 0s;
}
.multi-field {
display: inline-block;
}
.add-field {
position: absolute;
right: 20px;
bottom: 20px;
}
i {
color: #00a2e8;
}
.calc {
position: absolute;
left: 20px;
bottom: 20px;
}
input {
font-family: "Borders Divide, But Hearts Shall Conquer";
border-radius: 5px;
border: 2px inset rgba(0, 0, 0, 0.4);
width: 100px;
text-align: right;
padding-right: 10px;
}
And my jQuery:
var launchCount = 0;
var arr = [],
sum = 0;
$('.form-launch').click(function() {
launchCount++;
if ((launchCount % 2) == 1) {
$('.form-space').css('opacity', '1');
// Initialize Average Form
$('.multi-field-wrapper').each(function() {
var $wrapper = $('.multi-fields', this);
$(".add-field", $(this)).click(function(e) {
$('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
});
$('.multi-field .remove-field', $wrapper).click(function() {
if ($('.multi-field', $wrapper).length > 1)
$(this).parent('.multi-field').remove();
});
});
$(".calc").click(function() {
$("input[type=text]").each(function() {
arr.push($(this).val());
sum += parseInt($(this).val());
});
var n = arr.length;
var AVG = (sum / n);
alert(sum + "," + AVG);
});
// End Average Form
} else if ((launchCount % 2) == 0) {
$('.form-space').css('opacity', '0');
$('.form-add-remove').find("input[type=text]").val('');
if ($('.multi-field', $wrapper).length > 1) {
$(this).parent('.multi-field').remove(); // does not seem to work!
}
arr = []; // also does not seem to work
}
});
I have commented a few lines at the bottom of my jQuery to illustrate what I have tried. I also looked at setting the array length to 0, but I was not able to get that to work either.
Obviously, this is a work in progress. My jsfiddle is here: http://jsfiddle.net/e3b9bopz/77/
Can you try this?
$(".calc").click(function() {
$("input[type=text]").each(function() {
arr.push($(this).val());
sum += parseInt($(this).val());
});
var n = arr.length;
var AVG = (sum / n);
alert(sum + "," + AVG);
arr = []; # How about putting your reset here?
sum = 0; # reinitialized the sum
});
I think you need to reset the arr after you make a calculation.
Not exactly what you need, but move $(".check").click out of $('.form-launch').click, and wrap the whole thing in a jquery ready.
$(function() {
$(".check").click(function() {
$("input[type=text]").each(function() {
arr.push($(this).val());
sum += parseInt($(this).val());
});
var n = arr.length;
var AVG = (sum / n);
alert(sum + "," + AVG);
arr = [];
});
})
JSFiddle