We Keep Coding

Mousemove events are not triggered when I drag the scroll bar with the mouse

I need to detect mouse movement on the drag of my websites scroll bar, this allows me to detect user inactivity.
When the scroll bar is being dragged the mouse move event is not firing.
Not working in IE11 and Chrome, I'm seeing the mousemove events fire in Firefox 32, I have not tested other browsers.
Sample code:
HTML
<div class="parent" style="background-color:black;width:100px;height:500px;overflow:scroll;">
<div class="child" style="background-color:blue;width:100px;height:1000px"></div>
</div>
Javascript:
var lastMove;
$(window).mousemove(function (e) {
lastMove = new Date();
$(".child").css("background-color", "red");
lastTimeMouseMoved = new Date().getTime();
var t=setTimeout(function(){
var currentTime = new Date().getTime();
if(currentTime - lastTimeMouseMoved > 10){
$(".child").css("background-color", "blue");
}
},10);
});
JS Fiddle:
https://jsfiddle.net/btdxha8k/
Binding to the scroll event is the solution I currently have but I was wondering if there is a more clean solution as I need to bind to 100+ div's that do not need scrolling events as this looks really redundant, dirty and I normally don't like using hacks like this in my code.
Cheers ;)

Mouse move event is triggered only when you move mouse within the screen.
Your issue here scrollbar is not the inner side of screen where mouse move event is captured so you shoul add scroll event with the same function

I'd guess that mouse events aren't raised because the scrollbar is technically outside of your page.
Instead, could you listen for the onscroll event?
https://api.jquery.com/scroll/

angularjs - mousedown & moving over elements while mouse down event?

To explain what I am trying to do I have created an example where you can play with:
http://plnkr.co/edit/usrmiNkj5YJY5SlV8ETw?p=preview
I want to draw multiple tiles green while my mouse is down.
This:
<div ng-mousedown="drawImage($parent.$index,$index)"></div>
works only when the mouse is going down on the element not outside.
Is there an way to check if the mouse is already down and draw the tiles green?
Please use the code I made to create an working example.

You'll have to include a few more event handlers, for mouseup and mousemove, like this
<div class="tile" ng-repeat="x in y track by $index" ng-class="x" ng-mouseup="removeFlag()" ng-mousedown="setFlag($parent.$index,$index)" ng-mousemove="drawImage($parent.$index,$index)"></div>
Then add the functions
$scope.drawImage = function(y,x){
if ($scope.mouseIsDown)
$scope.map[y][x] = "green";
}
$scope.setFlag = function(y,x){
$scope.mouseIsDown = true;
this.drawImage(y,x)
}
$scope.removeFlag = function(){
$scope.mouseIsDown = false;
}
This sets a flag when the mouse is down, and sets the color when the cursor moves over an element and the mouse is down.
PLNKR

detect mouse scroll on an item which not scrollable

I have an item image tag, I try to know how to detect user scroll on this image even it not scrollable?
and after that I will check to left or right like https://stackoverflow.com/a/17312647 then I can call ajax change image url
$('img').scroll(function(){
console.log('scroll');
});

The wheel event appears to be the standard way. https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel
You will probably be interested in the deltaX property.
Before wheel became standard, I was listening for mousewheel events for Chrome, and DOMMouseScroll events for Firefox:
http://www.quirksmode.org/dom/events/scroll.html
https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/DOMMouseScroll
but I don't know if they can catch horizontal scroll events.

