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...
Related
I'm trying to implement a Qualtrics survey, where I want to have an image of a ladder and a vertical slider next to it (where participants can set where they're on the ladder). The values on the slider run from 1 to 10, but the handle cannot be set to 10, but can be set to 0 (which is graphically under the slider itself). Furthermore, if I set 4 on the slider, it interprets it as 5 (similarly, if I set 0, it thinks it's 1, and so on). Do you know what am I doing wrong? I'm attaching the JS and the HTML scripts. I would be tremendously grateful if anyone could help! Thanks in advance
Here is the screenshot of the handle being under the slider
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
var vSlider = document.getElementById('uiSlider');
noUiSlider.create(vSlider,
{
start: 5,
step: 1,
direction: 'rtl',
orientation: 'vertical',
range: {
min: 1,
max: 10
},
format: wNumb(
{
decimals: 0
}
),
// Show a scale with the slider
pips: {
mode: 'steps',
stepped: true,
density: 10,
}
}
);
var inputNumber = document.getElementById('QR~'+this.questionId+'~1');
vSlider.noUiSlider.on('update', function (values, handle) {
inputNumber.value = values[handle];
}
);
inputNumber.addEventListener('change', function () {
vSlider.noUiSlider.set([null, this.value]);
}
);
inputNumber.setAttribute('readonly',true)
}
);
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});
<table style="width:100%">
<tbody>
<tr>
<td style="padding-right:10px; width:65%; vertical-align: top;" rowspan="3"><img style="width: 600px; height: auto;" src="https://www.researchgate.net/profile/Paul-Vaucher/publication/259879628/figure/fig3/AS:341740713201697#1458488743795/MacArthur-scale-of-subjective-social-status-It-is-used-to-assess-patient-and-doctor.png"></td>
</tr>
<tr>
<td style="padding-left:30px;">
<div style="height:375px;" id="uiSlider"> </div>
</td>
</tr>
</tbody>
</table>
Try to add this:
inputNumber.addEventListener('change', function () {
vSlider.noUiSlider.set(values[handle]);
}
Instead of this:
inputNumber.addEventListener('change', function () {
vSlider.noUiSlider.set([softSlider.noUiSlider.set]);
}
It will help you to reach number "10".
And about the number "0", actually it not "0" it is "1" in your scale. If you will take a look closer, so when you are setting "7", actually your handle is under the 7th mark, same if you are setting 10, handle is under 10th mark. So position of the handle, which you consider as "0" is actually a "1" in the design you have chosen.
Hovewer, you can override this behaviour, by adding those lines:
var override = document.getElementsByClassName('noUi-base')[0];
override.style.position = "initial"
Below the code where the slider is created.
noUiSlider.create(vSlider,
{
start: 5,
step: 1,
direction: 'rtl',
orientation: 'vertical',
range: {
min: 1,
max: 10
},
format: wNumb(
{
decimals: 0
}
),
// Show a scale with the slider
pips: {
mode: 'steps',
stepped: true,
density: 10,
}
}
);
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'm new in JQDateRangeSlider and I'm using it as a time slider: JSFiddle
I've used:
$("#slider").dateRangeSlider({defaultValues:{ min:new Date("2016-01-05T03:00:00Z"), max:new Date("2016-01-05T20:00:00Z") } });
to change the default values when the user presses the 'Change' button but it doesn't happen anything.
Can the default values can be changed using this instruction?
Please check the below code values are changing now on click of change button
I just provided a sample one you can update code as per your requirement
$('#btn3').on('click', function(e) {
$("#slider").dateRangeSlider({
bounds: {
"min": min3,
"max": max3
},
range: {
min: {
minutes: 1
}
},
defaultValues: {
min: min3,
max: max3
}
});
});
http://jsfiddle.net/LJrYf/154/
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
});
I'm running this script on a page which shows a box with more information when you roll over it.
site for review
The script works fine, except theres a flicker of the box before it actually scales.
What is causing this? I use the same thing in the main navigation with the same flicking.
Any ideas whats causing this?
//work page springing box
$$('.box').each(function(s) {
var more = $(s).down(2);
$(s).observe('mouseenter', function(e) {
$(more).show();
new Effect.Scale(more, 100, {
scaleX: false,
scaleY: true,
scaleContent: false,
scaleFrom: 1,
mode: 'absolute',
duration: 0.5
});
});
$(s).observe('mouseleave', function(e) {
new Effect.Fade(more, {
duration: 0.2
})
});
});
Thanks.
Rich
I should note, I am testing in Safari 4.0.4
#Allen is correct. When you call $(more).show(); The entire box is shown. Then, when you call new Effect.Scale(more the box is scalled down and slide in. So $(more).show(); is what's causing the flickering. You could try:
$(more).show.bind(more).delay(0.01);
new Effect.Scale(more, 100, {
scaleX: false,
scaleY: true,
scaleContent: false,
scaleFrom: 1,
mode: 'absolute',
duration: 0.5
})
The site looks fine to me. I did notice a very little something, but it could be my imagination.
new Effect.Scale(more, 100, {
scaleX: false,
scaleY: true,
scaleContent: false,
scaleFrom: 1,
mode: 'absolute',
duration: 0.5
});
$(more).show();
You may want to try this though, it seems to show it, then update it, as the code says. Update it first, then show it.
Firefox, fully updated btw.