jquery - adding values with sGlide plugin -
i trying add together values of 3 slider bars together. have function add together them no matter phone call function breaks page. values of each slider counting live when load page nan value of total if slider starts @ position other 0.
<!doctype html> <html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=560, user-scalable=0;">
<title>sglide - working</title> <link rel="stylesheet" href="main.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="sglide.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#slider1').sglide({ 'width': 85, 'height': 60, 'image': 'img/knob.png', //'startat': 'slider3 o.value', 'colorstart': '#3333ff', 'colorend': '#000080', 'buttons': true, drag: function(o){ $('input[type=text][id="amount1"]').val(o.value); }, onbutton: function(o){ $('input[type=text][id="amount1"]').val(o.value); } }); $('#slider2').sglide({ 'width': 85, 'height': 60, 'image': 'img/knob.png', //'startat': 'slider3 o.value', 'colorstart': '#360', 'colorend': '#693', 'buttons': true, drag: function(o){ $('input[type=text][id="amount2"]').val(o.value); }, onbutton: function(o){ $('input[type=text][id="amount2"]').val(o.value); } }); $('#slider3').sglide({ 'width': 85, 'height': 60, 'image': 'img/knob.png', 'startat': 40, 'colorstart': '#cc99cc', 'colorend': '#4c1a4c', 'buttons': true, drag: function(o){ $('input[type=text][id="amount3"]').val(o.value); }, onbutton: function(o){ $('input[type=text][id="amount3"]').val(o.value); } }); function update() { $amount1 = $("#slider1").val(o.value); $amount2 = $("#slider2").val(o.value); $amount3 = $("#slider3").val(o.value); $total = $amount1 + $amount2 + $amount3; //$("#amount").val($amount1); //$("#amount2").val($amount2); //$("#amount3").val($amount3); $("#total").val($total); } }); </script> </head><body> <div id="slider1" class="slider_bar"></div><input id="amount1" type="text" /><br /><br /> <div id="slider2" class="slider_bar"></div><input id="amount2" type="text" /><br /><br /> <div id="slider3" class="slider_bar"></div><input id="amount3" type="text" /><br /><br /> <br /> <h3>total</h3> <input id="total" type="text" /> </body></html>
first of not calling update function anywhere in code. if want update total textbox when bar dragged, need phone call function within every drag event.
also setting value drag event parameter text fields trying slider object. haven't worked sglide when debugged code, value of sliders didn't homecoming value expected improve values text fields.
in end update function should this.
function update() { $amount1 = $('input[type=text][id="amount1"]').val(); $amount2 = $('input[type=text][id="amount2"]').val(); $amount3 = $('input[type=text][id="amount3"]').val(); $total = parsefloat($amount1) + parsefloat($amount2) + parsefloat($amount3); $("#total").val($total); } also stated before need phone call function in drag events.
hope helps...
jquery
No comments:
Post a Comment