We Keep Coding

I want an Alert page depending the window size

I am trying to make a webpage now and I want to show my content with limt of size. For example if width over 1000px and height over 1000 px than Alert page shows up. And if window size is width < 1000 px and height < 1000px than Alert page hidden and content will show.
Now I made a that say your screen is too big and makes this full size of webpage
And with Javascript I gave a condition that can check size of window and if it feets than class hidden that has display: hidden will add or delete.
this is my javascript code
const width = window.innerWidth;
const height = window.innerHeight;
//in the html there is no class: hidden. So alert page is show default.
function removeSizeAlert() {
const sizeAlert = document.querySelector(".too-bgsm-size");
sizeAlert.classList.add("hidden");
}
function addSizeAlert() {
const sizeAlert = document.querySelector(".too-bgsm-size");
sizeAlert.classList.remove("hidden");
}
function init() {
if (width < 600 && height > 950) {
removeSizeAlert();
} else {
addSizeAlert();
}
}
init();
In here I want to make this more interactive. Now this code works only when I represh the page. But I want when page resize than detect the size change event and add or delete class hidden
simultaneously. There is a way to do like this?

use addEventListener()
window.addEventListener('resize', init);

Change position of div based on content & viewport height using jquery

I want to have a div be fixed at the bottom of the window when the window is taller than the content height. If the content height is taller than the window height, I want the div position to remain relative.
I currently have this mostly working, however I don't want the div to overlap the content at all. I tried various forms of below, but still not working:
var body = content+bottomBar
if (body > viewport) {
$(".bottom-bar").css({
'position':'relative'
});
} else {
$(".bottom-bar").css({
'position': 'fixed'
})
}
I also am having trouble getting the window.resize to work.
Any help would be appreciated!
http://jsfiddle.net/no05x1vx/1/

Referring to the jsfiddle linked by the OP, here are a few changes to make the code work as expected, please see the comments:
var content = $(".content").height()
var viewport = $(window).height();
// Use innerHeight here as the bottom-bar div has height 0 and padding 60px
// .height() would return 0
var bottomBar = $(".bottom-bar").innerHeight();
var body = parseInt(content)+parseInt(bottomBar)
$(window).on('resize', function(){
// Get new viewport height
viewport = $(window).height();
if (content > (viewport-bottomBar) ) {
$(".bottom-bar").css({
'position':'relative'
});
} else {
$(".bottom-bar").css({
'position': 'fixed'
})
}
});
// Trigger resize after page load (to avoid repeated code)
$(document).ready(function(){
$(window).resize();
});

Jump to next div and have it centred on screen when user scrolls

I'm building a one page site, and wanting to have multiple divs, that are approximatly 400px (but vary) on top of each other. Instead of a smooth scroll, I would like jump to the next div and have it centred on the screen, at the same time adjust the opacity of the content above and below to draw attention to the centre div.
I have tried playing with a few scrolling plugins but have not had anything do what I'm after, most of them are geared towards a full page div, not one only a 1/3 or so the height of the page.
Can someone point me towards something I can adapt to perform this.

Add an event listener to the document which looks for elements with the class .next
Get the distance from the top of the viewport to the top of the element in question
subtract half the value of the viewport height minus the height of the element.
If the element is bigger than the viewport, scoll to to top of the element
Or scroll the element into the middle.
Set the opacity of the unfocused elements.
(Demo)
(function(){
"use strict";
document.addEventListener('click', function(e) {
if(e.target.className.indexOf('next') >= 0) {
var current = e.target.parentElement
var next = current.nextElementSibling || false;
if(next) {
var nextNext = next.nextElementSibling;
var height = next.offsetHeight;
var top = next.offsetTop;
var viewHeight = window.innerHeight;
if(viewHeight - height > 0) {
var scrollTo = top - ((viewHeight - height) / 2);
} else {
var scrollTo = top;
}
window.scroll(0, scrollTo);
current.style.opacity = '0.5';
next.style.opacity = '1';
if(nextNext) nextNext.style.opacity = '0.5';
}
}
}, false);
})();

Stop/Restart an animation loop on window resize

