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");
}
});
Related
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.
I am trying to implement a full height slideshow on my website. However, I would like the slideshow to be full height if the browser width is more than 767px.
This is my code so far:
if( $(window).width() > 767) {
$(window).resize(function() {
var winHeight = $(window).height();
var headerHeight = $(".navbar").height();
$('.slideshow, .slideshow li').height(winHeight);
});
$(window).trigger('resize');
}
It kinda works if I the browser starts on a width greater than 767. However. If if the browser starts on a width less than 767 and I start resizing more than 767, the script does not starts.
Any ideas how I could fix this?
The resize event handler is bound when your browser starts up only when width > 767, try removing the if condition and it should work fine
EDIT:
To make it apply only when it's width is > 767, the condition should be inside the resize event
$(window).resize(function() {
if($(window).width() > 767) {
var winHeight = $(window).height();
var headerHeight = $(".navbar").height();
$('.slideshow, .slideshow li').height(winHeight);
} else {
$('.slideshow, .slideshow li').height(400); //initial height
}
});
$(window).trigger('resize');
You should be able to do this much more easily in css with a media query.
#media (min-width:500px){
.slideshow{
height:100%;
}
}
Is it possible to run a script when the screen size gets above or below a certain point, but only at that certain point? I have a function that takes two paramters, and i would like those two parameters to change if the screen size is below 769 pixels. So i have used the classic:
$( window ).resize(function() {
if ($(window).width() < 769) {
foobar(foo1, bar1);
}
else {
foobar(foo2, bar2);
}
});
that works, but that runs foobar every time the window is resized. The problem is that i do not want the function to be executed if you resize the browser from e.g 500 to 600 px because that means it executes if you go from portrait to landscape on a smartphone, i only want it to be executed the moment it goes below or above 768 px. Any ideas?
You can keep track of the previous width in a global variable then check when the new and previous widths are either side of 768, so you know you have crossed over the boundary:
var prevWidth = null;
$(function(){
prevWidth = $(window).width();
console.log(prevWidth);
})
$(window).resize(function() {
var newWidth = $(window).width();
if(prevWidth <= 768 && newWidth > 768) {
foobar(foo1, bar1);
}
else if (prevWidth > 768 && newWidth <= 768) {
foobar(foo2, bar2);
}
prevWidth = newWidth;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Fiddle
You could change your JS like this:
$( window ).resize(function() {
if ($(window).width() < 769 && !$('html').hasClass('smallWindow')) {
$('html').addClass('smallWindow');
foobar(foo1, bar1);
}
else if($(window).width() > 769 && $('html').hasClass('smallWindow')) {
$('html').removeClass('smallWindow');
foobar(foo2, bar2);
}
});
And this brings the advantage, that you can add some stylings for the smaller window etc based on the htmlclass
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;
}
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.