Shortening javascript Jquery code

Question

I am wondering if there is a way to shorten the code below. I have shown the first 5 if statements. I will have a total of 10 when I am done.

EDIT: FORGOT THE MOUSEMOVE PART

$("#bar").mousemove(function(e){
    var vb = $(this);
           if(e.pageX <=467 &&  e.pageX > 457){
            vb.attr("src","images2/vb10.png");
            vol =10;
          }
          if(e.pageX <=457 && e.pageX > 447){
            vb.attr("src","images2/vb9.png");
            vol=9;
          }
          if(e.pageX <=447 && e.pageX > 437){
            vb.attr("src","images2/vb8.png");
            vol=8;
          }
          if(e.pageX <=437 && e.pageX > 427){
            vb.attr("src","images2/vb7.png");
            vol=7;
          }
          if(e.pageX <=427 && e.pageX > 417){
            vb.attr("src","images2/vb6.png");
            vol=6
          }
});

Thanks!

What is the script suposed to do? If looks specific to the page changing or when it loads. You could look into a switch, but thats a lot of checks. Why do you need them every 10 pixels? — Seth
– Seth, Commented Jan 5, 2012 at 3:45
I don't know about shortening, but you should definitely use else if. — Joseph Silber
– Joseph Silber, Commented Jan 5, 2012 at 3:46

Alex M · Accepted Answer · 2012-01-05 04:33:12Z

5

$("#bar").mousemove(function(e){
    var vol = Math.min( Math.ceil( (e.pageX - 7) / 10 ) - 36, 10 );
    $(this).attr("src","images2/vb"+vol+".png");
});

The Math library contains some optimized browser functions to help you with numbers. The first statement takes the x coord, subtracts 7 and divides by 10 to turn 467 into 46, 457 into 45 and 458 into 45.1. Math.ciel rounds this up, turning 458 into 46. We then subtract 36 to get 10, and assign the smaller of the output of the above computation and the number 10 (the largest number). We can use vol to make the image string.

edited Jan 5, 2012 at 4:33

answered Jan 5, 2012 at 3:46

Alex M

3,5232 gold badges22 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Tadeck Over a year ago

You can shorten it further using jscompress.com to: $("#bar").mousemove(function(a){var b=Math.ceil((a.pageX-7)/10)-36;$(this).attr("src","images2/vb"+b+".png")}) :)

james Over a year ago

I tried that add it alerted 12. The images are only 1 through 10.

Alex M Over a year ago

Added min to the vol calculation.

james Over a year ago

Works great. That is some beautiful code. Could you please add comments explaining how it works.

james Over a year ago

Thanks for adding the explanation it helped alot.

dyoo · Accepted Answer · 2012-01-05 03:45:03Z

1

You can probably use arithmetic to simplify the code. Division on e.pageX should let you derive the index.

answered Jan 5, 2012 at 3:45

dyoo

12.1k1 gold badge39 silver badges46 bronze badges

Comments

Sandeep · Accepted Answer · 2012-01-05 04:12:00Z

1

Below is the shortened code. Not sure what's your real code does, but this is appropriate for what you have posted. I hope it is self-explanatory to you.

var vb = $(this),
    max = 467,
    frequency = 10, // difference between (467, 458), (457, 448) and so on...(your if conditions)
    maxVol = 10;

/* Find the range in which e.pageX falls. This will return, for example, if e.pageX was 460, then pageXband is 0.
 * If e.pageX is 437, then pageXband is 4 and so on.
 */
var pageXband = parseInt((max - e.pageX) / frequency); 

vol = maxVol - pageXband; // 'vol' is the difference between maxVol and pageXband.
vb.attr("src","images2/vb"+vol+".png");

answered Jan 5, 2012 at 4:12

Sandeep

81910 silver badges16 bronze badges

Comments

Joe · Accepted Answer · 2012-01-05 04:12:37Z

1

$('#bar').mousemove(function (e) { 
    $(this).attr("src", "image2/vb" + (vol = (e.pageX-367)/10|0) + ".png");
});

edited Jan 5, 2012 at 4:12

answered Jan 5, 2012 at 3:49

Joe

82.9k18 gold badges130 silver badges147 bronze badges

Comments

nnnnnn · Accepted Answer · 2012-01-05 04:20:08Z

You've got several good answers already showing how to do it using arithmetic, but just to allow for a hypothetical situation where the ranges for each case are all different and thus don't fit into a convenient formula you can still shorten the code somewhat given the two values you set in each case are directly related (although it's not clear what you are using vol for): just set vol in each branch and then at the end use that to set the image source. Also, although it doesn't make the code shorter, you should use else if so that you don't evaluate every condition.

$("#bar").mousemove(function(e){
    var vol;
    if (e.pageX <=467 && e.pageX > 457)
       vol=10;
    else if (e.pageX <=457 && e.pageX > 447)
       vol=9;
    else if (e.pageX <=447 && e.pageX > 437)
       vol=8;
    // etc

    $(this).attr("src","images2/vb" + vol + ".png");
});

And speaking of not evaluating every condition, if the ranges are contiguous you don't need to test the upper and lower bounds each time:

$("#bar").mousemove(function(e){
    var vol;
    if (e.pageX > 467 || e.pageX < someMinimumValue)
       return; // or set default vol = ?
    else if (e.pageX > 457)
       vol=10;
    else if (e.pageX > 447)
       vol=9;
    else if (e.pageX > 437)
       vol=8;
    // etc

    $(this).attr("src","images2/vb" + vol + ".png");
});

Bhavesh G · Accepted Answer · 2012-01-05 04:56:28Z

0

its good for regular and ir-regular intervals,

$("#bar").mousemove(function(e){
    var vol = decide(e.pageX);
    $(this).attr("src","images2/vb" + vol + ".png");

});

function decide (val1) {
    switch (true) {
         case val1 >= 457 && val1 <= 467 : return 10;
         case val1 >= 447 && val1 <= 457 : return 9;
         case val1 >= 437 && val1 <= 447 : return 8;
         case val1 >= 427 && val1 <= 437 : return 7;
         case val1 >= 417 && val1 <= 427 : return 6;
         default : return 0;
    }
}

edited Jan 5, 2012 at 4:56

answered Jan 5, 2012 at 4:28

Bhavesh G

3,0285 gold badges47 silver badges69 bronze badges

3 Comments

nnnnnn Over a year ago

You don't need break statements after return statements.

Bhavesh G Over a year ago

yup you are right. but it's good practice to use breaks in switch case

nnnnnn Over a year ago

It's standard practice not to include a redundant break statement for a case that has a return, especially when every case has a return.

Collectives™ on Stack Overflow

Shortening javascript Jquery code

6 Answers 6

5 Comments

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related