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>
Related
I'm using angular 5 for displaying pages that have a lot of images with high res, and it takes too long to load.
What I want to do is to make a splash screen, a div that will cover the full screen, and after all the images finish loading it will disappear.
How and where do I implement this in angular 5?
window.onload = someFunction; // is not working well
page.component.html:
<div id="page" class="page">
<div id="splash"></div>
<div id="home-page">
<div class="container d-none d-lg-block">
<img src="assets/images/home/line_with_bird.png" alt="">
<div class="row">
<div class="col-3 ad-paper">
<img src="assets/images/home/paper.png" class="" alt="">
</div>
<div class="col-2">
<img id="arrow-word" src="assets/images/arrow_word.png" alt="">
<img id="ladder" src="assets/images/ladderLong.png" alt="">
</div>
<div class="col-6 offset-1 c2">
<div id="window"></div>
<div class="smicos">
<app-socialmedia style="width: 641px;"></app-socialmedia>
</div>
</div>
</div>
</div>
</div>
page.component.ts
ngOnInit() {
function splash() {
console.log('tttttttttttttttttttttttttttttttttttttttttt');
document.getElementById('splash').style.display = 'none';
document.getElementById('window').classList.add('window-animation');
}
window.onload = splash;
}
Do not hide your splash screen on ngOnInit. Instead do this:
Keep count of images you are showing in controller.
totalImages = 20;
Keep a load handler on each image;
<img (load)='checkAllLoaded()'>
In checkAllLoaded function, check if all images are loaded:
checkAllLoaded() {
this.totalImages = this.totalImages - 1;
if(this.totalImages === 0) {
document.getElementById('splash').style.display = 'none';
document.getElementById('window').classList.add('window-animation');
}
}
Set a div with *ngIf on a property which will turn to true only when the image is loaded.
<div class="splash" *ngIf="!loaded"></div>
<img [src]="img" (load)='loaded=true'>
DEMO
I am using the swiper in the jquery version from idangerous. I load and initialize it with require.js like this:
define(['jquery','swiper'],function($){
$( document ).ready(function() {
var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
direction: 'horizontal',
loop: true,
speed:100,
// If we need pagination
// Navigation arrows
nextButton: '.m-stage-button-next',
prevButton: '.m-stage-button-prev',
});
});
});
<div style="width: auto; height: 300px;" class="swiper-wrapper swiper-container">
<div class="m-stage-slide swiper-slide">
<a href="#">
<img class="m-stage-slide-image" src="../img/slide1.jpg" alt="">
</a>
<div class="m-stage-slide-content">
<div class="m-stage-slide-text">
<h1 class="m-stage-slide-heading">{{sContent.headline}}</h1>
<span class="m-stage-slide-tagline">{{sContent.text}}</span>
</div>
<span class="c-btn c-btn--tertiary c-btn--arrow">{{sContent.btn_txt}}</span>
</div>
</div>
<div class="m-stage-slide swiper-slide">
<a href="#">
<img class="m-stage-slide-image" src="../img/slide2.jpg" alt="">
</a>
<div class="m-stage-slide-content">
<div class="m-stage-slide-text">
<h1 class="m-stage-slide-heading">{{sContent.headline}}</h1>
<span class="m-stage-slide-tagline">{{sContent.text}}</span>
</div>
<span class="c-btn c-btn--tertiary c-btn--arrow">{{sContent.btn_txt}}</span>
</div>
</div>
<div class="m-stage-button-prev"></div>
<div class="m-stage-button-next"></div>
</div>
(Those {{}} thingis are right now just placeholders)
Everything is loaded and rendered fine, but as soon as I try to swipe, I get
Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'
Any hints?
Instead of this:
<div style="width: auto; height: 300px;" class="swiper-wrapper swiper-container">
</div>
Try separating out your DIV's, with the swiper container on the outside:
<div style="width: auto; height: 300px;" class="swiper-container">
<div class="swiper-wrapper"></div>
</div>
Check the quick start guide (point 3) for an example of the correct HTML markup for SwiperJS:
http://www.idangero.us/swiper/get-started/
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
In my case, it happens in this code/scenario (I use swiperContainer - HTMLElement - more than one time ==> logos in this example).
<!-- error code use logos twice -->
<div class="swiper-container logos">
<div class="swiper-wrapper logos">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
</div>
</div>
var mySwiper = new Swiper('.logos', {
speed: 400
});
Throw this error:
Very easy to fix this issue (Remove logos from this element <div class="swiper-wrapper logos">).
I don't exactly know, what the failure was. I switched to Swiper 2.7.x and this worked without a single problem.
Seems like Swiper 3.x and Require with almond have some problems at the moment.
I am using the swiper from idangerous in an Angular 1.5 application. I got the same error when swiping slides with mouse, no error changing slides by clicking on arrows.
For me this was a timing issue. I solved it by moving the init of the swiper var mySwiper = new Swiper('.swiper-container', {... to where the view was done rendering.
The quickest solution for this is to remove the CLASS 'logos' and add it as an ID 'logos' to the same element. After that select the ID as the selector in your javascript file.
Eg: HTML
<div id="logos" class="swiper-container"> <!-- This line is edited -->
<div class="swiper-wrapper logos">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
</div>
</div>
Eg: JavaScript
//.logo changed to #logo on the next line
var mySwiper = new Swiper('#logos', {
speed: 400
});
This happened to me when i tried to use some code provided from a tutorial...I checked the official docs and used their example and it worked without problems
https://swiperjs.com/get-started
i am trying to dynamically add images in the slider called owl slider.
The problem is that i want to clear the divs inside the
.owl-wrapper
div and then add new items on a click.
The original code is
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item">
<img src="../img/car1.jpg" alt="The Last of us">
</div>
<div class="item">
<img src="../img/car2.jpg" alt="The Last of us">
</div>
<div class="item">
<img src="../img/car3.jpg" alt="The Last of us">
</div>
<div class="item">
<img src="../img/car4.jpg" alt="The Last of us">
</div>
</div>
Now i did this
$('.singleNewsItem').click(function () {
$('#owl-demo').append('<div class="item"><img src="../img/trac1.jpg"></div>');
});
});
Somehow its adding the image outside the main slider.
Please help .
thanks.
Try this:
// make sure it's initialized:
// $("#owl-demo").owlCarousel();
$('.singleNewsItem').click(function () {
// clean the container:
$('#owl-demo').text('');
var img = '<div class="item"><img src="../img/trac1.jpg"></div>';
$("#owl-demo").data('owlCarousel').addItem(img);
});
There is a demo with owl manipulation examples.
Demo with transistions.
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.
On the initial page load my iosSlider has the first tab displayed on the first slide, however when I click any other tab it goes to the last slide within that group. Any ideas how to make it go to the first slide?
My HTML code (on jsfiddle as its kinda long for this page)
http://jsfiddle.net/Ky8am/
My JS code
/* main carousel */
$( "#mainCarousel .iosslider" ).iosSlider( {
autoSlide: true,
autoSlideTimer: 10000,
desktopClickDrag: true,
navSlideSelector: $( "#mainCarousel .iosslider-indicators > ul > li" ),
onSlideChange: mainCarouselSlideChange,
onSliderLoaded: mainCarouselSliderLoaded,
snapToChildren: true,
startAtSlide: 1,
} );
Depends on your mark up. So if you have something like
<div class='fluidHeight'>
<div class='sliderContainer'>
<div class='iosSlider'>
<div class='slider'>
<div class='item' id="s_1" number="1"><img src = 'http://lorempixel.com/800/500/sports/1/' /></div>
<div class='item' id="s_2" number="2"><img src = 'http://lorempixel.com/800/500/sports/2/' /></div>
<div class='item' id="s_3" number="3"><img src = 'http://lorempixel.com/800/500/sports/3/' /></div>
<div class='item' id="s_4" number="4"><img src = 'http://lorempixel.com/800/500/sports/4/' /></div>
<div class='item' id="s_5" number="5"><img src = 'http://lorempixel.com/800/500/sports/5/' /></div>
<div class='item' id="s_6" number="6"><img src = 'http://lorempixel.com/800/500/sports/6/' /></div>
</div>
</div>
</div>
</div>
You may try to use this code:
$( ".item" ).click(function() {
$('.iosSlider').iosSlider('goToSlide', 1)
});