I have an animation where three images rotate up and down. JSfiddle: http://jsfiddle.net/rLgkyzgc/1/
$(window).load(function() {
// Load images in BG that have been hidden by CSS
$('.banners').show();
// Create an empty array
var banners = [];
// Fill array with banner ids
$('.banners').each(function () {
var banner = $(this).attr('id');
banners.push(banner);
});
function switchBanners(){
var $firstBanner = $('#' + banners[0]);
var $secondBanner = $('#' + banners[1]);
var firstBannerHeight = $firstBanner.height();
var secondBannerHeight = $secondBanner.height();
$firstBanner.animate({ bottom: -firstBannerHeight }, 1200);
$secondBanner.animate({ bottom: 0 }, 1200, function(){
b = banners.shift(); banners.push(b);
setTimeout(function(){
switchBanners();
}, 4000);
});
};
// Delay initial banner switch
setTimeout(function(){
switchBanners();
}, 4000);
});
This is great for the desktop view, but on mobile, I want to stop the animation and just show one static image.
So my questions. How can I :
Only start the animation on page load if the window width is > 940px
Stop (reset) the animation if the page is resized to be < 940px wide
THEN restart the animation if the page resized to be > 940px wide

You should use window.matchMedia (see the documentation) to detect the viewport size on document.ready and when the window is resized, so something like this:
function resetAnimation() {
$firstBanner.stop(true, true);
$secondBanner.stop(true, true);
if(window.matchMedia("(min-width: 940px)").matches) {
//Start the animations here
}
}
$(document).ready(function() {
resetAnimation();
}
$(window).resize(function() {
resetAnimation();
}
Note that you don't really need to stopthe animations on document.ready, but this way you have a single function to reset the animations and then restart them only if necessary, which is something you typically want to do every time you resize the browser window, regardless of the viewport size.

I'll reference these in order:
1. Only start the animation on page load if the window width is > 940px
In your window load function, grab your browser width with $(window).width(). Then check that against your 940 (leave off the "px"), and perform necessary actions.
So:
if ($(window).width() > 940){ *actions* }
2. Stop (reset) the animation if the page is resized to be < 940px wide
To do this, you'll need to use the window resize function ($(window).resize()) and check your 940 against the browser width.
So:
$(window).resize(function(){
if ($(window).width() <= 940){
*stop (reset) animation*
}
});
3. THEN restart the animation if the page resized to be > 940px wide
This logic is essentially the same as #2, just reversed:
$(window).resize(function(){
if ($(window).width() > 940){
*restart animation*
}
});

Detect vertical resize jquery

I am making a login page in which I use a little javascript and jquery to vertically align the login box.
I also have an event on resize() to put the box in the middle again.
But, with resize(), everytime the user resize the window, the function is fired and this is a kind of ugly :))
So, I would like to know if there is a way to fire the function only on vertical resize.
Thank you

It will fire every time, but you can track the width to check for only vertical resizing:
// track width, set to window width
var width = $(window).width();
// fire on window resize
$(window).resize(function() {
// do nothing if the width is the same
if ($(window).width()==width) return;
// update new width value
width = $(window).width();
// ... your code
});

Instead of comparing heights for each situation where you want to detect vertical resize, you can create reusable events for horizontal and vertical resizing like this:
// Horizontal and vertical window resize events.
(function () {
var win = jQuery(window),
prev_width = win.width(),
prev_height = win.height();
win.on('resize', function () {
var width = win.width(),
height = win.height();
if (width !== prev_width) {
win.trigger('hresize');
}
if (height !== prev_height) {
win.trigger('vresize');
}
prev_width = width;
prev_height = height;
});
})();
That way you can just drop that code in place once, and then use the events like this:
$(window).on('hresize', function () {
// handle horizontal resizing
});
$(window).on('vresize', function () {
// handle vertical resizing
});

Got better solution:
$('#element').resizable({
stop: function( event, ui ) {
$('#element').height(ui.originalSize.height);
}
});

As a complement to Doublesharp's useful answer:
In my case, window.outerWidth worked better, and was stable to vertical resizes.
Indeed, I had some troubles with $(window).width() : it (strangely!) happened to be modified also when I only resized vertically.