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

Slider and Safari

Expand Messages
  • sngndncmn
    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
    Message 1 of 4 , 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));
      }
      });
    • Lucas Smith
      sngndncmn, I m unable to reproduce the issue in Safari 3.2. Which version of Safari are you testing against? The included markup seems incomplete in the face
      Message 2 of 4 , Feb 27, 2009
      • 0 Attachment
        sngndncmn,

        I'm unable to reproduce the issue in Safari 3.2. Which version of
        Safari are you testing against?

        The included markup seems incomplete in the face of the js that
        accesses other elements (the demo input for example). Do you have a
        page you can share that illustrates the problem?

        Luke

        --- In ydn-javascript@yahoogroups.com, "sngndncmn" <sngndncmn@...> wrote:
        >
        > 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));
        > }
        > });
        >
      • runjithkumar@rocketmail.com
        Hi Markup, I have a issue with the NaN bug, Can you suggest how to fix it. -Runjith ... title= Slider
        Message 3 of 4 , Mar 1 8:02 AM
        • 0 Attachment
          Hi Markup,

          I have a issue with the NaN bug, Can you suggest how to fix it.

          -Runjith


          --- In ydn-javascript@yahoogroups.com, "sngndncmn" <sngndncmn@...> wrote:
          >
          > 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));
          > }
          > });
          >
        • Adam Moore
          ... http://developer.yahoo.com/yui/slider/#knownissues -Adam ... --
          Message 4 of 4 , Mar 2 10:47 AM
          • 0 Attachment
            On Sun, Mar 01, 2009 at 04:02:57PM -0000, runjithkumar@... wrote:
            > I have a issue with the NaN bug, Can you suggest how to fix it.

            http://developer.yahoo.com/yui/slider/#knownissues

            -Adam

            > --- In ydn-javascript@yahoogroups.com, "sngndncmn" <sngndncmn@...> wrote:
            > >
            > > 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));
            > > }
            > > });
            > >
            >
            >
            >
            >
            > ------------------------------------
            >
            > Yahoo! Groups Links
            >
            >
            >

            --
          Your message has been successfully submitted and would be delivered to recipients shortly.