Scroll the div till the last div on mousedown - javascript

Another question on iScroll 4. I have set up a demo in JSFiddle.
I want to scroll the div on mousedown. It should scroll to the end:
continuously;
without any interruption;
with static speed;
Until it reaches the last div, or I do a mouseup in the middle.
Is it possible to achieve this?

Check this fiddle: http://jsfiddle.net/z2YWZ/2/
There is still one problem. It doesn't stop when it reaches the end. iScroll uses CSS translate to do the scrolling and I couldn't find a way to get the current translation form it. Currently looking for a solution for that.
UPDATE
iScroll has a useTransform option, using which we can ask it not use translate and instead use CSS left property for scrolling. This way we'll be easily able to identify whether its the end has been reached (either way). To use, simply set useTransform: false while initing iScroll.
UPDATE 2
Check this fiddle: http://jsfiddle.net/z2YWZ/12/

Can you check this solution:
http://jsfiddle.net/ugeU3/3
html:
<div id="click">Element to click on</div>
js:
jQuery("#click").bind('mousedown', function(){
intInterval=setInterval(function(){
myScroll.scrollTo(25, 0, 800, true);
},30);
});
jQuery("#click").bind('mouseup', function(){
intInterval=window.clearInterval(intInterval);
});
you can change the time values to achieve your speed-preferences.
i hope it helps.

I have modified #techfoobar code and done something like this which both scrolls continously till end on mousedown and moves one div in or out on single click. The code snippet is :
var scrolling=false;
var scrollTimer=-1;
$('#next').bind('mousedown',function () {
scrolling = true;
scrollTimer = setInterval(function () {
scrollDivRight();
}, 100);
return false;
});
$('#next').bind('mouseup',function () {
scrolling = false;
clearInterval(scrollTimer);
return false;
});
$('#next').bind('mouseout',function () { /*For smoother effect and also prevent if any previous delay (eg. 100ms)*/
scrolling = false;
clearInterval(scrollTimer);
return false;
});
scrollDivRight:function(){
if(!scrolling) return false;
myScroll.scrollTo(177, 0, 400, true);
}
Please suggest if there is anything better then this. Ofcourse the issue mentioned by #techfoobar in his answer still remains unsolved.

Related

Button scrolling down screen after click stops, after another click starts again

I've got a little problem.
Here's my fiddle:
[https://jsfiddle.net/ekpgbxrk/][1]
My question is: what's wrong with my code? Point is that I want to scroll site down after clicking button and after another click I want to stop, then to proceed.
I used:
http://www.mediacollege.com/internet/javascript/page/scroll.html
Please help!
The button onclick function is wrong. Change it to whatever function you'd want to call in your JS code.
Also change your JSFiddle's JS setting "Load Type" to "No wrap in - <head>"
Here is updated logic for your code.
var scrolling = false;
var scrollDelay;
function scrollClick() {
if (!scrolling) {
scrolling = true;
startScroll();
} else {
scrolling = false;
stopScroll();
}
}
function startScroll() {
window.scrollBy(0, 50); // horizontal and vertical scroll increments
scrolldelay = setTimeout('startScroll()', 125); // scrolls every 100 milliseconds
}
function stopScroll() {
clearTimeout(scrolldelay);
}
Here is the updated fiddle https://jsfiddle.net/ekpgbxrk/5/
Your code logic is completely wrong.
I have rewrote the logic.
For your reference:
[1]: https://jsfiddle.net/ekpgbxrk/1/

Preventing double touch events by if condition

I'm building a module for a responsive website that allows the user to tap the initial screen and expose a panel from the right. They can then tap a close button and close the panel.
The issue is that if the user taps more than once before the panel finishing animating over, it applies double the action moving the panel too far left irreversibly.
I'm new to JS and can't figure out how to solve this. I thought it could be done with a var and if statement but it doesn't seem to be working.
I set up var
pstatus = 1;
Then I wrapped each event in an if statement but it's not working. I left it without the if statements so it's functional to review.
Any help would be much appreciated!
http://codepen.io/bsley/pen/kjBcz
On your iPhone (Safari) http://codepen.io/bsley/debug/kjBcz
I don't know how to solve this from Javascript, but from Objective C what you would do is to set the button to disabled=YES in the action method, and then set it to disabled=NO once the animation is complete.
I assume the solution would be similar from Javascript.
i would try to do it like this:
1) on click, slide happens.
2) while sliding, click becomes disabled.
3) when finished sliding, click becomes re-enabled.
You can create a javascript "lock":
var lock = false;
$("#MyElement").on("namespace.click", function(){
if(!lock){
lock = true;
//Move Element
lock = false;
}
});
However, I would suggest looking into Underscore.js and utilizing the throttle() method: http://underscorejs.org/
You can simulate this by replacing:
lock = false;
With:
customThrottle();
var timerDuration = //Duration to wait in milliseconds;
function customThrottle(){
setTimeout(function(){
lock = false;
},
timerDuration
);
}

jQuery to slide a div right to left slides the div out of window

