We Keep Coding

Is it somehow possible to scroll specific div without mouseenter to it

I've got a 2 column layout, where left column is fixed and right column is enabled to scroll. I've set overflow: hidden; to body because I don't want to scroll body. But is it somehow possible to scroll my second column with text without directly moving cursor to it (scroll it globally by mousewhell)? Here is the fiddle: https://jsfiddle.net/ketysek/4ysm4h0f/

#Fission answer is correct.
This answer is for old browsers support.
if (document.body.addEventListener) {
document.body.addEventListener("mousewheel", MouseWheelHandler, false);
document.body.addEventListener("DOMMouseScroll",
MouseWheelHandler, false);
}
else document.body.attachEvent("onmousewheel", MouseWheelHandler);
function MouseWheelHandler(e) {
var right= document.getElementsByClassName("right")[0];
var e = window.event || e; // old IE support
right.scrollTop += e.deltaY * 5;
}

You can bind an onwheel event to the left column and scroll the right column instead. Check the updated fiddle here.
document.getElementsByClassName('left')[0].onwheel = function(event) {
document.getElementsByClassName('right')[0].scrollTop += 10 * event.deltaY;
}

basically i think you cant do this thing smoothly, but if i try to be creative you can assign "wheel" event to the body of the page , and add anchor inside your text you want to be scrolled, and inside the function that take care of the wheel event move to that anchor.
to recognized wheel direction read this : Javascript - Detecting scroll direction

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/

translateX = event.offsetX setter on mousemove event return 1 - sometimes

Quick and simple question, about a some sort of scrubber thing. See the fiddle below.
When binding to the mousemove event (using jQuery), and setting the transformX property when moving in the positive direction, there is about a 1/2 change it returns 1.
$floater.css('transform', 'translateX('+event.offsetX+'px)');
Same setup with left offset - No issues!
Browser inconsistencies:
Firefox does nothing
IE does the same as Chrome
Heads up, IE decided to crash on opening my fiddle
Fiddle:
http://jsfiddle.net/n3Z3Y/3/

This happens because when mouse cursor is over your 'floater' div you lose mouseover on the container parent. A quick fix could be to return false when mouse is over your floater div. Fiddle updated here.
$floater.on('mousemove', function(event) {
event.stopPropagation();
event.preventDefault();
// cross browser propagation stopping...
return false;
});

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.

default browser's drag and move functionality

I have an image that I would like to be able to move by dragging on the page. As I understand it should work by default in every browser, but for some reason it doesn't work for me.
Here is my page:
<div style="position:relative;width:1000px; height:900px;border:solid;z-index:30;float:left">
<div id="image-helper" style="position:absolute;width:1000px; height:900px;z-index:20;float:left" >
<img id="image" src="images/test.jpg" style="width:500px;height:400px;cursor:pointer;z-index:10;" alt=""/>
</div>
</div>
Do I miss something in css?
Thanks

To do drag and drop you need javascript, and in jquery, you can use the ui drag'n'drop : http://jqueryui.com/demos/draggable/

No you can't move an image just by doing this. You have to listen for mouse events to update the position of the image in javascript.
More specifically, you'll have to catch
mousedown
mousemove
mouseup
Here's a very raw demonstration : http://jsfiddle.net/dystroy/CvVte/
CSS :
img {
position: fixed;
}​
Javascript :
var mouseIsDown = false;
$('img').mousedown(function(e){
mouseIsDown = true;
pos = $(this).offset();
e.preventDefault();
});
$(document).mousemove(function(e){
if (!mouseIsDown) return;
$('img').css({left:e.pageX, top:e.pageY});
}).mouseup(function(){
mouseIsDown = false;
});​
I'll let you finalize in order to be more precise and use start drag position (hint : use offset). And you could also remove the mousemove event handler when the mouse button is up.