Search code examples
javascriptjqueryjquery-uijquery-ui-slider

JQuery UI Slider resume after stopping on condition using 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+'%');
      }
});

Solution

  • 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; }
          }
    });