The following codes makes div appear sequentially.
$(document).ready(function() {
$('.word1, .word2, .word3').each(function(fadeIn) {
$(this).delay(fadeIn * 500).fadeIn(1000);
});
});
.chat {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="chat word1">Word 1</div>
<div class="chat word2">Word 2</div>
<div class="chat word3">Word 3</div>
<div id="" class="">Word 4</div>
</body>
What I want to do is, I don't want it to appear in a sequence. I can do it by simply replacing elements in an html, for example I can do:
<div class="chat word2">Word 2</div>
<div class="chat word1">Word 1</div>
<div class="chat word3">Word 3</div>
However, I don't want to change anything on the html elements. I want to do it using javascript. At first, I thought javascript selector works like an array and I can replace
$('.word1, .word2, .word3') with $('.word2, .word1, .word3')
but it does not seems to work that way.
Is there a way to do this with Javascript?
Here be a solution if you do not want to change your HTML(and incase css also):
Keep the shuffle Position in array.
Iterate all div having class chat.
Put the DOM element in new array based on shuffle Position.
Iterate all element of new array and append in body.
$(document).ready(function() {
var shufflePosition=[1,0,2];//Keep the shufflePosition in array
var result=[];
//Iterate all div having class chat
$('.chat').get().forEach(function(entry, index, array) {
result[index]=array[shufflePosition[index]];
});
for (var i = result.length-1; i >= 0; i--) {
$( "body" ).last().prepend(result[i]);
//$(result[i]).show();
$(result[i]).delay(i*500).fadeIn(1000);
}
});
.chat {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="chat word1">Word 1</div>
<div class="chat word2">Word 2</div>
<div class="chat word3">Word 3</div>
<div id="" class="">Word 4</div>
</body>
You use a query selector:
var word1 = document.querySelectorAll(".chat", ".word1")[0];
This selects the first element with both classes .chat and .word1.
how about this
$(document).ready(function() {
$('.chat').delay(500).fadeIn(1000);
});
.chat {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="chat word1">Word 1</div>
<div class="chat word2">Word 2</div>
<div class="chat word3">Word 3</div>
<div id="" class="">Word 4</div>
</body>
I think the simplest solution, to not care about the order of the Divs, is:
$('.chat').each(function(fadeIn) {
$(this).delay(fadeIn * 500).fadeIn(1000);
});
You should define a common class for these randomly ordered elements, or wrap them with a parent element, eg:
$('.randomlysortedelements div').each(function(fadeIn) {
$(this).delay(fadeIn * 500).fadeIn(1000);
});
<body>
<div class="randomlysortedelements">
<div class="chat word3">Word 3</div>
<div class="chat word1">Word 1</div>
<div class="chat word2">Word 2</div>
</div>
<div id="" class="">Word 4</div>
</body>
You can shuffle your array length and prependTo to word4 something like this:
$(document).ready(function() {
elements = $('.word1, .word2, .word3');
let arrayData = [];
for(i=0;i<elements.length;i++){
arrayData.push(i);
}
shuffleArray(arrayData);
for(i=0;i<arrayData.length;i++){
$("body:last").prepend(elements.eq(arrayData[i]));
elements.eq(arrayData[i]).show()
}
function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
}
});
.chat {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="chat word1">Word 1</div>
<div class="chat word2">Word 2</div>
<div class="chat word3">Word 3</div>
<div id="" class="word4">Word 4</div>
</body>
Related
I have a 5 buttons and each button click will add each element. My concern is when I click back to previous button I click. I need a previous element only will be add and other will be remove..
example:
if click 5. it shows 5 add(element)
if then I click back to click3 it show only 3 elements and remove element[5] and element[4].
let clickItem;
for (let c = 1; c < 6; c++) {
clickItem = document.getElementsByClassName('click-item-' + c);
$(clickItem).on('click', function() {
$('.child-item').not(this).removeClass('active');
$(this).addClass('active')
$(".add-item").slice(0, c).removeClass("inactive");
})
}
<style>.active {
display: block;
background-color: blue;
}
.inactive {
display: none;
}
</style>
<button class="child-item click-item-1">Click 1</button>
<button class="child-item click-item-2">Click 2</button>
<button class="child-item click-item-3">Click 3</button>
<button class="child-item click-item-4">Click 4</button>
<button class="child-item click-item-5">Click 5</button>
<div class="add-item inactive">Add 1</div>
<div class="add-item inactive">Add 2</div>
<div class="add-item inactive">Add 3</div>
<div class="add-item inactive">Add 4</div>
<div class="add-item inactive">Add 5</div>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
You can add a function that put the inactive class to all items and then, re-run the function.
let clickItem;
for (let c = 1; c < 6; c++) {
clickItem = document.getElementsByClassName('click-item-' + c);
$(clickItem).on('click', function() {
resetContext()
$('.child-item').not(this).removeClass('active');
$(this).addClass('active')
$(".add-item").slice(0, c).removeClass("inactive");
})
}
const resetContext = () => {
const elements = document.getElementsByClassName("add-item");
for (const elem of elements){
elem.classList.remove('active');
elem.classList.add('inactive');
}
}
<style>.active {
display: block;
background-color: blue;
}
.inactive {
display: none;
}
</style>
<button class="child-item click-item-1">Click 1</button>
<button class="child-item click-item-2">Click 2</button>
<button class="child-item click-item-3">Click 3</button>
<button class="child-item click-item-4">Click 4</button>
<button class="child-item click-item-5">Click 5</button>
<div class="add-item inactive">Add 1</div>
<div class="add-item inactive">Add 2</div>
<div class="add-item inactive">Add 3</div>
<div class="add-item inactive">Add 4</div>
<div class="add-item inactive">Add 5</div>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
I have problem with getting value of a div with class="idC". I need this value to remove object from my array. I know I probably gonna need to use parseInt but all I'm getting with this code is rowid: undefined when I use console.log("rowid: " + bikeId.value). bikeRow.remove(); works fine. It removes the row I want to.
const buttonDel = document.querySelectorAll(".deleteC");
buttonDel.forEach(button => {
console.log("jazda");
button.addEventListener('click', () => {
const bikeRow = button.parentNode;
const bikeId = bikeRow.firstChild;
if (!window.confirm())
return;
console.log("rowid: " + bikeId.value);
bikeRow.remove();
//bikeStorage.removeBike(bikeId.value);
})
})
<div class="bikeRows">
<div class="bikeRow">
<div class="idC"></div>${bike.id}</div>
<div class="frameC">${bike.frame}</div>
<div class="suspC">${bike.susp}</div>
<div class="wheelC">${bike.wheel}</div>
<div class="typeC">${bike.constructor.name}</div>
<div class="deleteC"><button class="delButton" id="${bike.id}">Delete</button></div>
</div>
</div>
You have invalid HTML and you really should delegate
I added the ID as a data-attribute to the row like this
<div class="bikeRow" data-id="${bike.id}">
Makes the code much simpler to debug and extend
document.querySelector(".bikeRows").addEventListener("click", e => {
const tgt = e.target.closest("button");
if (!tgt.matches(".delButton")) return; // not a delete button
if (!window.confirm("Sure?")) return; // they cancelled
const bikeRow = tgt.closest("div.bikeRow"),
id = bikeRow.dataset.id; // the ID to remove from the storage
bikeRow.remove();
//bikeStorage.removeBike(id);
})
<div class="bikeRows">
<div class="bikeRow" data-id="ID1">
<div class="idC">ID1</div>
<div class="frameC">Frame 1</div>
<div class="suspC">Susp 1</div>
<div class="wheelC">Wheel 1</div>
<div class="typeC">Constructor name 1</div>
<div class="deleteC"><button class="delButton">Delete</button></div>
</div>
<div class="bikeRow" data-id="ID2">
<div class="idC">ID 2</div>
<div class="frameC">Frame 2</div>
<div class="suspC">Susp 2</div>
<div class="wheelC">Wheel 2</div>
<div class="typeC">Constructor name 2</div>
<div class="deleteC"><button class="delButton">Delete</button></div>
</div>
<div class="bikeRow" data-id="ID3">
<div class="idC">ID 3</div>
<div class="frameC">Frame 3</div>
<div class="suspC">Susp 3</div>
<div class="wheelC">Wheel 3</div>
<div class="typeC">Constructor name 3</div>
<div class="deleteC"><button class="delButton">Delete</button></div>
</div>
</div>
How can I easily toggle/switch the classes between three or more divs in a sequence by click?
Example html:
<div class="box">Box 1</div>
<div class="box active">Box 2</div>
<div class="box">Box 3</div>
<div class="next">Next</div>
<div class="back">Back</div>
This way just works with two:
$(".next, .back").click(function(){
$(".box").toggleClass("active");
});
Simply to check if nth-child has the active class and loop.
$(".next").click(function(){
$(".box").each( function(i, j) {
if( $(this).hasClass('active') ) {
$(this).removeClass('active');
$(".box:nth-child("+(((i+1)%$(".box").length)+1)+")").addClass('active');
return false;
}
});
});
$(".back").click(function(){
$(".box").each( function(i, j) {
if( $(this).hasClass('active') ) {
$(this).removeClass('active');
$(".box:nth-child("+(((i-1)+$(".box").length)%$(".box").length+1)+")").addClass('active');
return false;
}
});
});
.active {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="box">Box 1</div>
<div class="box active">Box 2</div>
<div class="box">Box 3</div>
<div class="back">Back</div>
<div class="next">Next</div>
</div>
This is pretty generic
$(".nav").on("click", function() {
var dir = $(this).is(".next") ? 1 : -1; // which direction are we going?
var active = $(".box.active").index() - 1;
var $boxes = $(".box");
active += (1 * dir);
if (active < 0) active = $boxes.length - 1; // wrap
else if (active >= $boxes.length) active = 0;
$(".box").removeClass("active");
$(".box").eq(active).addClass("active");
});
.active {
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">Box 1</div>
<div class="box active">Box 2</div>
<div class="box">Box 3</div>
<br/>
<div class="nav back">Back</div>
<div class="nav next">Next</div>
I've created another solution that gets the button's ID (which I've added) and uses that to dictate where to go.
var box = $('.box');
var maxBoxes = box.length;
$("#nextBtn, #backBtn").click(function() {
var getBtn = $(this).get(0).id,
activeBox = $('.box.active'),
position = activeBox.index();
activeBox.removeClass('active');
if (getBtn === 'nextBtn') {
(position == maxBoxes) ? box.eq(0).addClass('active'): activeBox.next().addClass('active');
} else {
(position === 1) ? box.last().addClass('active'): activeBox.prev().addClass('active');
}
});
.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box active">Box 3</div>
<div id="nextBtn" class="next">Next</div>
<div id="backBtn" class="back">Back</div>
I think that the following should be efficient, because it will not do unnecessary checks.
var last = $(".active")
function toggle(dir){
var future = last[dir]();
if(!(future.length && future.hasClass('box'))) {
return;
}
last.toggleClass("active")
last = future
last.toggleClass("active");
}
$(".next").click(toggle.bind(void 0, 'next'));
$(".back").click(toggle.bind(void 0, 'prev'));
I'm trying to toggle a div's class in pure javascript (unfortunately I cannot use jQuery). I've got some code working but it doesn't work for multiple instances of the div and I'd appreciate some help for that.
I can't give each element it's own specific ID, so I'd need a way to target only the div with a class of 'truncate' that is the parent of the particular button that is clicked. Currently I have hidden the results by default and am just toggling the 'show' class
<div class="truncate">
<div class="result">Result 1</div>
<div class="result">Result 2</div>
<div id="button">Show more</div>
</div>
collapse= document.getElementById('button');
collapse.onclick = function() {
collapse.parentElement.classList.toggle("show");
};
/* HIDE PLATES BY DEFAULT */
.truncate .result {
display: none;
}
/* SHOW RESULTS WHEN SHOW CLASS APPLIED */
.truncate.show .result {
display: block !important;
}
Thank you - help appreciated as always.
I think you need getElementsByClassName
(function() {
var collapse = document.getElementsByClassName('button');
for (var elIndex = 0; elIndex < collapse.length; elIndex++) {
collapse[elIndex].onclick = function() {
this.parentElement.classList.toggle("show");
};
}
})();
/* HIDE PLATES BY DEFAULT */
.truncate .result {
display: none;
}
/* SHOW RESULTS WHEN SHOW CLASS APPLIED */
.truncate.show .result {
display: block !important;
}
<div class="truncate">
<div class="result">Result 1</div>
<div class="result">Result 2</div>
<div class="button">Show more</div>
</div>
<div class="truncate">
<div class="result">Result 1</div>
<div class="result">Result 2</div>
<div class="button">Show more</div>
</div>
<div class="truncate">
<div class="result">Result 1</div>
<div class="result">Result 2</div>
<div class="button">Show more</div>
</div>
You should replace the id of Show more to class.
And use the following code.
collapse =document.getElementsByClassName('button');
for(let i = 0; i < collapse.length; i++){
let oneElement = collapse[i];
oneElement.addEventListener('click', function() {
oneElement.parentElement.classList.toggle("show");
})
}
Parse (loop over) all of your div.truncate elements and give themselves their own functionality via the Accordionize Function.
const Accordionize = el => {
const results = el.querySelectorAll('.result')
const toggleButton = el.querySelector('button')
let open = false
const _toggle = () => {
const action = open ? 'remove' : 'add'
results.forEach(item => item.classList[action]('show'))
open = !open
}
toggleButton.addEventListener('click', _toggle)
}
// get all div.truncate and apply them to their own instance of Accordionize
document.querySelectorAll('.truncate').forEach(Accordionize)
.truncate {
border: 2px solid red;
margin: 5
}
.result {
display: none;
}
.show {
display: block
}
<div class="truncate">
<div class="result">Result 1</div>
<div class="result">Result 2</div>
<button>Show more1</button>
</div>
<div class="truncate">
<div class="result">Result 3</div>
<div class="result">Result 4</div>
<button>Show more2</button>
</div>
<div class="truncate">
<div class="result">Result 5</div>
<div class="result">Result 6</div>
<button>Show more3</button>
</div>
<div class="truncate">
<div class="result">Result 7</div>
<div class="result">Result 8</div>
<button>Show more4</button>
</div>
I need to sort items that are within div with the same id and class. I have problems to return the value of tkEmail tag. I can not get the value.
example:
item 1
Order: 0 Value: 1
HTML:
<div id="sortable">
<div class='sortear' tkEmail='1'>Item 1</div>
<div class='sortear' tkEmail='2'>Item 2</div>
</div>
<br>
<div id="sortable">
<div class='sortear' tkEmail='3'>Item 3</div>
<div class='sortear' tkEmail='4'>Item 4</div>
</div>
JS:
$(document).ready(function () {
$('div#sortable').sortable({
update: function () { novaOrdem() },
});
});
function novaOrdem(){
$('div#sortable').each(function (i) {
alert($(this).attr('tkEmail'))
});
}
Ids have to be unique and you're not actually checking the child divs in the call to each. $('div#sortable').children() will get you what you want. Also, tkEmail is not valid and it would be better practice to use a data attribute e.g. data-tk-email:
HTML:
<div id="sortable">
<div class='sortear' data-tk-email='1'>Item 1</div>
<div class='sortear' data-tk-email='2'>Item 2</div>
<div class='sortear' data-tk-email='3'>Item 3</div>
<div class='sortear' data-tk-email='4'>Item 4</div>
</div>
JQuery:
$(document).ready(function() {
$('div#sortable').sortable({
update: function() {
novaOrdem()
},
});
});
function novaOrdem() {
var items = $('div#sortable').children();
$.each(items, function() {
alert($(this).html() + ', Order: ' + $(this).index() + ', Value: ' + $(this).data('tkEmail'))
});
}
Fiddle Demo