CODEWITHSUNDEEP
jqueryjquery-uijquery-slider
Marcos Vargas Moran
Marcos Vargas Moran

Reputation: 165

jquery highlight applies a ton, how to avoid it

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.

Upvotes: 1

Views: 86

Answers (2)

FDisk
FDisk

Reputation: 9426

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

Upvotes: 0

James Allardice
James Allardice

Reputation: 166021

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();

Upvotes: 2

Related Questions