Creating a "zoom in" and "zoom out" driven by mouse scroll wheel within web pages

Question

I'm looking for a similar experience to autocad ... or solidworks

basically the content sizes (maintaining aspect ratio) Xsize * Ysize

and magnifies particular areas

and I've included ruby / rails as my language of choice

Answer 1

Take a look at the http://html5readiness.com/ source code. You can do exactly that in the center portion.

This is copied from Paul Irish HTML5Readiness website :

jQuery(document).bind('DOMMouseScroll mousewheel', function(e, delta) {

  var newval,
      num = $('div.css-chart p').css('padding-left');

  delta = delta || e.detail || e.wheelDelta;

  if (delta > 0 || e.which == 38) {
      newval = parseFloat(num) + 10 * (e.shiftKey ? .1 : 1);
  } else if (delta < 0 || e.which == 40) {
      newval = parseFloat(num) - 10 * (e.shiftKey ? .1 : 1);
  } else {
      return true;
  }

  $('style.padleft').remove();
  $('<style class="padleft"> div.css-chart p { padding-left : '+newval+'px; } div.css-chart p i { width : '+2*newval+'px; } </style>')
      .appendTo(document.body);

  e.preventDefault();
});