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/
Related
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 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
So basically I have an event that occurs at page load. it causes an image to follow your cursor, but on a click event I would like to disable this event, and then on a second click re-enable the mouse follow event
I tried just creating a toggle variable but it just seems to be freezing my image.
Would .on() and .off() be appropriate here? I read the documentation but I am confused on how to implement them
I am confused as to how I would turn off an event i guess.
Jscript
var enabled = true;
$(document).ready(function() {
$(document).mousemove(function() {
if (enabled) {
$("#rocket").stop().animate({left:e.pageX, top:e.pageY});
}
});
$(document).click(function() {
enabled == !enabled;
});
});
Demo
LIVE DEMO
var enabled = true;
$(function () {
var $rocket = $('#rocket');
$(document).mousemove(function (e) {
if (enabled) {
$rocket.css({left: e.pageX, top: e.pageY});
}
}).click(function () {
enabled ^= 1;
});
});
Instead of animate() use .css()
If you really want to add a sleek animation to your catching spacecraft:
LIVE DEMO with 'animation'
$(function () {
var $rocket = $('#rocket'),
enabled = true,
mX =0, mY =0,
posX =0, posY =0,
lazy = 20; // Smooth move
$(document).mousemove(function(e){
mX = e.pageX;
mY = e.pageY;
}).click(function(){
enabled^=1;
});
intv = setInterval(function(){
if(enabled){
posX += (mX-posX) / lazy; // zeno's paradox equation "catching delay"
posY += (mY-posY) / lazy;
$rocket.css({left: posX, top: posY});
}
}, 10);
});
I might try to register and remove the handler like
$(document).ready(function () {
function handler(e) {
$("#rocket").css({
left: e.pageX,
top: e.pageY
});
}
$(document).on('mousemove.cursor', handler);
var enabled = true;
$(document).click(function () {
enabled = !enabled;
if (enabled) {
$(document).on('mousemove.cursor', handler);
} else {
$(document).off('mousemove.cursor');
}
});
});
Demo: Fiddle
Here are minor fixes to make your code work:
var enabled = true;
$(document).ready(function() {
$(document).mousemove(function(e) {
if (enabled) {
$("#rocket").stop().animate({left:e.pageX, top:e.pageY});
}
});
$(document).click(function() {
enabled = !enabled;
});
});
The fiddle is here http://jsfiddle.net/bmzyK/8/
Just added param e in the mousemove event and added JQuery to the JSFiddle. Also fixed the '==' typo.
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
I'm making a quick animated drop down. I have it working great when you mouseover and mouseout on the initial button. I just cant get the HTML div that drops down to "hold" when you're hovered on the dropdown itself. here is a fiddle of what I'm doing: http://jsfiddle.net/kAhNd/
here's what I'm doing in the JS:
$('.navBarClickOrHover').mouseover(function () {
var targetDropDown = $(this).attr('targetDropDown');
var targetDropDownHeight = $('#' + targetDropDown).height();
$('#' + targetDropDown).animate({
'height': '200px'
});
}).mouseout(function () {
if ($('.dropdownCont').is(':hover') || $('.navBarClickOrHover').is(':hover')) {
} else {
var targetDropDown = $(this).attr('targetDropDown');
var targetDropDownHeight = $('#' + targetDropDown).height();
$('#' + targetDropDown).animate({
'height': '0px'
});
}
});
It works, but the element doesn't stay dropped down when you have your mouse over it. I added in
if ($('.dropdownCont').is(':hover') || $('.navBarClickOrHover').is(':hover')) {
}
to try to make it do nothing when you're hovered over '.dropdownCont'.
Having a hard time explaining it. I'm sorry, I hope I make sense. Any help would be awesome! here's my Fiddle: http://jsfiddle.net/kAhNd/
Here is your code transformed http://jsfiddle.net/krasimir/kAhNd/3/
var button = $('.navBarClickOrHover');
var isItOverTheDropdown = false;
var showDropDown = function() {
var targetDropDown = $('#' + button.attr('targetDropDown'));
var targetDropDownHeight = targetDropDown.height();
targetDropDown.animate({
'height': '200px'
});
targetDropDown.off("mouseenter").on("mouseenter", function() {
isItOverTheDropdown = true;
});
targetDropDown.off("mouseleave").on("mouseleave", function() {
isItOverTheDropdown = false;
hideDropDown();
});
}
var hideDropDown = function() {
var targetDropDown = $('#' + button.attr('targetDropDown'));
var targetDropDownHeight = targetDropDown.height();
targetDropDown.animate({
'height': '0px'
});
}
$('.navBarClickOrHover').mouseover(function () {
showDropDown();
}).mouseout(function () {
setTimeout(function() {
!isItOverTheDropdown ? hideDropDown : '';
}, 500);
});
I guess that this is what you want to achieve.