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>
Related
Textarea change needs to be detected onkeyup event when page is loading. Textarea resizing is working fine but textarea is not detected onkeyup event when page is loaded.I tried following code.
<script>
jQuery.each(jQuery('textarea[data-autoresize]'), function () {
var offset = this.offsetHeight - this.clientHeight;
var resizeTextarea = function (el) {
jQuery(el).css('height', 'auto').css('height', el.scrollHeight + offset);
};
jQuery(this).on('keyup input', function () {
resizeTextarea(this);
});
jQuery(this).trigger('keyup');
});
</script>
try by running your code in window.onload
window.onload=function(){
jQuery.each(jQuery('textarea[data-autoresize]'), function() {
var offset = this.offsetHeight - this.clientHeight;
var resizeTextarea = function(el) {
jQuery(el).css('height', 'auto').css('height', el.scrollHeight + offset);
};
jQuery(this).on('keyup input', function() {
resizeTextarea(this);
});
jQuery(this).trigger('keyup');
});
//trigger when modal showing
$('.modal').on('shown.bs.modal', function () {
jQuery('textarea[data-autoresize]').trigger('keyup');
})
}
fiddle here
You shall execute jquery once the doc has finished loading.
Wrap it like this:
<script>
$(document).ready(function(){
jQuery.each(jQuery('textarea[data-autoresize]'), function () {
var offset = this.offsetHeight - this.clientHeight;
var resizeTextarea = function (el) {
jQuery(el).css('height', 'auto').css('height', el.scrollHeight + offset);
};
jQuery(this).on('keyup input', function () {
resizeTextarea(this);
});
jQuery(this).trigger('keyup');
});
});
</script>
before i was trying to add this event listener to a div
i was using "scroll", this one works but "resize" is not working
and i can't find out why .
This is my code :
$('document').ready(function() {
var content = document.getElementById("scroller");
var tabs = document.getElementById("tabs");
var than, now;
than = tabs.clientHeight;
content.addEventListener("resize", function(event) {
now = tabs.clientHeight;
alert(now + "&" + than);
}, false);
});
JSFIDDLE DEMO
or is it possible something like this :
$('document').ready(function(){
var content = document.getElementById("scroller");
var hc , h;
window.addEventListener('resize', function(event){
h = event.clientHeight;
if(h>510) {
$(".godown").fadeout("0");
}
if(h<510) {
content.addEventListener('scroll', function(event){
hc = $('#scroller').scrollTop();
if (hc){
$(".godown").fadeOut("slow");
$(".gotop").fadeIn("slow");
}
if (!hc){
$(".godown").fadeIn("slow");
$(".gotop").fadeOut("slow");
}
}, false);
}
}, false);
});
You need to add the event listener to the window object, as it is the window resizing, not the element. window.addEventListener("resize", function(event) {...});
I have updated your jsfiddle here where you can see it working.
$('document').ready(function() {
var content = document.getElementById("scroller");
var tabs = document.getElementById("tabs");
var than, now;
than = tabs.clientHeight;
window.addEventListener("resize", function(event) {
now = tabs.clientHeight;
alert(now + "&" + than);
}, false);
});
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 design a custom scrollbar, I was able to do it only when mouse moves slow, If mouse moves fast the 'bar' gets out of the scroll Region.
Here is my fiddle:
http://jsfiddle.net/ghufranne/ydz2hpm0/22/
var $body = $('body');
var $target = null;
var isDraggEnabled = false;
var posY=0;
$body.on("mousedown", "#bar", function(e) {
$this = $(this);
if(e.offsetX==undefined){
y = e.pageY-$(this).offset().top;
}else{
y = e.offsetY;
};
$('#scrollRegion').offset({
top:currTop+y});
$target = $(e.target);
e.preventDefault();
});
$body.on("mouseup", function(e) {
$target = null;
});
var bottomScrollLock=false;
var topScrollLock=false;
$body.find("#scroll").on("mousemove", function(e) {
if ($target) {
var pos= $target.offset();
if(bottomScrollLock && e.pageY<posY){
bottomScrollLock=false;
}
if(topScrollLock && e.pageY>posY){
topScrollLock=false;
}
if(pos.top<scrollPos.top )
{
posY=e.pageY;
topScrollLock=true;
}
if((pos.top+heightOfBar-scrollHeight)> scrollPos.top){
posY=e.pageY;
bottomScrollLock=true;
}
noOfElToScroll = parseInt(pos.top-e.pageY+y);
$("#drag").text(noOfElToScroll);
if(!bottomScrollLock && noOfElToScroll<0 ){
$target.offset({
top: e.pageY -y
});
for(var i=0;i<1;i++){
$drop.find('li:last').after("<li>value "+(lastVisible++)+"</li>");
$drop.find('li:first').remove();
firstVisible++;}
}
if(noOfElToScroll>0 &&!topScrollLock){
$target.offset({
top: e.pageY -y
});
$("#drag").text($('#bar').offset().top);
$drop.find('li:first').before("<li>value "+(firstVisible--)+"</li>");
$drop('li:last').remove();
lastVisible--;
}
};
});
If I had used Draggable working, It would work fine.
But I don't want to use it, I want to learn it.
Look on first
and second chart. That factor is called a Jquery
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