I have this code
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="http://" alt="">
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
<div class="item">
<img src="http://" alt="">
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
</div>
I want to replace only in the first div, <img src = "" alt = ""> with <video> <source src = ""> </ video>.
To clean up div I found this code. But not the first. This is the first problem.
$('.item").empty();
To write the new code to play the video, I should use this code:
$(".item").html('<video><source src=""></video>');
I can not write a good javascript code to do what I explained you.
ps. I can’t change the first code because it’s a default slider of image.
Thanks for the help.
If you wish to use jquery you can utilise replaceWith() and :first pseudo selector to select and repalce only the first <img>:
$(function () {
$('img:first').replaceWith('<video><source src=""></video>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="" alt="" />
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
<div class="item">
<img src="" alt="" />
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
</div>
Bu tyou don't need Jquery to get it done. Document.querySelector() returns only the first element that matches the specified selector and the repalce it using replaceChild(https://plainjs.com/javascript/manipulation/replace-a-dom-element-36/):
var img = document.querySelector('.item img');
var video = document.createElement('video');
video.src = '';
img.parentNode.replaceChild(video, img);
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="" alt="" />
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
<div class="item">
<img src="" alt="" />
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
</div>
Try this, querySelector() selects only One selector, the first matched selector:
document.querySelector('.carousel-inner .item img').outerHTML ='<video><source src=""></video>';
You can use jQuery replaceWith() method to achieve this as below.. you can modify the selector as per your need
$('img:first').replaceWith( "<video><source src=""></video>" );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="" alt="">
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
<div class="item">
<img src="" alt="">
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
</div>
Related
I have made a slider using swiper.js, I want the gif to start animating from the beginning whenever we go to that slide.
I tried it using ajax load but the gif ain't reloading!
swiper.on('slideChange', function() {
$('#ts .gif').load(document.URL + '#ts .gif');
});
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide d-flex" id="da">
hello
</div>
<div class="swiper-slide" id="ts">
<div>
<h3><strong>Digital Agency Support</strong></h3>
</div>
<div class="gif">
<img src="dm.gif" alt="">
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
Sadly there is no way to interact with gifs as far as I know. One way to achieve what you want is to replace the gif with a static image, as long as it is not in focus. Something like:
swiper.on('slideChange', function() {
if (swiper.activeIndex == 1 ) {
document.getElementById("gif").src = "gif.gif";
}else{
document.getElementById("gif").src = "image.png";
}
});
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide d-flex" id="da">
hello
</div>
<div class="swiper-slide" id="ts">
<div>
<h3><strong>Digital Agency Support</strong></h3>
</div>
<div class="gif">
<img id="gif" src="image.gif" alt="">
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
I have some itemBox，I need to click itemBox and call the workItem which has same id number to SildeUp(the workItem is hidden at the beginning).
When one of workItem SlideUp，others would be hidden.
<div class="container">
<div class="row">
<div class="wrapper">
<div class="itemBox" id="item0">
<img src="img/default.jpg" alt="">
<div>titletitle</div>
</div>
<div class="itemBox" id="item1">
<img src="img/default.jpg" alt="">
<div>titletitle</div>
</div>
</div>
</div>
</div>
<div class="workContent">
<div class="workItem" id="work0" style="background-color:#000000;">
<h2>demo1</h2>
<img src="img/default.jpg" alt="">
<div>contentcontentcontentcontentcontentcontent</div>
<div>contentcontentcontentcontentcontentcontent</div>
<div>contentcontentcontentcontentcontentcontent</div>
<div>contentcontentcontentcontentcontentcontent</div>
</div>
<div class="workItem" id="work1" style="background-color:#333333;">
<a class="close" href="javascript:">x</a>
<h2>demo2</h2>
<img src="img/default.jpg" alt="">
<div>contentcontentcontentcontentcontentcontent</div>
<div>contentcontentcontentcontentcontentcontent</div>
<div>contentcontentcontentcontentcontentcontent</div>
<div>contentcontentcontentcontentcontentcontent</div>
</div>
</div>
How can I do this with javascript or Jquery?
this is simple (i used jQuery):
$(".itemBox").click (function(){
$("div[id^=work]").hide();
var id = $(this).attr("id");
var number = id.match(/item([0-9]+)/));
if (number[1])
$("div[id=work" + number[1] + "]").show();
})
I have 3 images which each have an onclick and a parameter passed. Here's the HTML:
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" onclick="myfunction(1);">
<img class="img-responsive" src="assets/placeholders/sliders/slider1.png" alt="" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" onclick="myfunction(2);">
<img class="img-responsive" src="assets/placeholders/sliders/slider2.png" alt="" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" onclick="myfunction(3);">
<img class="img-responsive" src="assets/placeholders/sliders/slider3.png" alt="" />
</div>
</div>
</div>
What I need to do is have a function which gets the img src value of the myfunction passed parameter. So for example:
myFunction(id) {
$('body').html(/* passed parameter's img src here */);
}
How can I do this?
You can pass this as a parameter to the function which will be a reference to the clicked div element. You can then get the child img and read the src attribute.
However a much better solution would be to use unobtrusive event handlers over outdated on* event attributes. Try this:
$('.thumbnail').click(function() {
var $thumb = $(this);
console.log($thumb.data('foo'));
console.log($thumb.find('img').attr('src'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" data-foo="1">
<img class="img-responsive" src="assets/placeholders/sliders/slider1.png" alt="" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" data-foo="2">
<img class="img-responsive" src="assets/placeholders/sliders/slider2.png" alt="" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" data-foo="3">
<img class="img-responsive" src="assets/placeholders/sliders/slider3.png" alt="" />
</div>
</div>
</div>
Onlcick of respective divs image src can be get using var imgSrc = "assets/placeholders/sliders/slider" + id + ".png"; and it can be used as per need.
Please check working snippet.
function myfunction(id) {
//Get image src on click on the respective divs
var imgSrc = "assets/placeholders/sliders/slider" + id + ".png";
console.log(imgSrc);
//$('body').html( passed parameter's img src here );
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" onclick="myfunction(1);"><img class="img-responsive" src="assets/placeholders/sliders/slider1.png" alt="" /></div>
</div>
</div>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" onclick="myfunction(2);"><img class="img-responsive" src="assets/placeholders/sliders/slider2.png" alt="" /></div>
</div>
</div>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" onclick="myfunction(3);"><img class="img-responsive" src="assets/placeholders/sliders/slider3.png" alt="" /></div>
</div>
</div>
Add an id attribute to your img tags and give them your id parameter.
<img id="1" ... />
<img id="2" ... />
<img id="3" ... />
In your script you can fetch them with jQuery.
myFunction(id) {
var src = $('#' + id).attr('src');
$('body').html(src);
}
However, there multiple ways to achieve this.
Using onclick attribute you can pass this keyword in myfunction which represents the current element, and then look for the src attribute.
function myfunction(e){
var src = $(e).find('img').attr('src');
alert(src);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" onclick="myfunction(this);"><img class="img-responsive" src="assets/placeholders/sliders/slider1.png" alt="" /></div>
</div>
</div>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" onclick="myfunction(this);"><img class="img-responsive" src="assets/placeholders/sliders/slider2.png" alt="" /></div>
</div>
</div>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" onclick="myfunction(this);"><img class="img-responsive" src="assets/placeholders/sliders/slider3.png" alt="" /></div>
</div>
</div>
Even though you can achieve the desired outcome, this way of using onclick attributes for Javascript is not a good practice. Javascript developers recommend you should always put javascript entirely in a separate file.
$(document).ready(function(){
$('.thumbnail').on('click', function(){
var src = $(this).find('img').attr('src');
alert(src);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" ><img class="img-responsive" src="assets/placeholders/sliders/slider1.png" alt="" /></div>
</div>
</div>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" ><img class="img-responsive" src="assets/placeholders/sliders/slider2.png" alt="" /></div>
</div>
</div>
<div class="row">
<div class="col-md-12 thumb">
<div class="thumbnail" ><img class="img-responsive" src="assets/placeholders/sliders/slider3.png" alt="" /></div>
</div>
</div>
I have a 3 column div with multiple rows. What is the most dynamic way to extract content from the first div and append/prepend this to the 3rd div - Ensuring that all following divs follow along.
here is my example code:
<div class="content">
<div class="item">
<div class="col1">
<div class="img1">
<img src="img_in_first_col">
</div>
</div>
<div class="col2"></div>
<div class="col3">
<div class="img2">
<img src="img_in_third_col">
</div>
</div>
</div>
<div class="item">
<div class="col1">
<div class="img1">
<img src="img_in_first_col">
</div>
</div>
<div class="col2"></div>
<div class="col3">
<div class="img2">
<img src="img_in_third_col">
</div>
</div>
</div>
<div class="item">
<div class="col1">
<div class="img1">
<img src="img_in_first_col">
</div>
</div>
<div class="col2"></div>
<div class="col3">
<div class="img2">
<img src="img_in_third_col">
</div>
</div>
</div>
</div>
I've tried using something along the lines of:
$('.item .col1 .img1').each(function(){
$(this).prependTo('.item .col3 .img2')
})
but what i get is all the images being added to all the rows.
Please help! thanks in advance
Should be as simple as this:
$(".col1").each(function (index, element) {
$(this).closest(".col3").prepend($(this).contents());
});
You could use this to insert column 1 after column 3:
$('.col1').each(function(){
$(this).insertAfter($(this).siblings('.col3'));
});
... or before column 3:
$('.col1').each(function(){
$(this).insertBefore($(this).siblings('.col3'));
});
Used jQuery functions:
insertAfter
insertBefore
siblings
i.e. two carousels in the same location but one is always hidden, with two buttons (anchors?) above to turn either one on:
<div class="row">
<div class="col-lg-12">
<div class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div id="floorsCarousel" class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://lorempixel.com/1400/600/sports/1/" alt="Chania">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/2/" alt="Chania">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/3/" alt="Flower">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/4/" alt="Flower">
</div>
</div>
</div>
My JS does not appear to be working, this is what I have in my JS file:
var floorsCarousel = document.getElementById("floorsCarousel");
var spaceCarousel = document.getElementById("spaceCarousel");
function floorPlans() {
if (floorsCarousel.style.display==="none") {
floorsCarousel.style.display="inherit";
}
if (spaceCarousel.style.display!=="none") {
spaceCarousel.style.display="none";
}
return false;
}
function spacePlans() {
if (spaceCarousel.style.display==="none") {
spaceCarousel.style.display="inherit";
}
if (floorsCarousel.style.display!=="none") {
floorsCarousel.style.display="none";
}
return false;
}
JSFiddle
I have created a solution for you that does what you need here. I've created "buttons" to toggle which carousel you wish to open and wrapped the carousel's in a div with the attr's id="Car-#" class="Car-toggle"
Html
<div class="row">
<button class="toggleCar" data-for="Car-1">Toggle 1</button>
<button class="toggleCar" data-for="Car-2">Toggle 2</button>
<div class="col-lg-12">
<div id="Car-1" class="Car-toggle">carousel One
<div class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div id="floorsCarousel" class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://lorempixel.com/1400/600/sports/1/" alt="Chania">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/2/" alt="Chania">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/3/" alt="Flower">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/4/" alt="Flower">
</div>
</div>
</div>
</div>
<div id="Car-2" class="Car-toggle">carousel Two
<div class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div id="floorsCarousel" class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://lorempixel.com/1400/600/sports/1/" alt="Chania">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/2/" alt="Chania">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/3/" alt="Flower">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/4/" alt="Flower">
</div>
</div>
</div>
</div>
</div>
</div>
Javascript (JQuery since your using bootstrap)
$('.toggleCar').click(function(){
var CarWrapperName=$(this).attr('data-for');
$('.Car-toggle').hide();
$('#'+CarWrapperName).show();
});
//Hide All Toggles and Show Default
$('.Car-toggle').hide();
$('#Car-1').show();