Slider virker ikke som forventet
Jeg har endelig fået stykket noget kode sammen som næsten virker. Bær over med, at det er sammensat af hvad jeg har kunnet finde i div tutorials. Der er sikkert noget af det der ikke giver mening og som er overflødigt...Se siden her: http://superfly.dk/e4d/app.html
Mit problem er, at den jquery mobile slider som jeg har sat ind, ikke returnerer værdi som jeg troede den ville. Flytter man på slideren ændres prisen (som starter på kr. 0.00) ikke, men skriver man et antal i tekstfeltet som slideren styrer ændres prisen.
Er der nogen der kan hjælpe det sidste på vej?
Jeg kan ikke få det til at virke på hverken computer eller ipad. Det er ipad den i sidste enden skal bruges på...
Koden:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
</title>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" href="my.css" />
<style>
/* App custom styles */
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.0/jquery.mobile-1.1.0.min.js">
</script>
<script src="my.js">
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<!--// load jQuery Plug-ins //-->
<script type="text/javascript" src="field/jquery.field.js"></script>
<script type="text/javascript" src="jquery.calculation.js"></script>
<script type="text/javascript">
$(document).ready(
function (){
// update the plug-in version
$("#idPluginVersion").text($.Calculation.version);
// bind the recalc function to the quantity fields
$("input[name^=qty_item_]").bind("keyup", recalc);
// run the calculation function now
recalc();
}
);
function recalc(){
$("[id^=total_item]").calc(
// the equation to use for the calculation
//"qty * price",
"((qty * 4700)-11840)-(qty * 3100)",
// define the variables used in the equation, these can be a jQuery object
{
qty: $("input[name^=qty_item_1]"),
price: $("[id^=price_item_]")
},
// define the formatting callback, the results of the calculation are passed to this function
function (s){
// return the number as a dollar amount
return "Kr. " + s.toFixed(2);
},
// define the finish callback, this runs after the calculation has been complete
function ($this){
// sum the total of the $("[id^=total_item]") selector
var sum = $this.sum();
$("#grandTotal").text(
// round the results to 2 digits
"Kr. " + sum.toFixed(2)
);
}
);
}
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-theme="a" data-role="header">
<h5>
beregning
</h5>
</div>
<div data-role="content" style="padding: 15px">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="qty_item_1">
vælg antal
</label>
<input name="qty_item_1" id="qty_item_1" value="7.4" min="0" max="100" data-highlight="true" type="range" />
</fieldset>
</div>
<div data-role="fieldcontain" id="total_item_1" style="display:block; width:100px; height:30px; border:1px solid #dedede;"></div>
</div>
</div>
<script>
//App custom javascript
</script>
</body>
</html>
