I have been working on this website, and I have a script that works quite well on desktop, but I would like to make some modifications on mobile.
The script I have provided below will generate the 'menu box items' as the user is scrolling down.
Then, as the user keeps scrolling down, the boxes will a get zero opacity.
Now, this script is not working that good on mobile (especially on iOS). So what I would like to do is:
Instead of having an opacity of 0 at the beggining, I would like the boxes to have an opacity of 1 when the page is loaded.
Then, as the user makes his/her first scroll on mobile, the boxes will get an opacity of 0.
The code can be tested here.
$(document).scroll(function () {
$('.hContentV2>div').each(function () {
var dataOpacity = $(this).attr('data-opacity');
var opacityValue = $(document).scrollTop() / 500;
var aosDelay = Math.floor(Math.random() * (700 - 100 + 1)) + 100;
var t = $('.hotelSection2').offset().top;
if ($(document).scrollTop() > 150 && $(document).scrollTop() < ($('.hotelSection2').offset().top - 300)) {
if (opacityValue >= dataOpacity) {
opacityValue = dataOpacity;
}
$(this).css({ 'opacity': 1, 'transition-delay': aosDelay + 'ms' });
}
else if ($(document).scrollTop() <= 100) {
var opacityValue = 0;
$(this).css('opacity', opacityValue);
}
else if ($(document).scrollTop() > $('.hotelSection2').offset().top) {
var opacityValue = 0;
$(this).css('opacity', opacityValue);
}
});
if ($(document).scrollTop() < 100) {
$('.scrollTopButton').css({ 'opacity': 1 });
}
else {
$('.scrollTopButton').css({ 'opacity': 0 });
}
});
You can look at the width of the device
E.g
if(document.documentElement.clientWidth < 900){
//script
}
First detect the device mobile device with this script
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// YOur less opacity code will be here for ios
}
else{
//Your normal code here
}
or you can do same by detecting the width of screen to detect the mobile screens
if(window.screen.width < 768){
// Your ios code here for mobile
}
else{
}
Like this.
I hope it helped you.
I'm facing a very strange error, which is animation on body during mouse scroll. I think its happening because of the jQuery event window.scroll. I have tried a lot of things like unbinding of animation on mouse scroll, but nothing works. Below is my code.
$(document).on("scroll", function () {
var lastScrollTop = 0;
var windowHeight = $(window).scrollTop();
var seccion1 = $("#seccion1").height();
var seccion2 = $("#seccion2").offset().top;
var alturaseccion2 = $("#seccion2").height();
//this function returns in which section is the user with the scroll
var localizacion = comprobarSeccion(seccion1, seccion2);
if (windowHeight > lastScrollTop) {
// down scroll
console.log("scrollabajo");
if (localizacion == 1) {
$("html, body").animate({
scrollTop: $("#seccion2").offset().top
}, 2);
$(document).bind("scroll");
} else if (localizacion == 2) {
if (windowHeight >= ((alturaseccion2 * 0.80) + seccion2) && windowHeight <= (alturaseccion2 + seccion2)) {
} else {
}
}
} else {
// up scroll
console.log("scrollarriba");
}
lastScrollTop = windowHeight;
});
ยดยดยด
I'm not sure what you are trying to accomplish, but if your trying to trigger an event with a specific scroll value you can use the code below
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
alert("scroll is greater than 500 px)
} else if(scroll==500){
alert("scroll has hit 500px");
}
});
I am trying to get this code to only work if the device window is bigger than 960px, and it should only trigger when the window scrolls down 700px. The later part works however the first part does not.
The code works perfectly on where it fades in and then fades out, however I do not want it to do so on mobile devices, because the scroll point (700px) is too far down and is creating issues.
$(function () {
var header = $('.fadein');
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (($(window).width() < 960) && (scroll >= 700)) {
header.removeClass('.fadein').addClass('.fadeout').fadeIn();
} else {
header.removeClass('.fadeout').fadeOut().addClass('.fadein');
}
});
});
I think your main issue is accidentally using < 960 instead of > 960, but you might also change to checking innerWidth rather than width if you really are interested in the window's width and not just the screen's width.
For this demo I reduced the target values to 500 and 200 to work better in a SO snippet. (Resize your browser window and run the snippet again to see it working above and below the 500px threshold.)
console.log("width: " + $(window).innerWidth() );
$(window).scroll(function () {
const
div = document.getElementById("div"),
scroll = $(window).scrollTop();
if ( ($(window).innerWidth() > 500) && (scroll >= 200) ) {
div.style.backgroundColor = "yellow";
}
else {
div.style.backgroundColor = "white";
}
});
#div{ height: 300vh; border: 1px solid grey; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div"></div>
Did you try to split that if statement ?
For example (second if will fire only if width is at least 960px)
if($(window).width() >= 960) {
if (scroll >= 700) {
header.removeClass('.fadein').addClass('.fadeout').fadeIn();
} else {
header.removeClass('.fadeout').fadeOut().addClass('.fadein');
}
}
This is what I use to make 2 divs "unwrap" while scrolling:
CSS
.entry {
height: 40px;
}
.entry.expanded {
height:600px;
}
JavaScript
$($('.entry').get(0)).addClass('expanded');
$(window).on('scroll', function (e) {
var x = $(window).scrollTop();
if (x > 820) {
$($('.entry').get(1)).addClass('expanded');
}
if (x > 1525) {
$($('.entry').get(2)).addClass('expanded');
}
});
It works perfectly fine on my 1920x1080p screen but it doesn't on a friend's 1920x1200px because there aren't 820px to scroll..
How can I solve this to work with every resolution? I tried with this, but unfortunately nothing happens:
$($('.entry').get(0)).addClass('expanded');
$(window).on('scroll', function (e) {
var availableScroll = $(document).height() - $window.height();
var x = $(window).scrollTop();
if (x > 820 || x == availableScroll) {
$($('.entry').get(1)).addClass('expanded');
}
if (x > 1525 || x == availableScroll) {
$($('.entry').get(2)).addClass('expanded');
}
});
Is there a fancy method, that maybe calculates the pixels from the bottom or some method relative to the vertical res?
Here's the webpage with the code live (you can see the 2 divs unwrapping when scrolling).
In general, avoid the == for scrolling because if the scroll is off by even .0001 it will resolve as false. Also replace $window with $(window).
$($('.entry').get(0)).addClass('expanded');
$(window).on('scroll', function (e) {
var availableScroll = $(document).height() - $(window).height();
var x = $(window).scrollTop();
if (x > 820 || Math.abs(x - availableScroll) < 10) {
$($('.entry').get(1)).addClass('expanded');
}
if (x > 1525 || Math.abs(x - availableScroll) < 10) {
$($('.entry').get(2)).addClass('expanded');
}
});
Also, if you want to execute code when the page first loads, use the $(document).ready(handler) pattern.
Your former functions seems to working fine. I am testing it as MacBook Pro. However, at sometime it seems it is not fired at JQuery. What you can do is you can wait for few milliseconds to check if the scroll is finished. If scroll is finished then you can simply check the value of scroll.
Option 1:
jQuery debounce is a nice one for problems like this. jsFidlle
So your modified code will be (you need to use debounce)
$(window).scroll($.debounce( 250, true, function(){
console.log("Still scrolling");
}));
$(window).scroll($.debounce( 250, function(){
var x = $(window).scrollTop();
console.log("Scrolling finished");
if (x > 820) {
$($('.entry').get(1)).addClass('expanded');
}
if (x > 1525) {
$($('.entry').get(2)).addClass('expanded');
}
}));
Option 2:
There may be a chance you don't like use JQuery Debounce then you can native approach with timer function. See the code below and you can adjust the timer duration as per your needs.
It is simply waiting for scroll event to be finished and wait for certain milliseconds before it scroll event recalled. If scroll refires then it simply clear the timer and start waiting again. If timer is finished then it executes the method you have stated.
$(window).scroll(function() {
var timerDuration = 250; // In milliseconds
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function() {
// do something
var x = $(window).scrollTop();
console.log("Scrolling finished");
if (x > 820) {
$($('.entry').get(1)).addClass('expanded');
}
if (x > 1525) {
$($('.entry').get(2)).addClass('expanded');
}
}, timerDuration));
});
How can I make jQuery do something if my screen width is less than 960 pixels? The code below always fires the 2nd alert, regardless of my window size:
if (screen.width < 960) {
alert('Less than 960');
}
else {
alert('More than 960');
}
Use jQuery to get the width of the window.
if ($(window).width() < 960) {
alert('Less than 960');
}
else {
alert('More than 960');
}
You might want to combine it with a resize event:
$(window).resize(function() {
if ($(window).width() < 960) {
alert('Less than 960');
}
else {
alert('More than 960');
}
});
For R.J.:
var eventFired = 0;
if ($(window).width() < 960) {
alert('Less than 960');
}
else {
alert('More than 960');
eventFired = 1;
}
$(window).on('resize', function() {
if (!eventFired) {
if ($(window).width() < 960) {
alert('Less than 960 resize');
} else {
alert('More than 960 resize');
}
}
});
I tried http://api.jquery.com/off/ with no success so I went with the eventFired flag.
I recommend not to use jQuery for such thing and proceed with window.innerWidth:
if (window.innerWidth < 960) {
doSomething();
}
You can also use a media query with javascript.
const mq = window.matchMedia( "(min-width: 960px)" );
if (mq.matches) {
alert("window width >= 960px");
} else {
alert("window width < 960px");
}
// Adds and removes body class depending on screen width.
function screenClass() {
if($(window).innerWidth() > 960) {
$('body').addClass('big-screen').removeClass('small-screen');
} else {
$('body').addClass('small-screen').removeClass('big-screen');
}
}
// Fire.
screenClass();
// And recheck when window gets resized.
$(window).bind('resize',function(){
screenClass();
});
I would suggest (jQuery needed) :
/*
* windowSize
* call this function to get windowSize any time
*/
function windowSize() {
windowHeight = window.innerHeight ? window.innerHeight : $(window).height();
windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
}
//Init Function of init it wherever you like...
windowSize();
// For example, get window size on window resize
$(window).resize(function() {
windowSize();
console.log('width is :', windowWidth, 'Height is :', windowHeight);
if (windowWidth < 768) {
console.log('width is under 768px !');
}
});
Added in CodePen :
http://codepen.io/moabi/pen/QNRqpY?editors=0011
Then you can get easily window's width with the var : windowWidth
and Height with : windowHeight
otherwise, get a js library :
http://wicky.nillia.ms/enquire.js/
use
$(window).width()
or
$(document).width()
or
$('body').width()
I know i'm late to answer this, but i hope it is of some help to anybody who have similar problem. It also works when page refreshes for any reason.
$(document).ready(function(){
if ($(window).width() < 960 && $(window).load()) {
$("#up").hide();
}
if($(window).load()){
if ($(window).width() < 960) {
$("#up").hide();
}
}
$(window).resize(function() {
if ($(window).width() < 960 && $(window).load()) {
$("#up").hide();
}
else{
$("#up").show();
}
if($(window).load()){
if ($(window).width() < 960) {
$("#up").hide();
}
}
else{
$("#up").show();
}
});});
Try this code
if ($(window).width() < 960) {
alert('width is less than 960px');
}
else {
alert('More than 960');
}
if ($(window).width() < 960) {
alert('width is less than 960px');
}
else {
alert('More than 960');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
My solution for the question using Vanilla JS is,
window.addEventListener("load", function () {
if (window.innerWidth < 960) { doSomething(); }
}
This works, but with one problem, whenever resizing the screen in dev tools, which is a common thing for developers, the function does something will not be fired.
For example, if we display the webpage on a computer with a screen size of more than 1000px, the function will not be fired, and when we resize the windows to less than the target(here 960px) we expect the event to be fired but that is not what happens.
By the time the script file is already processed and finished and will not be re-read, so we need to fire an event whenever we resize the screen and handle that event using "addEventListener", Just like this;
window.addEventListener("resize", (e) => {
const windowWidth = window.innerWidth;
if (windowWidth > 960) { doSomething(); }
if (windowWidth < 960) { doSomething(); }
});
The best practise is to combine both the code-snippets in the project.
Simple and clean solution using Vanilla JavaScript
let app = document.getElementById('app')
const changeColorFn = ( app, color ) => {
app.setAttribute("style",`background: ${color}`)
}
const winSizeFn = ( winWidth, callback, app, color ) => {
if (window.innerWidth < winWidth ) {
callback(app, color);
}
}
winSizeFn( '1200', changeColorFn, app, 'red' )
winSizeFn( '800', changeColorFn, app, 'green' )
winSizeFn( '500', changeColorFn, app, 'blue' )
window.addEventListener("resize", (e) => {
// add winSizeFn here if you want call function on window resize
})
<div id="app">My app content</div>
nope, none of this will work. What you need is this!!!
Try this:
if (screen.width <= 960) {
alert('Less than 960');
} else if (screen.width >960) {
alert('More than 960');
}