We Keep Coding

Javascript window resize not firing onload

I'm working off a specific codepen which can be found here https://codepen.io/anon/pen/WXgvjR .. Its not mine.
Everything works perfect with it, except when i open the page on a mobile or change the browser width to be mobile size, its still displaying some items outside the browser window width ways, is there any way to detect a mobile or change in screen size and just display them going down?
The following is the resize code that is found in the codepen if that helps
$(window).resize(function(){
var margin=40;
var padding=15;
var columns=0;
var cWidth=300;
var windowWidth = $(window).width();
var overflow = false;
while(!overflow){
columns++;
var WidthTheory = ((cWidth*columns)+((columns+1)*padding)+margin);
if(WidthTheory > windowWidth)
overflow = true;
}
if(columns > 1)
columns--;
var GridWidth = ((cWidth*columns)+((columns+1)*padding)+margin);
if( GridWidth != $('#grid').width()){
$('#grid').width(GridWidth);
}
});
Any help would be greatly appreciated

Resizing using the Maximise, Minimise, or the Chrome DevTools Devices Buttons, etc. does not trigger the resize event properly (it triggers it before actually resizing, so it does not get the right size).
For the mobile page load, put the same code from the window resize function into the document ready function as well (I would recommend making it a function and then call the function in both to reduce duplicate code):
function setDisplayBoardSize()
{
var margin=40;
var padding=15;
var columns=0;
var cWidth=300;
var windowWidth = $(window).width();
var overflow = false;
while(!overflow){
columns++;
var WidthTheory = ((cWidth*columns)+((columns+1)*padding)+margin);
if(WidthTheory > windowWidth)
overflow = true;
}
if(columns > 1)
columns--;
var GridWidth = ((cWidth*columns)+((columns+1)*padding)+margin);
if( GridWidth != $('#grid').width()){
$('#grid').width(GridWidth);
}
}
$(window).resize(function()
{
setDisplayBoardSize();
});
$(document).ready(function()
{
setDisplayBoardSize();
});
For the min-max etc. see this stackoverflow thread:
jQuery resize() using browser maximise button
This answer specifically should help:
$(window).resize(function()
{
setTimeout(function() {
setDisplayBoardSize();
}, 100);
});

Get browser width and height after user resizes the window

Is there any way to get the browser width and height after a user has resized the window. For example if the window is 1920 by 1080 and the user changes the window to 500 by 500 is there any way to get those two new values in JavaScript or jquery?

Pure Javascript answer:
var onresize = function() {
//your code here
//this is just an example
width = document.body.clientWidth;
height = document.body.clientHeight;
}
window.addEventListener("resize", onresize);
This works fine on chrome. However, it works only on chrome. A slightly more cross-browser example is using the event target properties "outerWidth" and "outerHeight", since in this case the event "target" is the window itself. The code would be like this
var onresize = function(e) {
//note i need to pass the event as an argument to the function
width = e.target.outerWidth;
height = e.target.outerHeight;
}
window.addEventListener("resize", onresize);
This works fine in firefox and chrome
Hope it helps :)
Edit: Tested in ie9 and this worked too :)

If you need to know these values to do layout adjustments, I bet you plan on listening to those values. I recommended using the Window.matchmedia() API for that purpose instead.
It is much more performant and is basically the JS equivalent of CSS media queries.
Very quick example of use:
if (window.matchMedia("(max-width: 500px)").matches) {
/* the viewport is less than or exactly 500 pixels wide */
} else {
/* the viewport is more than 500 pixels wide */
}
You can also setup a listener that'll get called every time the state of the matches property changes.
See MDN for description and example of using a listener.

It's possible by listening to resize event.
$(window).resize(function() {
var width = $(window).width();
var height = $(window).height();
})

You can use the JQuery resize() function. Also make sure you add the same resize logic to reload event. If user reloads in the sized window your logic won't work.
$(window).resize(function() {
$windowWidth = $(window).width();
$windowHeight = $(window).height();
});
$(document).ready(function() {
//same logic that you use in the resize...
});

Practically, I use this and it helps me a lot:
var TO = false;
var resizeEvent = 'onorientationchange' in window ? 'orientationchange' : 'resize';
$(window).bind(resizeEvent, function() {
TO && clearTimeout(TO);
TO = setTimeout(resizeBody, 200);
});
function resizeBody(){
var height = window.innerHeight || $(window).height();
var width = window.innerWidth || $(window).width();
alert(height);
alert(width);
}

You can use the resize event, along with the height() and width() properties
$(window).resize(function(){
var height = $(window).height();
var width = $(window).width();
});
See some more examples here

Use jQuery resize method to listen window size change . inside callback you can get height and width.
$(window).resize(function(){
var width = $(window).width();
var height = $(window).height();
});

Simplest way to get real width and height of an element after window resize as the follow:
<div id="myContainer">
<!--Some Tages ... -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function () {
$(window).resize(function () {
//The below two lines of codes more Important to clear the previous settings to get the current measure of width and height
$('#myContainer').css('height', 'unset');
$('#myContainer').css('width', 'unset');
var element = $('#myContainer');
var height = element.height();
var width = element.width();
//Below two lines will includes padding but not border
var innerHeight = element.innerHeight();
var innerWidth = element.innerWidth();
//Below two lines will includes padding, border but no margin
var outerHeight = element.outerHeight();
var outerWidth = element.outerWidth();
//Below two lines will includes padding, border and margin
var outerHeight = element.outerHeight(true);
var outerWidth = element.outerWidth(true);
});
});
</script>

