HTML Javascript - Get all elements with ID

HTML Javascript - Get all elements with ID - javascript

I am using the waterwheel-carousel image slider located here. I would like to have multiple carousels on one page.
Here is a snippet of my code:
<script>
// load carousel
$(document).ready(function () {
$("#waterwheel-carousel").waterwheelCarousel({
separation: 90,
separationMultiplier: 0.2,
horizonOffsetMultiplier: 1
});
});
</script>
.
.
.
<div id="waterwheel-carousel">
<img src="" alt="one">
<img src="" alt="two">
<img src="" alt="three">
<img src="" alt="four">
</div>
<div id="waterwheel-carousel">
<img src="" alt="one">
<img src="" alt="two">
<img src="" alt="three">
<img src="" alt="four">
</div>
<div id="waterwheel-carousel">
<img src="" alt="one">
<img src="" alt="two">
<img src="" alt="three">
<img src="" alt="four">
</div>
And the CSS:
/* Projects page carousel(s) */
#waterwheel-carousel {
width: 200px;
height: 216px;
position: relative;
clear: both;
overflow: hidden;
margin: 0 auto;
}
#waterwheel-carousel img {
cursor: pointer;
border: 5px solid black;
}
The issue is that only the first #waterwheel-carousel will load. The other two do not. I did some research and it seems like it may only be returning the first element with that id. So I have tried a different approach on my $(document).ready(.. function, adding class="waterwheel-carousel" to each div:
<script>
$(document).ready(function () {
var allElements = $(document).getElementsByClassName("waterwheel-carousel");
for (var i = 0; i < allElements.length; i++) {
var currentElement = allElements[i];
currentElement.waterwheelCarousel({
separation: 90,
separationMultiplier: 0.2,
horizonOffsetMultiplier: 1
});
}
});
</script>
But then they all fail to load.
Anyone have any ideas?
Thanks.

Element IDs should be unique within the entire document. see
Instead of id use class to get all element
<script>
// load carousel
$(document).ready(function () {
$(".waterwheel-carousel").waterwheelCarousel({
separation: 90,
separationMultiplier: 0.2,
horizonOffsetMultiplier: 1
});
});
</script>
.
.
.
<div class="waterwheel-carousel">
<img src="" alt="one">
<img src="" alt="two">
<img src="" alt="three">
<img src="" alt="four">
</div>
<div class="waterwheel-carousel">
<img src="" alt="one">
<img src="" alt="two">
<img src="" alt="three">
<img src="" alt="four">
</div>
<div class="waterwheel-carousel">
<img src="" alt="one">
<img src="" alt="two">
<img src="" alt="three">
<img src="" alt="four">
</div>

This is what classes are for, IDs are unique. Which means that each element in the document must have a different ID.
Modify your HTML:
<div class="waterwheel-carousel">
<img src="" alt="one">
<img src="" alt="two">
<img src="" alt="three">
<img src="" alt="four">
</div>
<div class="waterwheel-carousel">
<img src="" alt="one">
<img src="" alt="two">
<img src="" alt="three">
<img src="" alt="four">
</div>
<div class="waterwheel-carousel">
<img src="" alt="one">
<img src="" alt="two">
<img src="" alt="three">
<img src="" alt="four">
</div>
and you're good to go.

Related

hasClass() function not working as intended in a slider

