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

45733Slider and Safari

Expand Messages
  • sngndncmn
    Feb 26, 2009
    • 0 Attachment
      Hello,

      I recently put a YUI slider on my page. I can get it to function
      correclty in Firefox, but when i test in Safari, i am able to drag the
      thumb anywhere on the screen..?

      Also, i was having an issue with the NaN bug, but was able to fix that..

      here is the code i have..

      thank you

      MARKUP -

      <div class="side_data_label side_wide_label">Random Count:</div><br/>
      <div class="side_data_value side_wide_value">
      <?php echo
      $this->data['broadcastWidget']->broadcastRecipientsOther; ?>
      <div id="total_member_count">of <span id="total_members"><?php
      echo $this->data['campaignAnalytics']['total_members'];?></span></div>
      <div id="slider-bg" class="yui-h-slider" tabindex="-1" title="Slider">
      <div id="slider-thumb" class="yui-slider-thumb">
      <img
      src="http://yui.yahooapis.com/2.7.0/build/slider/assets/thumb-n.gif">
      </div>
      </div>
      </div>


      CODE -
      var Event = YAHOO.util.Event,
      Dom = YAHOO.util.Dom,
      lang = YAHOO.lang,
      bg="slider-bg",
      thumb="slider-thumb",
      textfield="slider-converted-value"

      var slider = YAHOO.widget.Slider.getHorizSlider("slider-bg",
      "slider-thumb", 0, 190, 0, 0);
      slider.animate = true;
      slider.setValue(0);

      slider.getRealValue = function() {
      var total_members = Dom.get('total_members');
      var total_member_int = parseInt(total_members.innerHTML);
      var scaleFactor = (190 / total_member_int);
      return Math.round(this.getValue() / scaleFactor);
      }

      slider.subscribe("change", function(offsetFromStart) {
      var fld = Dom.get(textfield);

      // use the scale factor to calculate the slider width
      against the total number of members
      // value
      var actualValue = slider.getRealValue();

      // update the text box with the actual value
      fld.value = actualValue;

      // Update the title attribute on the background. This helps
      assistive
      // technology to communicate the state change
      Dom.get(bg).title = "slider value = " + actualValue;

      });

      Event.on(textfield, "keydown", function(e) {
      // set the value when the 'return' key is detected
      if (Event.getCharCode(e) === 13) {
      var v = parseFloat(this.value, 10);
      v = (lang.isNumber(v)) ? v : 0;

      // convert the real value into a pixel offset
      slider.setValue(Math.round(v/scaleFactor));
      }
      });
    • Show all 4 messages in this topic