Different scripts for Desktop and Mobile - javascript

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.

Related

Issues with $(window).width() and scrolling

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');
}
}

Changing position background in JavaScript, strange issue

I have a simple question, I would like to change one picture when a user scroll the page (to make an illusion of 3d picture)
the first approach was changing the image src every time (making like 8 different pictures) but I could see the lag on the browser when I was scrolling, the effect was not good.
So that, I had the idea to make one single image, anche change the background-position while the user scroll.
This works perfect (when everything is loaded), the only problem is when the user scroll, each time the background-position is changing, the browser reload the picture. So that, the waiting will be to much. Looks like load different picture, but it's only one.
I don't understand why, the picture is always the same, why there is this problem? did someone know another solution?
this is the script:
<script type="text/javascript">
jQuery('.qty-cart-btn2').hide();
jQuery('.shoes-360-2').css('backgroundImage','url(shoes_img1/360.png)');
require(['jquery', 'jquery/ui'], function($){
jQuery(function(){
jQuery(window).scroll(function(){
if(jQuery(this).scrollTop() >= 30) {
jQuery('#back-shoes')
.css({'background-position-y':'-264px'})
}
if(jQuery(this).scrollTop() >= 45) {
jQuery('#back-shoes')
.css({'background-position-y':'-528px'})
}
if(jQuery(this).scrollTop() >= 60) {
jQuery('#back-shoes')
.css({'background-position-y':'-792px'})
}
if(jQuery(this).scrollTop() >= 75) {
jQuery('#back-shoes')
.css({'background-position-y':'-1056px'})
}
if(jQuery(this).scrollTop() >= 90) {
jQuery('#back-shoes')
.css({'background-position-y':'-1320px'})
}
if(jQuery(this).scrollTop() >= 105) {
jQuery('#back-shoes')
.css({'background-position-y':'-1584px'});
}
if(jQuery(this).scrollTop() >= 120) {
jQuery('#back-shoes')
.css({'background-position-y':'-1848px'});
}
});
});
});
</script>
Thank you very much
Use IF condition in greather than and smaller than, like:
jQuery(function(){
jQuery(window).scroll(function(){
var Scroll = jQuery(this).scrollTop();
if(Scroll >= 30 && Scroll < 45){
jQuery('#back-shoes').css({'background-position-y':'-264px'})
}
});
});
I solved by this example:
<div id="rotator"></div>
$(function() {
var rotator = $('#rotator');
var container = $(document);
var viewport = $(window);
var images = 72;
var imageHeight = 30000 / images;
var scrollHeight = container.height() - viewport.height() + imageHeight;
var step = images / scrollHeight;
viewport.scroll(function(event) {
var x = -Math.floor(step * viewport.scrollTop()) * imageHeight;
rotator.css('background-position', x + 'px 0');
});
body {
height: 2000px;
}
#rotator {
font-size: 416px;
width: 1em;
height: 1em;
position: fixed;
top: 0;
right: 0;
z-index: -1;
background: transparent url(http://www.3sessanta.it/images/polaroid/sprite_polaroid_total.jpg) no-repeat 0 0;
}
http://jsfiddle.net/coma/sBTzG/13/
Thanks everyone

Getting pixel amount of Scrolling in an Overflow Hidden Page

I wish to be able to toggle a class for the body when there is a large amount of scroll in the page, but there is a catch: its a full-sized, hidden overflow, single page.
I tried the simple:
if ($(window).scrollTop() > 1000){
$('body').addClass( "endScroll");
}
else {
$('body').removeClass("endScroll");
}
I tried this method to add the class endScroll after the page has been scrolled after 1000 pixels, however, it does not work because since it is a single screen with overflow hidden, there is no actual scroll from top. (To better explain, there is an animation going on while the user scrolls)
So I tried this method:
$(document).bind('mousewheel', function(e) {
var delta = e.originalEvent.wheelDelta;
if (delta < 0) {
$('body').addClass("endScroll");
} else if (delta > 0) {
$('body').removeClass("endScroll");
}
});
While it actually works, adding the class, it does as soon as the user scroll once. I can't figure a way to make it toggle the class after 1000 pixels have been scrolled.
Thank you in advance!
EDIT: I think this is closer to what you're looking for. You need a tracking variable to see how much the user has scrolled:
var scrollVal = 0;
$(document).bind('mousewheel', function(e) {
scrollVal += e.originalEvent.wheelDelta;
if (scrollVal > 0) scrollVal = 0;
console.log(scrollVal);
if (scrollVal < -1000) {
$('body').addClass( "endScroll");
}else {
$('body').removeClass("endScroll");
}
});
EDIT 2: Firefox compatibility:
var scrollVal = 0;
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel";
$(document).bind(mousewheelevt, function(e) {
var offset = -1 * e.originalEvent.wheelDelta;
if (mousewheelevt == "DOMMouseScroll"){
offset = e.originalEvent.layerY - e.originalEvent.clientY;
}
scrollVal += offset;
if (scrollVal < 0) scrollVal = 0;
console.log(scrollVal);
if (scrollVal > 1000) {
$('body').addClass( "endScroll");
}else {
$('body').removeClass("endScroll");
}
});
Just scroll it to 1000px and see the background will be red if you scroll up it will be again black
$(window).on("scroll", function() {
if($(window).scrollTop() > 1000){
$(".scroll-div").addClass('scroll-div-red');
}
else{
$(".scroll-div").removeClass('scroll-div-red');
}
});
.scroll-div{
background:#000;
height:1500px;
overflow:hidden;
}
.scroll-div-red.scroll-div{
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scroll-div">
</div>

$(window).on('scroll', function () when scroll to 50 %, i want to load few data

i want to load few data asap browser scrollbar travelling to 50 %
for what using jquery i wrote following funcation :
$(window).on('scroll', function () {
alert("scrolling");
if ($(window).scrollTop() + $(window).innerHeight() >= $(window)[0].scrollHeight * 0.5) {
if (counter < modules.length) {
LoadData(modules[counter]);
}
counter += 1;
}
})
but it is not working, how can i fixed that?
anthor try i made it is :
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
alert("you are at bottom");
}
});
but i dont want alert fired at bottom, just at 50%
To detect that scrolling has reached 50% of your page use:
if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.5){
For the rest we should know what's inside LoadData(modules[counter]);
http://jsfiddle.net/carlodurso/a5wmLzfm/

Lightweight scrollUp function - jQuery

Trying to make simple jQuery function to create a scrollToTop button that fades in as you scroll down.
$(document).ready(function() {
var start = 300;
var duration = 200;
var scrolled;
$('.scrollUp').css('opacity', '0.0');
$(window).scroll(function(){
var opacity = (scrolled - start) / duration;
scrolled = $(window).scrollTop();
if (0 < opacity < 1) {
$('.scrollUp').css('display', 'block').css('opacity', opacity);
} else if (1 < opacity) {
$('.scrollUp').css('display', 'block').css('opacity', '1.0');
} else {
$('.scrollUp').css('display', 'none').css('opacity', '0.0');
}
});
$('.scrollUp').click(function(){
$('html, body').animate({
scrollTop: 0
}, 500);
});
});
See it in action here: http://jsfiddle.net/JamesKyle/fBvGH/
This works, tested in jsfiddle:
$(document).ready(function() {
var start = 300;
var duration = 200;
var scrolled;
$('.scrollUp').css('opacity', '0.0');
$(window).scroll(function(){
var opacity = (scrolled - start) / duration;
scrolled = $(window).scrollTop();
if (0 < opacity < 1) {
$('.scrollUp').css('display', 'block').css('opacity', opacity);
} else if (1 < opacity) {
$('.scrollUp').css('display', 'block').css('opacity', '1.0');
} else {
$('.scrollUp').css('display', 'none').css('opacity', '0.0');
}
});
$('.scrollUp').click(function(){
$('html,body').animate({
scrollTop: 0
}, 500);
});
});
Update:
And here's a working example with the opacity animation.
Looks like this guy was looking for the same equation.
Better to use some math in situation's like this:
scrolled = $(window).scrollTop();
height = $('body').height();
height = Math.ceil((scrolled / height) * 100);
height = height / 100;
Second Update
Ok, you want it to start appearing after the dark blue section. Ok, so what you need to do is exclude that portion of the top before the gradient. You can do that by making an if clause that checks if the scrollTop value has hit the top part of the light blue gradient; around 300px from the top of the document. Then instead of using the body height in the above equation, use the total height of the gradient section; about 210px. This value will replace the var height in the jQuery above. Let me know if you have issues implementing this. Didn't notice you're comment on the above answer.
scrollTop is not a window property, so just change you code slightly:
$(window).animate({scrollTop : 0},500);
to
$('html, body').animate({scrollTop : 0},500);
here's the updated jsfiddle: http://jsfiddle.net/fBvGH/13/

Categories