jquery highlight applies a ton, how to avoid it

Question

I'm doing a website for reserving seats on a train. The form needs a calculator for the price to show the client a total amount while he/she is selecting service, quantity of passengers, etc.

To make more obvious the change in the total cost I used the jq highlight effect on the div, just to get more attention.

The problem is that I had it highlight when a slider slides, so if I pass from 0 to 56 (max seats on the train wagon) the highlight occurs 56 times.

Hopefully you could help out, or suggest a better idea.

Here's the code:

$(document).ready(function(){   
    /**/
    function calculateTotal(){
        //var unitPrice = 2, paperTypes = 2, printedSides = 2;
        var precio_base  = $('#categoria option:selected').val();
        var cant_adultos = $("#adultos").val();

        var cant_ninos = $("#ninos").val();
        var sum = parseInt(cant_adultos) + parseInt(cant_ninos);
        var precio_productos = $("input[name^='servicio']").parseNumber();

        var totalCost = parseInt(precio_base)*parseInt(sum);

        $('#total-box').html("$"+totalCost);
        $('#total-box').effect("highlight", {}, 1000);
    }

    $('#categoria,#adultos,#ninos').change(calculateTotal).highlight();

});

The page is at http://www.micontrol.cl/~mvargas/wordpress/wp-transatacama/reservas-rapidas/form-reservas.php.

I guess that jQuery UI Effect doesn't handle asynchronous effects. — Eliseu Monar dos Santos, Dec 16 '11 at 22:24

score 2 · Answer 1 · answered Dec 16 '11 at 22:23

2

Assuming you're using the slider widget from jQuery UI (jQuery UI appears to be included on the page you linked to), you could bind to the stop event instead of change. Something like this:

$("#yourSlider").bind("slidestop", calculateTotal).highlight();

answered Dec 16 '11 at 22:23

James Allardice

164,175
21
332
312

thanks for your answer i will create a new code that uses that, but I don't know how to use bind()... thanx now i have a new thing to learn :D (y) – Marcos Vargas Moran Dec 17 '11 at 21:38
No problem :) Just have a look at the jQuery docs: http://api.jquery.com/bind/ You've used `change` in your question, that's just shorthand for `.bind("change", function() { ... });` – James Allardice Dec 17 '11 at 21:48

score 0 · Accepted Answer · answered Dec 16 '11 at 22:32

0

You need to stop triggering the change event on every slide step. Just trigger that on stop event. ex: http://jsbin.com/atolax/2

answered Dec 16 '11 at 22:32

FDisk

8,493
2
47
52

WOW great, thanks :D i didn't know that, but now I do thanks to you... PD: that wasn't the exact behaviour i was looking for but it will do – Marcos Vargas Moran Dec 17 '11 at 21:39

jquery highlight applies a ton, how to avoid it

2 Answers2