We Keep Coding

Trigger play on video when two divs match up

I have created a way to scroll through divs, one has a menu and the others have divs with blanks but one has a video.
At the top of the page is a navigation menu that contains "next", "previous", "reload" and "start".
Those commands are warped in functions,
$("#next-item").on("click", function(){,
The page looks like this:
<div class="webcam-left">
<div class="bottom-panel">
<div class="center" id="content">
<div class="bottom-panel-post internal start"></div>
<div class="bottom-panel-post internal video-post"><video src="https://ia800606.us.archive.org/12/items/ACTV_News_open/ACTV_News_open.mp4"></video></div>
<div class="bottom-panel-post internal"></div>
</div>
</div>
</div>
<div class="nav-right nav-main">
<div class="rundown-panel">rundown</div>
<div class="rundown-items">
<div class="irl-today first"><div class="current">Welcome</div></div>
<div class="irl-today override">Category name</div>
<div class="irl-today">the end</div>
</div>
</div>
</div>
What I'm trying to do is when scrolling down the list, how do you trigger play on a video when a video is shown?
When scrolling down, I added classes to the divs that contain a video.
The left side has .override and the video side has .video-post.
I tried doing if hasClass() but it plays on the first click:
if ( $('.rundown-items').is('.override') ) {
if ($( '.bottom-panel-post' ).has('video')) {
$('video').trigger('play');
};
};
Working code - https://jsfiddle.net/openbayou/paonbxcL/8/

I figured it out, the problem was that it was looking for a class across all items and not each one individually so I added an .each function to look for a class on each individual div.
$(".slider-slide-wrap").each(function (i) {
var posLeft = $(this).position().left
var w = $(this).width();
// add shown class on a div
if (scrollLeft >= posLeft && scrollLeft < posLeft + w) {
$(this).addClass('shown').siblings().removeClass('shown');
}
// if .shown has .play-video, trigger play
if ($('.shown').is(".play-video")) {
$('video').trigger('play');
};
});

on scroll "sticky-element" will need stick to before "footer-area" not on bottom of page

I have one "sticky-element" div, on page load which I have been set position:fixed with bottom right aligned.
Requirement : on page scroll I would like to set it stick to just before on my "footer-area".
Issue : I have handled successfully css and js part on load, but I am not able to find logic that how can i add another class to my "sticky-element" once "footer-area" will start visible on window.
HTML
<div class="container">
<div class="page-section">
<p>lots of code and other div nested in this as well</p>
</div>
<div class="sticky-element">
</div>
<div class="footer-area">
</div>
</div>
jquery
$(window).on("load",function(){
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if(){
$(".sticky-element").addClass("some-class");
}
else {
$(".sticky-element").removeClass("some-class");
}
});
});
css
.sticky-element { position:fixed; }
.sticky-element.some-class { position:static; }
In above one if() my logic is that I would like to use if "footer-area" is visible on window than only add class will works.
Please suggest if anyone has Simple and short(not too much complex) coding way for this.
Thanks in advance

Try something like that:
<div class="container">
<div id='wraper'>
<div class="page-section">
<p>lots of code and other div nested in this as well</p>
</div>
<div class="sticky-element">
</div>
</div>
<div class="footer-area">
</div>
</div>
$(window).on("load",function(){
$(window).scroll(function() {
var bottomOfWraper = $('#wraper').offset().top + $('#wraper').outerHeight();
var bottomOfWin = $(window).scrollTop() + $(window).height();
if( bottomOfWin > bottomOfWraper){
$(".sticky-element").addClass("some-class");
}
else {
$(".sticky-element").removeClass("some-class");
}
});
});

Detect based on screen resize (instead of page refresh)

Used below HTML for container.
If screen size greater than 768... two column layout
If screen size lesser than 767... Accordion effect.
By below JS code works fine if we kept screen lesser than 767 and refresh the page. But, i need a solution to work based on screen resize from big screen to smaller screen.
Please let me know solution.
Thanks
HTML:
<div class="row" id="accordion">
<div class="col-sm-12 col-md-6 col-lg-3">
<h6 class="accordion-toggle">Frequently Ask Questions</h6>
<ul class="accordion-content default">
<li> Carry with me?</li>
<li> Destination country?</li>
</ul>
</div>
<div class="col-sm-12 col-md-6 col-lg-3">
<h6 class="accordion-toggle">Corporate Info</h6>
<ul class="accordion-content">
<li> Careers</li>
<li> Press Room</li>
</ul>
</div>
</div>
JS:
if ($(window).width() < 767) {
$('#accordion').find('.accordion-toggle').click(function () {
//Expand or collapse this panel
$(this).next().slideToggle('fast');
//Hide the other panels
$('.accordion-content').not($(this).next()).slideUp('fast');
});
}