You can use the event object to get the height and width, I use destructuring assignment and the target points to window:
const handleGetDim = ({ target }) => ({
width: target.innerWidth,
height: target.innerHeight,
});
window.addEventListener('resize', handleGetDim);

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.

Javascript dialog is programmed to move when the page scrolls, but it flickers. Can this be fixed?

I've written some jQuery code to display a box with data in the corner of the users' web browser. I'm using the .scroll event to make the box stay in the corner as the user scrolls up and down the page. Let me emphasize that I am not using jquery-ui dialog.
The only problem is that the box flickers as the page scrolls. I'm afraid that there will be no cross-browser solution to this problem as the different browsers seem to behave differently with scrolling. Barring a cross-browser solution, an IE solution would be nice (My web application is designed to be used by a specific group of about 100 users in my organization.)
Here are snippets of the relative code:
ExternalScroll: function () {
LittleBlackBook.setPosition();
}
setPosition: function () {
var scrollPosition = $(self).scrollTop();
var cssTop = LittleBlackBookStatic.determineCssTop(this.height, this.isTop, this.vOffset, scrollPosition);
var cssHeight = LittleBlackBookStatic.determineCssHeight(this.height);
var cssLeft = LittleBlackBookStatic.determineCssLeft(this.width, this.isLeft, this.hOffset);
var cssWidth = LittleBlackBookStatic.determineCssWidth(this.width);
this.jQueryObj.css('top', cssTop);
this.jQueryObj.css('height', cssHeight);
this.jQueryObj.css('left', cssLeft);
this.jQueryObj.css('width', cssWidth);
}
var LittleBlackBookStatic = {
determineCssTop: function (height, isTop, vOffset, vScroll) {
var windowHeight = $(self).height();
var scrollPosition = $(self).scrollTop();
var newModalTop = isTop ? vOffset + vScroll : windowHeight - height + vScroll - vOffset;
return newModalTop + 'px';
},
determineCssHeight: function (height) {
return height + 'px';
},
determineCssLeft: function (width, isLeft, hOffset) {
var windowWidth = $(self).width();
var newModalLeft = isLeft ? hOffset : windowWidth - width - hOffset;
return newModalLeft + 'px';
},
determineCssWidth: function (width) {
return width + 'px';
}
} // end LittleBlackBookStatic
I'm using jQuery to look up the scroll position as the page scrolls and change the CSS.
Is there a better way; a way that will make it scroll without flickering? If no, then why not?

You should use fixed positioning for that box instead instead of animating it to keep it in the corner.
You'll use less javascript and avoid flickering that comes with animation.

Resizing images in Chrome using JQuery

I just ran into the weirdest of bugs today. I'm not sure if it's a bug in Chrome or something that I can work around but here goes.
I built a JQuery function to resize a set of images that are posted on a forum:
$(".post-message img.post-image").load(function(){
$(this).each(function() {
var maxWidth = 200;
if($(this).width() > maxWidth)
{
var factor = $(this).width() / maxWidth;
var width = $(this).width();
var height = $(this).height();
$(this).css('width', width / factor);
$(this).css('height', height / factor);
}
});
});
The problem is that this only seems to work when I refresh the page. It doesn't work when you press previous or when you get linked to the page.
In chrome the $(img).width() property returns 0 in both cases when the function doesn't work.
This function performs as expected in IE9 and FF3
What can I do to fix this odd behavior?

Most probably because the images are being pulled up from the browser cache, and the load event is not triggering. The way around this is to manually trigger load if the images's complete properties have been set:
$(".post-message img.post-image").one("load", function(){
$(this).each(function() {
var maxWidth = 200;
if($(this).width() > maxWidth)
{
var factor = $(this).width() / maxWidth;
var width = $(this).width();
var height = $(this).height();
$(this).css('width', width / factor);
$(this).css('height', height / factor);
}
});
}).each(function() {
if(this.complete) $(this).trigger("load");
});

Karmin is correct here. I ran into this problem a few years ago and ended up just not relying on img.load. His workaround for manually triggering the load event should work.
However...
Developers should do max-width or height in CSS in this scenario. In fact, it is good programming practice to do what one can in CSS before doing them in javascript.
Additionally, if one were to keep going with this solution, var width and var height should be placed outside of the if statement next to var maxWidth, and used wherever $(this).width() is called (including the initial check on line 4). Right now the code is unnecessarily creating a new jQuery object to get the height each time when it should have stored and used the value from the first check.

Thanks for the contributions guys. A previous answer given on stack - that I apparently couldn't find this afternoon jQuery && Google Chrome - solved my problem!
$(window).load(function() {
$(".post-message img.post-image").one("load", function(){
$(this).each(function() {
var maxWidth = 200;
if($(this).width() > maxWidth)
{
var factor = $(this).width() / maxWidth;
var width = $(this).width();
var height = $(this).height();
$(this).css('width', width / factor);
$(this).css('height', height / factor);
}
console.log($(this).width())
});
}).each(function() {
if(this.complete) $(this).trigger("load");
});
});
The code has to be executed on $(window).load() together with the provided code by karim79.