Here in the fiddle is more less what i want to do: http://jsfiddle.net/EUZS5/2/ .
I have different elements in a swiper and in some slides inside there is a draggable element.
Currently when i drag the arrow it also pulls the slide (which is not the behaviour i want:))
I tried to use 'stopPropagation' on drag event but it does not help to prevent the slide from moving.
Any ideas how to achieve this?
Im using hammerjs and idangerous.swiper.
$(document).ready(function(){
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
paginationClickable: true
})
var left;
$('.arrow').hammer({}).on("dragstart", function(ev) {
left = $(this).css('left').replace(/[^-\d\.]/g, '');
})
$('.arrow').hammer({}).on("dragright", function(ev) {
var distance = parseFloat(left)+parseFloat(ev.gesture.deltaX);
$(this).css('left', distance+'px');
})
$('.arrow').hammer({}).on("dragleft", function(ev) {
var distance = parseFloat(left)+parseFloat(ev.gesture.deltaX);
$(this).css('left', distance+'px');
})
});
You can do this by adding some 'no-swiping' settings to idangerous swiper, and then adding that class when the arrow is dragged.
Fiddle here: http://jsfiddle.net/cspurgeon/EUZS5/3/
New iDangerous settings:
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
paginationClickable: true,
noSwiping: true,
noSwipingClass: 'no-swiping'
})
Relevant event listeners for arrow mousedown, and drag.
$('.arrow').on('mousedown', function(e) {
// disable swiper when user clicks on arrow
$(this).parents('.swiper-wrapper').addClass('no-swiping');
});
$('.arrow').on('mouseup dragend', function(e) {
// re-enable when user is done
$(this).parents('.swiper-wrapper').removeClass('no-swiping');
});
Note: you need the dragend because the mouse isn't always over the arrow when the user releases it. But you can't use dragstart because it appears to fire after the swipe event is triggered.
iDangerous noSwiping documentation here: http://www.idangero.us/sliders/swiper/api.php
Related
Our custom Owl Carousel isn't behaving as expected - while dragging and using keyboard arrows takes you to the next slide, the previous and next arrows jump 'over' the next slide to the one after.
The next slide does appear briefly but quickly flicks to the following slide.
I've tried a few things in the main.js settings but no dice. Any thoughts would be greatly appreciated as I'm a bit stumped.
main.js code is:
$(document).ready(function() {
// initialise owl
$(function() {
var owl = $('.owl-carousel');
owl.owlCarousel({
items:1,
lazyLoad:true,
loop:true,
useMouseWheel: false,
nav: true,
center: true,
dots: false,
margin: 0,
stagePadding: 0,
URLhashListener: true,
startPosition: 'URLHash',
animateIn: 'fadeIn',
animateOut: 'fadeOut'
});
// click for next image
$(owl).click(function() {
owl.trigger('next.owl');
})
// add arrow keys to carousel navigation
$(document).on('keydown', function( event ) { //attach event listener
if(event.keyCode == 37) {
owl.trigger('prev.owl')
}
if(event.keyCode == 39) {
owl.trigger('next.owl')
}
});
// end arrow keys
}); // end owl
}); // end document ready
Happy to share any other parts of the code if it would be useful. Thanks in advance for any guidance!
With #Tiberiuscan pointing me in the right direction, I figured out a solution:
The click for next image part was targeting the entire owl carousel for clicks.
I modified this code to target the owl-item div and that resolved the issue, as below:
// click for next image
$('.owl-item').click(function() {
owl.trigger('next.owl');
})
Thanks again, #Tiberiuscan
I'm using jquery UI draggable. I do some works in drag function. for example I scale the dragging element according to it's position. I want to drag elements automatically to certain (x, y) (something like jquery animate({left:x, top:y}, 1000)); but I want to trigger drag function and scale element when is animating. how can I do this?
I suggest another approach to do that.
Use an external function to do the scale effect, and call it from both events (drag and animate):
var $myDraggable = $('#draggable').draggable({
drag: function( event, ui ) {
scale(ui.offset.left, ui.offset.top);
}
});
$('button').on('click', function(){
$myDraggable.animate(
{ left:100, top:100 },
{
duration: 1000,
progress: function(draggable){
scale(draggable.elem.offsetLeft, draggable.elem.offsetTop);
}
});
});
function scale(left, top){
//your scaling logic here
console.log("scaling", left, top);
}
See this example: FIDDLE
https://jsfiddle.net/moongod101/8gdvz9jL/
PS:This code offer a button toggle function
$(function(){
$button = $('button')
$box = $('.box')
$click = 0
$button.click(function(){
if($click !=0){
$click ++
$box.removeClass('active')
}else{
$click --
$box.addClass('active')
}
});
});
I have two buttons that use Javascript to call their function which controls a carousel and some other actions.
I'd simply like to disable the ability of the user to doubleclick the button.
Here is my code:
var onRightArrow = function(e) {
//alert("Right");
if (unitCtr<=unitTotal) {
unitCtr++;
TweenLite.to(productTxt, 0.2, {y: "-="+unitHeight });
TweenLite.to(productImg, 0.2, {y: "-="+unitHeight });
}
hideArrows();
}, onLeftArrow = function(e) {
//alert("Left");
if (unitCtr>1) {
unitCtr--;
TweenLite.to(productTxt, 0.2, {y: "+="+unitHeight });
TweenLite.to(productImg, 0.2, {y: "+="+unitHeight });
}
hideArrows();
}
arrowRight.addEventListener('click', onRightArrow, false);
arrowLeft.addEventListener('click', onLeftArrow, false);
I'm aware of the dblclick line of code but not exactly sure how to apply to disable the double click action from the mouse.
When the user doubleclicks now, it misplaces the positioning of the elements in the carousel which is why I want to remove the ability of the dblclick to affect the button.
Thanks in advance for any advice. Please avoid providing answers in JQuery.
More code:
http://codepen.io/anon/pen/QjGydw
I solved this myself, while the answer is more complex, is anyone is looking to apply listeners to disable the ability to doubleclick, it's here:
(arrowRight and arrowLeft are variables that have been defined by ID)
arrowRight.addEventListener('dblclick', function(e){
e.preventDefault();
});
arrowLeft.addEventListener('dblclick', function(e){
e.preventDefault();
});
I also created functions that disable the arrow while animation is happening to prevent errors. Reenables after animation completes. Functions look like this:
function disableArrows() { //ADDED NEW FUNCTION TO DISABLE ARROWS
arrowRight.removeEventListener('click', onTopArrow, false);
arrowLeft.removeEventListener('click', onBottomArrow, false);
}
function enableArrows() { //ADDED NEW FUNCTION TO RE-ENABLE ARROWS
arrowRight.addEventListener('click', onTopArrow, false);
arrowLeft.addEventListener('click', onBottomArrow, false);
}
I'm using iDangerous Swiper library to display a mobile swipe touch gallery in conjunction with Jquery Mobile framework.
It works fine except that if I leave the index page (where the gallery is) and then come back, the pagination widget doesn't work properly. It still appears (I can see the bullets), and it's still clickable, i.e. if I "touch" a bullet the gallery swipes to the correspondent slide and the bullet becomes "active", but it doesn't work the reverse way, in other words it doesn't respond to slide changes: if I swipe through the slides the current active bullet does not update.
this is the initialization code:
$( document ).on( "pageshow", "#index-page", function( event ) {
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
paginationClickable: true,
slidesPerView: 'auto'
});
});
The page are linked with jquery mobile's data-ajax="true" attribute to preserve the global scope.
It help me pagination swiper idangerous jquery mobile
$(document).one("pageshow", "#page1", function (e) {
var swiper = new Swiper('.swiper-container', {
paginationClickable: true,
hashnav: true,
pagination: '.swiper-pagination',
hashnav: true });
function reinitSwiper(swiper) {
setTimeout(function () {
swiper.reInit();
}, 500);
}
});
Issue:
Initializing the swiper twice.
Solution:
Define a global variable "swiper" outside the "pageshow" event. The global variable "swiper" will be "undefined" on loading the gallery first time. When you leave the page and come back, global variable "swiper" will not be "undefined". Then do not initialize again.
<script>
var swiper;
$(document).on("pageshow", "#page1", function (e) {
if (swiper == undefined) {
swiper = new Swiper('.swiper-container', {
pagination: '.pagination',
paginationClickable: true,
slidesPerView: 'auto'
});
}
});
</script>
I want to use flexslider with mousewheel here is the my example
$('#slider').flexslider({
animation: "slide",
mousewheel: true,
direction: "vertical",
slideshow: false
});
http://jsfiddle.net/VC4L3/
it's working but too fast. I'm using magic mouse by the way I'm trying touchpad too when I scroll down it's moving 2,3 sliders. I need each scrol down move 1 slide. How can I do that?
I couldn't find a simple solution for this so i have changed the source code of the flexslider, to disable scroll once the animation is started, here is what i did:
change bind for mousewheel to be like this.
slider.bind('mousewheel', function (event, delta, deltaX, deltaY) {
if (!slider.startedMouseWheel) {
slider.startedMouseWheel = true;
event.preventDefault();
var target = (delta < 0) ? slider.getTarget('next') : slider.getTarget('prev');
slider.flexAnimate(target, slider.vars.pauseOnAction);
}
});
find call of the vars after function
and insert this code before it:
slider.startedMouseWheel = false;
to have
slider.startedMouseWheel = false;
slider.vars.after(slider); //This is call of the vars after function
this way you will disable triggering new events on mouse scroll until animation is finnished.
Try adding animationSpeed into the flexslider.
Demo: http://jsfiddle.net/lotusgodkk/VC4L3/1/
$('#slider').flexslider({
animation: "slide",
mousewheel: true,
direction: "vertical",
slideshow: false,
animationSpeed: 4000,
});