I'm trying to trigger a function when the mouse wheel is spun, however the div is the height of the window, therefor isn't scrollable and isn't triggering my function. This is the code I am using to test if it works;
jQuery(document).ready(function($) {
$( document ).scroll(function () {
console.log('it works!');
});
});
You can see the full fiddle here; https://jsfiddle.net/8wr8p4ub/1/
If I change the height to an exact value, it triggers, however how can I achieve this when the element isn't scrollable?
You have to check with mousewheel event here and not document scroll. Since in your case document is not scrolling.
$(window).bind('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
// scroll up
console.log("scroll up");
}
else {
// scroll down
console.log("scroll down");
}
});
* {
padding: 0;
margin: 0;
}
.hi {
height: 100vh; // Change to 1200px and see the output in the console.
width: auto;
background: #222;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hi"></div>
You don't need to bother yourself about the scroll once the page content is not so long to bring it out. But from what i saw there, your code is fine, and it will work whenever the content exceeds the minimum page scroll
Better still, you can make use of the mousewheel event in JS
You need to use mousewheel event handler:
$('div').on('mousewheel', function(event){
if(event.originalEvent.wheelDelta / 120 > 0) {
console.log('scrolled up');
} else {
console.log('scrolled down');
}
});
Related
i am trying to fix the button on top when we scroll the window ,as soon as the button reach on the top then to be fixed, please need your help, i am using javascript code for this or if you have suitable code related to javascript or jquery then please suggest me,
i am showing a snapshot that clear you that what i want to do in this images,
image is here please click to see clearly my problem
This is my button code
HELPLINE NUMBER
and
This is javascript code what i have tried:
<script>
window.onscroll= function(){ myfunc(); }
var location_v=document.getElementById("NUMBER");
var pixtop=location_v.offsetTop;
function myfunc()
{
if(window.pageYOffset >= pixtop )
{
//var a=document.getElementById('NUMBER');
location_v.classList.add('stick');
}
else
{
a.classList.remove('stick');
}
}
</script>
and the css code is below:
.stick {
position:fixed;
top: 10px;
width: 100%;
}
and please also don't forget to tell me what i am missing, if you have any conceptual javascript or jquery code...
Here is a script that can do the trick for you:
$(document).ready(function() {
$(window).scroll(function () {
if ($(window).scrollTop() > 90) {
$('#NUMBER').addClass('stick');
}
if ($(window).scrollTop() < 91) {
$('#NUMBER').removeClass('stick');
}
});
});
And what it does is on each scroll event it checks the scrolling position from top of a window and using if check it either adds or removes your pre-made stick class. But of course you have to chose your own numbers in this if check.
I have also played around with a code snippet, so you can see how it works
$(document).ready(function() {
$(window).scroll(function () {
if ($(window).scrollTop() > 10) {
$('#NUMBER').addClass('stick');
}
if ($(window).scrollTop() < 11) {
$('#NUMBER').removeClass('stick');
}
});
});
body {
height: 600px;
}
.stick {
position: fixed;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="NUMBER">Press me</button>
i'm trying to use this code to get scrolling direction the problem is when scroll up the detection is not going well
$(window).bind('DOMMouseScroll scroll mousewheel', function(event) {
if (event.originalEvent.wheelDelta >= 0) {
console.log('scroll up');
}else {
console.log('scroll down');
});
});
Here's a screen capture of the result enter image description here it shows scroll up then scroll down but i'm not scrolling down
You have way too many events bound.
Try this code, the only difference is that I use it on a div.
$('div').bind('mousewheel', function(event) {
if (event.originalEvent.wheelDelta >= 0) {
console.log('scroll up');
}else {
console.log('scroll down');
}
});
Here is a working JS fiddle:
https://jsfiddle.net/r1sjv2tv/
Edit: The above answer works, albeit only when using wheel scroll.
However, the window can also be scrolled with mouse. If you to handle it as well, it will get a bit more complex.
I have made a solution that listens to onscroll event and simply compares the current scrolltop position with the last scrolltop position to determine the direction of a scroll.
$('div').bind('scroll', function(event) {
if ($(this).scrollTop() < $(this).data('last-scroll')) {
console.log('scroll up');
} else {
console.log('scroll down');
}
$(this).data('last-scroll',$(this).scrollTop());
});
This works independent of the original event trigger.
Please see the fiddle:
https://jsfiddle.net/r1sjv2tv/2/
I am trying to achieve the "back to top" feature on a page through simple jquery. The "BACK TO TOP" button appears/disappears as expected.
When it appears if I click on it, I expect it to go to the top of the page, instead nothing happens. I am not sure what's going wrong.
Here's the code:
css:
#btoTop {
padding: 15px 10px;
background: #1f242a;
color: #fff;
position: fixed;
bottom: 0;
right: 15px;
display: none;
cursor:pointer;
cursor:hand;
width:130px;
height:40px;
}
html:
<div id='btoTop'>BACK TO TOP</div>
js:
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop() > 0){
$("#btoTop").fadeIn("slow");
}
else {
$("#btoTop").fadeOut("slow");
}
});
$("#btoTop").click(function(event){
event.preventDefault();
$("html, body").animate({scrollTop:0 },"slow");
});
});
Note: If I call the click function inside the $(window).scroll(), I am able to click the button. But it flickers and doesn't work well with window resize.
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop() > 0){
$("#btoTop").fadeIn("slow");
}
else {
$("#btoTop").fadeOut("slow");
}
$("#btoTop").click(function(event){
event.preventDefault();
$("html, body").animate({scrollTop:0 },"slow");
});
});
});
You're binding click on your button every single time you scroll, which is unnecessary. You should change it:
$(document).ready(function () {
$(window).scroll(function () {
if( $(window).scrollTop() > 0 ) {
$("#btoTop").fadeIn("slow");
} else {
$("#btoTop").fadeOut("slow");
}
});
// Bound a single time
$("#btoTop").click(function ( event ) {
event.preventDefault();
console.log("Clicked the button");
$("html, body").animate({scrollTop:0 },"slow");
});
});
This might not be the problem, but should be changed to avoid strange behaviours in your code.
I figured out the button was not yet available in the DOM when I was trying to click it.
Adding a timer on it worked pretty good. Hope this helps someone out there with similar issue...
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop() > 0){
$("#btoTop").fadeIn("slow");
}
else {
$("#btoTop").fadeOut("slow");
}
});
$timeout( function() {
$("#btoTop").click(function(event){
event.preventDefault();
$("html, body").animate({scrollTop:0 },"slow");
});
}, 500);
});
I have one wordpress plugin which displays popup on scroll. So I have code like this:
jQuery(window).scroll(function(){
//display popup
});
I have problem with one site. The site has those css rules:
html, body {
overflow: hidden;
}
div#pageWrap {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
So scroll event is not triggering on window and my popup doesn't work. So in this case I should set scroll event on #pageWrap div instead on window because scroll event doesn't propagate:
jQuery("#pageWrap").scroll(function(){
//display popup
});
My question is can I handle this dinamicaly. I cannot change code of my plugin for each site where I have this problem. Is possible to do something like make scroll event to propagate or to set some failback. Any idea about this will be helpful.
I can't promise that this will accommodate all edge cases, but it should take care of most of them.
JS:
jQuery.fn['any'] = function() {
return (this.length > 0);
};
if (jQuery("html").css('overflow') == 'hidden') {
if (jQuery("body").css('overflow') == 'hidden') {
var scrollElement = jQuery('*').filter(function() { return jQuery(this).css('overflow') == 'scroll'; });
if (!scrollElement.any()) {
var scrollElement = jQuery('*').filter(function() { return jQuery(this).css('overflow-y') == 'scroll'; });
jQuery(scrollElement[0]).scroll(function(){
//display popup
});
}
else {
jQuery(scrollElement[0]).scroll(function(){
//display popup
});
}
}
else {
jQuery("body").scroll(function(){
//display popup
});
}
}
else {
jQuery(window).scroll(function(){
//display popup
});
}
https://jsfiddle.net/hopkins_matt/d0gtqkat/
I don't think there's a global solution for this issue, but maybe you'll find some close solutions.
The close solution in my mind is to find the div element that has (overflow='scroll') and it's width and height are very close to the width and height of the window.
if you found more than one div like that then you need to deal with the deepest div in the DOM.
if you haven't found any div like that, then you deal with jQuery(window) instead.
I have an element, which fills the screen. Under that I have another element which does NOT fill the screen but is hidden. So you can't manually scroll to that.
The first element which is filling the screen has the following CSS properties:
header {
position: relative;
height: 100vh;
background-color: green;
}
And the second element has these CSS properties:
#content {
display: none;
position: relative;
height: 1500px;
width: 100%;
background-color: yellow;
}
I use this code to trace the scrolling:
$('header').bind("DOMMouseScroll mousewheel", function(e) {
...
});
Inside this method I check which panel is activated (by a self created boolean) and which direction I'm scrolling to, by doing this:
$('header').bind("DOMMouseScroll mousewheel", function(e) {
var wheelDelta = e.originalEvent.wheelDelta;
if (active === header && wheelDelta <= 0) {
...
}
});
Inside that if statement I give call a method that displays the #content element below it and smoothly scrolls to it, and when its done scrolling it hides the element where we have scrolled from (header). I'm using this piece of code for that:
$('body').bind("DOMMouseScroll mousewheel", function (e) {
event.preventDefault();
var wheelDelta = e.originalEvent.wheelDelta;
$('header').unbind("DOMMouseScroll mousewheel");
if (active === header && wheelDelta <= 0) {
showScrollHide(500, content, 1000, header, 250, function () {
_window.scrollTop(0);
_scrollBackBtn.fadeIn();
active = content;
});
}
});
This works perfectly, whenever I scroll down on the header element while its active. It smoothly scrolls down to the #content element under it.
There I have a button which scrolls back up the page, I have this code for it:
_scrollBackBtn.on('click', function() {
if (active === content) {
active = header;
scrollBackHide(header, content, 500, 250, function() {
window.location = '#';
});
}
});
Which also works perfectly, it scrolls back to the top of the page.
But whenever I try to scroll down again, it doesn't do anything. How does this come?
I had to add $('header').unbind("DOMMouseScroll mousewheel"); to the code, otherwise it looked very ugly in the end result.
Whenever I added $('header').stop(); in the same section, it didn't make any difference.
So my question is. How can this .bind method be used again for the same thing?
Here's a demo if you don't understand what I mean. Whenever you scroll down on the header element, and scroll back up via the button. Its not doing the same again.
You are unbinding your mousewheel handlers when they run once and then never re-binding them, so there are no event handlers in place to react to mousewheel events after you click the button. Re-binding that event handler when you click the button does the trick.
Here is a fiddle that does that and should point you in the right direction.
I pulled your mousewheel handler out into a function so we can reuse it whenever we need to bind those events:
var handleMouseWheel = function(e){
e.preventDefault();
var wheelDelta = e.originalEvent.wheelDelta;
if (active === header && wheelDelta <= 0) {
$('body').unbind("DOMMouseScroll mousewheel");
showScrollHide(500, content, 1000, header, 250, function () {
_window.scrollTop(0);
_scrollBackBtn.fadeIn();
active = content;
});
}
};
and use that to reattach an event handler when the button is clicked:
_scrollBackBtn.on('click', function () {
if (active === content) {
scrollBackHide(header, content, 500, 250, function () {
window.location = '#';
active = header;
});
$('body').bind("DOMMouseScroll mousewheel", handleMouseWheel);
}
});