We Keep Coding

jquery or js to prevent body scroll on ios

I've been unsuccessful in trying out the answers in related questions so any help would be much appreciated.
I have a modal which displays a form in an iframe - this is scrollable. The issue occurs on ios where the body scrolls underneath instead of the iframe. I need to prevent the body from scrolling and allow the iframe to scroll.
The suggested fix from dementic doesn't work properly as the body underneath the modal still scrolls unless you touch scroll the modal in exactly the right place but this is very temperamental.
Modal:
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content bmd-modalContent">
<div class="modal-body">
<div class="close-button">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="embed-responsive embed-responsive-16by9">
<iframe id="formIframe" class="embed-responsive-item" frameborder="0"></iframe>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
jQuery/js:
(function($) {
$.fn.bmdIframe = function( options ) {
var self = this;
var settings = $.extend({
classBtn: '.bmd-modalButton',
defaultH: 360
}, options );
$(settings.classBtn).on('click', function(e) {
var allowFullscreen = $(this).attr('data-bmdVideoFullscreen') || false;
var url = window.location.href;
var fieldId = "Form_Source_URL";
var trackingURL = $(this).attr("data-bmdSrc") + '?' + fieldId + '=' + url;
var dataVideo = {
'src': trackingURL,
'height': $(this).attr('data-bmdHeight') || settings.defaultH,
'width': $(this).attr('data-bmdWidth') || settings.defaultW
};
if ( allowFullscreen ) dataVideo.allowfullscreen = "";
$(self).find("iframe").attr(dataVideo);
});
this.on('hidden.bs.modal', function(){
$(this).find('iframe').html("").attr("src", "");
});
return this;
};
})(jQuery);
jQuery(document).ready(function(){
jQuery("#myModal").bmdIframe();
});
//attempted fix to stop body scrolling
var iframe = document.getElementById('formIframe');
iframe.addEventListener('touchmove', function(e) {
e.preventDefault();
}, false);