I have created a slider that slides from right to left. I am changing margin-right to make the slide work.
As per the requirement, I have a treeview, when user clicks on any node, it opens a sliding dialog with some controls in it. When user clicks on any node, it should first close the previously open dialog and then open the dialog for currently selected node. I am able to make this work when user clicks on the node, the dialog opens, and when user click back again on the same node or the slider-button, the dialog hides. But somehow, the code to hide when user click on any other node doesn't work properly. It moves the slider-button and the dialog away and I don't see anything.
I used the following code:
if($('#slider-button').css("margin-right") == "400px") {
$(sliderDialog).animate({"margin-right": '-=400'});
$('#slider-button').animate({"margin-right": '-=400'});
} else{
$(sliderDialog).animate({"margin-right": '+=400'});
$('#slider-button').animate({"margin-right": '+=400'});
}
I thought, it as simple as finding if the previously selected dialog is different than current than just call the same code that hides the dialog when user clicks on the same node again. ie.
$(sliderDialog).animate({"margin-right": '-=400'});
$('#slider-button').animate({"margin-right": '-=400'});
But, it behaves weird. Anyone, what am I missing here?
Here is my jsFiddle.
Using the DOM and such that you had, I've updated the JS to switch between them after animating back (here is the Fiddle in action):
var sliderDialog = "#dvPriorityDialog"
function slideIt() {
var sliderId = '#' + $('.pollSlider.open').attr('id');
var slideWidth;
if ($('.pollSlider').hasClass('open')) {
slideWidth = $('.pollSlider.open').width();
$('.pollSlider.open').animate({"margin-right": '-=' + slideWidth}, function() {
if (sliderId != sliderDialog) {
slideIt();
}
});
$('#slider-button').animate({"margin-right": '-=' + slideWidth});
$('.pollSlider.open').removeClass('open');
} else {
slideWidth = $(sliderDialog).width();
$(sliderDialog).addClass('open');
$('#slider-button').animate({"margin-right": '+=' + slideWidth});
$(sliderDialog).animate({"margin-right": '+=' + slideWidth});
}
}
function bindControls() {
$('#slider-button').click(function() {
slideIt();
});
$("#liPriority").click(function() {
sliderDialog = "#dvPriorityDialog";
slideIt();
});
$("#liFasting").click(function() {
sliderDialog = "#dvFastingDialog";
slideIt();
});
}
// init;
$(document).ready(function() {
bindControls();
});
Try
$(sliderDialog).stop().animate({"margin-right": '-=400'});
$('#slider-button').stop().animate({"margin-right": '-=400'});
You have multiple problems :
You try to move a same element (#slider-button) in function of two different animations (a panel go left and an other go right). To resolve that, the best option is to add a button to each panel. It will be a lot easier to manage global behavior because you have only one animation by panel.
You don't stop animation when you want to change them. Store your animation in vars and use .stop() function with the first param to true in you case (.stop(true) to stop animation and remove it from queue without finish it).
Your state test is based on your animated css attribute (margin-right). So you alltime have to wait the end of animation to start the new one. To fix that use vars to store your animations state : (var firstPanelLastMove = 'left' // or right ... etc).

Mouseleave does not work with .each and delay?

I have written some code to change the colour of each letter inside an a tag and show a pop up when you hover the link.
The mouseenter function works fine but when you hover off the link I would like to do the reverse of the original change ( so change back to the origional colour ).
I take the delay out of the leave function it works but the effect is not as nice. I am confused as to why this works on the enter but not on the leave?
Another thing to mention is when it does change colour back to the grey the mouseenter function does not work again, which is kind of annoying.
Here is a link to the site so you can see what I am talking about and the link is the one at the bottom that says "Touch Marketing"
http://dev.touch-akl.com/colin/
Any help please?
My jQuery looks like this
$('#copyright a').mouseenter(function(){
var $letters = $(this).find('span'),
$sayhi = $(this).find('img'),
delay = 0;
$sayhi.animate({top:-30, 'opacity':1}, 500, "easeInOutExpo");
$letters.each(function(){
$(this).delay(delay).queue(function(){
$(this).css({'color':'#333'});
});
delay+=35;
}); // end each
}).mouseleave(function(){
var $letters = $(this).find('span'),
delay = 0;
$letters.each(function(){
$(this).delay(delay).queue(function(){
$(this).css({'color':'#333'});
});
delay+=35;
});
}); // end leave
jQuery .queue() is complicated to use correctly so unless you need to interact with other things in the jQuery animation queue, it is often much, much simpler to just use setTimeout() like this. You also should make delay a local variable so it isn't an implicit global variable.
}).mouseleave(function(){
var delay = 0;
$(this).find('span').each(function(){
var item = $(this);
setTimeout(function(){
item.css({'color':'#333'});
}, delay);
delay+=35;
});
}); // end leave
Most likely the problem is with the closure created by your functions in mouseenter and mouseleave. They're both referencing the same delay variable. You might want to separate them:
delayEnter = 0;
delayLeave = 0;

