Normally web page automatically scroll down or scroll up when mouse with link or drag element reach bottom/top of the view port.I need to change the position of start scrolling of the webpage, the web page or particular <div> scroll down/up when a drag-element reach some distance of the view port.How can achieve this. I am using angular-drag-and-drop-lists Plug.
Default Scrolling Start Position:
Customize Scroll start Position (I need this result):
Probably you need some js code based on drag event.
Quick html example:
Example link
<script>
//Put distance you want to scroll from
var youMaxDist = 50;
var scrollSpeed = 10;
function calcCoords(event) {
//Distance to buttom. It isn't works fine, but good enough
var currDist = window.innerHeight - event.clientY;
//Trigger scroll
if(currDist < youMaxDist)
window.scrollTo(0, document.documentElement.scrollTop + scrollSpeed);
}
</script>
Also, please, pay some attention for browser version supports and mobile screen issues
Related
I am hoping to create an effect similar to this one further down the page, in the 'Designing For 20-Somethings' section.
The effect is essentially to get a long image to change the css top value within a device such as a MacBook or iPhone, so it appears as though the image within the device is also scrolling whilst the user is scrolling the website.
I've created a fiddle to show how far I've got, but this doesn't work well on resize or when initially loaded.
This is some of the code I am using below
var yOffset = $element.offset().top - ($(document).scrollTop() + $(window).height()/diviser)
Any help is appreciated.
OK I see it now. But the movement is so subtle i didn't even notice it. It looks to be a lot of work for something that is pretty much unnoticeable. It appears he's changing the top position of the image based on some percentage change of the full window scroll but only when the image is inside the viewport.
Just off the top of my head (completely untested) something like this would scroll the image up and 1/4 the speed the window would scroll;
var mobiletop = $('.mobile').position().top;
var scrollfactor = 4;
$(window).scroll(function(){
if($(window).scrollTop() > mobiletop){
var imgtop = $('.mobile img').position().top - (($(window).scrollTop() - mobiletop)/scrollfactor);
$('.mobile img').css('top', imgtop + 'px');
}
I have two charts; bar chart and word cloud.
I would like word cloud to move down as I scroll down. Any ideas/examples on how to achieve this with D3.js / JavaScript?
Here is my DEMO (You should launch the preview in separate window).
Thanks!
You can control the positioning of a DOM element through a window event listener like this:
window.addEventListener("scroll", myFunc.bind(this, document.getElementById("scroller")), false);
function myFunc(div) {
var scroll = document.body.scrollTop;
div.style.top = (scroll / 10)+"px";
};
So for every ten pixels the user scrolls, the scroller element will move one pixel.
http://jsfiddle.net/76vd9h3g/
Cross browser implementation of scrollTop here
fiddle: http://jsfiddle.net/DerNalia/88N4d/9/
The behavior I'm trying to accomplish:
The Sidebar(s) should be fixed on the page if there is enough room
for them
The Sidebar(s) should scroll if there is ever not enough room for them
When scrolling down, and the bottom of the sidebar(s) is reached, it should stop scrolling
When scrolling down, the sidebar(s) should also scroll down, until
the bottom of the sidebar(s) is/are reached
When scrolling up, and the top of the sidebar(s) is reached, it should stop scrolling
If at any point during the scrolling of the content, the user switches directions of scrolling, the sidebar(s) shall also move in the same direction as the rest of the page / content
When scrolling up, the sidebar(s) should also scroll up, until the
top of the sidebar(s) is/are reached
If the content is shorter than the sidebar(s), the sidebar(s) should
still be able to scroll This is the one that I'm having trouble
with
How do I make it so that I can detect the intended scroll distance desired by the user, rather than use the actual scrolled distance of the content body? There may be another solution, but this is all I can think of for right now.
I'm currently using Chrome on Mac.
UPDATE:
something I've noticed: using the track pad on macs does the stretching / bouncy scrolling shenanigans on the edges.. which messes up this javascript hard core. It's possible to scroll the sidebar completely off the screen if you bounce up enough times. Mouse Wheel scrolling does not have this issue.
I think you’d be much better off positioning the columns absolute and then check positions onscroll and toggle the positions.
It gets quite complicated, since the scroll will jump if both columns are fixed and the content has regular flow.
I created a solution for you using a simpler logic that goes:
var $win = $(window);
var $containers = $(".container").css('position','absolute');
// we need to force a height to the body for fixed positioning
$('body').css('minHeight', Math.max.apply( Math, $containers.map(function() {
return $(this).height();
})));
$win.bind("resize scroll", function() {
var scrolled = $win.scrollTop(),
winheight = $win.height(),
elheight = 0;
$containers.each(function() {
elheight = $(this).height();
$(this).css('position', function() {
if ( elheight > (winheight+scrolled) ) {
$(this).css('top',0);
return 'absolute';
}
$(this).css('top', Math.min(0, winheight-elheight));
return 'fixed';
});
});
});
It should fill your requirements. The fixed positioning kicks in if the columns are shorter than the window height, or if the scrollTop is enough.
A demo in all it’s glory: http://jsfiddle.net/mb9qC/
I am using the excellent jQuery Reel plugin (http://jquery.vostrel.cz/reel) for a project. I would like to bind to the window scroll event, so when the user scrolls down the page the plugin advances 1 frame for say every 10px scrolled, if the user scrolls up the animation is reversed.
The plugin has methods I can pass the values to no problem and I know how to bind to the window scroll event. What I am struggling with is the last.
How can I use jQuery/JavaScript to say for every 10 pixels scrolled in any vertical direction advance 1 frame in the animation? I know I can store the window scroll in a variable but I'm unsure how to say every time it hits a multiple of 10 advance one frame.
Many thanks in advance.
EDIT
Thanks to help of the users below I worked out a solution. As follows:
$(window).scroll(function()
{
windowScrollCount = $(this).scrollTop();
animationFrame = Math.round(windowScrollCount / 100);
});
So here I am getting the scrolled distance in windowScrollCount, translating it into frames in animationFrame and setting it back with .reel("frame", animationFrame); I am actually doing this for every 100 frames as every 10 was to quick.
Thanks to help of codef0rmer and noShowP I worked out a solution. As follows:
$(window).scroll(function()
{
windowScrollCount = $(this).scrollTop();
animationFrame = Math.round(windowScrollCount / 100);
});
So here I am getting the scrolled distance in windowScrollCount, translating it into frames in animationFrame and setting it back with .reel("frame", animationFrame); I am actually doing this for every 100 frames as every 10 was to quick.
If I'm wrong then you might want this:
var jump = 500; // consider this is your 10px
window.scrollHeight = 0;
$(window).scroll(function () {
console.log($(this).scrollTop());
var diff = $(this).scrollTop() - window.scrollHeight;
if (diff >= jump) {
window.scrollHeight = $(this).scrollTop();
console.log('reload frame');
}
});
Demo : http://jsfiddle.net/Dyd6h/
You could possible have a sticky element to the top of your page,
position: fixed; top 0; left: 0;
(hidden if you like).
And then when you are scrolling you can monitor its offset:
$('element').offset().top
You can then see how far down the page you have scrolled, so every time they scroll see what its top value is and trigger events appropiately?
EDIT:
I've set up a little JSfiddle with a start of what I think you need.
http://jsfiddle.net/qJhRz/3/
Im just calculating the frame you need to be on and storing that in a variable. Is it anything like what you're looking for?
Simple, I just would like to have it so when a user is dragging an item and they reach the very bottom or top of the viewport (10px or so), the page (about 3000px long) gently scrolls down or up, until they move their cursor (and thus the item being dragged) out of the region.
An item is an li tag which uses jquery to make the list items draggable. To be specific:
../jquery-ui-1.8.14.custom.min.js
http://code.jquery.com/jquery-1.6.2.min.js
I currently use window.scrollBy(x=0,y=3) to scroll the page and have the variables of:
e.pageY ... provides absolute Y-coordinates of cursor on page (not relative to screen)
$.scrollTop() ... provides offset from top of page (when scroll bar is all the way up, it is 0)
$.height()... provides the height of viewable area in the user's browser/viewport
body.offsetHeight ... height of the entire page
How can I achieve this and which event best accommodates this (currently its in mouseover)?
My ideas:
use a an if/else to check if it is in top region or bottom, scroll up if e.pageY is showing it is in the top, down if e.page& is in bottom, and then calling the $('li').mouseover() event to iterate through...
Use a do while loop... this has worked moderately well actually, but is hard to stop from scrolling to far. But I am not sure how to control the iterations....
My latest attempt:
('li').mouseover(function(e) {
totalHeight = document.body.offsetHeight;
cursor.y = e.pageY;
var papaWindow = window;
var $pxFromTop = $(papaWindow).scrollTop();
var $userScreenHeight = $(papaWindow).height();
var iterate = 0;
do {
papaWindow.scrollBy(0, 2);
iterate++;
console.log(cursor.y, $pxFromTop, $userScreenHeight);
}
while (iterate < 20);
});
Works pretty well now, user just needs to "jiggle" the mouse when dragging items sometimes to keep scrolling, but for scrolling just with mouse position its pretty solid. Here is what I finally ended up using:
$("li").mouseover(function(e) {
e = e || window.event; var cursor = { y: 0 }; cursor.y = e.pageY; //Cursor YPos
var papaWindow = parent.window;
var $pxFromTop = $(papaWindow).scrollTop();
var $userScreenHeight = $(papaWindow).height();
if (cursor.y > (($userScreenHeight + $pxFromTop) / 1.25)) {
if ($pxFromTop < ($userScreenHeight * 3.2)) {
papaWindow.scrollBy(0, ($userScreenHeight / 30));
}
}
else if (cursor.y < (($userScreenHeight + $pxFromTop) * .75)) {
papaWindow.scrollBy(0, -($userScreenHeight / 30));
}
}); //End mouseover()
This won't work as the event only fires while you're mouse is over the li.
('li').mouseover(function(e) { });
You need to be able to tell the position of the mouse relative to the viewport when an item is being dragged. When the users starts to drag an item attach an 'mousemove' event to the body and then in that check the mouse position and scroll when necessary.
$("body").on("mousemove", function(event) {
// Check mouse position - scroll if near bottom or top
});
Dont forget to remove your event when the user stops dragging.
$("body").off("mousemove", function(event) {
// Check mouse position - scroll if near bottom or top
});
This may not be exactly what you want, but it might help. It will auto-scroll when the mouse is over the 'border of the screen' (a user defined region). Say you have a 40px wide bar on the right of the screen, if the mouse reaches the first 1px, it will start scrolling. Each px you move into it, the speed will increase. It even has a nice easing animation.
http://www.smoothdivscroll.com/v1-2.htm
I get a weekly newsletter (email) from CodeProject, and it had some stuff that certainly looks like it will solve my problem... hopefully this can help others:
http://johnpolacek.github.com/scrollorama/ -- JQuery based and animates the scroll
https://github.com/IanLunn/jQuery-Parallax -- JQuery based, similar to above
http:// remysharp. com/2009/01/26/element-in-view-event-plugin/ -- JQuery, detects whether an element is currently in view of the user (super helpful for this issue!)
Also the site in #2 had some interesting code:
var windowHeight = $window.height();
var navHeight = $('#nav').height() / 2;
var windowCenter = (windowHeight / 2);
var newtop = windowCenter - navHeight;
//ToDo: Find a way to use these vars and my original ones to determine scroll regions