Animated Scroll Image to a particular position on a window - javascript

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

Related

Div appear after scroll past a div

I know there are a lot of tutorials to let a div appear after scroll down a certain amount of pixels.
But what I want is to let a div appear when the user scrolls past another div. And when they scroll back up it has to disappear again.
Why not after an amount of pixels? I want to use this for my menubar to appear on the top of my page after the user scrolls past the banner image. BUT when you scale down the browser (mobile, tablet, small screen...) the banner image will scale down to! The image will not be the same height as before. The menubar would appear to late or to earlier;) that's why I want the menubar to appear after that image (div).
Hope you guys can help!
Now that we are talking in abstract terms, I will try to explain to the best of my ability.
Can't you get the current position of the targetDiv (the div, after which scrolling down would show the menubar), and then use the same code of making the menuDiv appear after scroll down a certain amount of pixels.
This answer might help you in getting the current position of the targetDiv.
So, do the following steps and let me know how it went:
1) Get jquery.appear
2) Apply the disappear event on your selector:
$('someselector').on('disappear', function(event, $all_disappeared_elements) {
// this element is now outside browser viewport
});
3) On that event just make the other div dissapear.
$('theStuffToHide').toggle()
4) Final result
$('someselector').on('disappear', function(event, $all_disappeared_elements) {
$('theStuffToHide').toggle()
});
This should be the only thing you need.
Cheers, hope it helps.
You can check for the pageoffset to cross the amount (top offset of the target + height of the target element ) and show the div.
And when the pageoffset comes less that the calculated amount, make the div hide

if cursor inside div then display block jquery

Here is a jsfiddle of the problem:
http://jsfiddle.net/MEJgb/
I want it so when you hover over anywhere in the footer the toggledown will become active and will remain active until you move the mouse from the footer.
Your problem is the following line:
jQuery('html,body').animate({
scrollTop: jQuery("#footer_copy_right").offset().top
}, 'slow');
This causes the whole page to move adn thus the item you were hovering over is no longer being hovered over so it triggers your event again and hides your text. When I was testing this was causing the hover content to move back under my mouse and thus trigger again...
I would personally not use hover in this situation and let the user click to expand and then click again to collapse.
If you want to keep using the hover option then you need to decide what the event to trigger the collapse should be. Clearly the current choice (mouse no longer over the arrow) is insufficient.
Often what I will do is attach the hover to a block containing the visible triggering block as well as the contents that are going to be displayed. This way your content won't collapse until you have moved off the newly displayed content.
http://jsfiddle.net/AjHwM/ is an example of such a thing.
Even if I'm not sure what your actual goal is, maybe the document.elementFromPoint() method is what helps you out here.
It is invoked like
if( document.elementFromPoint( event.pageX, event.pageY ) === $('#footer')[0] ) { }
That code, within your hover aka mouseenter / mouseleave handlers, would compare the node which lays under the current absolute mouse cursor X/Y positions against the #footer node.
Ref.: MDN doc, W3C doc

How do I gather information about the scrollbar in JQuery, specifically whether it is being dragged?

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/

How to know when you scrolled down?

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/

How to calculate if mouse pointer at bottom page using Prototype?

I want to create auto-hide menu, just the same thing like http://www.ringvemedia.com/shanghai-photos but the problem is that I also have content that is scrolling down so if I calculate pointerY it will return mouse absolute position so it could be 1000...999999 depends on how many content you have to scroll down, that why I cant use something like "if (pointerY+50) >= document.viewport.getDimensions().height then $("somethind").show();". What I want is to somehow calculate that mouse right now is on bottom of the screen (+- 50px) (not the content).
I think I have confused even myself :) hope someone will understand what I wrote.
I think you have to use document.viewport.getScrollOffsets() and then substract the pointerY with the scroll offset to get the position in the viewport.

Categories