Here is My Way To Do that:
Create a Variable isOvered To display whether the Mouse is on Image.
In your img tag add OnMouseOver="isOvered=true;" OnMouseOut="isOvered=false;"
And bind Scroll Events (mousewheel or DOMMouseScroll) to body with checking that whether mouse is on img or not.
var isOvered=false;
function displaywheel(e){
var evt=window.event || e;
var delta=evt.detail? evt.detail*(-120) : evt.wheelDelta;
if(isOvered){
if(delta<0)
{
//"Scroll Down On IMG Occured"
}
if(delta>0)
{
//"Scroll UP On IMG"
}
}
//delta returns +120 when wheel is scrolled up, -120 when down
}
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel";
if(document.attachEvent) document.attachEvent("on"+mousewheelevt, displaywheel);
else if (document.addEventListener) document.addEventListener(mousewheelevt, displaywheel, false);
Hope It helps you. Cheers :)!!

disable mousedown bind event on scrollbar

on the http://www.associationtsunami.org/ site if i make a mousedown on the document the cube rotates depending on the direction the user moves the mouse.
the code is:
key code ...
).bind('mousedown touchstart', function (evt) {
delete mouse.last;
if ($(evt.target).is('a, iframe')) {
return true;
}
evt.originalEvent.touches ? evt = evt.originalEvent.touches[0] : null;
mouse.start.x = evt.pageX;
mouse.start.y = evt.pageY;
$(document).bind('mousemove touchmove', function (event) {
dragging = 1;
// Only perform rotation if one touch or mouse (e.g. still scale with pinch and zoom)
if (!touch || !(event.originalEvent && event.originalEvent.touches.length > 1)) {
event.preventDefault();
// Get touch co-ords
event.originalEvent.touches ? event = event.originalEvent.touches[0] : null;
$('.viewport').trigger('move-viewport', { x: event.pageX, y: event.pageY });
}
});
$(document).bind('mouseup touchend', function () {
dragging = 0;
$(document).unbind('mousemove touchmove');
});
});
full code https://github.com/AssociationTsunami/tsunami/blob/gh-pages/js/cube.js#L72
i would like to disable this event if a user makes the mousedown on a scrollbar - for example on the 'ONSONPARLA' page there is a TAB with ACCORDIONS, if you open any of the accordion content you get a scrollbar on the edge or within the accordion and if you try to move the scrollbar, this also moves the cube.
what is the correct way to overwrite this in the cube.js so that the cube does not turn if the event is on a scrollbar element?

It can't be done in such manner.
But there is an alternative solution. Use some custom scroll bar plugin to replace classic scroll bar. You will be able to prevent events on him. I understand this is not an excellent solution, but according to you web page you like to take a chance. :)
Here you can find few good plugins.
Good plugin example is here.

jQuery drag left/right

I've just created a custom carousel with images and have got previous/next arrows to move the images around.
Does jQuery have an event where I can click on the photo, drag it to the left or right and fire the same action that I currently have on the arrows?
My current code looks like this
$carousel.animate({
left: '+=' + amountToAnimate
}, 800, 'backEaseOut');
I also need to prevent Firefox from 'picking' the image up.
I'm already using jQuery UI if that helps.

You will need to add draggable() to your item and add some custom code the start event.
With more sample code it might be easier to give fuller advice, jsfiddle.net sample is best
EDIT:
You could use events api http://api.jquery.com/category/events/ , mousemove and mousedown, to figure which way to move the image, and call the animate event.
Re-using draggable , with some clever options and event functions may be better
I also need to prevent Firefox from 'picking' the image up.
Use the Mozilla CSS Extensions
-moz-user-focus:ignore;
-moz-user-select:none;
might to do the trick.

This may not be the most elegant solution but I believe it should do the job
// shortcut
var j = jQuery;
// add mouse down listener to the image
j('#image_id').mousedown(function(){
// add mouse move
j('#image_id').mouseMove(function(event){
// declare vars
var previous_x_position;
var previous_y_position;
if(x_position)
{
previous_x_position = x_position;
previous_y_position = y_position;
}
var x_position = event.pageX;
var y_position = event.pageY;
if(previous_x_position < x_position)
{
// we are moving right
}
else
{
// we are moving left
}
if(previous_y_position < y_position)
{
// we are moving down
}
else
{
// we are moving up
}
})
})