We Keep Coding

hasClass on Bootstrap 4 carousel not working

I'm building a basic narrowcasting system with a Bootstrap 4 carousel. Some slides contain images, others contain a Youtube video.
When a div contains a Youtube video, I want to autoplay it when the slide becomes active and stop it when the slide isn't active. But somehow the hasClass function does not recognize the 'active' class on my div with id="video-1".
<script type="text/javascript">
$( document ).ready(function() {
console.log( "document loaded" ); // added for testing
if ($("#video-1").hasClass('active')) {
console.log( "video loaded" ); // added for testing
$("#ytplayer-1")[0].src += "&autoplay=1";
} else {
$("#ytplayer-1")[0].src += "&autoplay=0";
}
});
</script>
This is my html:
<div id="narrowcasting-carousel" class="carousel slide h-100" data-ride="carousel" data-interval="600000">
<div class="carousel-inner h-100">
<div class="carousel-item h-100 item-0" id="no-video" data-interval="10000">
<img src="/images/image.png" />
</div>
</div>
<div class="carousel-inner h-100">
<div class="carousel-item h-100 item-1 active" id="video" data-interval="20000">
<iframe id="ytplayer-1" width="100%" height="100%" src="https://www.youtube.com/embed/[CODE_HERE]?controls=0&loop=0&rel=0&autoplay=0" frameborder="0" allowfullscreen="" allow="autoplay">
</iframe>
</div>
</div>
<div class="carousel-inner h-100">
<div class="carousel-item h-100 item-2" id="no-video" data-interval="5000">
<img src="/images/image.png" />
</div>
</div>
</div>
It does work when I use a onClick event or a keystroke event. But that's obviously not what I need.

Try with this code
<script type="text/javascript">
$( document ).ready(function() {
console.log( "document loaded" ); // added for testing
if ($("iframe").parent().hasClass('active')) {
console.log( "video loaded" ); // added for testing
$("#ytplayer-1")[0].src += "&autoplay=1"; // You can refactor this line
} else {
$("#ytplayer-1")[0].src += "&autoplay=0";
}
});
</script>

Multiple Toggle IDs - Close One When Another Open

I have a page with lots of toggle boxes. When one closes I'd like another to open. Because of the layout of the design there are five hyperlinks in a row and then five hidden boxes below which toggle (so I've used unique ID's for the divs and buttons) - there's a total of about 40 of these rows so it's quite long - probably something more efficient available? However, now I'd like to close one, when another is toggled open. I've tried to find a solution but can't seem to. Here is my JQuery:
$(window).load(function(){
$( "#button1" ).click(function() {
$( "#item1" ).slideToggle();
});
$( "#button2" ).click(function() {
$( "#item2" ).slideToggle();
});
$( "#button3" ).click(function() {
$( "#item3" ).slideToggle();
});
});
and here is my HTML:
<div class="row">
<div class="onefifth"><a id="button1" href="#"><img src="assets/01.jpg"></a></div>
<div class="onefifth"><a id="button2" href="#"><img src="assets/02.jpg"></a></div>
<div class="onefifth"><a id="button3" href="#"><img src="assets/03.jpg"></a></div>
</div>
<div id="item1" style="display: none;">
BOX CONTENT
</div>
<div id="item2" style="display: none;">
BOX CONTENT 2
</div>
<div id="item3" style="display: none;">
BOX CONTENT 3
</div>
Any help would be greatly appreciated! Quite new to JS and struggling a bit...

