Loading ...
Sorry, an error occurred while loading the content.

Problem using Yahoo Sliders

Expand Messages
  • khuang82
    I m having some problems using Yahoo s slider library with IE. I m trying to do some custom things with it, including creating my own class to wrap around the
    Message 1 of 1 , Apr 24 4:44 PM
    • 0 Attachment
      I'm having some problems using Yahoo's slider library with IE. I'm
      trying to do some custom things with it, including creating my own
      class to wrap around the Slider class. This is an IE-specific application.

      The biggest issue is that for my purposes, I'll need to have sliders
      that are not wide enough to accomodate their range of values. If that
      didn't make sense; my slider background image is 71 pixels, but the
      slider needs to go from 0 to 100 (or possibly more). So basically,
      there aren't enough pixels. Before anyone asks, I cannot change the
      width of the sliders, so I'm bound to this problem.

      I'm also adding Plus and Minus buttons which'll allow users to
      fine-tune the slider by plus/minus one. The problem I'm experiencing
      now is with these buttons. If you load up the example I've uploaded
      (below), the Plus button is effectively not doing anything.

      Playing around with alerts, I've figured out that the the onChange()
      function is somehow not getting called by Slider.setValue(). However,
      setValue() is not failing...

      Any help would be greatly appreciated.

      example:
      http://toastd.com/temp/test_slider.html


      Thanks,
      Kyle


      javascript:
      pdiSlider = function(_name)
      {
      // custom slider initialization
      this.name = _name;
      sldObject = document.getElementById('slider' + this.name);

      this.width = parseInt(sldObject.getAttribute('width'));
      this.min = parseInt(sldObject.getAttribute('valuemin'));
      this.max = parseInt(sldObject.getAttribute('valuemax'));
      this.display = 'sliderDisplay' + this.name;
      this.value = 0;
      this.nextValue = -1;

      // native slider initialization
      this.slider = YAHOO.widget.Slider.getHorizSlider('slider' +
      this.name, 'thumb' + this.name, 0, this.width);
      this.slider.unlock();


      // add reference to parent object, custom class
      this.slider.parent = this;


      // offsetFromStart is (roughly) the position of the thumb on the slider
      this.slider.onChange = function(offsetFromStart)
      {
      // if the desired slider value is stored, use it. doesn't need to
      be converted
      if (this.parent.nextValue >= 0)
      {
      this.parent.value = this.parent.nextValue;
      }
      else
      {
      this.parent.value = Math.round(offsetFromStart * (100 /
      this.parent.width));
      document.getElementById(this.parent.display).innerHTML =
      this.parent.value;
      }
      this.parent.nextValue = -1;
      };

      // this function updates the actual value of the slider, not based
      on the thumb position
      /*
      this.update = function(newValue)
      {
      // if thumb is at either end, do nothing
      if (newValue < this.min || newValue > this.max)
      {
      return false;
      }

      // store value of slider
      this.nextValue = newValue;
      //document.getElementById(this.slider.parent.display).innerHTML =
      Math.round(this.nextValue);

      // translate value into position on Slider, and call setValue()
      function
      if (!this.slider.setValue(newValue * (this.width / this.max)))
      alert('failed');
      };
      */




      // register mouse event listeners
      YAHOO.util.Event.addListener(document.getElementById('btn' +
      this.name + 'Down'), 'mousedown', btnClickDown, this);
      YAHOO.util.Event.addListener(document.getElementById('btn' +
      this.name + 'Up'), 'mousedown', btnClickUp, this);
      };

      function btnClickUp (e, obj)
      {
      obj.nextValue = obj.value + 1;

      // write new value
      document.getElementById(obj.slider.parent.display).innerHTML =
      obj.nextValue;

      // convert value and call setValue() with it
      var value = obj.nextValue * (obj.width / obj.max);
      if (!obj.slider.setValue(value))
      alert('setValue() failed');

      // reset
      obj.nextValue = -1;
      }
      function btnClickDown (e, obj)
      {
      /*
      obj.nextValue = obj.value - 1;
      obj.slider.setValue(obj.nextValue);

      //obj.update( obj.value - 1);
      */
      }


      var sliderList = new Array();
      sliderList['Temp'] = new pdiSlider('Temp');

      function updateSlider(id, newValue)
      {
      if (sliderList[id])
      {
      sliderList[id].update(newValue);
      }
      }
    Your message has been successfully submitted and would be delivered to recipients shortly.