I am trying to apply if..elseif.. condition on multiple UI sliders. Practically I want that certain slider show/hide depending on the ui.value but the if condition is not working correctly. A fiddle can be found here : http://jsfiddle.net/XWRDZ/
Code below:
HTML
<div id="label">Postpaid</div><br />
<div id="slider-range-max"></div>
<br />
<div id="slider-range-max-2"></div>
JS
<script>
var packageselection = 0;
$(window).load(function() {
$('#slider').hide();
$('#slider-range-max-2').hide();
});
$(function() {
var labelArr = new Array("Postpaid", "Hybrid", "SIM Only");
$( "#slider-range-max" ).slider({
min: 0,
max: 2,
value: 0,
step: 1,
change: function( event, ui ) {
$("#label").html(labelArr[ui.value]);
packageselection = ui.value;
if ( packageselection = 1 ){
$('#slider-range-max-2').show();
}
else if ( packageselection = 2 ){
$('#slider-range-max-2').hide();
}
}
});
});
$(function() {
$( "#slider-range-max-2" ).slider({
min: 1,
max: 3,
value: 1,
slide: function( event, ui ) {
}
});
});
</script>
Thanks so much for your help guys!
equal to is == or === not = (thats declaration)
if ( packageselection == 1 ){
$('#slider-range-max-2').show();
}
else if ( packageselection == 2 ){
$('#slider-range-max-2').hide();
}
Related
I need to add 6 pips in JqueryUI slider. The PIPS wopuld range from 2000, 2010, 2020, 2030, 2040, 2050. I'm unable to get the understand functionality of adding these pips. Also, currently the slider has been coded to work on step sliding effect. Here is the code I'm using:
<div id="slider"></div>
<script>
$(function() {
var extensionMethods = {
pips: function( settings ) {
options = {
first: "number", // "pip" , false
last: "number", // "pip" , false
rest: "pip" // "number" , false
};
$.extend( options, settings );
// get rid of all pips that might already exist.
this.element.addClass('ui-slider-pips').find( '.ui-slider-pip' ).remove();
// we need teh amount of pips to create.
var pips = this.options.max - this.options.min;
// for every stop in the slider, we create a pip.
for( i=0; i<=pips; i++ ) {
// hold a span element for the pip
var s = $('<span class="ui-slider-pip"><span class="ui-slider-line"></span><span class="ui-slider-number">'+i+'</span></span>');
// add a class so css can handle the display
// we'll hide numbers by default in CSS, and show them if set.
// we'll also use CSS to hide the pip altogether.
if( 0 == i ) {
s.addClass('ui-slider-pip-first');
if( "number" == options.first ) { s.addClass('ui-slider-pip-number'); }
if( false == options.first ) { s.addClass('ui-slider-pip-hide'); }
} else if ( pips == i ) {
s.addClass('ui-slider-pip-last');
if( "number" == options.last ) { s.addClass('ui-slider-pip-number'); }
if( false == options.last ) { s.addClass('ui-slider-pip-hide'); }
} else {
if( "number" == options.rest ) { s.addClass('ui-slider-pip-number'); }
if( false == options.rest ) { s.addClass('ui-slider-pip-hide'); }
}
// if it's a horizontal slider we'll set the left offset,
// and the top if it's vertical.
if( this.options.orientation == "horizontal" )
s.css({ left: '' + (100/pips)*i + '%' });
else
s.css({ top: '' + (100/pips)*i + '%' });
// append the span to the slider.
this.element.append( s );
}
}
};
$.extend(true, $['ui']['slider'].prototype, extensionMethods);
$("#slider").slider({
min: 0,
max: 600,
step: 100,
// on slide adjust width of all rects
slide: function(event, ui) {
svg.selectAll("rect")
.attr("width", function (d) {
Well JQuery-UI slider doesn't have pip's by default. To get pip's refer to the link below
https://github.com/simeydotme/jQuery-ui-Slider-Pips
I am trying to get a label to update when a user enters a value into a text box. I have managed to get the label to update when the slider bar value is changed by the user but i dont have the skill to get it to update when the text box changes.
I tried to write some code but it does not look right at all, can sombody lend me a hand?
Code i tried
$("#MonthlyRent").text({
textchange: function (event, ui) {
update(2, ui.value + '%'); //changed
}
});
Function to catch change
$(document).ready(function () {
$("#slider").slider({
range: "min",
animate: true,
value: 1,
min: 0,
max: 100,
step: 1,
slide: function (event, ui) {
update(1, ui.value + '%'); //changed
}
});
$("#slider2").slider({
range: "min",
animate: true,
value: 1,
min: 0,
max: 100,
step: 1,
slide: function (event, ui) {
update(2, ui.value + '%'); //changed
}
});
$("#MonthlyRent").text({
slide: function (event, ui) {
update(2, ui.value + '%'); //changed
}
});
//Added, set initial value.
$("#amount").val(0);
$("#duration").val(0);
$("#amount-label").text(0);
$("#duration-label").text(0);
$("MonthlyRent").text(0);
update();
});
update function
function update(slider, val) {
//changed. Now, directly take value from ui.value. if not set (initial, will use current value.)
var $amount = slider == 1 ? val : $("#amount").val();
var $duration = slider == 2 ? val : $("#duration").val();
var $rent = $("#MonthlyRent").val();
var $amount2 = $amount.replace('%', '');
/* commented
$amount = $( "#slider" ).slider( "value" );
$duration = $( "#slider2" ).slider( "value" );
*/
$total = "£" + ($amount2 + $rent);
$("#amount").val($amount);
$("#amount-label").text($amount);
$("#duration").val($duration);
$("#duration-label").text($duration);
$("#total").val($total);
$("#total-label").text($total);
$('#slider a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> ' + $amount + ' <span class="glyphicon glyphicon-chevron-right"></span></label>');
$('#slider2 a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> ' + $duration + ' <span class="glyphicon glyphicon-chevron-right"></span></label>');
}
Use the event change or keyup:
$('#mytextinput').on('change keyup', function (e) { /* You stuff here. */ })
Without HTML code, I guessed your input was something like <input type="text" id="mytextinput" />, but if it is not you should give more information.
To detect a change on a textbox use the following
http://jsfiddle.net/SrhYh/
$('#example').change(function() {
update();
});
function update() {
$('#result').text($('#example').val());
}
as an alternative listen to keyup
$('#example').keyup(function() {
update();
});
function update() {
$('#result').text($('#example').val());
}
http://jsfiddle.net/SrhYh/1/
I have a function that averages all of the values from multiple sliders. I am trying to take the data I get from that average and insert into the tweet. Example: "I just scored 100 points playing this awesome game!" The point value obviously being changed dynamically based on the average value. I am very new to Javascript/Jquery so please include extreme amounts of details when answering. Thanks! Here is my Jquery:
$(function readTweet() {
$(document).ready(function () {
console.log($(".tweet").text());
});
$(function(average) {
var numberOfRatings = $(".rating").length,
average;
$( ".slider" ).slider().find(".ui-slider-handle").addClass("custom");
$( ".slider" ).slider({
range: "min",
value: 5,
min: 1,
max: 10,
slide: function( event, ui ) {
var total = 0;
$(this).siblings( ".rating" ).text(ui.value);
$(".rating").each(function () {
var ratingValue = parseInt($(this).text(), 10);
total = parseFloat(total + ratingValue);
console.log(ratingValue);
});
average =(total/numberOfRatings).toFixed(2);
$("#average").text(average);
$(".tweet").click(function (){
$(this).html("I just scored " + average + "points playing this awesome game!");
});
}
});
$( ".rating" ).text($( ".slider" ).slider( "value" ) );
$(".ui-slider-handle").focus(function() {
$(this).removeClass("ui-state-hover ui-state-default ui-state-focus ui-state-active");
});
});
});
HTML
<div id="grand-total">
<h1>Album Rating</h1>
<h2 type="text" id="average" value="0">0</h2>
Tweet to
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
I have a function that averages all of the values from multiple sliders. I am trying to take the data I get from that average and insert into the tweet. Example: "I just scored 100 points playing this awesome game!" The point value obviously being changed dynamically based on the average value. I am very new to Javascript/Jquery so please include extreme amounts of details when answering. Thanks! Here is my
Jquery:
$(function readTweet() {
$(document).ready(function () {
console.log($(".tweet").text());
});
$(function(average) {
var numberOfRatings = $(".rating").length,
average;
$( ".slider" ).slider().find(".ui-slider-handle").addClass("custom");
$( ".slider" ).slider({
range: "min",
value: 5,
min: 1,
max: 10,
slide: function( event, ui ) {
var total = 0;
$(this).siblings( ".rating" ).text(ui.value);
$(".rating").each(function () {
var ratingValue = parseInt($(this).text(), 10);
total = parseFloat(total + ratingValue);
console.log(ratingValue);
});
average =(total/numberOfRatings).toFixed(2);
$("#average").text(average);
$(".tweet").click(function (){
$(this).html("I just scored " + average + "points playing this awesome game!");
});
}
});
$( ".rating" ).text($( ".slider" ).slider( "value" ) );
$(".ui-slider-handle").focus(function() {
$(this).removeClass("ui-state-hover ui-state-default ui-state-focus ui-state-active");
});
});
});
HTML:
<div id="grand-total">
<h1>Album Rating</h1>
<h2 type="text" id="average" value="0">0</h2>
Tweet to
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
I'm trying to get the value of the slider when value goes up or goes down.
$(document).ready(function() {
var valMap = [1,2,3,4,5,6,7,8,9,10];
var counter = null;
var slider = $( "#slider" ).slider({
disabled: false,
animate: true,
min: 0,
max: valMap.length-1,
values: [0],
slide: function( event, ui ) {
$( "#zomlevel" ).val(valMap[ui.values[0]] + "x");
slider.slider("option", "animate", "slow");
counter++;
if(counter increments){
alert("COUNTER INCREMENTS");
}
if(counter decrement){
alert("COUNTER DECREMENTS");
}
}
});
});
If i slide the slider to the right it should increment and if i slide the slider to the left it should decrement. how can i do that in slider?
Try something like
jQuery(function($){
var valMap = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var counter = null, value= 0;
var slider = $("#slider").slider({
disabled : false,
animate : true,
min : 0,
max : valMap.length - 1,
slide : function(event, ui) {
//$("#zomlevel").val(valMap[ui.values[0]] + "x");
slider.slider("option", "animate", "slow");
counter++;
},
change: function(){
var val = $(this).slider('value');
console.log(val, value)
if(value < val) {
console.log('incremented')
} else if(value > val){
console.log('decremented')
}
value = val;
}
});
});
Demo: Plunker