One nice approach that will give you more control over the elements is avoid the use of hardcoded ID's to refer your buttons, instead use the class of the parent you already have; I suggest on your <a> elements use the href attribute to store which target you want to open.
To close the other elements you can slideUp() all #item... containers or use a flag like a active class.
$(document).ready(function() {
$(".onefifth").on('click','a',function() {
var targ = $(this).attr('href');
$('[id^="item"]').slideUp();
$(targ).slideToggle();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="onefifth">
<img src="assets/01.jpg">
</div>
<div class="onefifth">
<img src="assets/02.jpg">
</div>
<div class="onefifth">
<img src="assets/03.jpg">
</div>
</div>
<div id="item1" style="display: none;">
BOX CONTENT
</div>
<div id="item2" style="display: none;">
BOX CONTENT 2
</div>
<div id="item3" style="display: none;">
BOX CONTENT 3
</div>
Option 2
If you can be sure the order of your buttons and the order of your containers will match then you can simplify more this with the use of a common class on the containers no ID's.
$(document).ready(function() {
$(".onefifth").on('click', 'a', function(e) {
e.preventDefault();
$('.content').slideUp().eq($(this).parent().index()).slideDown();
})
});
.content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="onefifth">
<img src="assets/01.jpg">
</div>
<div class="onefifth">
<img src="assets/02.jpg">
</div>
<div class="onefifth">
<img src="assets/03.jpg">
</div>
</div>
<div class="content">
BOX CONTENT
</div>
<div class="content">
BOX CONTENT 2
</div>
<div class="content">
BOX CONTENT 3
</div>

Add a class to all your divs likes this:
<div class="contentBox" id="item1" style="display: none;">
BOX CONTENT
</div>
<div class="contentBox" id="item2" style="display: none;">
BOX CONTENT 2
</div>
<div class="contentBox" id="item3" style="display: none;">
BOX CONTENT 3
</div>
Then you can just just do a close on all of those before you open the new ones
$(window).load(function(){
$( "#button1" ).click(function() {
closeOpenContent();
$( "#item1" ).slideToggle();
});
$( "#button2" ).click(function() {
closeOpenContent();
$( "#item2" ).slideToggle();
});
$( "#button3" ).click(function() {
closeOpenContent();
$( "#item3" ).slideToggle();
});
});
function closeOpenContent(){
$(".contentBox:visible").slideToggle();
}

jQuery Show 1 Image on Load and Hide Others on Mouseover

Trying to get one image to load on page load and then hide the other three images. Then on mouseover hide the other three and show the appropriate image on hover. On load it works perfectly, but on hover all of the images disappear. Below is the code.
<!-- PHONE IMAGE -->
<div class="col-md-4 col-sm-4 phone-one">
<div id="blocrst-1" class="phone-image wow bounceIn" data-wow-offset="120" data-wow-duration="1.5s">
<img src="/images/single-iphone.png" alt="" data-animation="pulse" data-animation-delay="800" />
</div>
</div>
<!-- PHONE IMAGE -->
<div class="col-md-4 col-sm-4 phone-two">
<div id="blocrst-2" class="phone-image wow bounceIn" data-wow-offset="120" data-wow-duration="1.5s">
<img src="/images/single-iphone.png" alt="" data-animation="pulse" data-animation-delay="800" />
</div>
</div>
<!-- PHONE IMAGE -->
<div class="col-md-4 col-sm-4 phone-three">
<div id="blocrst-3" class="phone-image wow bounceIn" data-wow-offset="120" data-wow-duration="1.5s">
<img src="/images/single-iphone.png" alt="" data-animation="pulse" data-animation-delay="800" />
</div>
</div>
<!-- PHONE IMAGE -->
<div class="col-md-4 col-sm-4 phone-four">
<div id="blocrst-4" class="phone-image wow bounceIn" data-wow-offset="120" data-wow-duration="1.5s">
<img src="/images/venue-info.png" alt="" data-animation="pulse" data-animation-delay="800" />
</div>
</div>
jQuery:
<script>
jQuery().ready(function(){
$('.phone-two').hide();
$('.phone-three').hide();
$('.phone-four').hide();
$(function() {
$("#btnBrowseEvents").mouseover(function() {
$("#blocrst-1").removeClass().addClass("phone-image wow fadeInRight");
$('.phone-two').hide();
$('.phone-three').hide();
$('.phone-four').hide();
});
});
$(function() {
$("#btnBottleService").mouseover(function() {
$("#blocrst-2").removeClass().addClass("phone-image wow fadeInRightBig");
$('.phone-one').hide();
$('.phone-three').hide();
$('.phone-four').hide();
});
});
$(function() {
$("#btnConnect").mouseover(function() {
$("#blocrst-3").removeClass().addClass("phone-image wow fadeInLeft");
$('.phone-one').hide();
$('.phone-two').hide();
$('.phone-four').hide();
});
});
$(function() {
$("#btnYourDigitalHost").mouseover(function() {
$("#blocrst-4").removeClass().addClass("phone-image wow fadeInLeft");
$('.phone-one').hide();
$('.phone-two').hide();
$('.phone-three').hide();
});
});
});//end ready
</script>

You first do
$('.phone-two').hide();
$('.phone-three').hide();
$('.phone-four').hide();
but subsequently never call show on any of these elements. The
$("#blocrst-2").removeClass().addClass("phone-image wow fadeInRightBig");
affects the img elements, but the parents are still hidden. Adding a
$('.phone-one').show(); in your mouseover functions will fix your problem. Remember to change the phone-one to match the class of the div you're trying to show (you should really be using an id for these divs).
As an aside, take a look at the developer tools in chrome or firefox. It'll help you see how your javascript affects your DOM so you can track down issues more easily in the future.

Jquery slider in HTML5

I have 3 images-myimage1,myimage2 and myimage3. When i click on each image i get a set of slides-slider,slider2 and slider3 which in turn is in container1,container2 and container2 respectively.This is my HTML:
<div id="right">
<img id="myimage1" onclick="changeimage1()" src="images/build_i.png" />
<img id="myimage2" onclick="changeimage2()" src="images/apply_i.png" />
<img id="myimage3" onclick="changeimage3()" src="images/learn_i.png" />
</div>
<div id="PicInRight"> <div id="container1" > <div id="slider" > <ul><li><img id="Img" src='slide_intro.png'/></li></ul> </div></div> <div id="container2"> <div id="slider2" > <ul><li><img id="Img" src='slide1.png' /></li></ul> </div></div> <div id="container3"> <div id="slider3" > <ul><li><img id="Img" src='slide1.png' /></li></ul> </div> </div></div>
In the head section, i have hidden the containers which have the slides in them.
<script type="text/javascript">
$(document).ready(function(){
$("#container1").hide();
$("#container2").hide();
$("#container3").hide();
});
</script>
In my Javascript the on click function goes like this:
function changeimage1()
{
$("#container2").hide();
$("#container3").hide();
$("#container1").show();
$("#slider").easySlider({
auto: false,
continuous: true
});
}
and so on for myimage1 and myimage2.
function changeimage2()
{ $("#container1").hide();
$("#container3").hide();
$("#container2").show();
$("#slider2").easySlider({
auto: false,
continuous: true
});
}
function changeimage3()
{
$("#container1").hide();
$("#container2").hide();
$("#container3").show();
$("#slider3").easySlider({
auto: false,
continuous: true
});
}
Now, this works fine only if i click on myimage3 first. The sliders show and work fine.When i click on image1 and image2 later they work too.
But if i click on myimage1 first , only the first slider work.when i click on myimage2 and myimage3 later, the sliders in container2 and 3 only show but do not change over on click of next and previous!
Similar case if i click on myimage2 first.
Why is this happening and what should i do to correct it?

Show specific content for each div using Fancybox,

I am trying to load a specific sibling for each div using fancybox.
E.g:
<div id ="content">
<div class="item1">
<div class="pop-ups"><span>click</span></div>
<div class="hidden"><span>content for item 1</span></div>
</div>
<div class="item2">
<div class="pop-ups"><span>click</span></div>
<div class="hidden"><span>content for item 2</span></div>
</div>
<div class="item3">
<div class="pop-ups"><span>click</span></div>
<div class="hidden"><span>content for item 3</span></div>
</div>
<div class="item4">
<div class="pop-ups"><span>click</span></div>
<div class="hidden"><span>content for item 4</span></div>
</div>
</div>
I tried to do the config using the property Content, but not got it, is it possible to get each hidden for each specific item ?

You can use below code:
$(function(){
$("div.pop-ups span").click(function(){
$.fancybox({ content: $(this).parent().next().html() });
});
});
This will show the content of relevant div in fancybox.

You can call this function to open some specific div content in a fancybox.
function OpenDiv(divIDtoopen) //eg. divIDtoopen= #divID //# is must to be prepended to divID for selection
{
$(document).ready(function ()
{
$.fancybox.open(
{
href: divtoopen
}
);
}
);
}