Can I use resize and scroll handlers together like this:
$(window).on('scroll resize',function(){
if($(window).width() == "1024"){
if($(window).scrollTop() == 400){
$('div.foo').addClass('red') ; //to change to red color
}
}
}) ;
The way I used , is it the correct way, what are the implications of this ? Is there a better way to incorporate both the handlers ? Thanks for your reply. Please let me know if you need a simulation of the above code. Thank you !
do this
var handler = function(){
if ($(window).width() == "1024") {
if ($(window).scrollTop() == 400) {
$('div.foo').addClass('red') ; //to change to red color
}
}
};
$(window).on('scroll',handler).on('resize',handler);
Related
I have a event bind to mousewheel in which I use the event to make some calculations, I would like to be able to use the same function to perform the same calculations from touch devices.
my code is like:
$('#element').bind("mousewheel DOMMouseScroll", function(event) {
event.preventDefault();
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0)
//do stuff
else {
//do other stuff
}
});
EDIT: As from the comment I understand i was not completely clear, my goal is to obtain a value like "wheelDelta" that make me recognize if the user is scrolling (touchmoving) up or down
This may not be the appropriate solution but you may do something like this.
var lastScroll = 0;
$('#element').on("scroll", function() {
var st = $(this).scrollTop();
if (st > lastScroll){
// downscroll code
//$(this).trigger("mousewheeldown");
} else {
// upscroll code
//$(this).trigger("mousewheelup");
}
lastScroll = st;
$(this).trigger("mousewheel");
});
I hope that helps :)
I know there are many similar posts, but still I haven't get to the code I need.
Basically, I want to make a presentation the first time the user scrolls down. For that, I want to prevent the default action of scroll and (if it's scrolling down) make an animation to the next div.
window.scrolledToRed = false
window.scrolledToGreen = false
window.scrollTo = (to, guard ) =>
$('html, body').animate({
scrollTop: $(to).offset().top
}, 1000, =>
window[guard] = true
)
window.addEventListener 'wheel', (e) ->
if (e.wheelDelta < 0)
if (!window.scrolledToRed)
scrollTo('.red', 'scrolledToRed')
else if (!window.scrolledToYellow)
scrollTo('.green', 'scrolledToGreen')
I've created a Fiddle that represents the problem:
https://jsfiddle.net/pn6zqgwu/2/
When the user scrolls down the first time I want to take him to the red div and the next time to the green one.
None of the solutions I've tried really worked, since it was both "jumping" and scrolling where I want.
Any idea of how to solve the problem?
Thanks in advanced
Maybe you need to call e.preventDefault() to prevent browser default scroll behavior
I have made a fiddle for you, you can make more checks and add animations
var redTouched = false;
var greenTouched = false;
function scrollCb() {
event.preventDefault();
console.log(event.wheelDelta)
if (event.wheelDelta < 0) {
if (!redTouched) {
$(window).scrollTop($('.red').position().top);
redTouched = true;
} else if (redTouched && !greenTouched) {
$(window).scrollTop($('.green').position().top);
greenTouched = true;
} else if (redTouched && greenTouched) {
window.removeEventListener('mousewheel', scrollCb)
}
} else {
window.removeEventListener('mousewheel', scrollCb)
}
window.addEventListener('mousewheel', scrollCb);
https://jsfiddle.net/jacobjuul/b0k03wtr/
I am trying to animate some divs after the user scrolls to a specific position on the page. the problem is that i want it to happen only once. I used Boolean flags but it doesn't seem to like it.
What are u all suggest me to do?
::the code Its not even running
FYI I don't want to use PHP
var once = false;
$(document).ready(function() {
if ($(window).scrollTop() > 760 && once == false) {
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000 * i).fadeIn(1000);
});
once = true;
}
)};
Thanks!
From your question
after the user scrolls to a specific position on the page
Listen to scroll event
$(document).ready(function() {
var once = false;
$(document).on('scroll', function(){
if ($(window).scrollTop() > 760 && once==false){
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000*i).fadeIn(1000);
});
once=true;
}
});
)};
Alternative from comments. Check if element has a class (or attribute) or not. Below code checks if the element has the data-noanimate attribute. If yes it will not animate, if not it will animate and add data-noanimate so that it will animate once.
$(document).ready(function() {
$(document).on('scroll', function(){
if ($(window).scrollTop() > 760){
$('.hash').each(function(i) {
if($(this).attr('data-noanimate') === undefined){
$(this).attr('data-noanimate','true').fadeOut(0).delay(1000*i).fadeIn(1000);
}
});
}
});
)};
var once=false;
$(document).ready(function() {
if ($(window).scrollTop() > 760 &&once==false)
{
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000*i).fadeIn(1000);});
once=true;
}
});
Your brackets on the end of the ready function were flipped.
The other answer is correct, but it can be better like this:
$(function() {
$(window).on('scroll', function(){
if ($(window).scrollTop() > 760) {
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000 * i).fadeIn(1000);
});
// without boolean value,you can off `scroll` event
$(window).off('scroll');
}
})
});
I want to add some condition in jquery like media queries in CSS, anyone can help me with this? I try the code below but is not working:
jQuery(document).ready(function(){
if (jQuery(window).width() >= 320) && (jQuery(window).width() <= 479) {
}
if (jQuery(window).width() >= 480) && (jQuery(window).width() <= 567) {
}
});
You have parentheses around your individual conditions, but not around the if conditions as a whole.
Try this:
jQuery(document).ready(function(){
alert("Running");
alert(jQuery(window).width());
if ((jQuery(window).width() >= 320) && (jQuery(window).width() <= 479)) {
alert('Small screen');
} else
if ((jQuery(window).width() >= 480) && (jQuery(window).width() <= 567)) {
alert('Large screen');
} else {
alert("Biggest screen");
}
});
Note the extra parentheses after if and before {
You actually don't need mediaqueries in JS to do your task the right way. First of all: how to work with media queries in JS. You can use matchMedia. Here is a brief documentation.
Here is a simple example:
var smallMatcher = matchMedia('(max-width: 480px)');
var biggerMatcher = matchMedia('(max-width: 1024px)');
var run = function(){
if(smallMatcher.matches) {
//run code for small
} else if(biggerMatcher.matches){
//run code for bigger
} else {
//run code for else
}
};
//now run it
run();
//in case you need to dynamically change on resize
//use addListener
smallMatcher.addListener(run);
biggerMatcher.addListener(run);
But as said, you don't need this. What you actually need to do is simple separation of concerns. Don't mix your behavior with your CSS. Simply add focus/blur or focusin/focusout events, the add or remove a class and do everything else in CSS.
This should result in clean and simple code, here is an example:
$('#searchbox')
.on('focus', function(){
$(this).closest('form').addClass('focused-field');
})
.on('blur', function(){
$(this).closest('form').removeClass('focused-field');
})
;
Everything else can and should be handled in CSS.
And In case you need the modify the style for the input button also if the button itself is focused and not only the search input you can see the following fiddle.
I'm creating a scrolling effect using JQuery and I'm wondering if it's possible to distinguish between the user scrolling vs. programmatically scrolling.
I have something like this:
$('#element').on('scroll',function(e){
$('#element').stop(true); // stop previous scrolling animation
$('#element').animate({ // start new scrolling animation (maybe different speed, different direction, etc)
scrollTop:...
});
});
However, this event is triggered during every step of the animation. How can I tell if this event was triggered by the user or by the animation?
Use a variable to determine when you are scrolling programmatically
Example:
var programScrolling = false;
$('#element').on('scroll',function(e){
if (programScrolling) {
return;
}
$('#element').stop(true); // stop scrolling animation
programScrolling = true;
$('#element').animate({
scrollTop:...
});
programScrolling = false;
});
Not sure if that is exactly what you want, but the concept should work.
I would make functions for different kinds of scrollings to detect them and call a scroll handler for all of them, like so:
JS Fiddle
$(window).bind('mousewheel DOMMouseScroll', function(event){
var direction;
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
direction = 'up';
}
else {
direction = 'down';
}
scrollHandler(direction, 'mouseWheel');
event.preventDefault();
});
var scrollHandler = function(direction, origin) {
var height = $(document).scrollTop();
var movement = (direction == 'up') ? -100 : 100;
console.log(origin);
$('body').stop(true);
$('body').animate({
scrollTop: height + movement
}, 250);
};
Then you can do different stuff according to the origin of the event!
You could also check if the user scrolls to the same direction that the screen is scrolling and do something different, or whatever you want with the info passed by the mousewheel event.
Original mousewheel event function copied from THIS answer
I would suggest possibly using the .originalEvent method. The downside is, this is very browser dependent. See here. Hopefully the following helps:
$('#element').scroll(function(e){
var humanScroll = e.originalEvent === undefined;
if(humanScroll) {
$(this).stop(true);
}
})