Question

I don’t have any code but I was just wondering if it is possible in jQuery to increase/decrease an element’s font size based on a scroll up/down?

in the best case scenario I would like to increase the font size with a scroll only when the mouse is on that element, just need someone to point me in the right direction.

Answer 1

Some semi-pseudo code

$('#mydiv').bind('mousewheel DOMMouseScroll',function(e){
  // determines direction of scroll
  var delta = e.originalEvent.wheelDelta || -e.originalEvent.detail; 
  var current = $(this).css('font-size');
  // scroll down
  if(delta>0){
    //var pixels = (create a negative pixel ratio system); 
  }else{ //scroll up
    //var pixels = (create a positive pixel ratio system); 
  }
  $(this).css({"font-size" : pixels+"px"});
});

Creating something similar to this would work, but you will probably run into the problem of your element not firing the scroll event when there is no scrollbar on that element.

This is all dependent on the browser of course, and unfortunately, the mousewheel events aren’t the best when it comes to cross-browser compatibility (as of the date of this post).

It works here though! (on chrome): http://jsfiddle.net/KqwY2/1/