Slide Up and Fade Div continuously - javascript

i want to make something like this https://muzzleapp.com/. I want the moving item in right part should be slide up and fade from bottom to top. Items should be moving continuously, so after the last div, it will start from beginning again. I have tried my own code. But stuck on starting from beginning point. It doesn't start properly from beginning.
html
function moveItems(el) {
var x = 1;
var flag = 0;
var elems = $(el).nextAll();
count = elems.length;
elems.each (function (i) {
setTimeout(function() {
if (x>1) {
y = x-1;
$('#slider_'+y).show().delay(2000).slideUp().fadeOut();
}
$('#slider_'+x).show().delay(2000).slideUp();
x++;
if (!--count) {
setTimeout(function() {
moveItems('.panel');
}, 6000)
}
}, i*2000);
})
}
moveItems('.panel');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel" id='slider_1'>
<div class="panel-body">
<div class="row">
slider 1
</div>
</div>
</div>
<div class="panel" id='slider_2'>
<div class="panel-body">
<div class="row">
slider 2
</div>
</div>
</div>
<div class="panel" id='slider_3'>
<div class="panel-body">
<div class="row">
slider 3
</div>
</div>
</div>

I updated your logic a little to handle the hide and show. Here is the updated preview https://jsfiddle.net/Aravi/hd465gpc/13/
function moveItems(el) {
var elems = document.querySelectorAll(el);
Array.from(elems).forEach((item,index) => {
setTimeout(function() {
index+=1;
$('#slider_'+index).show().delay(2000).slideUp().fadeOut();
if (index == elems.length) {
setTimeout(function() {
for(j=1;j<= elems.length;j++){ $('#slider_'+j).show()}
moveItems('.panel');
}, 6000)
}
}, index*2000);
})
}
moveItems('.panel');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel" id='slider_1'>
<div class="panel-body">
<div class="row">
slider 1
</div>
</div>
</div>
<div class="panel" id='slider_2'>
<div class="panel-body">
<div class="row">
slider 2
</div>
</div>
</div>
<div class="panel" id='slider_3'>
<div class="panel-body">
<div class="row">
slider 3
</div>
</div>
</div>
<div class="panel" id='slider_4'>
<div class="panel-body">
<div class="row">
slider 4
</div>
</div>
</div>
<div class="panel" id='slider_5'>
<div class="panel-body">
<div class="row">
slider 5
</div>
</div>
</div>

Related

How to display only the highest "score" according to the text content inside each div?