In project I used this was for Semantic UI modals, and even reused same functionality to help with a custom Coveo modal/popup.
Here is the reusable JQuery function:
// Definite way of removing body scrollbar (mainly for iOS).
forceRemoveBodyScrollbar = function(removeScrollbar) {
bodyScrollPositionBeforeScrollbarRemoved;
if (removeScrollbar) {
bodyScrollPositionBeforeScrollbarRemoved = $(window).scrollTop();
// Add body class that prevents scrolling behind pop up.
$('body').addClass('force-remove-body-scrollbar').css('top', '-' + bodyScrollPositionBeforeScrollbarRemoved + 'px');
} else {
// Remove attributes used to prevent scrolling of content behind Coveo pop up.
$('body').removeClass('force-remove-body-scrollbar').removeAttr('style');
// Scroll back to original top position prior to clicking Filters button.
$(window).scrollTop(bodyScrollPositionBeforeScrollbarRemoved);
}
}
CSS to help with the class that is added/removed:
body.force-remove-body-scrollbar {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: auto;
transition: none;
}
Now, where ever you are executing code to OPEN modal just add forceRemoveBodyScrollbar(true);
Example: if modal opens on click of a button:
$('.myOpenModalButton').on('click', function() {
forceRemoveBodyScrollbar(true);
// Other Modal related JS.
}
And where ever you are executing code to CLOSE modal just add forceRemoveBodyScrollbar(false);
Example: can bind to click event of close button and dark background that appears behind the modal like so:
$('.modalCloseButton, .modalDarkBackground').bind('click', function() {
forceRemoveBodyScrollbar(false);
});

Carousel Slider with YouTube videos

Is it possible to use JQuery to build a youtube video slider? I'd like to display a few ones I uploaded.
Found some answers but made with specific frameworks, if it's possible I'd like to stick with something simple.
I found this code very helpful but I can't seem to make it work.
JSFiddle
$('.play-button').on('click', function () {
$(this).hide();
$(this).parent().fadeOut();
$(this).parent().siblings('.slider-video')[0].play();
});
$('.slider-video').on('play', function () {
$(this).attr('controls', '1');
});
// Additionnal code for the slider
var pos = 0,
slides = $('.slide'),
numOfSlides = slides.length;
function nextSlide(){
stopCurrentVideo();
slides.eq(pos).animate({left:'-100%'},500);
pos = pos >= numOfSlides-1 ? 0 : ++pos;
slides.eq(pos).css({left:'100%'}).animate({left:0},500);
}
function previousSlide(){
stopCurrentVideo();
slides.eq(pos).animate({left:'100%'},500);
pos = pos == 0 ? numOfSlides-1 : --pos;
slides.eq(pos).css({left:'-100%'}).animate({left:0},500);
}
function stopCurrentVideo(){
$('.slider-video:eq('+pos+')').load().removeAttr('controls')
.siblings('.overlay-content').show().find('.play-button').show();
}
$('.left').click(previousSlide);
$('.right').click(nextSlide);

You can achieve this with the YouTube iFrame API:
https://developers.google.com/youtube/iframe_api_reference
This API becomes available when you append enablejsapi=1 to the URLs of YouTube video embeds.
In order to access the controls for stopping videos, for each video you need to access an instance of YT.Player. For each iFrame, I created an instance of YT.Player, and attached it directly to the slide object as a parameter called video.
(Note that many developers say you shouldn't attach data directly to DOM objects, but I did so here because it allowed me to more closely match your original code.)
YT.Player can be accessed through a special function that must be called onYouTubeIframeAPIReady, which I could only get to work if it was outside of $(document).ready.
I can't put my solution on JSFiddle because the iFrames don't play nice, so here's my implementation on GitHub:
http://robertakarobin.github.io/jquery-video-slider
https://github.com/robertakarobin/jquery-video-slider
Here are the relevant bits:
HTML:
<div class="video-slider">
<!-- SLIDE 1 -->
<div class="slide">
<iframe class="video" src="https://www.youtube.com/embed/YE7VzlLtp-4?ecver=2&enablejsapi=1"></iframe>
</div>
<!-- SLIDE 2 -->
<div class="slide">
<iframe class="video" src="https://www.youtube.com/embed/YE7VzlLtp-4?ecver=2&enablejsapi=1"></iframe>
</div>
<!-- END OF SLIDES -->
<div class="slide-arrow left"></div>
<div class="slide-arrow right"></div>
</div>
JavaScript:
$(document).ready(function () {
var pos = 0,
slides = $('.slide'),
numOfSlides = slides.length;
function nextSlide() {
// `[]` returns a vanilla DOM object from a jQuery object/collection
slides[pos].video.stopVideo()
slides.eq(pos).animate({ left: '-100%' }, 500);
pos = (pos >= numOfSlides - 1 ? 0 : ++pos);
slides.eq(pos).css({ left: '100%' }).animate({ left: 0 }, 500);
}
function previousSlide() {
slides[pos].video.stopVideo()
slides.eq(pos).animate({ left: '100%' }, 500);
pos = (pos == 0 ? numOfSlides - 1 : --pos);
slides.eq(pos).css({ left: '-100%' }).animate({ left: 0 }, 500);
}
$('.left').click(previousSlide);
$('.right').click(nextSlide);
})
function onYouTubeIframeAPIReady() {
$('.slide').each(function (index, slide) {
// Get the `.video` element inside each `.slide`
var iframe = $(slide).find('.video')[0]
// Create a new YT.Player from the iFrame, and store it on the `.slide` DOM object
slide.video = new YT.Player(iframe)
})
}

The slider seems to be working fine. Just change the code from Video tag to YouTube Embed Code and you have a Youtube player Carousel.
<div class="video-slider">
<!-- SLIDE 1 -->
<div class="slide">
<div style="position:relative;height:0;padding-bottom:56.28%"><iframe src="https://www.youtube.com/embed/YE7VzlLtp-4?ecver=2" style="position:absolute;width:100%;height:100%;left:0" width="640" height="360" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
</div>
<!-- SLIDE 2 -->
<div class="slide">
<div style="position:relative;height:0;padding-bottom:56.28%"><iframe src="https://www.youtube.com/embed/EngW7tLk6R8?ecver=2" style="position:absolute;width:100%;height:100%;left:0" width="640" height="360" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
</div>
<!-- END OF SLIDES -->
<div class="slide-arrow left"></div>
<div class="slide-arrow right"></div>
</div>
You can get the YouTube Embed Code by right clicking on the video on youtube.com and select Copy Embed Code, and use that code in the slider.
Hope it helps.
I have made a fork of the author fiddle and made the changes. JSFiddle

Stop slider when embedded movie plays.

I have a Slider that I have modifed the code so it stops on mouseover. So far so good. but.. As you can see in the html I have one slider with en embedded video.
My problem is that even though the slider now stops on hover, I also want it to stop when I play an embedded video. Preferably, but not necessary, resume the slider when the video ends.
Javascript:
var VSliderHome = true;
$("#SliderHome").hover(function() {
VSliderHome = false;
}, function() {
VSliderHome = true;
});
function autoplaySlider(length) {
if (VSliderHome) {
if (visibleSlidePosition < length - 1) {
nextSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, visibleSlidePosition + 1);
visibleSlidePosition += 1;
} else {
prevSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, 0);
visibleSlidePosition = 0;
}
updateNavigationMarker(navigationMarker, visibleSlidePosition + 1);
updateSliderNavigation(sliderNav, visibleSlidePosition);
}
}
HTML:
<slider.body>
<section class="cd-hero">
<ul id="SliderHome" class="cd-hero-slider autoplay">
<li class="selected">
<div class="cd-full-width" style="background-image: url(img/fileupload/zlide.jpg)">
<div class="textcont-left">
<h2>text</h2>
<p>text</p>
Köp Nu
</div>
</div>
</li>
<li style="background-image: url(img/fileupload/smatrphones.jpg)">
<div class="cd-half-width cd-img-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/fXu2fWz" frameborder="0" allowfullscreen></iframe>
</div>
<div class="cd-half-width">
<div class="textcont-right">
<h2>text</h2>
<p>text</p>
Mer Information
</div>
</div>
</li>
</section>
</body>

