javascript - Jquery UI slider attach label -
i have modal, shows @ times , have 2 sliders on it, should show values. here's 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 neighbor's answers average was: div div#noavg neighbors didn't give anwer div#avgslider span#avglabel h2 answer was: div dvi#notanswered didn't give anwer div#yourslider span#yourlabel
i have code set 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 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 correctly , wanted attach selected value below handle. attaches values 2 lines below , if use page repeatedly span moves down line every time modal shows up. when stop code debugger in positionlabel
, copy+paste same code label gets attached right place.
i've been stuck problem half day , still cannot figure out what's wrong.
update
fiddle. if put debugger in positionlabel
, step through position labels correctly. somewhere have timing issue, don't know or why.
if add timeout
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... not timeout of 5
. why need timeout?
Comments
Post a Comment