I have a modal, that shows up at certain times and I have two sliders on it, which should show some values. Here's the code:
div#averageAnswerModal.modal.fade.custom-modal(tabindex="-1", role="dialog", aria-labelledby="myModalLabel" aria-hidden="true")
div.modal-content
div.modal-body(style='text-align: center;')
h2 Your neighbor's answers average was:
div
div#noAvg Your neighbors didn't give any anwer
div#avgSlider
span#avgLabel
h2 Your answer was:
div
dvi#notAnswered You didn't give anwer
div#yourSlider
span#yourLabel
I have this code to set up the sldiers
initializeModal = function() {
var positionLabel = function(label, slider, val) {
$(label).html(val).position({
my: 'center top',
at: 'center bottom',
of: $(slider + ' > .ui-slider-handle')
})
}
myModal = $('#averageAnswerModal').modal({
show: false,
keybord: false
})
$("#avgSlider").slider({
max: 100,
disabled: true,
change: function(event, ui) {
positionLabel('#avgLabel', "#avgSlider", ui.value)
}
})
$("#yourSlider").slider({
max: 100,
disabled: true,
change: function(event, ui) {
positionLabel('#yourLabel', "#yourSlider", ui.value)
}
})
}
And this code fires them up:
createSplashSliders = function(avg, your) {
myModal.modal('show')
if (avg === -1) {
$("#noAvg").show()
$("#avgSlider").hide()
$('#avgLabel').hide()
} else {
$("#noAvg").hide()
$("#avgSlider").show()
$('#avgLabel').show()
$("#avgSlider").slider('value', avg)
}
if (your === -1) {
$("#notAnswered").show()
$("#yourSlider").hide()
$('#yourLabel').hide()
} else {
$("#notAnswered").hide()
$("#yourSlider").show()
$('#yourLabel').show()
$("#yourSlider").slider('value', your)
}
}
The sliders show up correctly and I wanted to attach the selected value below the handle. It attaches the values like 2 lines below and if I use the page repeatedly the span just moves down with a line every time the modal shows up. When I stop the code with debugger in positionLabel
and just copy+paste the same code the label gets attached to the right place.
I've been stuck with this problem for half a day and I still cannot figure out what's wrong.
UPDATE
Fiddle . If you put a debugger in the positionLabel
and just step through it will position the labels correctly. So somewhere I have a timing issue, just don't know where or why.
If I add a timeout to
var positionLabel = function(label, slider, val) {
setTimeout(function() {
$(label).html(val).position({
my: 'center top',
at: 'center bottom',
of: $(slider + ' > .ui-slider-handle')
})
}, 200);
}
This works... but not with timeout of 5
. Why do I need this timeout?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.