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
);
}
Related
I'm creating my portfolio and I'm trying to make my skill bars load when I go to "My skills" section. I want them to do it only once, either when someone scroll to this section or goes to it straight away from the navigation. This is my code:
var skills = $('#mySkills');
var skillsPositionTop = skills.position().top;
$(window).on("resize scroll", function (){
if (pageYOffset<skillsPositionTop-20 && pageYOffset>skillsPositionTop-80){
console.log ("here is my loading script");
}
});
It doesn't work when I use one instead of on, doesn't work when I created one more function on window with one inside my if statement.
I was trying exit the function with return or return false as well and here, on stack overflow I found something about flag, which I didn't fully understand but I tried different combinations with it.
Can someone please help me with it? I've seen there is a library for this type of effects, but there is no point of installing any just for one thing...
Edit. Console.log represens my loading code.
You can set a namespace at .on() for resize, scroll events, use .off() within if statement to remove namespaced events.
var skills = $('#mySkills');
var skillsPositionTop = skills.position().top;
$(window).on("resize.once scroll.once", function (){
if (pageYOffset<skillsPositionTop-20 && pageYOffset>skillsPositionTop-80) {
$(this).off("resize.once").off("scroll.once");
console.log ("here is my loading script");
}
});
I am using Hammer this way, it works (it just triggers next/prev buttons):
var slider = document.getElementsByClassName('slider');
Hammer(slider[0]).on("swiperight", function() {
prev.click();
});
A according to Stack thread, on event when modal is coming out (hammer is still swiping behind it :/) I am trying to turn it of with:
Hammer(slider[0]).off("swipeleft");
Hammer(slider[0]).off("swiperight");
But it doesn't work. It's still swipeing behind modal. Any idea why?
Save the Hammer instance to a variable. The following example removes pan event after 5 seconds.
var h = new Hammer(document);
h.on('pan', function(){
console.log('Panned');
});
setTimeout(function(){
console.log('removed');
h.off('pan');
}, 5000);
<script src="http://hammerjs.github.io/dist/hammer.min.js"></script>
Simply put I'm trying to sync two slideshows created using widgetkit lib in a joomla website, eg. when user clicks next slide on one, the other one also runs nextSlide() function in the slideshow.js. Same for previous. The problems I'm having is widgetkit uses anonymous functions for creating those slideshows and I dont have global references to them after they are created. With my limited programming knowledge I cant seem to trigger the nextSlide function for other slideshows once inside click handler.
If anyone can take a look it would be most welcome.
EDIT:
Of course I forgot to link the example webpage
http://www.yootheme.com/widgetkit/examples/slideshow
Mine is similar with only 2 slideshows, but is still only on local server.
Taking a brief look at widgetkit here is one possible solution. Using jquery you can search for any objects that have a class of slides with a child of next and click all others. The code provided below isn't tested but should point you in the right direction. As long as you don't call stop propagation or prevent default then the original click handlers should still fire.
var slideshow_count = $('.slides .next').length;
var cascade_countdown = 0;
$('.slides .next').each(function() {
$(this).click(function() {
// stop an infinite loop if we're already cascading till we've done it for all the elements.
if(cascade_countdown != 0) {
cascade_countdown--;
return true;
}
// we don't include the slideshow we're clicking in this count
cascade_countdown = slideshow_count - 1;
var clicked_el = this;
$('.slides .next').each(function() {
// only click elements that aren't the initiator
if(this !== clicked_el) {
$(this).click();
}
});
});
});
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.
Is there any way to increase the time a drop-down menu created stays on screen? The drop down menu just appears and disappears as I touch the cursor. The drop-down was created using Prototype.
Use a different drop down menu:
Here's over 25 that might better suit your needs:
http://www.noupe.com/css/multilevel-drop-down-navigation-menus-examples-and-tutorials.html
Or mention what drop down menu you are using so we can at least discover the option for you!
Whatever function you have attached to the rolloff of the menu to make it disappear, add that code to another function and use a setTimeout() call to pause for a time before removing the menu.
Example:
Old Code
var closeMenu = function() {
$('menu').hide();
};
New Code
var hideMenu = function() {
$('menu').hide();
};
var closeMenu = function() {
setTimeout(hideMenu, 5000);
};
With that change, you've now delayed the menu's disappearing act for 5 seconds. Probably don't want to take that long but you get the idea.