My code is trying to make a slider, that has 2 classes, 'motion1' and 'motion2'. Based on each class, I am trying to apply the transition to each slide at a different time. However, the hasClass function is not detecting the parent with the above class name. Please find the codes here below
$(function(){
let motion1 = $('.motion1');
let motion2 = $('.motion2');
let images = $('.column1 img');
images.each(function(){
if($(this).parents().hasClass(motion1)){
console.log('hi');
} else{
console.log('no');
}
});
});
#main__slider{
width:40rem;
height:25rem;
margin: 0 auto;
display:grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr)
}
.column1{
border:1px solid;
position:relative;
}
img{
width:100%;
height:100%;
object-fit:cover;
position:absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main__slider">
<div class="column1 motion1">
<img src="https://www.arup.com/-/media/arup/images/perspectives/themes/cities/cities-alive/cities-alive-header.jpg?h=1125&la=en&w=2000&hash=415B3F648DFB5F1822DD43328B988A2C78318E7F" alt="">
<img src="https://livability.com/sites/default/files/Great%20Cities%20for%20Filmmakers.jpg" alt="">
</div>
<div class="column1">
<img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg?itok=FSzwbBoi" alt="">
<img src="https://d17fnq9dkz9hgj.cloudfront.net/uploads/2018/03/Pomeranian_01.jpeg" alt="">
</div>
<div class="column1">
<img src="https://i.kinja-img.com/gawker-media/image/upload/s--vHt6tbFa--/c_scale,f_auto,fl_progressive,q_80,w_800/xjmx1csashjww8j8jwyh.jpg" alt="">
<img src="https://www.drdavidludwig.com/wp-content/uploads/2017/01/1-RIS_6IbCLYv1X3bzYW1lmA.jpeg" alt="">
</div>
<div class="column1">
<img src="https://www.railengineer.uk/wp-content/uploads/2017/10/AT300_HULL-TRAINS_with-logo.jpg" alt="">
<img src="https://www.virginexperiencedays.co.uk/content/img/product/large/steam-train-trip-17104839.jpg" alt="">
</div>
<div class="column1 motion2">
<img src="https://www.healthline.com/hlcmsresource/images/topic_centers/977-When_do_girls_stop_growing-732x549-thumbnail.jpg" alt="">
<img src="https://images.askmen.com/1080x540/2018/09/06-125712-how_to_talk_to_girls_on_tinder.jpg" alt="">
</div>
<div class="column1">
<img src="https://www.familyeducation.com/sites/default/files/inline-images/baby%20girl%20names%20image.jpg" alt="">
<img src="https://cdn2.momjunction.com/wp-content/uploads/2015/03/Learning-Activities.jpg" alt="">
</div>
<div class="column1 motion1">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Team_Korea_Rio_2016_06.jpg/1200px-Team_Korea_Rio_2016_06.jpg" alt="">
<img src="https://expo.advance.net/img/9c4d2bc2c7/width960/30gallery_state_indiv_gym_.jpeg" alt="">
</div>
<div class="column1">
<img src="https://cdn4.sportngin.com/attachments/call_to_action/9127/0843/_7006687_large.jpg" alt="">
<img src="https://cdn.vox-cdn.com/thumbor/4pOVrNf6Ezmge6_VKHgYmAyCNoU=/0x0:3642x2712/1200x800/filters:focal(1275x341:1857x923)/cdn.vox-cdn.com/uploads/chorus_image/image/54106607/usa_today_9864342.0.jpg" alt="">
</div>
<div class="column1">
<img src="https://livability.com/sites/default/files/Great%20Cities%20for%20Filmmakers.jpg" alt="">
<img src="https://media.wired.com/photos/59bafdf204afdc5248726f5c/master/w_2400,c_limit/BMW-TA.jpg" alt="">
</div>
</div>
If anyone can also help me with the code problem. I would also like to ask for your help in achieving the slide function. Here, the images with motion1 and motion2 need to be fadeIn and fadeOut at different time intervals from each other. If it reaches the last slide, the first slide needs to come
Any help is appreciated.

The function hasClass takes a single string argument as a parameter which represents the CSS class you want to check. If we look at your code, we can see that you aren't passing in a string to the hasClass function but a jQuery object instead:
$(function(){
let motion1 = $('.motion1');//jQuery Object
let motion2 = $('.motion2');//jQuery Object
let images = $('.column1 img');
images.each(function(){
if($(this).parents().hasClass(motion1)){//Bad argument - jQuery Object
console.log('hi');
} else{
console.log('no');
}
});
});
To fix this, simply pass in the class directly to the hasClass method:
$(function(){
let images = $('.column1 img');
images.each(function(){
if($(this).parents().hasClass('motion1')){//correct argument - string
console.log('hi');
} else{
console.log('no');
}
});
});

$(function(){
let motion1 = $('.motion1');
let motion2 = $('.motion2');
let images = $('.column1 img');
images.each(function(){
if($(this).parents().hasClass('motion1')){
console.log('hi');
} else{
console.log('no');
}
});
});
#main__slider{
width:40rem;
height:25rem;
margin: 0 auto;
display:grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr)
}
.column1{
border:1px solid;
position:relative;
}
img{
width:100%;
height:100%;
object-fit:cover;
position:absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main__slider">
<div class="column1 motion1">
<img src="https://www.arup.com/-/media/arup/images/perspectives/themes/cities/cities-alive/cities-alive-header.jpg?h=1125&la=en&w=2000&hash=415B3F648DFB5F1822DD43328B988A2C78318E7F" alt="">
<img src="https://livability.com/sites/default/files/Great%20Cities%20for%20Filmmakers.jpg" alt="">
</div>
<div class="column1">
<img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg?itok=FSzwbBoi" alt="">
<img src="https://d17fnq9dkz9hgj.cloudfront.net/uploads/2018/03/Pomeranian_01.jpeg" alt="">
</div>
<div class="column1">
<img src="https://i.kinja-img.com/gawker-media/image/upload/s--vHt6tbFa--/c_scale,f_auto,fl_progressive,q_80,w_800/xjmx1csashjww8j8jwyh.jpg" alt="">
<img src="https://www.drdavidludwig.com/wp-content/uploads/2017/01/1-RIS_6IbCLYv1X3bzYW1lmA.jpeg" alt="">
</div>
<div class="column1">
<img src="https://www.railengineer.uk/wp-content/uploads/2017/10/AT300_HULL-TRAINS_with-logo.jpg" alt="">
<img src="https://www.virginexperiencedays.co.uk/content/img/product/large/steam-train-trip-17104839.jpg" alt="">
</div>
<div class="column1 motion2">
<img src="https://www.healthline.com/hlcmsresource/images/topic_centers/977-When_do_girls_stop_growing-732x549-thumbnail.jpg" alt="">
<img src="https://images.askmen.com/1080x540/2018/09/06-125712-how_to_talk_to_girls_on_tinder.jpg" alt="">
</div>
<div class="column1">
<img src="https://www.familyeducation.com/sites/default/files/inline-images/baby%20girl%20names%20image.jpg" alt="">
<img src="https://cdn2.momjunction.com/wp-content/uploads/2015/03/Learning-Activities.jpg" alt="">
</div>
<div class="column1 motion1">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Team_Korea_Rio_2016_06.jpg/1200px-Team_Korea_Rio_2016_06.jpg" alt="">
<img src="https://expo.advance.net/img/9c4d2bc2c7/width960/30gallery_state_indiv_gym_.jpeg" alt="">
</div>
<div class="column1">
<img src="https://cdn4.sportngin.com/attachments/call_to_action/9127/0843/_7006687_large.jpg" alt="">
<img src="https://cdn.vox-cdn.com/thumbor/4pOVrNf6Ezmge6_VKHgYmAyCNoU=/0x0:3642x2712/1200x800/filters:focal(1275x341:1857x923)/cdn.vox-cdn.com/uploads/chorus_image/image/54106607/usa_today_9864342.0.jpg" alt="">
</div>
<div class="column1">
<img src="https://livability.com/sites/default/files/Great%20Cities%20for%20Filmmakers.jpg" alt="">
<img src="https://media.wired.com/photos/59bafdf204afdc5248726f5c/master/w_2400,c_limit/BMW-TA.jpg" alt="">
</div>
</div>

images in grid change in specified time interval using jquery or other javascript

I am trying to develop an image grid that changes some images in random at specified intervals using jquery or any other javascript means. Please be noted that I do not need all the images to change at the same time. One group of an image can change in different time interval compared to others.
The images are positioned absolute to the parent div so that it one can fadeIn while the other fades out until it reaches the last stage.
I am completely stuck without any idea on how to achieve this. Could anyone help me with this? Following is my code
(function(){
let first = $('.column1 img:gt(0)');
first.hide();
let images = $('.column1').find('img');
setInterval(function(){
let current = $('.column1 img:visible');
let next = current.next().length ? current.next():$('.column1 img:eq(0)');
current.fadeOut(300);
next.fadeIn(300);
}, 3000);
});
#main__slider{
width:40rem;
height:25rem;
margin: 0 auto;
display:grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr)
}
.column1{
border:1px solid;
position:relative;
}
img{
width:100%;
height:100%;
object-fit:cover;
position:absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main__slider">
<div class="column1">
<img src="https://www.arup.com/-/media/arup/images/perspectives/themes/cities/cities-alive/cities-alive-header.jpg?h=1125&la=en&w=2000&hash=415B3F648DFB5F1822DD43328B988A2C78318E7F" alt="">
<img src="https://livability.com/sites/default/files/Great%20Cities%20for%20Filmmakers.jpg" alt="">
</div>
<div class="column1">
<img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg?itok=FSzwbBoi" alt="">
<img src="https://d17fnq9dkz9hgj.cloudfront.net/uploads/2018/03/Pomeranian_01.jpeg" alt="">
</div>
<div class="column1">
<img src="https://i.kinja-img.com/gawker-media/image/upload/s--vHt6tbFa--/c_scale,f_auto,fl_progressive,q_80,w_800/xjmx1csashjww8j8jwyh.jpg" alt="">
<img src="https://www.drdavidludwig.com/wp-content/uploads/2017/01/1-RIS_6IbCLYv1X3bzYW1lmA.jpeg" alt="">
</div>
<div class="column1">
<img src="https://www.railengineer.uk/wp-content/uploads/2017/10/AT300_HULL-TRAINS_with-logo.jpg" alt="">
<img src="https://www.virginexperiencedays.co.uk/content/img/product/large/steam-train-trip-17104839.jpg" alt="">
</div>
<div class="column1">
<img src="https://www.healthline.com/hlcmsresource/images/topic_centers/977-When_do_girls_stop_growing-732x549-thumbnail.jpg" alt="">
<img src="https://images.askmen.com/1080x540/2018/09/06-125712-how_to_talk_to_girls_on_tinder.jpg" alt="">
</div>
<div class="column1">
<img src="https://www.familyeducation.com/sites/default/files/inline-images/baby%20girl%20names%20image.jpg" alt="">
<img src="https://cdn2.momjunction.com/wp-content/uploads/2015/03/Learning-Activities.jpg" alt="">
</div>
<div class="column1">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Team_Korea_Rio_2016_06.jpg/1200px-Team_Korea_Rio_2016_06.jpg" alt="">
<img src="https://expo.advance.net/img/9c4d2bc2c7/width960/30gallery_state_indiv_gym_.jpeg" alt="">
</div>
<div class="column1">
<img src="https://cdn4.sportngin.com/attachments/call_to_action/9127/0843/_7006687_large.jpg" alt="">
<img src="https://cdn.vox-cdn.com/thumbor/4pOVrNf6Ezmge6_VKHgYmAyCNoU=/0x0:3642x2712/1200x800/filters:focal(1275x341:1857x923)/cdn.vox-cdn.com/uploads/chorus_image/image/54106607/usa_today_9864342.0.jpg" alt="">
</div>
<div class="column1">
<img src="https://livability.com/sites/default/files/Great%20Cities%20for%20Filmmakers.jpg" alt="">
<img src="https://media.wired.com/photos/59bafdf204afdc5248726f5c/master/w_2400,c_limit/BMW-TA.jpg" alt="">
</div>
</div>

You need to create a kind of loop like below and also consider random() to have different timing for the fade function:
$('.column1 img:eq(0)').each(function() {
$(this).hide();
});
setInterval(function() {
$('.column1 img:visible').each(function() {
let next = $(this).next().length ? $(this).next() : $(this).parent().find('img:eq(0)');
var t = Math.random()*2000;
$(this).delay(t).fadeOut(500);
next.delay(t).fadeIn(500);
});
}, 3000);
#main__slider {
width: 40rem;
height: 25rem;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr)
}
.column1 {
border: 1px solid;
position: relative;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main__slider">
<div class="column1">
<img src="https://www.arup.com/-/media/arup/images/perspectives/themes/cities/cities-alive/cities-alive-header.jpg?h=1125&la=en&w=2000&hash=415B3F648DFB5F1822DD43328B988A2C78318E7F" alt="">
<img src="https://livability.com/sites/default/files/Great%20Cities%20for%20Filmmakers.jpg" alt="">
</div>
<div class="column1">
<img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg?itok=FSzwbBoi" alt="">
<img src="https://d17fnq9dkz9hgj.cloudfront.net/uploads/2018/03/Pomeranian_01.jpeg" alt="">
</div>
<div class="column1">
<img src="https://i.kinja-img.com/gawker-media/image/upload/s--vHt6tbFa--/c_scale,f_auto,fl_progressive,q_80,w_800/xjmx1csashjww8j8jwyh.jpg" alt="">
<img src="https://www.drdavidludwig.com/wp-content/uploads/2017/01/1-RIS_6IbCLYv1X3bzYW1lmA.jpeg" alt="">
</div>
<div class="column1">
<img src="https://www.railengineer.uk/wp-content/uploads/2017/10/AT300_HULL-TRAINS_with-logo.jpg" alt="">
<img src="https://www.virginexperiencedays.co.uk/content/img/product/large/steam-train-trip-17104839.jpg" alt="">
</div>
<div class="column1">
<img src="https://www.healthline.com/hlcmsresource/images/topic_centers/977-When_do_girls_stop_growing-732x549-thumbnail.jpg" alt="">
<img src="https://images.askmen.com/1080x540/2018/09/06-125712-how_to_talk_to_girls_on_tinder.jpg" alt="">
</div>
<div class="column1">
<img src="https://www.familyeducation.com/sites/default/files/inline-images/baby%20girl%20names%20image.jpg" alt="">
<img src="https://cdn2.momjunction.com/wp-content/uploads/2015/03/Learning-Activities.jpg" alt="">
</div>
<div class="column1">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Team_Korea_Rio_2016_06.jpg/1200px-Team_Korea_Rio_2016_06.jpg" alt="">
<img src="https://expo.advance.net/img/9c4d2bc2c7/width960/30gallery_state_indiv_gym_.jpeg" alt="">
</div>
<div class="column1">
<img src="https://cdn4.sportngin.com/attachments/call_to_action/9127/0843/_7006687_large.jpg" alt="">
<img src="https://cdn.vox-cdn.com/thumbor/4pOVrNf6Ezmge6_VKHgYmAyCNoU=/0x0:3642x2712/1200x800/filters:focal(1275x341:1857x923)/cdn.vox-cdn.com/uploads/chorus_image/image/54106607/usa_today_9864342.0.jpg" alt="">
</div>
<div class="column1">
<img src="https://livability.com/sites/default/files/Great%20Cities%20for%20Filmmakers.jpg" alt="">
<img src="https://media.wired.com/photos/59bafdf204afdc5248726f5c/master/w_2400,c_limit/BMW-TA.jpg" alt="">
</div>
</div>

Change HTML with iMacros

I am trying to change this with iMacros:
<div id="outerd3">
<img src="bnner0.jgp" alt="">
<img src="flamingo.jpg" alt="">
<img src="avatar.jpg" alt="">
</div>
into this
<div id="outerd3">
<img src="avatar.jpg" alt="">
<img src="avatar.jpg" alt="">
<img src="avatar.jpg" alt="">
</div>
If possible, please help me to achieve this.

You can use this code for change img src.
$('img').each(function () {
$(this).attr("src","avatar.jpg");
});

And here is a solution for 'iMacros':
URL GOTO=javascript:(function(){var<SP>img=document.querySelector("#outerd3").querySelectorAll("img");for(i=0;i<img.length;i++)img[i].src="avatar.jpg";})();

Insert list of Images after list of Paragraphs

I have a list of images, I want to insert one image after each paragraph. Sometimes I have less images than paragraphs sometimes more. How do I loop through the img elements to insert them after a paragraph, and if there are too much images, leave them where they are?
$( ".img" ).insertAfter( "p" );
Without content the structure would look like this:
Before:
<div id="wrap">
<h2></h2>
<p></p>
<h2></h2>
<p></p>
<h2></h2>
<p></p>
</div>
<img class="img" />
<img class="img" />
<img class="img" />
<img class="img" />
<img class="img" />
<img class="img" />
<img class="img" />
<img class="img" />
Result:
<div id="wrap">
<h2></h2>
<p></p>
<img class="img" />
<h2></h2>
<p></p>
<img class="img" />
<h2></h2>
<p></p>
<img class="img" />
</div>
<img class="img" />
<img class="img" />
<img class="img" />
<img class="img" />
<img class="img" />

You could use the .after() method:
var $img = $('.img');
$('#wrap p').after(function(i) { return $img.eq(i); });
http://jsfiddle.net/a7tchk5r/

Pure jquery method for wrapping each 9 img's in a div

I have a div which contains a certain number of img's. Let's say 21. What I want to do is wrap a div around every 9 img's. In what way can I achieve this?
My html structure:
<div id="parent">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
</div>
Which should become:
<div id="parent">
<div>
<img src="#">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
</div>
<div>
<img src="#">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
</div>
</div>

You can do this:
var $img = $("#parent img");
for (var i = 0; i < $img.length; i += 9) {
$img.slice(i, i + 9).wrapAll("<div/>");
}
FIDDLE DEMO

This is not pure jQuery but works:http://jsfiddle.net/GEQyA/
html:
<div id="parent">
<img src="" class="image"/>
<img src="" class="image"/>
<img src="" class="image"/>
<img src="" class="image"/>
<img src="" class="image"/>
<img src="" class="image"/>
js:
var $images = [];
$('#parent').children().each(function(index, value){
$images.push(this);
});
$('#parent').children().each(function(index, value){
$(this).remove();
});
$('#parent').ready(function(){
write();
});
function write() {
var counter = 0;
$('#parent').append('<div class="innerDiv">');
$($images).each(function(index, value){
if (counter == 2) {
$('#parent').append('</div><div class="innerDiv">');
counter = 0;
}
$('#parent').append($(this) + counter);
if (index == $images.length) {
$('#parent').append('</div>');
}
counter += 1;
});
}

Develop Reference

JavaScript is the programming language of the Web.

HTML Javascript - Get all elements with ID - javascript

Related

hasClass() function not working as intended in a slider

images in grid change in specified time interval using jquery or other javascript

Change HTML with iMacros

Insert list of Images after list of Paragraphs

Pure jquery method for wrapping each 9 img's in a div

Categories

Resources