jQuery Mobile 1.4 - change page
$.mobile.changePage() is deprecated.
HTML
<!DOCTYPE html>
<html>
<head>
<title>JQM latest</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://demos.jquerymobile.com/1.4.0/css/themes/default/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://demos.jquerymobile.com/1.4.0/js/jquery.mobile-1.4.0.min.js"></script>
</head>
<body>
<!-- Page 1 -->
<div data-role="page">
<div data-role="content">
<fieldset class="poll-fieldset">
<label class="poll-label">YES</label>
<div role="application" class="ui-slider-custom ui-slider-custom-green ui-slider-track ui-shadow-inset ui-bar-inherit ui-corner-all ">
<div class="ui-slider-bg ui-btn-active" style="width:0%;"></div> <a href="#" class="ui-slider-handle ui-btn ui-shadow" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-valuetext="0" title="0" aria-labelledby="slider-1-label" style="left: 0%;">0%</a>
</div>
</fieldset>
<fieldset class="poll-fieldset">
<label class="poll-label">No</label>
<div role="application" class="ui-slider-custom ui-slider-custom-red ui-slider-track ui-shadow-inset ui-bar-inherit ui-corner-all ">
<div class="ui-slider-bg ui-btn-active" style="width: 0%;"></div> <a href="#" class="ui-slider-handle ui-btn ui-shadow" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-valuetext="0" title="0" aria-labelledby="slider-1-label" style="left: 0%;">0%</a>
</div>
</fieldset>
<fieldset class="poll-fieldset">
<label class="poll-label">No</label>
<div role="application"...
CSS
.ui-slider-custom {
margin:0px 5px !important;
top:0 !important;
}
.ui-slider-custom-blue div {
background:#38C !important;
}
.ui-slider-custom-green div {
background:#33CC45 !important;
}
.ui-slider-custom-orange div {
background:#EB701F !important;
}
.ui-slider-custom-sky div {
background:#33CCC6 !important;
}
.ui-slider-custom-red div {
background:#CC3339 !important;
}
.poll-label {
margin:0 !important;
font-size:12px !important;
font-style:italic;
}
.poll-fieldset {
margin-bottom: 7px !important;
}
.poll-fieldset a {
font-weight: 300 !important;
font-size: 9px !important;
line-height: 25px !important;
height: 24px !important;
margin-top: -14px !important;
}
JavaScript
var totalVotes = 1;
var votesYes = 0;
var votesNo = 0;
function playVotes() {
var yesBar = Math.round(votesYes / totalVotes * 100);
var noBar = Math.round(votesNo / totalVotes * 100);
$(".ui-slider-custom-green > div").css("width", yesBar + "%");
$(".ui-slider-custom-green > a").css("left", yesBar + "%").text(yesBar + "%");
$(".ui-slider-custom-red > div").css("width", noBar + "%");
$(".ui-slider-custom-red > a").css("left", noBar + "%").text(noBar + "%");
}
//demo the change
var go = setInterval(function () {
votesYes = Math.random();
votesNo = Math.random();
totalVotes = votesYes + votesNo;
playVotes();
}, 2000);
setTimeout(function(){ clearInterval(go); },15000); //clear after 15s
/*
//run auto
var i = 0;
var auto = setInterval(function () {
if(i >= 100) clearInterval(auto);
$(".ui-slider-custom-blue > div").css("width", i + "%");
$(".ui-slider-custom-blue > a").css("left", i + "%").text(i + "%");
i += 10;
}, 1000);
*/