Add an on-click function in the current function of the slider... Similar to the on-hover,however do it on-click, so that when you click in the area of the PLAY it will effect the slider... even though you're clicking play and the click has nothing to do with the slider, the fact that the video is on the slider and the slider is awaiting an on-click function result... works.

Use the video event play/pause to change your variable
$('video').on('play pause', function(e){
VSliderHome = e.type === 'pause';
})

You need to listen for events from the video and respond accordingly. You can see the details of how to do this in the YouTube Player API Reference.
As a quick example, you might want something like this:
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
// stop slider
} else if (done) {
// start slider
}
}

Twitter Bootstrap Modal Event Not Fired When Modal is Shown

According to the docs:
http://getbootstrap.com/javascript/#modals
It should fire the methods "show.bs.dropdown" and "shown.bs.dropdown". But it doesn't:
http://jsfiddle.net/mQunq/3/
HTML:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">Hello world</div>
</div>
</div>
jQuery:
// show.bs.modal doesn't work either
$('#myModal')
.modal('show')
.on('show.bs.modal', function() {
alert('shown baby!');
});

Youe need first register event then trigger it
$('#myModal')
.on('show.bs.modal', function() {
alert('shown baby!');
}).modal('show');
jsfiddle

When it happens
Event shown.bs.modal is not fired when modal has also class "fade". Whereas show.bs.modal always works.
See https://github.com/twbs/bootstrap/issues/11793
HTML:
<div class="modal fade" id="first" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">Hello world from first modal</div>
</div>
</div>
<div class="modal" id="second" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">Hello world from second modal</div>
</div>
</div>
jQuery:
$('.modal').on('shown.bs.modal', function() {
//fired only in second modal
console.info('shown.bs.modal');
});
$('.modal').on('show.bs.modal', function() {
//fired always
console.info('show.bs.modal');
});
Solution
For bootstrap v3.3.6 replace line 1010 with:
that.$element // wait for modal to slide in
What is the problem
Look at lines 1006-1015:
var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })
transition ?
that.$dialog // wait for modal to slide in
.one('bsTransitionEnd', function () {
that.$element.trigger('focus').trigger(e)
})
.emulateTransitionEnd(Modal.TRANSITION_DURATION) :
that.$element.trigger('focus').trigger(e)
Without transition (no fade class) the event e is triggered right away (on that.$element).
With transition, I'm not sure why exactly, but somehow the bsTransationEnd event from function emulateTransitionEnd is not handled by that.$dialog.one(). But with that.$element, everything seem to work.

