Select random element

Select random element - javascript

I have multiple div elements with same class dot under parent div like this
<div id="dots">
<div class="dot"> . </div>
<div class="dot"> . </div>
<div class="dot"> . </div>
...
<div class="dot"> . </div>
</div>
How can I using JavaScript select all elements with class="dot" and on every 5 seconds apply certain class on random element.
randomElement.addClass('someClass');

What you need to do is basically first select all dots, then on each periodic activation run remove previously set class and set it again to random element with index within range from 0 to dots count - 1.
Here is an example.
var $dots = $('#dots .dot');
function activate() {
$dots.removeClass('active')
.eq([Math.floor(Math.random()*$dots.length)])
.addClass('active');
setTimeout(activate, 1000);
}
activate();
#dots .dot {
display: inline-block;
height: 50px;
width: 50px;
background: coral;
border-radius: 50%;
opacity: 0.2;
transition: opacity .3s ease;
}
#dots .dot.active {opacity: 1;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dots">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>

How about this?
function addClassToRandomDotElement(){
var dotElements = document.getElementsByClassName('dot');
var totalDotElements = dotElements.length;
var randomNumber = Math.floor(Math.random() * totalDotElements ) + 1;
var randomDotElement = dotElements[randomNumber];
randomDotElement.addClass('someClass');
}
setInterval(function(){
addClassToRandomDotElement();
},5000);