You need to put your code inside a window.resize event like #karthnik VU said
Updated
$('#accordion.small').on('click', '.accordion-toggle', function() {
//Expand or collapse this panel
$(this).next().slideToggle('fast');
//Hide the other panels
$('.accordion-content').not($(this).next()).slideUp('fast');
});
function resizer(){
$('#accordion').toggleClass('small' , $(window).width() < 767);
if ($(window).width() >= 767) {
$("#accordion").find('.accordion-content').show();
}
}
$(window).on('resize', resizer).resize();

If I understood correctly almost all of that could be achieved with css.Apparently you're using bootstrap so you could use some visibility classes to show/hide on certain window sizes. Also, you can check the navbar example of having different looks for different screen sizes. Just resize the page to see. Hope this helps

You need a resize listener and need to detect when the user changes from big to small and from small to big screen. I didn't test my code but it might look like this:
var lastWindowWidth;
$(document).ready(function() {
$(window).resize(function() {
var $window = $(this),
windowWidth = $window.width();
if (windowWidth < 767 && lastWindowWidth>=768) {
//accordionify
} else if (windowWidth >= 768 && lastWindowWidth < 767) {
//remove accordion
}
lastWindowWidth = windowWidth;
});
});
But I think you could achieve this behavior also using plain css (bootstrap helper classes)

Enable and disable script based on window width-resize

What I want to do is when the browser window width is below 1000px for example, to trigger the script owl carousel. But when the browser window width becomes larger than 1000px to disable owl carousel and the content to display again normally.
I managed to do this when the window is more than 1000px and resize it to be below 1000px but when I resize it again to be more than 1000px it does not disable the owl carousel.
My code
<script type="text/javascript">
$(document).ready(function() {
$(window).resize(function() {
if ($(window).width() < 1000) {
$(".box").owlCarousel();
}
else {
//do nothing what to put here???
}
});
});
</script>
<div class="box">
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
</div>
I tried also to use javascript to add a class if the window resizes to the .box div, but again the javascript when it resizes below and above 1000px it won't change dynamically as I want it.
Can you please tell me the best way to check live the browser width and enable/disable owl carousel?

I haven't used owlcarousel before, but quickly looking at the docs, I think you want to use the owl.destroy() method.
$(document).ready(function() {
$(".owl-carousel").owlCarousel()
//get carousel instance data and store it in variable owl
var owl = $(".owl-carousel").data('owlCarousel')
$(window).resize(function() {
if ($(window).width() < 1000) {
owl.reinit()
} else {
owl.destroy()
}
});
});

Window.matchMedia() might be a solution for you. From the docs:
Returns a new MediaQueryList object representing the parsed results of the specified media query string.
Example:
if (window.matchMedia("(max-width: 1000px)").matches) {
$(".box").owlCarousel();
} else {
/* however you disable the carousel... */
}
Hope this helps!

Run countUp.js when user scrolls certain amount of pixels from top of screen

Hi Please can someone help me, basically i want to run the Javascript when #stats become fully visible around center of the page. Once the javascript has run once i dont want it to run again unless they revisit the page.
Any help would be much appreciated thanks in advance.
My Code is below.
<div id="stats">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4">
<h2><span id="totalFranchises" class="franchise-number">108</span></h2>
</div>
<div class="col-xs-12 col-sm-8">
</div>
</div>
</div>
</div>
<script>
var options = {
useEasing : true,
useGrouping : true,
}
var countUp = new countUp("totalFranchises",108, 256, 0, 3, options);
countUp.start();
</script>
Cheers,
Wes.

I did this recently and I used the heights of the divs above the div that contains the countUp. If you want to understand more read here, here and here. This if you don't want to use jQuery.
My solution looks something like this in the controller:
$window.onscroll = function() {
myFunction()
};
function myFunction() {
var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop; //this makes it work in all browsers
var height = document.getElementById("previousDiv").clientHeight; //the height of the previous div for example
if (bodyScrollTop > height) {
//start the countUp
} else {
//something else
}
}