I wanna call my_function1 when user scroll up (in the full-screen height page) or call my_function2 when the user scrolls down.
When I open a page with this code, it will always immediately run function in else {} (in this code example "slide_down();". What am I doing wrong, please?
var position = $(window).scrollTop();
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > position) {
slide_up();
} else {
slide_down();
}
position = scroll;
});
Here is the code that detects if the user has scrolled up or down and is mobile friendly too.
console.log() is acting up in code snippets as the log is called for every pixel scrolled.
var lastScrollTop = 0;
// element should be replaced with the actual target element on which you have applied scroll, use window in case of no target element.
window.addEventListener("scroll", function(){
var st = window.pageYOffset || document.documentElement.scrollTop;
if (st > lastScrollTop){
// Do scroll down code
console.log("Down");
} else {
// Do scroll up code
console.log("Up");
}
lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}, false);
div {
height: 300px;
border: 1px solid;
}
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
This is working in my scenario (detecting mouse wheel in full-screen page)
// Detect IE version
var iev=0;
var ieold = (/MSIE (\d+\.\d+);/.test(navigator.userAgent));
var trident = !!navigator.userAgent.match(/Trident\/7.0/);
var rv=navigator.userAgent.indexOf("rv:11.0");
if (ieold) iev=new Number(RegExp.$1);
if (navigator.appVersion.indexOf("MSIE 10") != -1) iev=10;
if (trident&&rv!=-1) iev=11;
// Firefox or IE 11
if(typeof InstallTrigger !== 'undefined' || iev == 11) {
var lastScrollTop = 0;
$(window).on('scroll', function() {
st = $(this).scrollTop();
if(st < lastScrollTop) {
console.log('Up');
}
else if(st > lastScrollTop) {
console.log('Down');
}
lastScrollTop = st;
});
}
// Other browsers
else {
$('body').on('mousewheel', function(e){
if(e.originalEvent.wheelDelta > 0) {
console.log('Up');
}
else if(e.originalEvent.wheelDelta < 0) {
console.log('Down');
}
});
}
I'm trying to append a div when the mobile is in landscape mode. But I only want the div to be append once and one time only.
function doStuff() {
landscape = window.orientation ? window.orientation == 'landscape' : true;
if (landscape && window.innerWidth < 736 && window.innerWidth > 320) {
if (window.innerHeight > window.innerWidth) {
console.log("portrait");
} else {
$("body").append("<div>Test</div>");
}
}
}
window.onload = window.onresize = doStuff;
if (window.onorientationchange) {
window.onorientationchange = doStuff;
}
There's no need for JS code here - you can use CSS alone to achieve this. Media queries have the orientation restriction which you can use to display the required content:
.landscape-only { display: none; }
#media all and (orientation:landscape) {
.landscape-only { display: block; }
}
Working example
To see the content change you will just need to resize the width of the Output frame in the above Fiddle.
You can check if this div is already appended.
var appended = false;
function doStuff() {
if(appended) return;
landscape = window.orientation? window.orientation=='landscape' : true;
if(landscape && window.innerWidth < 736 && window.innerWidth > 320){
if(window.innerHeight > window.innerWidth){
console.log("portrait");
} else{
$("body").append("<div>Test</div>");
appended = true;
}
}
}
You could use one(), which fires only once
For Appending you need to use this
var $div = $('<div />').appendTo('body');
$div.attr('id', 'holdy');
Set flag = true if div is already appended.
function doStuff(){
landscape = window.orientation? window.orientation=='landscape' : true;
var flag = false;
if(landscape && window.innerWidth < 736 && window.innerWidth > 320){
if(window.innerHeight > window.innerWidth){
console.log("portrait");
}else{
if (flag == false){
$( "body" ).append( "<div>Test</div>" );
flag = true;
}else{
console.log("Div is already appended");
}
}
}
}
window.onload=window.onresize=doStuff;
if(window.onorientationchange){
window.onorientationchange=doStuff;
}
I think you can use the .one(). there is example of how use it on internet.
http://api.jquery.com/one/
I'm trying to stop my main page from scrolling when the user hits the bottom of two specific sections of a page using the following code, but it's stopping the mouse wheel from working over those divs at all.
var scroller = document.querySelector('#Filters');
scroller.addEventListener('wheel', listener);
function listener(event)
{
var elem = event.currentTarget;
if ((event.deltaY < 0 && elem.scrollTop === 0) ||
(event.deltaY > 0 && elem.offsetHeight + elem.scrollTop >= elem.scrollHeight))
{
event.preventDefault();
}
else if ((event.deltaX < 0 && elem.scrollLeft === 0) ||
(event.deltaX > 0 && elem.offsetWidth + elem.scrollLeft >= elem.scrollWidth))
{
event.preventDefault();
}
}
You can use a more efficient solution than recalculating the scroll in js, disabling the body scrolling when scrolling the child element.
HTML:
<div onmouseover="disableScroll();" onmouseout="enableScroll();">
content
</div>
JS:
var body = document.getElementsByTagName('body')[0];
function enableScroll() {
body.style.overflowY = 'auto';
}
function disableScroll() {
body.style.overflowY = 'hidden';
}
I have a div, with a scroll bar, When it reaches the end, my page starts scrolling. Is there anyway I can stop this behavior ?
You can inactivate the scrolling of the whole page by doing something like this:
<div onmouseover="document.body.style.overflow='hidden';" onmouseout="document.body.style.overflow='auto';"></div>
Found the solution.
http://jsbin.com/itajok
This is what I needed.
And this is the code.
http://jsbin.com/itajok/edit#javascript,html
Uses a jQuery Plug-in.
Update due to deprecation notice
From jquery-mousewheel:
The old behavior of adding three arguments (delta, deltaX, and deltaY)
to the event handler is now deprecated and will be removed in later
releases.
Then, event.deltaY must now be used:
var toolbox = $('#toolbox'),
height = toolbox.height(),
scrollHeight = toolbox.get(0).scrollHeight;
toolbox.off("mousewheel").on("mousewheel", function (event) {
var blockScrolling = this.scrollTop === scrollHeight - height && event.deltaY < 0 || this.scrollTop === 0 && event.deltaY > 0;
return !blockScrolling;
});
Demo
The selected solution is a work of art. Thought it was worthy of a plugin....
$.fn.scrollGuard = function() {
return this
.on( 'wheel', function ( e ) {
var event = e.originalEvent;
var d = event.wheelDelta || -event.detail;
this.scrollTop += ( d < 0 ? 1 : -1 ) * 30;
e.preventDefault();
});
};
This has been an ongoing inconvenience for me and this solution is so clean compared to other hacks I've seen. Curious to know how more about how it works and how widely supported it would be, but cheers to Jeevan and whoever originally came up with this. BTW - stackoverflow answer editor needs this!
UPDATE
I believe this is better in that it doesn't try to manipulate the DOM at all, only prevents bubbling conditionally...
$.fn.scrollGuard2 = function() {
return this
.on( 'wheel', function ( e ) {
var $this = $(this);
if (e.originalEvent.deltaY < 0) {
/* scrolling up */
return ($this.scrollTop() > 0);
} else {
/* scrolling down */
return ($this.scrollTop() + $this.innerHeight() < $this[0].scrollHeight);
}
})
;
};
Works great in chrome and much simpler than other solutions... let me know how it fares elsewhere...
FIDDLE
You could use a mouseover event on the div to disable the body scrollbar and then a mouseout event to activate it again?
E.g. The HTML
<div onmouseover="disableBodyScroll();" onmouseout="enableBodyScroll();">
content
</div>
And then the javascript like so:
var body = document.getElementsByTagName('body')[0];
function disableBodyScroll() {
body.style.overflowY = 'hidden';
}
function enableBodyScroll() {
body.style.overflowY = 'auto';
}
As answered here, most modern browsers now support the overscroll-behavior: none; CSS property, that prevents scroll chaining. And that's it, just one line!
Here's a cross-browser way to do this on the Y axis, it works on desktop and mobile. Tested on OSX and iOS.
var scrollArea = this.querySelector(".scroll-area");
scrollArea.addEventListener("wheel", function() {
var scrollTop = this.scrollTop;
var maxScroll = this.scrollHeight - this.offsetHeight;
var deltaY = event.deltaY;
if ( (scrollTop >= maxScroll && deltaY > 0) || (scrollTop === 0 && deltaY < 0) ) {
event.preventDefault();
}
}, {passive:false});
scrollArea.addEventListener("touchstart", function(event) {
this.previousClientY = event.touches[0].clientY;
}, {passive:false});
scrollArea.addEventListener("touchmove", function(event) {
var scrollTop = this.scrollTop;
var maxScroll = this.scrollHeight - this.offsetHeight;
var currentClientY = event.touches[0].clientY;
var deltaY = this.previousClientY - currentClientY;
if ( (scrollTop >= maxScroll && deltaY > 0) || (scrollTop === 0 && deltaY < 0) ) {
event.preventDefault();
}
this.previousClientY = currentClientY;
}, {passive:false});
I wrote resolving for this issue
var div;
div = document.getElementsByClassName('selector')[0];
div.addEventListener('mousewheel', function(e) {
if (div.clientHeight + div.scrollTop + e.deltaY >= div.scrollHeight) {
e.preventDefault();
div.scrollTop = div.scrollHeight;
} else if (div.scrollTop + e.deltaY <= 0) {
e.preventDefault();
div.scrollTop = 0;
}
}, false);
If I understand your question correctly, then you want to prevent scrolling of the main content when the mouse is over a div (let's say a sidebar). For that, the sidebar may not be a child of the scrolling container of the main content (which was the browser window), to prevent the scroll event from bubbling up to its parent.
This possibly requires some markup changes in the following manner:
<div id="wrapper">
<div id="content">
</div>
</div>
<div id="sidebar">
</div>
See it's working in this sample fiddle and compare that with this sample fiddle which has a slightly different mouse leave behavior of the sidebar.
See also scroll only one particular div with browser's main scrollbar.
this disables the scrolling on the window if you enter the selector element.
works like charms.
elements = $(".selector");
elements.on('mouseenter', function() {
window.currentScrollTop = $(window).scrollTop();
window.currentScrollLeft = $(window).scrollTop();
$(window).on("scroll.prevent", function() {
$(window).scrollTop(window.currentScrollTop);
$(window).scrollLeft(window.currentScrollLeft);
});
});
elements.on('mouseleave', function() {
$(window).off("scroll.prevent");
});
You can inactivate the scrolling of the whole page by doing something like this but display the scrollbar!
<div onmouseover="document.body.style.overflow='hidden'; document.body.style.position='fixed';" onmouseout="document.body.style.overflow='auto'; document.body.style.position='relative';"></div>
$this.find('.scrollingDiv').on('mousewheel DOMMouseScroll', function (e) {
var delta = -e.originalEvent.wheelDelta || e.originalEvent.detail;
var scrollTop = this.scrollTop;
if((delta < 0 && scrollTop === 0) || (delta > 0 && this.scrollHeight - this.clientHeight - scrollTop === 0)) {
e.preventDefault();
}
});
Based on ceed's answer, here is a version that allows nesting scroll guarded elements. Only the element the mouse is over will scroll, and it scrolls quite smoothly. This version is also re-entrant. It can be used multiple times on the same element and will correctly remove and reinstall the handlers.
jQuery.fn.scrollGuard = function() {
this
.addClass('scroll-guarding')
.off('.scrollGuard').on('mouseenter.scrollGuard', function() {
var $g = $(this).parent().closest('.scroll-guarding');
$g = $g.length ? $g : $(window);
$g[0].myCst = $g.scrollTop();
$g[0].myCsl = $g.scrollLeft();
$g.off("scroll.prevent").on("scroll.prevent", function() {
$g.scrollTop($g[0].myCst);
$g.scrollLeft($g[0].myCsl);
});
})
.on('mouseleave.scrollGuard', function() {
var $g = $(this).parent().closest('.scroll-guarding');
$g = $g.length ? $g : $(window);
$g.off("scroll.prevent");
});
};
One easy way to use is to add a class, such as scroll-guard, to all the elements in the page that you allow scrolling on. Then use $('.scroll-guard').scrollGuard() to guard them.
If you apply an overflow: hidden style it should go away
edit: actually I read your question wrong, that will only hide the scroll bar but I don't think that's what you are looking for.
I couldn't get any of the answers to work in Chrome and Firefox, so I came up with this amalgamation:
$someElement.on('mousewheel DOMMouseScroll', scrollProtection);
function scrollProtection(event) {
var $this = $(this);
event = event.originalEvent;
var direction = (event.wheelDelta * -1) || (event.detail);
if (direction < 0) {
if ($this.scrollTop() <= 0) {
return false;
}
} else {
if ($this.scrollTop() + $this.innerHeight() >= $this[0].scrollHeight) {
return false;
}
}
}
Hi can someone please tell me how to position an image in the centre of the screen using javascript?
Would I get the screen height and divide by 2? How would I get the screen height?
Thanks!
Really, CSS is the best way to do this (as per Sebastián's answer), and if you have to use JS then go for jQuery. However you asked for a javascript solution so you'll find one below.
Really the only two reaons I can see js being necessary are:
If the image is to be centered as a result of user interaction or
If the image has to be centered once, and then should remain static (instead of remaining centered, as would happen with a CSS solution).
Anyways... enjoy:
Usage:
imgToMiddle('imageid');
Note that 'imageid' is the id of the image you want to place in the screen's center. The function modifies the image's css properties to place it in the middle of the screen.
Code:
//viewport width/height code from here: http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/
function imgToMiddle(imgid){
function viewportWidth(){
var viewportwidth;
if (typeof window.innerWidth != 'undefined'){
viewportwidth = window.innerWidth;
}
else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0){
viewportwidth = document.documentElement.clientWidth;
}
else{
viewportwidth = document.getElementsByTagName('body')[0].clientWidth;
}
return viewportwidth;
}
function viewportHeight(){
var viewportheight;
if (typeof window.innerWidth != 'undefined'){
viewportheight = window.innerHeight;
}
else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0){
viewportheight = document.documentElement.clientHeight;
}
else{
viewportheight = document.getElementsByTagName('body')[0].clientHeight;
}
return viewportheight;
}
var img=document.getElementById(imgid);
img.style.position="absolute";
img.style.left=viewportWidth()/2-img.width/2;
img.style.top=viewportHeight()/2-img.height/2;
}
Centering with CSS:
http://www.bluerobot.com/web/css/center1.html
http://www.spanish-translator-services.com/espanol/t/007/center.html
http://simplebits.com/notebook/2004/09/08/centering/
Centering with javascript (jQuery):
Using jQuery to center a DIV on the screen
This is a modification of Cam's answer (which I got to work with some slight modification). This answer features a little more jQuery, and most importantly, the position:fixed, so that the resulting div will always be squarely in the middle of your viewport, no matter how far down or up you have to scroll.
function imgToMiddle(imgid){
function viewportWidth(){
var viewportwidth;
if (typeof window.innerWidth != 'undefined'){
viewportwidth = window.innerWidth;
}
else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0){
viewportwidth = document.documentElement.clientWidth;
}
else{
viewportwidth = document.getElementsByTagName('body')[0].clientWidth;
}
return viewportwidth;
}
function viewportHeight(){
var viewportheight;
if (typeof window.innerWidth != 'undefined'){
viewportheight = window.innerHeight;
}
else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0){
viewportheight = document.documentElement.clientHeight;
}
else{
viewportheight = document.getElementsByTagName('body')[0].clientHeight;
}
return viewportheight;
}
var img=document.getElementById(imgid);
$(img).css("position","fixed");//note: position:"fixed" will keep the div exactly in the middle of your browser viewport. This can be useful as a modal dialog box.
$(img).css("left",parseInt(viewportWidth() / 2) - 100 );//note: "100" is half the width of the target div.
$(img).css("top",parseInt(viewportHeight() / 2) - 100 );//note: "100" is half the height of the target div.
}
Please refer to my following answer