Total JS noob here. I have the following line that implements the jQuery Slider:
<script type="text/javascript">
$(document).ready(function () {
$("#wheelLeft").slider({
orientation: 'vertical', value: 37,
min: -100, max: 100,
slide: function (event, ui) { $("#lblInfo").text("left"); } });
});
</script>
Basically on the slide event, the #lblInfo gets its text set to left. This works fine. However, I'd like to convert the inline anonymous function that handles the slide event into a regular function.
Can someone help out?
<script type="text/javascript">
function handleSlide(event, ui) {
$("#lblInfo").text("left");
}
$(document).ready(function () {
$("#wheelLeft").slider({
orientation: 'vertical', value: 37,
min: -100, max: 100,
slide: handleSlide
});
});
</script>
<script type="text/javascript">
function myfunc(event, ui) {
}
$(document).ready(function () {
myfunc(event, ui)
});
</script>
would do it. It's obviously not an ideal solution as it still uses the anonymous but should solve any issues you have where you need to manipulate the function manually
Just define a named function:
function doSlide(event, ui)
{
$("#lblInfo").text("left");
}
$(document).ready(function() {
$("#wheelLeft").slider({
orientation: 'vertical', value: 37,
min: -100, max: 100,
slide: doSlide
});
});
$(document).ready(function myFunction() {
// do something
});
Related
i'm using iziModal jquery plugin and ion range slider. Basically I have a table with records and each record has edit button that shows an iziModal with sliders inside it.
I have in a js file called "slidersInit.js" ion range sliders plugin initialization
$(document).ready(function () {
$("#NumTurnos").ionRangeSlider({
skin: "big",
type: "single",
min: 1,
max: 3,
from: 3
});
$("#NumPAB").ionRangeSlider({
skin: "big",
type: "single",
min: 0,
max: 50,
from: 6
});
$("#AlcanceAbastecimento").ionRangeSlider({
skin: "big",
type: "single",
min: 0,
max: 20,
from: 3
});
$("#QtdMin").ionRangeSlider({
skin: "big",
type: "single",
min: 0,
max: 20,
from: 4
});
$("#QtdMax").ionRangeSlider({
skin: "big",
type: "single",
min: 0,
max: 50,
from: 12
});
$("#NumDias").ionRangeSlider({
skin: "big",
type: "single",
min: 0,
max: 5,
from: 5
});
})
Now on my actual page I call the script
<script src="~/lib/vue/vue.js"></script>
<script src="~/lib/axios/axios.js"></script>
<script src="~/lib/ion-rangeslider/js/ion.rangeSlider.js"></script>
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="~/lib/font-awesome/js/all.js"></script>
<script src="~/lib/izimodal/js/iziModal.js"></script>
<script src="~/js/slidersInit.js"></script>
notice that it's at bottom before ion rangeslider and izimodal.
So on that page I also have iziModal configurations
$(document).ready(function () {
$("#modal").iziModal({
zindex: 3000,
width: 900,
onOpening: function (modal) {
modal.startLoading();
//ajax call
//update ion range sliders with new values
}
});
});
problem is for some reason when i open the iziModal, all sliders appear at 0 which means they haven't been initialized before iziModal opens and it only works if I initialize them inside the Modal open function.
Problem is that i want to do this outside iziModal because it won't work if i call the sliders initialize everytime i click on a record edit button to call modal, it keeps previous values and won't update.
So is there a way where i can just wait for sliders to be initialized before modal is?
Nevermind, it seems the issue was something else. I tried everything, destory modal, sliders and reinitialize. It seems what worked was resetting iziModal on closing.
I just added this method to iziModal initialize
onClosed: function (modal) {
$('#modal').iziModal('resetContent');
}
I hope someone with same problem sees this to save some headaches...
$( "#slider-1" ).slider({
min: 1,
step: 0.01,
max: 3,
value: 2,
animate:"slow",
orientation: "horizontal",
change: function (event, ui) {
$(this).slider('value', Math.round(ui.value));
ui.preventDefault();
}
})
This show too much recursion error in console how fix it.
thanks in advance.
I fixed that issue myself, by changing the code as below.
var rounded_value='';
$( "#slider-1" ).slider({
min: 1,
step: 0.01,
max: 3,
value: 2,
animate:"slow",
orientation: "horizontal",
change: function (event, ui) {
if(rounded_value!=ui.value){
rounded_value=ui.value;
$(this).slider('value', Math.round(ui.value));
}
return false;
}
})
This is the slider element with the call. I was trying to stop it on condition which was successful but after that it's stuck. I tried to add else{ return true; } but then as expected it doesn't run the rest. If I move the if else block at end the codes run then condition fires which is not what I desire.
$(".hdrHt").slider({
orientation: "horizontal",
range: "min",
max: 22,
min: 8,
value: 15,
create: function(){ $(this).find('.headHandle').text( $(this).slider("value")+'%'); },
slide: function(e,ui){
var hfs=currentVid.find('.ovlDivs').css('font-size').replace('px',''),hht=currentVid.find('.headerDiv').css('height').replace('px','');
if((parseInt(hfs)+10)>parseInt(hht)){ return false; }
currentVid.find('.middleDiv').css('height',(100-parseInt(currentVid.find('.ftrHt').slider("value"))-ui.value)+'%');
currentVid.find('.headerDiv').css('height',ui.value+'%'); $(this).find('.headHandle').text(ui.value+'%');
}
});
Ok I gave up too quickly it was easy.. But still if you have a cleaner solution please go ahead.
var stopPt=8;
$(".hdrHt").slider({
orientation: "horizontal",
range: "min",
max: 22,
min: 8,
value: 15,
create: function(){ $(this).find('.headHandle').text( $(this).slider("value")+'%'); },
slide: function(e,ui){
if(ui.value>stopPt){
currentVid.find('.middleDiv').css('height',(100-parseInt(currentVid.find('.ftrHt').slider("value"))-ui.value)+'%');
currentVid.find('.headerDiv').css('height',ui.value+'%'); $(this).find('.headHandle').text(ui.value+'%');
}
var hfs=currentVid.find('.ovlDivs').css('font-size').replace('px',''),hht=currentVid.find('.headerDiv').css('height').replace('px','');
if((parseInt(hfs)+15)>parseInt(hht)){ stopPt=ui.value; return false; }
}
});
I am looking to disable the functionality of the jQuery UI sliders until a radio button is checked. Pretty straight forward but I have not had any luck with the things I have tried so I am looking to get some help. For convenience: http://jsfiddle.net/nlem33/L5cY6/11/
$('#slider1').slider({
min: min_value,
max: max_value,
step: 1,
slide: sliderHandler,
stop: function (event, ui) {
}
});
var min_value = 0;
var max_value = 630;
$('#slider2').slider({
min: min_value,
max: max_value,
step: 5,
slide: sliderHandler,
stop: function (event, ui) {
}
});
You can initialize them disabled and then enable them when a radio button is clicked:
$('#slider1').slider({
min: min_value,
max: max_value,
step: 1,
disabled: true, // <= disabled on init
slide: sliderHandler,
stop: function (event, ui) {
}
});
// Enable function :
$(':radio').click(function() {
$('#slider1, #slider2').slider('enable');
});
http://jsfiddle.net/L5cY6/23/
I need the variable "value" in my slider plugin to be the integer value of a input in the form:
$(function () {
$("#calcSlider").slider({
min: 0,
max: 90,
step: 5,
value: /* ACCESS HERE!!!!!! */,
slide: function (event, ui) {
$("#calcSup").val(ui.value);
}
});
});
I need value: to be the value in calcSup or ${form.calcSup}, but that is a string. I need it parsed to a int:
<input type="text"
id="calcSup"
name="calcSup"
value="${form.calcSup}"
size="3"
readonly="readonly" />
Maybe you are looking for the parseInt function, more details can be found here:
http://www.w3schools.com/jsref/jsref_parseint.asp
$(function () {
$("#calcSlider").slider({ min: 0,
max: 90,
step: 5,
value: parseInt($('input#calcSup').val()),
slide: function (event, ui) {
$("#calcSup").val(ui.value);
}
});
});
<input type="text" id="calcSup" name="calcSup" value="${form.calcSup}" size="3" readonly="readonly"/>
If you're going to parse the value to an integer, don't forget to include the radix so it doesn't wind up getting confused for base-8 or something.
$("#mySlider").slider({
// Set initial value to that of <input type="text" id="bar" value="23" />
value: parseInt( $("#bar").val(), 10 ),
// Update <input type="text" id="foo" /> anytime we slide
slide: function ( event, ui ) {
$("#foo").val(ui.value);
}
});
Demo: http://jsbin.com/oceqab/edit#javascript,html
This might be what you are looking for:
$(function () {
$("#calcSlider").slider({ min: 0,
max: 90,
step: 5,
value: parseInt($("#calcSup").val()),
slide: function (event, ui) {
$("#calcSup").val(ui.value);
}
});
});