Develop Reference

React js - detect change orientation on mobile [duplicate]

I'm currently using this script to see if a user that's visiting my site has a screen width smaller than 800. The problem I have is that I also want the alert to be triggered when the user adjusts their screen width to be smaller than 800. How could this be achieved?
At the moment the script only displays the alert when the maximized screen width is lower than 800.
For example, I would like this message triggered when the user has a width of say 1000 but then shrinks their browser width to 720.
if (screen.width <= 800) {
window.alert("screen smaller than 800");
}

Wrap it in a resize event and you need to get the window's width, not the screen's width
window.addEventListener("resize", function() {
if (window.innerWidth <= 800) {
window.alert("screen smaller than 800");
}
})

You need:
window.addEventListener('resize', function() {
if (window.innerWidth <= 800) {
window.alert("screen smaller than 800");
}
}, true);

You can dod this with the resize function:
var width = $(window).width();
$(window).resize(function(){
if ($(this).width() <= 800) {
window.alert("screen smaller than 800");
}
});

Calculate screen size in a sticky header

There are tonnes of tutorials / examples of making a header stick on scroll for fixed height headers. However, I am working on a one page website and the initial section is a full screen image. The user then scrolls down to reveal the header and other content areas.
So my question is, how can I change my code to take into account the viewport / screen size - rather than use a fixed header size?
My existing code is:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 65) {
$(".main").addClass("sticky");
} else {
$(".main").removeClass("sticky");
}
});

You could use the height of the window instead of a fixed value (since you're talking about a full screen image, I'm guessing its height is equal to the window height):
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= $(window).height()) {
$(".main").addClass("sticky");
} else {
$(".main").removeClass("sticky");
}
});
You could also get the height of the first section, if it's smaller than the window

I don't know if there's a better solution, but here's my solution :
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= $(window).height()*0.2) { //0.2 for 20% of the viewport height, you can change this value if you need to
$(".main").addClass("sticky");
} else {
$(".main").removeClass("sticky");
}
});
I just used $(window).height() to get the viewport height.

Change body font-size automatically

I would like to know if there's a way to change the body font-size according to the screen width.
For example: When the screen's width increases with 1px, the body font-size would change from 100% to 100.1%
Thanks

you should use window resize event. For example, following code could be one.
var prevWidth = $(window).width();
$(window).resize(function() {
$('body').css('font-size',(100 + ($(window).width() - prevWidth) / 100) + '%');
prevWidth = $(window).width();
});

jquery body css overflow-x not work

I want make a screen width judge, when screen width is bigger than 1024px, the body scroll bar will hidden, else when screen width is smaller than 1024px the body scroll bar will show its scroll.
See code in
http://jsfiddle.net/xmJzU/ (overflow-x)
http://jsfiddle.net/xmJzU/1/ (overflowX)
And test in
http://jsfiddle.net/xmJzU/show
http://jsfiddle.net/xmJzU/1/show
However when I dragged my browser edge, adjuce screen width smaller than 1024px, there have no scroll bar appear. Thanks.

It works, you just need to also declare the width variable inside your resize handler as the global variable is not in its' scope.
jQuery(document).ready(function() {
var width = $(window).width();
if (width < 1025) {
$('body').css('overflow-x', 'scroll');
} else {
$('body').css('overflow-x', 'hidden');
}
$(window).bind('resize', function() {
var width = $(window).width();
if (width < 1025) {
$('body').css('overflow-x', 'scroll');
} else {
$('body').css('overflow-x', 'hidden');
}
});
});
Example fiddle
An alternative method to using javascript for this is to use CSS3 Media Queries, but obviously this is dependant on the min-browser spec requirements you have.

Try using this css:
body {
width:100%;
min-width:200px;
overflow-x:hidden;
}

Dynamic Image Resizing

I have an image on a webpage that needs to be stretched to fit the available space in the window whilst maintaining its proportion. Here's what I've got:
http://www.lammypictures.com/test/
I would like the large image to proportionally stretch to match the height and widths of the browser, minus the size of the divs to the left and bottom.
So the problem is 2 fold really; first i need to get the max height and width minus the link and image bars, secondly i need to resize the image on a browser resize whilst maintaining proportions.
Any help would be much appreciated.
Cheers
CIP

You could try using jQuery ui scaling effect:
$(document).ready(function () {
resizeImage(); // initialize
$(window).resize(function () {
resizeImage(); // initialize again when the window changes
});
function resizeImage() {
var windowHeight = $(window).height() - $('#nav').height(),
windowWidth = $(window).width(),
percentage = 0;
if (windowHeight >= windowWidth) {
percentage = (windowWidth / $('#image').width() ) * 100;
}
else {
percentage = ( windowHeight / $('#image').height() ) * 100;
}
$('#image').effect('scale', { percent : percentage }, 1);
};
});
Tested and works great, however, a few tweaks maybe needed to get it just the way you like it.

You may just not setup the image element width and height attributes, and write next styles:
.hentry img { max-width: 100%; }
And it will shrink relative to the minimum side.
P.S. But not in position: absolute; block which not have any size. Set up the parent block to relative positioning.