Menu
I just managed to build some javascript code to ensure that multiple sliders do not exceed a maximum value of 24.
The problem is that when I try and use this in a multipage template in jquery mobile, it only works for the first page and fails to check for the second page loaded via multipage template.
Here is my jsFiddle to give a better idea of the situation
[JsFiddle example](http://jsfiddle.net/WEewU/20/
first page works, 2nd page does not.
I am trying to ensure that any number of sliders on a page do NOT exceed 24 hours. And then use this code across all multi-page templates in jquery mobile.
Full Code
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.css"
/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.js"></script>
</head>
<body>
<form>
<!-- Home Page-->
<div data-role="page" id="home">
<div data-role="header" data-position="fixed" data-id="myheader">
<h1>test</h1>
</div>
<!-- /header -->
<div data-role="content">
<ul id="sliders1">
<li>
<input type="range" id="slider" class="value" name="slider1" value="0"
min="0" max="24" data-highlight="true" />
</li>
<li>
<input type="range" class="value" id="slider" name="slider2" value="0"
min="0" max="24" data-highlight="true" />
</li>
<li>
<input type="range" class="value" id="slider" name="slider3" value="0"
min="0" max="24" data-highlight="true" />
</li>
</ul> <a href="#home2">Link to 2nd page</a>
</div>
</div>
<div data-role="page" id="home2">
<div data-role="header" data-position="fixed" data-id="myheader">
<h1>test</h1>
</div>
<!-- /header -->
<div data-role="content">
<ul id="sliders">
<li>
<input type="range" id="slider" class="value" name="slider4" value="0"
min="0" max="24" data-highlight="true" />
</li>
<li>
<input type="range" class="value" id="slider" name="slider5" value="0"
min="0" max="24" data-highlight="true" />
</li>
<li>
<input type="range" class="value" id="slider" name="slider6" value="0"
min="0" max="24" data-highlight="true" />
</li>
</ul> <a href="#home">Link to Home</a>
</div>
</div>
</form>
</body>
Javascript
var sliders = $("#sliders1 .slider");
sliders.each(function() {
var max = 24;
var value = Number($(this).text(), 10),
availableTotal = max;
});
$(".value").change(function() {
var thisAmount = Number($(this).prop("value"));
var totalMax = 24;
var indMin = Number($(this).attr("min"));
var indMax = Number($(this).attr("max"));
var total = 0;
//Get the values of all other text boxes
$('.value').not(this).each(function() {
total += Number($(this).prop("value"));
});
//Find the remaining from our total sliders max
var remaining = totalMax - total;
if (remaining < 0) {
remaining = 0;
}
//if we are under our minimums, go for it! Otherwise, reduce the number.
if (thisAmount >= indMin && thisAmount < indMax && thisAmount < totalMax && thisAmount < remaining) {
$(this).siblings(".slider").slider("option", "value", thisAmount);
//total += thisAmount;
} else {
//var setMax = ((indMax + totalMax) - Math.abs(indMax - totalMax)) / 2;
var setMax = Math.min(indMax, totalMax, remaining);
$(this).siblings(".slider").slider("option", "value", setMax);
$(this).prop("value", setMax);
//total += (thisAmount - setMax);
}
//above was getting buggy, so lets just reset total and get it again
total = 0;
//Get the values of all text boxes
$('.value').each(function() {
total += Number($(this).prop("value"));
});
//Find our new remaining number after updating total for this value
remaining = totalMax - total;
if (remaining < 0) {
remaining = 0;
}
//Set each slider to the current point and update their max values.
$('.value').each(function() {
var sliderVal = Number($(this).prop("value"));
var sliderMin = Number($(this).attr("min"));
var sliderMax = Number($(this).attr("max"));
var setNewMax = (((sliderMax + totalMax) - Math.abs(sliderMax - totalMax)) / 2);
var newMax = sliderVal + remaining;
if (newMax < setNewMax) {
$(this).siblings('.slider').slider("option", "max", newMax);
} else {
$(this).siblings('.slider').slider("option", "max", setNewMax);
}
$(this).prop("max", setNewMax);
});
});
717
jQuery Mobile has a beautiful thing called page events. They will execute on a specific page or on a number of pages and they work only with jQuery Mobile so count them as specific events. To find more about there take a look at this ARTICLE, to be more transparent this is my personal blog. Or find it HERE.
This is a working example of your code: http://jsfiddle.net/Gajotres/e8xZ2/
Lets go through changes:
*onDomReady**jQuery code is initialized with a :
$(document).on('pagebeforeshow', '#home, #home2', function(){
It will make sure that this code is executed on a pages with id home and homn2.
Sliders and input boxes are accessed through a $.mobile.activePage. Basically this is an active page jQuery Mobile selector.
$.mobile.activePage.find("#sliders1 .slider");
and
$.mobile.activePage.find('.value').not(this).each(function() {
Your jQuery Mobile framework is upgraded to stable 1.2 version
198
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