I would like to archive the below by using JavaScript (or with jQuery). Here is the HTML structure:
<div class="score-set">
<div class="score-item">A<div id="score">96+</div></div>
<div class="score-item">B<div id="score">99</div></div>
<div class="score-item">C<div id="score">99</div></div>
<div class="score-item">D<div id="score">96-</div></div>
</div>
<div class="score-set">
<div class="score-item">A<div id="score">86</div></div>
<div class="score-item">B<div id="score">88</div></div>
<div class="score-item">C<div id="score">90</div></div>
<div class="score-item">D<div id="score">90+</div></div>
</div>
<div class="score-set">
<div class="score-item">A<div id="score">83-</div></div>
<div class="score-item">B<div id="score">83+</div></div>
<div class="score-item">C<div id="score">76</div></div>
<div class="score-item">D<div id="score">78</div></div>
</div>
The JavaScript will do the modification, and the desired results will be B 99 C90 A 83- , which looks like:
<div class="score-set">
<div class="score-item">B<div id="score">99</div></div>
</div>
<div class="score-set">
<div class="score-item">C<div id="score">90</div></div>
</div>
<div class="score-set">
<div class="score-item">A<div id="score">83-</div></div>
</div>
The rules are:
Ignore all non-number in id="score", eg. + and -, and do the ranking.
Show one highest score item.
If two score items are the same in a set, show just one according to the div item sequence inside <div class="score-set">, ie. in the above example A > B > C > D.
When writing the result, write the original div item, including + or -.
To be able to do this, it would be best to get each individual score-set and treat one after another.
For each score item, we need to first get the score and transform it (Array#map) into a number with no digits (.replace(\/D+/g, ''))and memorize the score item html object.
Number(scoreItem.querySelector('div').innerText.replace(/\D+/g, ''))
We can then sort the remaining ones in descending order and simply take the first one of the list. Can be done with Array#sort and destructuring assignment.
.sort(({ score: scoreA }, { score: scoreB }) => scoreB - scoreA)
Then finally we update the score set html.
scoreSet.innerHTML = '';
scoreSet.appendChild(scoreItem);
const scoreSets = document.getElementsByClassName('score-set');
for(const scoreSet of scoreSets){
const [{ scoreItem }] = Array
.from(scoreSet.getElementsByClassName('score-item'), scoreItem => ({
scoreItem,
// it would be better here to access the score using the id
// but `score` is used multiple times which makes getting
// the score element unreliable
score: Number(scoreItem.querySelector('div').innerText.replace(/\D+/g, ''))
}))
.sort(({ score: scoreA }, { score: scoreB }) => scoreB - scoreA)
scoreSet.innerHTML = '';
scoreSet.appendChild(scoreItem);
}
<div class="score-set">
<div class="score-item">A
<div id="score">96+</div>
</div>
<div class="score-item">B
<div id="score">99</div>
</div>
<div class="score-item">C
<div id="score">99</div>
</div>
<div class="score-item">D
<div id="score">96-</div>
</div>
</div>
<div class="score-set">
<div class="score-item">A
<div id="score">86</div>
</div>
<div class="score-item">B
<div id="score">88</div>
</div>
<div class="score-item">C
<div id="score">90</div>
</div>
<div class="score-item">D
<div id="score">90+</div>
</div>
</div>
<div class="score-set">
<div class="score-item">A
<div id="score">83-</div>
</div>
<div class="score-item">B
<div id="score">83+</div>
</div>
<div class="score-item">C
<div id="score">76</div>
</div>
<div class="score-item">D
<div id="score">78</div>
</div>
</div>
This can be MUCH simplified
Note I changed the invalid ID to class="score"
If you cannot do that, then change .querySelector(".score") to .querySelector("div")
document.querySelectorAll('.score-set').forEach(scoreSet => {
const scores = [...scoreSet.querySelectorAll(".score-item")];
scores.sort((a,b) => parseInt(b.querySelector(".score").textContent) - parseInt(a.querySelector(".score").textContent))
scoreSet.innerHTML ="";
scoreSet.append(scores[0])
})
<div class="score-set">
<div class="score-item">A
<div class="score">96+</div>
</div>
<div class="score-item">B
<div class="score">99</div>
</div>
<div class="score-item">C
<div class="score">99</div>
</div>
<div class="score-item">D
<div class="score">96-</div>
</div>
</div>
<div class="score-set">
<div class="score-item">A
<div class="score">86</div>
</div>
<div class="score-item">B
<div class="score">88</div>
</div>
<div class="score-item">C
<div class="score">90</div>
</div>
<div class="score-item">D
<div class="score">90+</div>
</div>
</div>
<div class="score-set">
<div class="score-item">A
<div class="score">83-</div>
</div>
<div class="score-item">B
<div class="score">83+</div>
</div>
<div class="score-item">C
<div class="score">76</div>
</div>
<div class="score-item">D
<div class="score">78</div>
</div>
</div>

How do I use JavaScript to select content and move to other elements?

I need to move some text from demoBoxA to demoBoxB.
The demoBoxA parent element has an id selector, but the child element below it has no identifiable selector.
Is it possible to select the text content directly? Then move it into the demoBoxB sub-element (the demoBoxB sub-element has an id selector)
There are 2 difficulties with this issue.
The content of demoBoxA is dynamically generated by the program and the sort is not fixed. There are no identifiable selectors for the subelements.
only need to select part of the content. For example, in the example below, just move the phone model text of "Google", "Huawei", "BlackBerry".
Any help, thanks in advance!
<div class="container" id="demoBoxA">
<div class="row">
<div class="col-md-6">Samsung</div>
<div class="col-md-6">Galaxy S10</div>
</div>
<div class="row">
<div class="col-md-6">Google</div>
<div class="col-md-6">Pixel 4</div>
</div>
<div class="row">
<div class="col-md-6">Sony</div>
<div class="col-md-6">Xperia 5</div>
</div>
<div class="row">
<div class="col-md-6">Huawei</div>
<div class="col-md-6">Mate 30 5G</div>
</div>
<div class="row">
<div class="col-md-6">BlackBerry</div>
<div class="col-md-6">KEY2</div>
</div>
<div class="row">
<div class="col-md-6">Apple</div>
<div class="col-md-6">iPhone 8</div>
</div>
</div>
<div class="container" id="demoBoxB">
<div class="row">
<div class="col-md-6">Google</div>
<div class="col-md-6" id="pixel"></div>
</div>
<div class="row">
<div class="col-md-6">Huawei</div>
<div class="col-md-6" id="mate"></div>
</div>
<div class="row">
<div class="col-md-6">BlackBerry</div>
<div class="col-md-6" id="key2"></div>
</div>
</div>
You can chain selectors like this:
var rows = document.querySelectorAll("#demoBoxA > .row");
That will return a list of all rows inside of demoBoxA. If you need more info about chaining selectors, you can read about it here.
Then, to move the rows you can do this:
var demoBoxB = document.getElementById('demoBoxB');
rows.forEach((row) => {
demoBoxB.appendChild(row);
});
If you just want the text inside each of the columns, you can do this:
var columns = document.querySelectorAll("#demoBoxA > .col-md-6");
var texts = [];
columns.forEach((column) => {
texts.push(column.innerText);
});
Now, texts is an array of the text contents of each column.
If you want to select the cellphone models for each brand, you can do this:
var cols = Array.from(document.querySelectorAll("#demoBoxA > .col-md-6"));
var samsungCol = cols.find((col) => {
return col.textContent == "Samsung";
});
var samsungPhones = [];
samsungCol.parentNode.childNodes.forEach((col) => {
if (col != samsungCol) {
samsungPhones.push(col);
}
});
Now, samsungPhones is a list of columns, one for each Samsung phone (for example).
You can use html drag api .
Just add draggable=true for elements you want to drag and add event listeners for dragstart and dragend
html
<div class="container" id="demoBoxA">
<div class="row " draggable="true">
<div class="col-md-6">Samsung</div>
<div class="col-md-6">Galaxy S10</div>
</div>
<div class="row" draggable="true">
<div class="col-md-6">Google</div>
<div class="col-md-6">Pixel 4</div>
</div>
<div class="row" draggabble="true">
<div class="col-md-6">Sony</div>
<div class="col-md-6">Xperia 5</div>
</div>
</div>
<div class="container " id="demoBoxB">
<div class="row " draggable="true">
<div class="col-md-6">Google</div>
<div class="col-md-6" id="pixel"></div>
</div>
<div class="row" draggable="true">
<div class="col-md-6">Huawei</div>
<div class="col-md-6" id="mate"></div>
</div>
<div class="row" draggable="true">
<div class="col-md-6">BlackBerry</div>
<div class="col-md-6" id="key2"></div>
</div>
</div>
js
document.addEventListener('dragstart', function(e)
{
item = e.target;
}, false);
document.addEventListener('dragend', function(e)
{
document.getElementById("demoBoxB").appendChild(item)
}, false);
Note : you might have to add conditions to check whether the drop is actually happening in demoboxB

if checkbox cheked go to shown div

I have 5 checkbox and 5 div. If checkbox is checked div is .show else div is hide. checkboxes has fixed position and scrolling parts are opened divs. I need to add function if checkbox is checked->show div and go to div
$('#first').click(function() {
if ($(this).is(':checked')) {
$("#fifth").show(400);
} else {
$("#fifth").hide(400);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<input id="first" type="checkbox" class="styled" checked>
<label for="checkboxhovuz">
On check you g to 5-th div
</label>
<div class="row" >
<br><br><br><br><br><br>text first<br><br><br>
</div>
<div class="row">
<br><br><br><br><br><br>text second<br><br><br>
</div>
<div class="row">
<br><br><br><br><br><br>text third<br><br><br>
</div>
<div class="row">
<br><br><br><br><br><br>text fourth<br><br><br>
</div>
<div class="row" id="fifth">
<br><br><br><br><br><br>text fifth<br><br><br>
</div>
Consider using the .animate() method to scroll to the element in question when the conditional statement evaluates to true, e.g:
$('html, body').animate({
scrollTop: $("#fifth").offset().top
}, 2000);
Code Snippet Demonstration:
$('#first').click(function() {
if ($(this).is(':checked')) {
$("#fifth").show(400);
$('html, body').animate({
scrollTop: $("#fifth").offset().top
}, 2000);
} else {
$("#fifth").hide(400);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<input id="first" type="checkbox" class="styled" checked>
<label for="checkboxhovuz">
On check you g to 5-th div
</label>
<div class="row">
<br><br><br><br><br><br>text first<br><br><br>
</div>
<div class="row">
<br><br><br><br><br><br>text second<br><br><br>
</div>
<div class="row">
<br><br><br><br><br><br>text third<br><br><br>
</div>
<div class="row">
<br><br><br><br><br><br>text fourth<br><br><br>
</div>
<div class="row" id="fifth">
<br><br><br><br><br><br>text fifth<br><br><br>
</div>
<div class="row">
<br><br><br><br><br><br>text sixth<br><br><br>
</div>
<div class="row">
<br><br><br><br><br><br>text seventh<br><br><br>
</div>
<div class="row">
<br><br><br><br><br><br>text eigth<br><br><br>
</div>
try this one
$(document).ready(function() {
if ($('#first').is(':checked')) {
$("#fifth").show(400);
} else {
$("#fifth").hide(400);
}
});
I had to add document.getElementById('tulantisular').scrollIntoView();
So total code is, which is taken from
Scroll / Jump to id without jQuery
$('#first').click(function() {
if ($(this).is(':checked')) {
$("#fifth").show();
document.getElementById('fifth').scrollIntoView();
} else {
$("#fifth").hide();
}
});

How to synchronize a div container displaying other elements when active

I have a div containing 3 options that can be active, and when one of them is selected(becomes active) the connector/lines associated with that element should trigger and initiate the animation. So far I have it displayed but can't figure out how to fire the animation every time the first option becomes active, and disable it when it isn't active.
CodePen
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<div class="demo">
<div class="demo__content">
<h2 class="demo__heading">Assessment <small></small></h2>
<div class="demo__elems">
<div class="demo__elem demo__elem-1">Novice Assessment</div>
<div class="demo__elem demo__elem-2">Intermediate Assessment</div>
<div class="demo__elem demo__elem-3">Advanced Assessment</div>
<span class="demo__hover demo__hover-1 active"></span>
<span class="demo__hover demo__hover-2 active"></span>
<span class="demo__hover demo__hover-3 active"></span>
<div class="demo__highlighter">
<div class="demo__elems">
<div class="demo__elem">Novice Assessment</div>
<div class="demo__elem">Intermediate Assessment</div>
<div class="demo__elem">Advanced Assessment</div>
</div>
</div>
<div class="demo__examples">
<div class="demo__examples-nb">
<div class="nb-inner">
<div class="example example-adv">
<div class="example-adv">
<div class="example-adv__top">
<div class="example-adv__top-search"></div>
</div>
<div class="example-adv__mid"></div>
<div class="example-adv__line"></div>
<div class="example-adv__line long"></div>
</div>
</div>
<div class="example example-web">
<div class="example-web__top"></div>
<div class="example-web__left"></div>
<div class="example-web__right">
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
</div>
</div>
<div class="example example-both">
<div class="example-both__half example-both__left">
<div class="example-both__left-top"></div>
<div class="example-both__left-mid"></div>
</div>
<div class="example-both__half example-both__right">
<div class="example-both__right-top"></div>
<div class="example-both__right-mid"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
document.addEventListener('DOMContentLoaded', function() {
$(document).ready(function() {
$('.demo__hover').on('click', function() {
$that = $(this);
if ($('.demo__hover.active').length > 0) {
$('.active').removeClass('active');
}
$($that).addClass('active');
})
})
});
I strongly suggest to refactor my code but I edited your pin, adding a class that block animation by default:
.block-anim {
animation: none !important;
}
and some dirty JS that deal with it
https://codepen.io/ThomasTognacci/pen/POqRJa

Why is .append() not working in my code?

I am so confused. I have used this jquery feature for a while now and it will not work here. It returns the right value and prints out to the console but it wont append the data on page load.
HTML :
<div class="row">
<div class="col-xs-12">
<span>Press any key to get started!</span>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<span>Wins</span>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div>Current word: </div>
<br>
<div class="currentWord"></div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<span class="guessRem">Number of guesses remaining:</span>
</div>
</div>
JS :
var hangmanWords = ["baseball", "programming", "movies", "america", "lakers", "gardening"];
var wins = 0;
var remainingGuesses = 12;
function selectAWord (){
var randomVal = hangmanWords[Math.floor(Math.random() * hangmanWords.length)].toString();
$(".currentWord").append(randomVal);
$('.guessRem').append(remainingGuesses);
console.log(randomVal);
return (randomVal);
}
selectAWord();
Try to use the ready function so the DOM will be fully loaded and your elements .currentWord/.guessRem are there for the .append :
$(function(){
//Your function call here
selectAWord();
})
Hope this helps.
$(function(){
selectAWord();
})
function selectAWord (){
var hangmanWords = ["baseball", "programming", "movies", "america", "lakers", "gardening"];
var wins = 0;
var remainingGuesses = 12;
var randomVal = hangmanWords[Math.floor(Math.random() * hangmanWords.length)].toString();
$(".currentWord").append(randomVal);
$('.guessRem').append(remainingGuesses);
console.log(randomVal);
return (randomVal);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-12">
<span>Press any key to get started!</span>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<span>Wins</span>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div>Current word: </div>
<br>
<div class="currentWord"></div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<span class="guessRem">Number of guesses remaining:</span>
</div>
</div>

Categories