Still one more different way, easy to understand.
DEMO
var noofdot = $(".dot").length;
setInterval(function () {
$(".dot").removeClass("someClass");
var x = Math.floor((Math.random() * noofdot) + 1);
$(".dot:nth-child(" + x + ")").addClass("someClass");
}, 5000);
.someClass
{
background:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="dots">
<div class="dot">.</div>
<div class="dot">.</div>
<div class="dot">.</div>...
<div class="dot">.</div>
</div>

Here is an iteration over all elements:
iteration over all elements
Add class to random elements
Remove that elements from the iteration list.
var elements = document.getElementsByClassName("dot");
setInterval(function() {
var random = Math.floor(Math.random() * elements.length);
elements[random].className += " extra";
delete elements[random];
}, 1000);
//change 1000 to 5000. This is the interval speed in milisec.
.extra {
font-size: 200%;
background-color: cornflowerblue;
width: 50px;
}
<div class="container">
<div class="dot">Test</div>
<div class="dot">Test</div>
<div class="dot">Test</div>
<div class="dot">Test</div>
</div>

I think the below should work for you.
window.radomNo = 0;
setInterval(function(){
if(radomNo) $(".dot:eq("+ radomNo +")").toggleClass("randomcss");
window.radomNo = Math.floor((Math.random() * $(".dot").length) + 1);
$(".dot:eq("+ radomNo +")").toggleClass("randomcss");
},1000);
.randomcss {
background : yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dots">
<div class="dot"> . </div>
<div class="dot"> . </div>
<div class="dot"> . </div>
<div class="dot"> . </div>
<div class="dot"> . </div>
<div class="dot"> . </div>
<div class="dot"> . </div>
<div class="dot"> . </div>
<div class="dot"> . </div>
<div class="dot"> . </div>
<div class="dot"> . </div>
<div class="dot"> . </div>
<div class="dot"> . </div>
</div>
http://jsfiddle.net/kishoresahas/7qgvru5p/

Here is another simple way:
function changeColor(){
var randInt = getRandomInt(0, $(".dot:not(.newStyle)").length -1);
$($(".dot:not(.newStyle)")[randInt]).addClass('newStyle');
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
setInterval(function(){
changeColor();
},3000);
.newStyle{background-color:green;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dot">testing</div>
<div class="dot">test</div>
<div class="dot">cool</div>
<div class="dot">more</div>
<div class="dot">cat</div>
<div class="dot">lol</div>

if you use jquery you can try the following:
randomElements = jQuery("div").get().sort(function(){
return Math.round(Math.random())-0.5
}).slice(0,5)

Related

For filtering using data-attributes, In JS how do I match 2 arrays that have the same words but in a different order?

I am trying to create a filter system that uses data-attributes, I can get it to work if the items selected match the order of the elements data-attributes eg: items selected {fun, easy, cheap} and the elements attributes are in the same order but if I click {easy, cheap, fun} then I don't have any results returned.
Any help on solving this would be greatly appreciated.
var filterBtns = document.querySelectorAll('.request-btn'),
slider = document.querySelector('.slider'),
cardContainers = $('.cards-container'),
selectedFilters = [];
filterBtns.forEach(function(el) {
el.addEventListener('click', function() {
this.classList.toggle('clicked');
if (this.classList.contains('clicked')) {
selectedFilters.push(this.dataset.filter);
} else {
selectedFilters.splice(selectedFilters.indexOf(this.dataset.filter), 1);
}
updateCards();
});
});
slider.addEventListener('change', function() {
if (this.value === '0') {
selectedFilters.push('easy');
} else if (this.value === '1') {
selectedFilters.splice(selectedFilters.indexOf('easy', 'diy'), 1);
} else {
selectedFilters.push('diy');
}
updateCards();
});
var updateCards = function() {
cardContainers.removeClass('show').filter(function() {
var data = this.dataset;
var selectedFiltersValues = selectedFilters.join(' ');
return selectedFilters.length ? data.filter.includes(selectedFiltersValues) : true;
}).addClass('show');
}
.card {
width: 200px;
border: 1px solid coral;
margin: 15px;
padding: 15px;
float: left;
}
.cards-container {
display: none;
}
.show {
display: block;
}
.request-btn.clicked {
background-color: coral;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="filter-container">
<div class="left-filter">
<p>EASY<input type="range" class="slider provider-complexity" min="0" max="2" value="1" step="1">DIY</p>
</div>
<div class="right-filter">
<button class="request-btn" data-filter="cheap">Cheap</button>
<button class="request-btn" data-filter="fun">fun</button>
<button class="request-btn" data-filter="green">green</button>
<button class="request-btn" data-filter="big">big</button>
</div>
</div>
<div class="cards-container show" data-filter="green">
<div class="card">1 the tag is - green</div>
</div>
<div class="cards-container show" data-filter="fun">
<div class="card">2 the tag is - fun</div>
</div>
<div class="cards-container show" data-filter="cheap">
<div class="card">3 the tag is - cheap</div>
</div>
<div class="cards-container show" data-filter="big">
<div class="card">4 the tag is - big</div>
</div>
<div class="cards-container show" data-filter="cheap big">
<div class="card">5 the tags are - cheap big</div>
</div>
<div class="cards-container show" data-filter="fun easy cheap">
<div class="card">6 the tags are - fun easy cheap</div>
</div>
<div class="cards-container show" data-filter="diy">
<div class="card">7 the tag is - diy</div>
</div>
<div class="cards-container show" data-filter="easy">
<div class="card">8 hthe tag is - easy</div>
</div>
<div class="cards-container show" data-filter="easy green">
<div class="card">9 the tags are - easy green</div>
</div>

Update based on comment
Based on the comment, the requirement is that each item must contain all of the filters. If "cheap" and "big" are selected, only items that have "cheap" and "big" can be returned.
The change:
// Get the individual item filters as an array
var itemData = data.filter.split(' ')
return selectedFilters.length
// match on every
? selectedFilters.every(function (val) {
return itemData.indexOf(val) > -1;
})
: true;
var filterBtns = document.querySelectorAll('.request-btn'),
slider = document.querySelector('.slider'),
cardContainers = $('.cards-container'),
selectedFilters = [];
filterBtns.forEach(function(el) {
el.addEventListener('click', function() {
this.classList.toggle('clicked');
if (this.classList.contains('clicked')) {
selectedFilters.push(this.dataset.filter);
} else {
selectedFilters.splice(selectedFilters.indexOf(this.dataset.filter), 1);
}
updateCards();
});
});
slider.addEventListener('change', function() {
if (this.value === '0') {
selectedFilters.push('easy');
} else if (this.value === '1') {
selectedFilters.splice(selectedFilters.indexOf('easy', 'diy'), 1);
} else {
selectedFilters.push('diy');
}
updateCards();
});
var updateCards = function() {
cardContainers.removeClass('show').filter(function() {
var itemData = data.filter.split(' ')
return selectedFilters.length
? selectedFilters.every(function (val) {
return itemData.indexOf(val) > -1;
})
: true;
}).addClass('show');
}
.card {
width: 200px;
border: 1px solid coral;
margin: 15px;
padding: 15px;
float: left;
}
.cards-container {
display: none;
}
.show {
display: block;
}
.request-btn.clicked {
background-color: coral;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="filter-container">
<div class="left-filter">
<p>EASY<input type="range" class="slider provider-complexity" min="0" max="2" value="1" step="1">DIY</p>
</div>
<div class="right-filter">
<button class="request-btn" data-filter="cheap">Cheap</button>
<button class="request-btn" data-filter="fun">fun</button>
<button class="request-btn" data-filter="green">green</button>
<button class="request-btn" data-filter="big">big</button>
</div>
</div>
<div class="cards-container show" data-filter="green">
<div class="card">1 the tag is - green</div>
</div>
<div class="cards-container show" data-filter="fun">
<div class="card">2 the tag is - fun</div>
</div>
<div class="cards-container show" data-filter="cheap">
<div class="card">3 the tag is - cheap</div>
</div>
<div class="cards-container show" data-filter="big">
<div class="card">4 the tag is - big</div>
</div>
<div class="cards-container show" data-filter="cheap big">
<div class="card">5 the tags are - cheap big</div>
</div>
<div class="cards-container show" data-filter="fun easy cheap">
<div class="card">6 the tags are - fun easy cheap</div>
</div>
<div class="cards-container show" data-filter="diy">
<div class="card">7 the tag is - diy</div>
</div>
<div class="cards-container show" data-filter="easy">
<div class="card">8 hthe tag is - easy</div>
</div>
<div class="cards-container show" data-filter="easy green">
<div class="card">9 the tags are - easy green</div>
</div>
Original
You problem is that you've joined your selected filters, in your updateCards function you're then checking if the items data-filter includes cheap fun green.
The solution is to check if the array of selectedFilters includes the elements attribute(s).
The change
const itemData = data.filter.split(' ')
return selectedFilters.length
? selectedFilters.every(function (val) {
return itemData.indexOf(val) > -1;
})
: true;
I've updated your example below.
A note on the usage of .some It works across all major browsers, if you need to support i.e 6-8 for some hellish reason, you will need a polyfill. CanIUse
var filterBtns = document.querySelectorAll('.request-btn'),
slider = document.querySelector('.slider'),
cardContainers = $('.cards-container'),
selectedFilters = [];
filterBtns.forEach(function(el) {
el.addEventListener('click', function() {
this.classList.toggle('clicked');
if (this.classList.contains('clicked')) {
selectedFilters.push(this.dataset.filter);
} else {
selectedFilters.splice(selectedFilters.indexOf(this.dataset.filter), 1);
}
updateCards();
});
});
slider.addEventListener('change', function() {
if (this.value === '0') {
selectedFilters.push('easy');
} else if (this.value === '1') {
selectedFilters.splice(selectedFilters.indexOf('easy', 'diy'), 1);
} else {
selectedFilters.push('diy');
}
updateCards();
});
var updateCards = function() {
cardContainers.removeClass('show').filter(function() {
var data = this.dataset;
return selectedFilters.length
? selectedFilters.some(function (val) {
return data.filter.includes(val);
})
: true;
}).addClass('show');
}
.card {
width: 200px;
border: 1px solid coral;
margin: 15px;
padding: 15px;
float: left;
}
.cards-container {
display: none;
}
.show {
display: block;
}
.request-btn.clicked {
background-color: coral;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="filter-container">
<div class="left-filter">
<p>EASY<input type="range" class="slider provider-complexity" min="0" max="2" value="1" step="1">DIY</p>
</div>
<div class="right-filter">
<button class="request-btn" data-filter="cheap">Cheap</button>
<button class="request-btn" data-filter="fun">fun</button>
<button class="request-btn" data-filter="green">green</button>
<button class="request-btn" data-filter="big">big</button>
</div>
</div>
<div class="cards-container show" data-filter="green">
<div class="card">1 the tag is - green</div>
</div>
<div class="cards-container show" data-filter="fun">
<div class="card">2 the tag is - fun</div>
</div>
<div class="cards-container show" data-filter="cheap">
<div class="card">3 the tag is - cheap</div>
</div>
<div class="cards-container show" data-filter="big">
<div class="card">4 the tag is - big</div>
</div>
<div class="cards-container show" data-filter="cheap big">
<div class="card">5 the tags are - cheap big</div>
</div>
<div class="cards-container show" data-filter="fun easy cheap">
<div class="card">6 the tags are - fun easy cheap</div>
</div>
<div class="cards-container show" data-filter="diy">
<div class="card">7 the tag is - diy</div>
</div>
<div class="cards-container show" data-filter="easy">
<div class="card">8 hthe tag is - easy</div>
</div>
<div class="cards-container show" data-filter="easy green">
<div class="card">9 the tags are - easy green</div>
</div>

function isArrayEqual(a, b) {
var arrA = a.join() // Array as String
var arrB = b.join() // Array as String
// Compare length of two string
if (arrA.length != arrB.length) {
return false
}
var totalA = 0
var totalB = 0
for (var i = 0; i < arrA.length; i++) {
totalA += arrA.charCodeAt(i)
totalB += arrB.charCodeAt(i)
}
// Array is same, if both total equal
if (totalA == totalB) {
return true
}
}

I found a solution that looks at the values of each array and then only shows cards that have that combination of values in it's data-attribute.
The problen with the original question, it only showed cards that had values in the same order, the first soultion showed any card that matched a value, not combination of values.
var checker = function(arr, target) {
return target.every(function(v){
return arr.includes(v);
});
}
return checker(dataArray, selectedFilters);

How to make this multi-slide panel loop indefinitely

I have three panels that have just text or text and images that I want to loop indefinitely, and be scalable from 1-1000 slides.
I have the following markup:
<div class="mb-panel-container cf">
<div class="mb-panel-section mb-slider">
<div class="mb-panel active">
<h1>1.1</h1>
<p>slide 1.1</p>
<p class="datetime"></p>
</div>
<div class="mb-panel">
<h1>1.2</h1>
<p>slide 1.2</p>
<p class="datetime"></p>
</div>
<div class="mb-panel">
<h1>1.3</h1>
<p>slide 1.3</p>
<p class="datetime"></p>
</div>
</div>
<div class="mb-panel-section mb-slider">
<div class="mb-panel active">
<h1>2.1</h1>
<p>slide 2.1</p>
<p class="datetime"></p>
</div>
<div class="mb-panel">
<h1>2.2</h1>
<p>slide 2.2</p>
<p class="datetime"></p>
</div>
<div class="mb-panel">
<h1>2.3</h1>
<p>slide 2.3</p>
<p class="datetime"></p>
</div>
</div>
<div class="mb-panel-section mb-slider">
<div class="mb-panel active">
<h1>3.1</h1>
<p>slide 3.1</p>
<p class="datetime"></p>
</div>
<div class="mb-panel">
<h1>3.2</h1>
<p>slide 3.2</p>
<p class="datetime"></p>
</div>
<div class="mb-panel">
<h1>3.3</h1>
<p>slide 3.3</p>
<p class="datetime"></p>
</div>
</div>
</div>
And the following script:
<script>
$(document).ready(function() {
var items = $(".mb-panel"),
currentItem = items.filter(".active");
window.setInterval( function() {
var nextItem = currentItem.next();
currentItem.removeClass("active");
if( nextItem.length ) {
currentItem = nextItem.addClass("active");
} else {
currentItem = items.first().addClass("active");
}
}, 5000);
});
</script>
Unfortunately I am ending up with something like this:
Essentially, the first run of the panels work, but when it gets to the loops it stops for the other panels apart from column 1. I will be opening this up to allow the users to add as many notices per panel as they need, but require it to loop back to the beginning for each column once it reaches the last slide.

You have to pick the exact element with .eq(index) and change the index, depending - if it reached the max allowed length.
$('.mb-slider').each(function(){ // looping for each slider block
let panels = $(this).find('.mb-panel'); // collecting current slides
let len = panels.length;
let index = 0;
setTimeout(function loop(){
panels.eq(index).removeClass('active');
index = (index == len - 1) ? 0 : index + 1; // Google → Ternary operator
panels.eq(index).addClass('active');
setTimeout(loop, 1000);
}, 1000);
});
.mb-panel {
display: none;
border: 2px solid orange;
margin: 5px;
padding: 5px;
}
.mb-panel.active { display: block; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mb-panel-container cf">
<div class="mb-panel-section mb-slider">
<div class="mb-panel active">1-1</div>
<div class="mb-panel">1-2</div>
<div class="mb-panel">1-3</div>
</div>
<div class="mb-panel-section mb-slider">
<div class="mb-panel active">2-1</div>
<div class="mb-panel">2-2</div>
<div class="mb-panel">2-3</div>
<div class="mb-panel">2-4</div>
</div>
<div class="mb-panel-section mb-slider">
<div class="mb-panel active">3-1</div>
<div class="mb-panel">3-2</div>
<div class="mb-panel">3-3</div>
<div class="mb-panel">3-4</div>
<div class="mb-panel">3-5</div>
</div>
</div>
I've used self-calling setTimeout chain just because like that trick. Here you can use setInterval as well. But in some cases, it make sense - not to call function repetitively, while the previous step haven't completed yet.
Translated into native JS ( find 10 differences :D ):
let slider = document.querySelectorAll('.mb-slider');
for( let i = 0; i < slider.length; i++ ){
let panels = slider[i].querySelectorAll('.mb-panel');
let len = panels.length;
let index = 0;
setTimeout(function loop(){
panels[index].classList.remove('active');
index = (index == len - 1) ? 0 : index + 1;
panels[index].classList.add('active');
setTimeout(loop, 1000);
}, 1000);
}
.mb-panel {
display: none;
border: 2px solid orange;
margin: 5px;
padding: 5px;
}
.mb-panel.active { display: block; }
<div class="mb-panel-container cf">
<div class="mb-panel-section mb-slider">
<div class="mb-panel active">1-1</div>
<div class="mb-panel">1-2</div>
<div class="mb-panel">1-3</div>
</div>
<div class="mb-panel-section mb-slider">
<div class="mb-panel active">2-1</div>
<div class="mb-panel">2-2</div>
<div class="mb-panel">2-3</div>
<div class="mb-panel">2-4</div>
</div>
<div class="mb-panel-section mb-slider">
<div class="mb-panel active">3-1</div>
<div class="mb-panel">3-2</div>
<div class="mb-panel">3-3</div>
<div class="mb-panel">3-4</div>
<div class="mb-panel">3-5</div>
</div>
</div>

Add and remove active class to multiple ids automatically in loop

Currently have the following HTML:
<div class="wrapper">
<div id="sat0" class="sat"></div>
<div id="sat1" class="sat"></div>
<div id="sat2" class="sat"></div>
<div id="sat3" class="sat"></div>
<div id="sat4" class="sat"></div>
<div id="sat5" class="sat"></div>
<div id="sat6" class="sat"></div>
<div id="sat7" class="sat"></div>
<div id="sat8" class="sat"></div>
<div id="sat9" class="sat"></div>
<div id="sat10" class="sat"></div>
<div id="sat11" class="sat"></div>
</div>
I want the class="active" added to id="sat0" and id="sat6" on page load. Then a second later the active class should be remove from both and be added to the two next ones so id="sat1" and id="sat7". It should loop endlessly, so when gets to id="sat5" and id="sat11" the next would be "id=sat6" and id="sat0".
Currently using the following javascript.
<script>
$(document).ready(function(){
$("#sat0").addClass("active");
$("#sat6").addClass("active");
setTimeout(autoAddClass, 1200);
});
function autoAddClass(){
var next = $(".active").removeClass("active").next();
if(next.length)
$(next).addClass('active');
else
$("#sat0").addClass("active");
$("#sat6").addClass("active");
setTimeout(autoAddClass, 1200);
}
</script>
It acts rather chaotically. Any thoughts?

The main reason you seem to get chaotic behavior is that you're always adding active back to #sat6, because you need to use a block in your else (really, I recommend always using blocks with control-flow statements) so the #sat6 part is conditional:
function autoAddClass(){
var next = $(".active").removeClass("active").next();
if(next.length) {
$(next).addClass('active');
} else {
$("#sat0").addClass("active");
$("#sat6").addClass("active");
}
setTimeout(autoAddClass, 1200);
}
Updated example:
function autoAddClass(){
var next = $(".active").removeClass("active").next();
if(next.length) {
$(next).addClass('active');
} else {
$("#sat0").addClass("active");
$("#sat6").addClass("active");
}
setTimeout(autoAddClass, 1200);
}
autoAddClass();
.active {
background-color: yellow;
}
<div class="wrapper">
<div id="sat0" class="sat">0</div>
<div id="sat1" class="sat">1</div>
<div id="sat2" class="sat">2</div>
<div id="sat3" class="sat">3</div>
<div id="sat4" class="sat">4</div>
<div id="sat5" class="sat">5</div>
<div id="sat6" class="sat">6</div>
<div id="sat7" class="sat">7</div>
<div id="sat8" class="sat">8</div>
<div id="sat9" class="sat">9</div>
<div id="sat10" class="sat">10</div>
<div id="sat11" class="sat">11</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
But another reason would be that the top sequence (starting with #sat0) continues longer than the other; you might want if (next.length == 2) instead of just if (next.length):
function autoAddClass(){
var next = $(".active").removeClass("active").next();
if(next.length == 2) {
$(next).addClass('active');
} else {
$("#sat0").addClass("active");
$("#sat6").addClass("active");
}
setTimeout(autoAddClass, 1200);
}
autoAddClass();
.active {
background-color: yellow;
}
<div class="wrapper">
<div id="sat0" class="sat">0</div>
<div id="sat1" class="sat">1</div>
<div id="sat2" class="sat">2</div>
<div id="sat3" class="sat">3</div>
<div id="sat4" class="sat">4</div>
<div id="sat5" class="sat">5</div>
<div id="sat6" class="sat">6</div>
<div id="sat7" class="sat">7</div>
<div id="sat8" class="sat">8</div>
<div id="sat9" class="sat">9</div>
<div id="sat10" class="sat">10</div>
<div id="sat11" class="sat">11</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
BTW, if you want to make it easier to add/remove divs, you don't need any of those id="..."; just use $(".sat:nth-child(1)") and $(".sat:nth-child(7)") (or if you have other elements in there, $(".sat:eq(0)") and $(".sat:eq(6)")) to start with:
function autoAddClass(){
var next = $(".active").removeClass("active").next();
if(next.length == 2) {
$(next).addClass('active');
} else {
$(".sat:nth-child(1)").addClass("active");
$(".sat:nth-child(7)").addClass("active");
}
setTimeout(autoAddClass, 1200);
}
autoAddClass();
.active {
background-color: yellow;
}
<div class="wrapper">
<div class="sat">0</div>
<div class="sat">1</div>
<div class="sat">2</div>
<div class="sat">3</div>
<div class="sat">4</div>
<div class="sat">5</div>
<div class="sat">6</div>
<div class="sat">7</div>
<div class="sat">8</div>
<div class="sat">9</div>
<div class="sat">10</div>
<div class="sat">11</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
(If you have multiple .wrapper that you're doing this in, you'll have to adjust things a bit to work within them individually...)

Finding attributes .on("click") from unrelated div

I'm trying to have it where pressing "btn1" alone populates the sidebar. I tried $("#container").on("click", ".btn1", function() but it doesn't work.
$("#container").on("click", ".item", function() {
$("#title").text($(this).find(".title").text());
var itemImgSrc = $(this).find(".image").attr("src");
$("#image")
.css("background-image", 'url("' + itemImgSrc + '")')
.css("background-repeat", "no-repeat");
});
#container {
display: flex;
height: 100px;
}
.image {
height: 100px;
}
#image {
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<!-- Item 1 -->
<div class="item">
<button class="btn1"></button>
<div class="title">Dog</div>
<img class="image" src="http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg">
</div>
<!-- Item 2 -->
<div class="item">
<button class="btn1"></button>
<div class="title">Cat</div>
<img class="image" src="https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/cat-adult-landing-hero.ashx">
</div>
<!-- Sidebar Div -->
</div>
<div class="modal">
<h2 id="title"></h2>
<div id="image"></div>
</div>

.title and .image are not contained in .btn1. You need to go up to the containing .item and then find them.
$("#container").on("click", ".btn1", function() {
var item = $(this).closest(".item");
$("#title").text(item.find(".title").text());
var itemImgSrc = item.find(".image").attr("src");
$("#image")
.css("background-image", 'url("' + itemImgSrc + '")')
.css("background-repeat", "no-repeat");
});
#container {
display: flex;
height: 100px;
}
.image {
height: 100px;
}
#image {
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<!-- Item 1 -->
<div class="item">
<button class="btn1"></button>
<div class="title">Dog</div>
<img class="image" src="http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg">
</div>
<!-- Item 2 -->
<div class="item">
<button class="btn1"></button>
<div class="title">Cat</div>
<img class="image" src="https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/cat-adult-landing-hero.ashx">
</div>
<!-- Sidebar Div -->
</div>
<div class="modal">
<h2 id="title"></h2>
<div id="image"></div>
</div>
You could also use $(this).siblings(".title') and $(this).siblings(".image").

You need to change $(this) to $(.btn1).
$(this) being the button clicked works for .btn1 and not for .btn2, changing it from dynamic $(this) to always looking for .link in .btn1 should solve it.

Have you tried using $(this).parent().find(".title"). You could move up the heirarchy and get the element from there and then
$("#container").on("click", ".item", function() {
$("#title").text($(this).parent().find(".title").text());
var itemImgSrc = $(this).parent().find(".image").attr("src");
$("#image")
.css("background-image", 'url("' + itemImgSrc + '")')
.css("background-repeat", "no-repeat");
});
#container {
display: flex;
height: 100px;
}
.image {
height: 100px;
}
#image {
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<!-- Item 1 -->
<div class="item">
<button class="btn1"></button>
<div class="title">Dog</div>
<img class="image" src="http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg">
</div>
<!-- Item 2 -->
<div class="item">
<button class="btn1"></button>
<div class="title">Cat</div>
<img class="image" src="https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/cat-adult-landing-hero.ashx">
</div>
<!-- Sidebar Div -->
</div>
<div class="modal">
<h2 id="title"></h2>
<div id="image"></div>
</div>
Also try using an index with the find method. it returns an array but i dont think that giving index is necessary when there is only one element.
something like this
$(this).parent().find(".item")[0].text();

Bootstrap carousel make text appearing letter by letter

I'm using bootstrap carousel for the slider , on each slide there is some text over it.
I would like that text over the slides to aappear letter by letter.
I have almost solved it..
But there are 2 issues
On first slide the text doesn't come up at all
If the user goes to some other tab on the browser means if the current window is not in focus ,then everything gets messed up.
Here is my fiddle
HTML
<main>
<div class="container">
<div class="block-wrap">
<div id="js-carousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701" alt="Chania">
<div class="caption">
<div class="mystring hide">companies with Inbound Marketing</div>
<h4>We help <div class="demo-txt"></div> </h4>
</div>
</div>
<div class="item">
<img src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701" alt="Chania">
<div class="caption">
<div class="mystring hide">companies with Inbound Marketing</div>
<h4>We help <div class="demo-txt "></div> </h4>
</div>
</div>
<div class="item">
<img src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701" alt="Flower">
<div class="caption">
<div class="mystring hide">2companies with Inbound Marketing</div>
<h4>We help <div class="demo-txt"></div> </h4>
</div>
</div>
<div class="item">
<img src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701" alt="Flower">
<div class="caption">
<div class="mystring hide">3companies with Inbound Marketing</div>
<h4>We help <div class="demo-txt"></div> </h4>
</div>
</div>
<div class="overlay-effect"></div>
</div>
</div>
</div>
</div>
</main>
JS:
$(document).ready(function() {
$('#js-carousel').carousel({
interval: 5000
});
$('#js-carousel').on('slid.bs.carousel', function () {
var showText = function (target, message, index, interval) {
if (index < message.length) {
$(target).append(message[index++]);
setTimeout(function () { showText(target, message, index, interval); }, interval);
}
}
var str = $(this).find(".active .mystring").html();
$('.active .demo-txt').html("");
showText(".active .demo-txt", str, 0, 100);
});
});

Instead of settimeout use setInterval function. Also use clearInterval to clear schedular when a new slide begin. (I think this is your second problem.)
Here is your target js file:
$(document).ready(function() {
$('#js-carousel').carousel({
interval: 5000
});
var handler;
var interval = 5000;
var index = 0;
function showText(target, message, index, interval) {
if (index < message.length) {
$(target).append(message[index]);
}
}
function iteration() {
if(handler){
clearInterval(handler);
}
index = 0;
var str = $(this).find(".active .mystring").html();
$('.active .demo-txt').html("");
showText(".active .demo-txt", str, index++, 100);
handler = setInterval(function(){
showText(".active .demo-txt", str, index++, 100);
}, 100);
}
//on each carousel slide change:
$('#js-carousel').on('slid.bs.carousel', iteration);
//start immediately for your first problem:
iteration.bind($('#js-carousel'))();
});

It's because your function is inside the slide event. At starting, the carousel doesn't slide...
Fiddle: https://jsfiddle.net/Lbasa2jh/5/
JS:
$(document).ready(function() {
var showText = function (target, message, index, interval) {
if (index < message.length) {
$(target).append(message[index++]);
setTimeout(function () { showText(target, message, index, interval); }, interval);
}
};
$('#js-carousel').carousel({
interval: 5000
});
var str0 = $(this).find(".active .mystring").html();
$('.active .demo-txt').html("");
showText(".active .demo-txt", str0, 0, 100);
$('#js-carousel').on('slid.bs.carousel', function () {
var str = $(this).find(".active .mystring").html();
$('.active .demo-txt').html("");
showText(".active .demo-txt", str, 0, 100);
});
});

The timer can be tricky when the tab goes inactive. I moved code around and cleared the timeout to make sure the timeout is clean when starting a new slide.
I noticed an issue (not always) when switching back from a different tab is that the carousel actually moves to next slide quicker than 5 second causing the text to be incomplete.
https://jsfiddle.net/vLwm58Ln/
$(document).ready(function() {
$('#js-carousel').carousel({
interval: 5000
});
var showText = function(target, message, index, interval) {
if (index < message.length) {
$(target).append(message[index++]);
timer = setTimeout(function() {
showText(target, message, index, interval);
}, interval);
}
}, timer;
//First time, this triggers right away instead of waiting for the slide to move
showText(".active .demo-txt", $('#js-carousel').find(".active .mystring").html(), 0, 100);
$('#js-carousel').on('slid.bs.carousel', function() {
//clear any messed up timeout from prev slide
clearTimeout(timer);
//clear message that may be incomplete from the previous text animation
$('.prevActive').removeClass('prevActive').html('');
var str = $(this).find(".active .mystring").html();
$('.active .demo-txt').addClass('prevActive').html("");
showText(".active .demo-txt", str, 0, 100);
});
});
.carousel-inner {
position: relative;
}
.carousel-inner .overlay-effect {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
}
.carousel-inner .caption {
color: #ffffff;
font-weight: bold;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
height: 100px;
z-index: 9999;
left: 5%;
}
.carousel-inner .caption h1,
.carousel-inner .caption h2 {
font-weight: bold;
line-height: 1.6;
}
.carousel-inner .caption h1 {
font-size: 64px;
}
.carousel-inner .caption h2 {
font-size: 44px;
}
.carousel-inner .demo-txt {
border-bottom: 4px solid #ec8422;
padding-bottom: 5px;
}
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<main>
<div class="container">
<div class="block-wrap">
<div id="js-carousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701" alt="Chania">
<div class="caption">
<div class="mystring hide">companies with Inbound Marketing</div>
<h4>We help <div class="demo-txt"></div> </h4>
</div>
</div>
<div class="item">
<img src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701" alt="Chania">
<div class="caption">
<div class="mystring hide">companies with Inbound Marketing</div>
<h4>We help <div class="demo-txt "></div> </h4>
</div>
</div>
<div class="item">
<img src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701" alt="Flower">
<div class="caption">
<div class="mystring hide">2companies with Inbound Marketing</div>
<h4>We help <div class="demo-txt"></div> </h4>
</div>
</div>
<div class="item">
<img src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701" alt="Flower">
<div class="caption">
<div class="mystring hide">3companies with Inbound Marketing</div>
<h4>We help <div class="demo-txt"></div> </h4>
</div>
</div>
<div class="overlay-effect"></div>
</div>
</div>
</div>
</div>
</main>

We Keep Coding

JavaScript is the programming language of the Web.

Select random element - javascript

if you use jquery you can try the following: randomElements = jQuery("div").get().sort(function(){ return Math.round(Math.random())-0.5 }).slice(0,5)

Related

For filtering using data-attributes, In JS how do I match 2 arrays that have the same words but in a different order?

How to make this multi-slide panel loop indefinitely

Add and remove active class to multiple ids automatically in loop

Finding attributes .on("click") from unrelated div

Bootstrap carousel make text appearing letter by letter

Categories

Resources