I use this function to enable swipe for navigation on my website.
Now it needs to read and proceed to the url with the class 'next'
<li class="next">Next</li>
Here I need you help to create that.
$(function () {
$(document).on('mousedown', 'div', function (e) {
var ref = arguments.callee;
var handle = $(this);
var startX = e.clientX;
var startY = e.clientY;
handle.off('mousedown', ref);
handle.on('mouseup', function(e) {
handle.off('mouseup', argument.call);
handle.on('mousedown', ref);
var endX = e.clientX;
var endY = e.clientY;
var distanceX = Math.(endX - startX);
var distanceY = Math.(endY - startY);
if (distanceX > 50) {
handle.trigger((endX > startX) ? 'swipeRight' : 'swipeLeft');
}
if (distanceY > 50) {
handle.trigger((endY < startY) ? 'swipeDown' : 'swipeUp');
}
e.preventDefault();
return false;
});
});
$(document).on('swipeRight', 'div', function(e) {
});
$(document).on('swipeLeft', 'div', function(e) {
});
$(document).on('swipeUp', 'div', function(e) {
});
$(document).on('swipeDown', 'div', function(e) {
});
});
Inside the swipeRight callback do:
window.location = $(".next a").attr("href")
First this code gets the element with a class of .next with children of a then gets the href property using the .attr() function and redirects the browser to the value of the href.
You can just query the anchor tag (a) which is a direct child of list with class next:
$(document).ready(function() {
console.log($('li.next > a').prop('href'));
});
Working fiddle:http://jsbin.com/ibIGoma/6/edit
Related
and let me tell you in advance that the no-conflict script didnt work either, my issue is this:
I have a site that i made, i made some animations for it, using the animate library and some other animations
$(document).ready(function ($) {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 1000, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('.nav-ul-home a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('.navbar-home ul li a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 100) {
$(".navbar-home").addClass("navbar-section");
$(".nav-ul-home").addClass("nav-ul-section");
}
else{
$(".navbar-home").removeClass("navbar-section");
$(".nav-ul-home").removeClass("nav-ul-section");
}
});
$(function() {
var Accordion = function(el, multiple) {
this.el = el || {};
// more then one submenu open?
this.multiple = multiple || false;
var dropdownlink = this.el.find('.dropdownlink');
dropdownlink.on('click',
{ el: this.el, multiple: this.multiple },
this.dropdown);
};
Accordion.prototype.dropdown = function(e) {
var $el = e.data.el,
$this = $(this),
//this is the ul.submenuItems
$next = $this.next();
$next.slideToggle();
$this.parent().toggleClass('open');
if(!e.data.multiple) {
//show only one menu at the same time
$el.find('.submenuItems').not($next).slideUp().parent().removeClass('open');
}
}
var accordion = new Accordion($('.accordion-menu'), false);
})
and this is my animations script
$(window).on('scroll', function (e) {
var top = $(window).scrollTop() + $(window).height(),
isVisible = top > $('#texto p').offset().top;
$('#texto p').toggleClass('animated fadeInUp', isVisible);
});
$(window).on('scroll', function ($) {
var top = $(window).scrollTop() + $(window).height(),
isVisible = top > $('in img').offset().top;
$('in img').toggleClass('magictime tinRightIn', isVisible);
});
$(window).on('scroll', function ($) {
var top = $(window).scrollTop() + $(window).height(),
isVisible = top > $('in p').offset().top;
$('in p').toggleClass('magictime puffIn', isVisible);
});
I only put some of it cause it basically repeats its self for every case....
now... I have links to both jquery and jquery-min i need the jquery for this code and the jquery-min for the contact form, the problem is that when i have both links the animations dont work...
if i remove the jquery-min link everything is fine but the contact form doesnt work...
maybe if someone has a contact form template that has JS but doesnt need jquery-min the problem is solve..
sorry for my aqward way to post im prety new here.
thanks!
I have my code:
+function($) {
'use strict';
var Ripple = function(element) {
var $this = $(this)
$(element).on('mousedown', $this.start)
}
Ripple.prototype.start = function(e) {
var $this = $(this)
var r = $this.find('.ripple-wave')
if(r.length == 0) {
$this.prepend('<div class="ripple-wave"></div>')
r = $this.find('.ripple-wave')
}
if($this.hasClass('btn') || $this.hasClass('single-action')) {
var posX = $(this).offset().left, posY = $(this).offset().top
r.css('left', e.pageX - posX)
r.css('top', e.pageY - posY)
}
r = r.parent()
r.addClass('active')
r.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
r.removeClass('active')
})
}
var old = $.fn.ripple
$.fn.ripple = function() {
return this.each(function() {
new Ripple(this)
})
}
$.fn.ripple.Constructor = Ripple
$.fn.ripple.noConflict = function () {
$.fn.ripple = old
return this
}}(jQuery);
But if i test on Mozilla Firefox, i have to double click the element in order to do its function.
I initialize this to my on page load using:
$('.ripple').ripple()
PS: I also have on click event on each element from other JS file.
In chrome, it's working properly, in a single click.
$( "p" ).dblclick(function() {
alert( "Hello World!" );
});
<p ondblclick="myFunction()">Double-click me</p>
I have a little script running so i can scroll trough a div with the mousedown option. Unfortunately it resets on each click and i can't quite figure out why it is doing this.
<script>
$(function () {
var clicked = false, clickX;
$("#gallery").on({
'mousemove': function(e) {
clicked && updateScrollPos(e);
},
'mousedown': function(e) {
clicked = true;
clickX = e.pageX;
},
'mouseup': function() {
clicked = false;
$('html').css('cursor', 'auto');
}
});
var updateScrollPos = function(e) {
$('#gallery').scrollLeft($(window).scrollLeft() + (clickX - e.pageX));
}
});
</script>
I am assuming it has something to do with
clickX = e.pageX;
$('#gallery').scrollLeft($(window).scrollLeft() + (clickX - e.pageX));
Why am I? because : "Returns the horizontal coordinate of the event relative to whole document."
So I am assuming it takes the original position when you click but it doesnt update when you actually scroll this. Anyone has a fix for this?
http://jsfiddle.net/fLr4d7kt/6/
We have fixed it like this :
$(function () {
var scroll = 0;
$(function () {
var clicked = false, clickX;
$("#gallery").on({
'mousemove': function(e) {
clicked && updateScrollPos(e);
},
'mousedown': function(e) {
clicked = true;
clickX = e.pageX;
scroll = $('#gallery').scrollLeft();
},
'mouseup': function() {
clicked = false;
$('html').css('cursor', 'auto');
}
});
var updateScrollPos = function(e) {
$('#gallery').scrollLeft(scroll + (clickX - e.pageX));
}
});
});
js: http://jsfiddle.net/fLr4d7kt/10/
I am trying to make a div draggable using jQuery, but without jQuery UI, I can't figure out why I get an error if when I use the e.target.id, the value in this field at some point is empty or null.
If I hard code the Id in the function it works pretty well, what am I missing here?
I appreciate your help.
This is my code:
<div id="Div1" style="width: 100px; background-color: red">test</div>
$(document).ready(function () {
dragObject.init("Div1");
});
jQdrag.js
var dragObject = (function () {
var init = function (dragObj) {
addListeners(dragObj);
};
var addListeners = function (dragObj) {
document.getElementById(dragObj).addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);
};
mouseDown = function (e) {
window.addEventListener('mousemove', divMove, true);
};
mouseUp = function () {
window.removeEventListener('mousemove', divMove, true);
};
divMove = function (e) {
debugger
//var div = document.getElementById("Div1");
var div = document.getElementById(e.target.id); //ERROR
div.style.position = 'absolute';
div.style.top = e.clientY + 'px';
div.style.left = e.clientX + 'px';
};
return {
init: function (dragObj)
{
init(dragObj);
}
};
})();
I've to drag the cloned element, but i don't understand how to call the trigger events synchronously
my example: http://jsfiddle.net/CfSMG/4/
correct example: http://jqueryui.com/demos/droppable/#photo-manager
Up:
Thx to all i've resolved the problem allready
My solution:
$('#move').mousedown(function(event) {
var offset = $(this).offset(),
map = {
position: 'absolute',
top : offset.top + 'px',
left : offset.left + 'px',
zIndex : 100
};
if($('.foo')[0]) return this;
$(this).clone().bind('mousedown mousemove', function(event) {
var _this = $(this),
offset = _this.position(),
_event = event;
$(document).bind({
mousemove : function(event) {
var axis = function(i) {
var page = {
top : 'pageY',
left : 'pageX'
}[i];
return event[page] - (_event[page] - offset[i]) + 'px';
};
_this.css({
left : axis('left'),
top : axis('top')
}).unbind('mousemove');
},
mouseup : function() {
_this.animate(map, function() {
$(this).remove();
});
$(this).unbind('mousemove');
}
});
}).addClass('foo').css(map).appendTo('body');
event.preventDefault();
event.stopPropagation();
});
Live demo: jsFiddle