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>
Related
I'm using jQuery to show tooltips on every link on my page that has a 'details' attribute
$(function() {
$tooltip = $(document).tooltip({
show: false,
track: true,
items: "a[data-details]",
content: function() {
return $( this ).data('details');
}
});
});
This works very well. However, when the user clicks one of those links, the URL is opened in a new tab (using target="_blank"). The problem is that the tooltip is still open when the user gets back on the first tab.
Here's what I tried so far:
$('a[data-details]').on('click mousedown mouseup', function() { // this might be overkill
$(document).tooltip("close"); // Doesn't work at all
$('div[class^="ui-tooltip"]').remove(); // removes the tooltip onclick, but gets it back opened when returning on the tab
});
Is there a way to keep the tooltips closed when the new page is opened?
Thank you for your help.
Here's a fiddle illustrating the problem: https://jsfiddle.net/su4v757a/
Note: I'm using jQuery 1.12.4 with jQueryUI 1.12.1
This is probably a bug.
As far as I can tell this must be a bug.
And you could let them know over at https://bugs.jqueryui.com/report/10?P=tooltip
I notice that the .tooltip("close") doesn't work in the fiddle. However the tooltip listens to the "mouseleave"-event to close, and we can force that by $('a[data-details]').trigger("mouseleave");
If you try this out you will see that it do close, but pops up again:
$('a[data-details]').on('click mousedown mouseup', function() { // this might be overkill
$(this).trigger("mouseleave");
});
Hover and click the "me":
Coming back to the page notice that the tooltip has closed and come back again:
Workaround - possible solution
Since .hide()-ing an element triggers the "mouseleave"-event you could do something funky like hiding the link on click, and showing it just a moment later.
$('a[data-details]').click(function() {
var $this = $(this);
$this.hide();
setTimeout(function() {
$this.show()
}, 1);
});
Setting the timeout to 1 ms would not create any flickering of the link, making the hide/show unnoticeable for the user.
Works in Chrome. Try it here: https://jsfiddle.net/cyx6528e/1/
Good luck!
tooltip usually works on hover functionality, can you provide js fiddle for your problem
Live site- http://www.uposonghar.com/test/test_popup.html
Reveal popup js page- http://www.uposonghar.com/test/jquery.reveal.js
Due to a lot of code on js page maybe that is not a good option to post all js code here.
I want to add 10 second delay on that popup so if anyone click on link then popup will appears after 10 second. I tried JavaScript settimeout but doesn't work, due to low knowledge of jQuery i don't know how to do that with jquery.
Also popup doesn't appears if i click on on second time, only appears on when i click on first time.
setTimout solves that beautifully.
Try that...
var tmrReveal = null;
$('a[data-reveal-id]').live('click', function(e) {
e.preventDefault();
var modalLocation = $(this).attr('data-reveal-id');
if (tmrReveal != null)
clearTimeout(tmrReveal);
tmrReveal = setTimeout(
function() {
$('#'+modalLocation).reveal($(this).data());
},10000);
});
Use setTimeout()
setTimeout(function() {
//code goes here
}, 10000);
$('#your-anchor-here').click(
function(){
setTimeout(
function(){
//popup logic here
},10000)
});
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
);
}
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;
I would like to stop my jquery animation when I open new tab in browser. Every time when I leave my page for a while and I come back after some time, my jquery slider goes crazy and it change slides like insane, because I didn't stop it. Do you have some solution?
In JavaScript:
window.addEventListener('focus', function() {
// code to start
});
window.addEventListener('blur', function() {
// code to stop
});
With jQUery:
$(window).bind('focus', function() {
// code to start
});
$(window).bind('blur', function() {
// code to stop
});
I read somewhere about this and it's called animation queue buildup. Instead of trying to stop animation when opening new tab, put stop() just before starting an animation.
This will ensure that previous animation is killed before continuing....
for example:
$('.some-selector').stop().slideUp();
Hope this helps...