Similar thing happened to me and I have solved using setTimeout.
Bootstrap is using the following timeout to complete showing:
c.TRANSITION_DURATION=300,c.BACKDROP_TRANSITION_DURATION=150,
So using more than 300 must work and for me 200 is working:
$('#myModal').on('show.bs.modal', function (e) {
setTimeout(function(){
//Do something if necessary
}, 300);
})

you forgot the "n" on shown
$(document).ready(function(){
$('#myModal')
.modal('show')
.on('shown.bs.modal', function() {
alert('shown baby!');
});
});

Use document instead of your custom selector. Both shown.bs.modal and show.bs.modal work just fine
$(document).on('shown.bs.modal', '.modal', function() {
alert();
});

In case someone stumbles upon this problem, make sure you hook the on hidden / shown event before firing the toggle of the modal. That is, declare this:
$("#selector").on("hidden.bs.modal", function () {
// do the right thing
});
Before calling the toggle of the modal, e.g.:
("#selector").modal("toggle");
I know this is basic, but in a convoluted code it happens.

I found a solution that works with .fade transitions:
$(document).on($.support.transition.end, '.modal.fade.in', function(e) {
var $target = $(e.target);
if ($(e.target).is(".modal-dialog")) {
console.log("Modal Shown")
}
});
$(document).on($.support.transition.end, '.modal.fade', function(e) {
var $target = $(e.target);
if (!$target.is(".modal.fade.in") && !$target.is(".modal-dialog")) {
console.log("Modal Hidden")
}
});

If your modal is dynamically created, select the closest static parent element and add your modal as a parameter for bootstrap modal events to work:
/* body is static, .modal is not */
$("body").on('shown.bs.modal', '.modal', function() {
alert('shown');
});
$("body").on('hidden.bs.modal', '.modal', function() {
alert('hidden');
});
$("body").on('show.bs.modal', '.modal', function() {
alert('show');
});
$("body").on('hide.bs.modal', '.modal', function() {
alert('hide');
});

I can't get Youtube API To Work

I want the player to stop when the the div (.closed) is clicked but it' not woroking. Can someone see where I've gone wrong?
Ive added in the head
<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
I've got this in my jQuery
closed.click(function () {
player.stopVideo();
movie.delay(1000).animate({
bottom: -500
}, {
duration: 1000
});
});
** This also messes with the animation*
and this in my code.
<div id="movieContainer">
<div id="movie">
<iframe id="player" width="644" height="410" src="http://www.youtube.com/embed/VG9AGf66tXM?rel=0&wmode=Opaque&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<div class="close"></div>
</div><!--End of Movie -->
</div><!-- End of movieContainer -->

how do you get the reference to player? It should be something like this:
var player = document.getElementById("player");
player.stopVideo();