Change cursor icon when on certain calculated area

Question

$(window).mousemove(function(e) {

   if(e.pageX > $(this).width()/2) {
       console.log('im on right');
    }else {
        console.log('im on left');
    }

});

Plain and simple, it works, but when:

$(window).mousemove(function(e) {

   if(e.pageX > $(this).width()/2) {
       $(this).addClass('horizontal');
    }else {
       $(this).addClass('vertical');
    }

});

It doesnt work (NOTHING CHANGES), am I missing something?

css for that matter:

.horizontal { cursor: w-resize; }
.vertical { cursor: n-resize; }

Answer 1

You are adding a class to a Window object. The Window object has no equivalent HTML element therefore you can't apply CSS to it. Instead you should use either the HTML tag or the BODY tag.

i.e

$('html').addClass('class');

The second issue is that you are adding the classes without removing the other class. Once the user moves the mouse to both sides of the screen, the DOM object that you apply the CSS to will have two classes, both .horizontal and .vertical. To fix this, use removeClass().

i.e.

$('html').mousemove(function(e) {

   if(e.pageX > $('html').width()/2) {
       $('html').removeClass('vertical');
       $('html').addClass('horizontal');
   } else {
       $('html').removeClass('horizontal');
       $('html').addClass('vertical');
   }

});

EDIT:

By default, FireFox's HTML element is not equal in dimensions to the browser Window. Since the mousemove event is on the HTML element, it will only be triggered in the area of the page that has content. To fix this, have the HTML element fill the entire screen regardless of content.

html {
   width: 100%;
   height: 100%;
}