We Keep Coding

How to load different HTML Content based on different Screen Size whith JS

I intend for screen sizes greater then 600px to display a slider and for less than 600px to display the same content without the slider. I'm using Bootstrap 4 and Wordpress. For some reason my code isn't returning anything at all. Here is the code of the wordpress template:
<div class="container-fluid custom-bg-color" id="seccion-portafolio">
<div class="row">
<div class="col">
<div id="portafolio-variable-content">
</div>
</div>
</div>
</div>
<script>
(function () {
var viewportWidth = $(window).width();
if (viewportWidth > 600) {
$('#portafolio-variable-content').load('slider.php');
$('#portafolio-variable-content').html("<p>Another test</p>")
} else {
$('#portafolio-variable-content').load('no-slider-content.php');
}
}());
</script>

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");
}
});
});

Equal height columns using Bootstrap and jQuery

I am using Bootstrap in a current Web project but I don't know how to dynamically set the same height of column elements.
I already know the .row-eq-height class but using that I loose the responsiveness of Bootstrap elements. I would like the #selection column to be at least as high as #map-container (or higher because it has a border and I don't want it to cut the content).
I already wrote few lines of jQuery:
var map_height = $('#map-container').height();
var selection_height = $('#selection').height();
if (selection_height < map_height) {
$('#selection').css('height',map_height);
}
<div class="row" id="selection-wrapper">
<div class="col-lg-7 col-xs-12" id="map-container">
<!-- Zone for map display -->
<div id="map"></div>
</div>
<div class="col-lg-5 col-xs-12">
<div class="text-container" id="selection">
// Content
</div>
</div>
</div>
Those lines work but I don't know how and when I should execute them as I would like to keep the equal height property all the time, even when the width of the container changes (which modifies the height of the #map-container).

function equal_height() {
var map_height = $('#map-container').height();
var selection_height = $('#selection').height();
if (selection_height < map_height) {
$('#selection').css('min-height',map_height);
}
}
$(document).ready(function(){
equal_height();
});
$(window).resize(function(){
equal_height();
});

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
}
}