Question

i am trying to “resize” a called “view” based on the mouse wheel spin.
For down spin the size should be decreased and for up spin the size should be increased.
I don’t have any idea to do it. Please someone help me to achieve it.
Here is my HTML code..

<div class="main"><div class="view"></div></div>

and my jQuery code is

$('.view').css('height','100px')
$('.view').css('width','100px')
$('.view').css('background-color','blue')
$('.view').mousewheel(function()
              {
                  alert('Hello');
              }); 

I think it is wrong way of doing. Hope i will get help.

Answer 1

$('.view').css('height', '100');
$('.view').css('width', '100');
$('.view').css('background-color', 'blue');
$('.view').mousewheel(function(event, delta) {
    var delta_px = delta > 0 ? "+=50" : "-=50";
    $(this).css('width', delta_px);
});

Demo – http://jsfiddle.net/scpDH/