im trying to create a website that listens to the scrolling event of the entire website. The website in question is exora-it.nl. As you can see when scrolling down is that the mousetracking function updates ONLY after moving your mouse.
My problem is that I want it to happen on actually scrolling down/up the website, so that the overall image is smoother. Anyone who can help me out?
If you're using jQuery, you can simply do this:
$( window ).scroll(function() {
// Do something
});
You can track the scrolling offset of the current window:
var offsetX=window.pageXOffset
var offsetY=window.pageYOffset
And then add this offset to the position of whatever element you're trying to move.
Related
For example:1)i Have a div 100px*900px2) i have an image 100px*200px what i want is i want to move my image the exact number of pixels i scroll up or down
Can any one tell me Update Check this. I want to move that image also when i scroll down animatedly(slowly) not fixed position.
You want to look at the scrollY property on the window object in Javascript. This holds the amount the window has scrolled.
You can then use something like jQuery .animate to move your image the desired amount.
$('#yourImage').animate({"top":window.scrollY+"px"});
Note: This code assumes your image is absolutely positioned.
EDIT
$(window).scroll(function(data){
//It is important to use .stop() for this as otherwise every slight scroll will add the animation to the animation queue.
//What you want is for it to forget the others and go to the latest scroll position
$('#im').stop().animate({"top":(window.scrollY + 10)+"px"}, 500);
});
This code will move an image every time the scroll event is triggered. I have tested this in Firefox using this jsFiddle
I have a simple image gallery here. All I want to do is to scroll through the list of images when the user scrolls his mouse.
Any ideas ? $('').scroll() definitely doen't work. Even if i bind it to the window by
$(window).scroll(function() {
//do something
});
It doen't work , because my window has too less height to be scrollable.
This is not jQuery, but there is a pure JS plugin to capture the mouse scroll event:
http://viralpatel.net/blogs/javascript-mouse-scroll-event-down-example/
demo:
http://viralpatel.net/blogs/demo/javascript-mouse-scroll-wheel-event.html
I have a div with a horizontal scroll.
Is there any way I can detect the click on the horizontal scrolls
arrow using jQuery ?
Note:
Actually I want the scroll to move a fixed no of pixels to the right when the user clicks the right scroll arrow and vice versa.
The event should not be triggered on scroll. It should be only triggered if user explicitly clicks the scrolls arrow.
There are multiple divs having scrollbars, having same class and no ids.
Would prefer to not use any plugins
Here is a demo for what you want
http://jsbin.com/opufow/4/edit
I hope this will help you?
you can use .scroll function of jquery.
Edit 2: Another suggestion is to do something like this depending on your implementation of scrolling areas (see working jsfiddle):
function CustomScrollArrow(elementToScroll) {
var $el = $(elementToScroll);
return $('<a>Click me to scroll</a>').css(/*...*/).click(function(){
$el.scrollLeft($el.scrollLeft()+10);
});
}
$('.ScrollAreaClass').each(function(){
// You could choose to append to your scrolling
// areas or their wrapper classes or whatever...
$('body').append(new CustomScrollArrow(this));
});
Afterwards it's just a matter of styling your handmade arrows.
Edit 1: I've seen you updated your question, so here's an updated answer with an alternative solution.
You can try to circumvent the problem by using a customized scrollbars implementation, for example jScrollPane by Kelvin Luck or any other, whatever. If the solution offers click events on arrows - then you're set. Otherwise just do a bit of tinkering...
I maintain, however, my point of view that unless you are looking to perform an action before the browser executes the arrow click, I would recommend adding an event handler to the actual result of that click, i.e. the scroll.
Doing this will help to avoid inconsistencies across various implementations of scrolling in browsers; will keep working if scrolling is performed in another manner (i.e. swipe gesture); will still work if there's some javascript code that replaces the default browser implementation of scrollbars.
jQuery offers the .scroll handler to capture scrolling and .scrollLeft to determine the resulting position of the horizontally scrolled content.
Try a working jsfiddle or see the code below:
// Cache the initial scroll position:
var initialLeftScroll = $('#wrapper').scrollLeft();
// Bind event:
$('#wrapper').scroll(function (ev) {
// Get new horizontal scroll offset:
var currentLeftScroll = $('#wrapper').scrollLeft();
// Determine the difference
// (did the user scroll horizontally or just vertically?):
var leftScrollDifference = currentLeftScroll - initialLeftScroll;
// Now we can check
if (leftScrollDifference) {
/* Do something here */
}
// Reset the cache:
initialLeftScroll = currentLeftScroll;
});
I have a function which runs based on a setInterval() call. It looks like this:
function update()
{
destinationY = targetPage.offset().top - $("div#reel").offset().top;
currentY -= (currentY - destinationY) / REEL_EASE;
$(document).scrollTop(currentY);
}
This updates the position of the document constantly to give the effect of a sliding animation, sliding towards certain points which are stored by the navigation items.
I want to not run the above code if the scrollbar has been clicked on the page. How can I call a method when the scrollbar is clicked?
You can't detect when the bar itself is clicked. The closest you can get is attaching a handler to window.onscroll, which is fired only when the scrollbar's position changes (clicking to scroll or mouse wheel up/down to scroll).
http://jsfiddle.net/CTHCe/
This isn't an exact answer, but you should be able to use the scroll event to keep track of whether the scrollbar is being used:
http://api.jquery.com/scroll/
Just visit http://techcrunch.com/ and scroll down. How do they do it? How that top line appears with a new logo? Is there any jQuery trick? How to determine when person scrolled down certain amount of pixels and show to him new html?
They might just use jQuery-Waypoints which lets you trigger events if the user "passes" a certain HTML-Element.
Example ( taken from page ):
$('.entry').waypoint(function() {
alert('You have scrolled to an entry.');
});
They are using jquery sonar plugin[1] which defines special jquery events[2].
The trick is putting a static positioned top element, on a very high z-index layer, with the part to be occupied by the dynamic logo initially transparent. When the jquery event is thrown, they just make the new logo visible above any underlying content.
[1] http://artzstudio.com/files/jquery-boston-2010/jquery.sonar/jquery.sonar.js
[2] http://benalman.com/news/2010/03/jquery-special-events/#api
Maybe they use window.pageYOffset and there is also document.documentElement.scrollHeight and finally they use the window.onscroll event.
They use the window.scroll() function to listen for the scroll event, then use window.scrollTop() to determine the offset of the logo from the top of the page.
see: http://jsfiddle.net/XkMrc/2/