How can I differentiate a manual scroll (via mousewheel/scrollbar) from a Javascript/jQuery scroll?

UPDATE:
Here is a jsbin example demonstrating the problem.
UPDATE 2:
And here is the fixed version thanks to fudgey.
Basically, I have the following javascript which scrolls the window to an anchor on the page:
// get anchors with href's that start with "#"
$("a[href^=#]").live("click", function(){
var target = $($(this).attr("href"));
// if the target exists: scroll to it...
if(target[0]){
// If the page isn't long enough to scroll to the target's position
// we want to scroll as much as we can. This part prevents a sudden
// stop when window.scrollTop reaches its maximum.
var y = Math.min(target.offset().top, $(document).height() - $(window).height());
// also, don't try to scroll to a negative value...
y=Math.max(y,0);
// OK, you can scroll now...
$("html,body").stop().animate({ "scrollTop": y }, 1000);
}
return false;
});
It works perfectly......until I manually try to scroll the window. When the scrollbar or mousewheel is scrolled I need to stop the current scroll animation...but I'm not sure how to do this.
This is probably my starting point...
$(window).scroll(e){
if(IsManuallyScrolled(e)){
$("html,body").stop();
}
}
...but I'm not sure how to code the IsManuallyScrolled function. I've checked out e (the event object) in Google Chrome's console and AFAIK there is not way to differentiate between a manual scroll and jQuery's animate() scroll.
How can I differentiate between a manual scroll and one called via jQuery's $.fn.animate function?
Try this function:
$('body,html').bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup', function(e){
if ( e.which > 0 || e.type == "mousedown" || e.type == "mousewheel"){
$("html,body").stop();
}
})
Also, did you see this tutorial?
Update: Modern browsers now use "wheel" as the event, so I've included it in the code above.
I had your same issue some a few days ago.You shouldn't be using jquery's animate function if you want to obtain that result, you have to simulate the animation using a polling function.
I made this class which is supposed to provide a smooth scrolldown when ScrollDown.slow() is called.
ScrollDown.current=$(window).scrollTop();
ScrollDown.lastValue;
ScrollDown.lastType;
ScrollDown.enabled=true;
ScrollDown.custom=function(value,rate){ //let's say value==='bottom' and rate=10
if(value==='bottom'){
value=$(document).height()-$(window).height();
}
ScrollDown.current=$(window).scrollTop();
ScrollDown.lastValue=value;
(function poll(){
setTimeout(function(){
var prev=$(window).scrollTop(); //This is the critical part
/*I'm saving again the scroll position of the window, remember
10 ms have passed since the polling has started
At this rate, if the user will scroll up for down pre!==ScrollDown.current
And that means I have to stop scrolling.*/
ScrollDown.current++; //increasing the scroll variable so that it keeps scrolling
$(window).scrollTop(ScrollDown.current);
if(ScrollDown.current<ScrollDown.lastValue && ScrollDown.enabled){
//ScrollDown.current<ScrollDown.lastValue basically checks if it's reached the bottom
if(prev!==ScrollDown.current-1){
/*I'm checking if the user
scrolled up or down while the polling has been going on,
if the user scrolls up then prev<ScrollDown.current-1,
if the user scrolls down then prev>ScrollDown.current-1
and at the next poll() the scrolling will stop
because ScrollDown.enabled will bet set to false by ScrollDown.stop()*/
ScrollDown.stop();
}
poll();
}
},rate);
})();
};
ScrollDown.stop=function(){
ScrollDown.enabled=false;
};
ScrollDown.continue=function(){
ScrollDown.enabled=true;
switch (ScrollDown.lastType){
case "fast":
ScrollDown.fast(ScrollDown.lastValue);
break;
case "normal":
ScrollDown.normal(ScrollDown.lastValue);
break;
case "slow":
ScrollDown.slow(ScrollDown.lastValue);
break;
}
};
ScrollDown.fast=function(value){
if(!ScrollDown.enabled){
ScrollDown.continue();
}else{
ScrollDown.lastType='fast';
ScrollDown.custom(value,1);
}
};
ScrollDown.normal=function(value){
if(!ScrollDown.enabled){
ScrollDown.continue();
}else{
ScrollDown.lastType='normal';
ScrollDown.custom(value,10);
}
};
ScrollDown.slow=function(value){
if(!ScrollDown.enabled){
ScrollDown.continue();
}else{
ScrollDown.lastType='slow';
ScrollDown.custom(value,50);
}
};
function ScrollDown(){}
So if you were to call ScrollDown.slow('bottom') it would start scrolling slowly till it reaches the bottom of your page unless you scroll up or down manually, then it stops.
You could set a variable to indicate that your call to animate was active, then check that variable inside the scroll handler.
window.IsAutoScrolling = true;
$("html,body").stop().animate({ "scrollTop": y }, 1000);
// Do something to set IsAutoScrolling = false, when the animation is done.
$(window).scroll(e){
if(!window.IsAutoScrolling){
$("html,body").stop();
}

Categories

Resources