Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Nov 2006
    Posts
    47
    Thanks
    2
    Thanked 1 Time in 1 Post

    Yahoo User Interface: Slider Control

    I am trying to put multiple sliders on a web form. The sample on YUI only shows one slider on a form. I tried developing my own code to allow for 4 sliders on one form, but as a beginner in Javascript, I'm having some difficulty. I am getting the following error: Undefined is null or not an object when I navigate to the page and none of the sliders actually move. Can someone please help me with this. I would greatly appreciate it. Thanks again in advance.

    <!--Javascript-->
    <script type="text/javascript">
    (function()
    {
    var Event = YAHOO.util.Event,
    Dom = YAHOO.util.Dom,
    lang = YAHOO.lang,
    sliderLA,sliderDP,sliderIR,sliderT,
    valuearea = "slider-value",
    textfield = "slider-converted-value"

    // The slider can move 0 pixels up
    var topConstraint = 0;

    // The slider can move 600 pixels down
    var bottomConstraint = 600;

    // Custom scale factor for converting the pixel offset into a real value
    var scaleFactor = 1.5;

    // The amount the slider moves when the value is changed with the arrow keys
    var keyIncrement = 20;
    var tickSize = 30;

    Event.onDOMReady(function()
    {
    sliderLA = YAHOO.widget.Slider.getHorizSlider("slider-la", "slider-thumb1", 0, 600, 10);
    sliderLA.getRealValue = function(){return Math.round((this.getValue() * scaleFactor + 100)*1000);}

    sliderDP = YAHOO.widget.Slider.getHorizSlider("slider-dp", "slider-thumb2", 0, 600, 10);
    sliderDP.getRealValue = function(){return Math.round((this.getValue() * scaleFactor + 100)*1000);}

    sliderIR = YAHOO.widget.Slider.getHorizSlider("slider-ir", "slider-thumb3", 0, 600, 10);
    sliderIR.getRealValue = function(){return Math.round((this.getValue() * scaleFactor + 100)*1000);}

    sliderT = YAHOO.widget.Slider.getHorizSlider("slider-t", "slider-thumb4", 0, 600, 10);
    sliderT.getRealValue = function(){return Math.round((this.getValue() * scaleFactor + 100)*1000);}

    sliderLA.subscribe("change", function(offsetFromStart) { displaynewvalue(sliderLA, offsetFromStart); });
    sliderDP.subscribe("change", function(offsetFromStart) { displaynewvalue(sliderDP, offsetFromStart); });
    sliderIR.subscribe("change", function(offsetFromStart) { displaynewvalue(sliderIR, offsetFromStart); });
    sliderT.subscribe("change", function(offsetFromStart) { displaynewvalue(sliderT, offsetFromStart); });

    function displaynewvalue(currslider, offsetFromStart)
    {
    var valnode = Dom.get(valuearea);
    var fld = Dom.get(textfield);
    // Display the pixel value of the control
    valnode.innerHTML = offsetFromStart;
    // use the scale factor to convert the pixel offset into a real value
    var LaValue = sliderLA.getRealValue();
    var DpValue = sliderDP.getRealValue();
    var IrValue = sliderIR.getRealValue();
    var TValue = sliderT.getRealValue();
    // update the text box with the actual value
    fld.value = (LaValue - DpValue) * ( (IrValue / 1200) / (1 - (1 + (IrValue / 1200)) ** -(TValue * 12)));
    // Update the title attribute on the background. This helps
    // assistive technology to communicate the state change
    //Dom.get(bg).title = "slider value = $" + actualValue;

    });

    currslider.subscribe("slideStart", function()
    {
    YAHOO.log("slideStart fired", "warn");
    });

    currslider.subscribe("slideEnd", function()
    {
    YAHOO.log("slideEnd fired", "warn");
    });

    // Listen for keystrokes on the form field that displays the
    // control's value. While not provided by default, having a
    // form field with the slider is a good way to help keep your
    // application accessible.

    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
    currslider.setValue(Math.round(v/scaleFactor));
    }
    });

    // Use setValue to reset the value to white:
    //Event.on("putval", "click", function(e) {
    //slider.setValue(100, false); //false here means to animate if
    //possible});

    // Use the "get" method to get the current offset from the
    // slider's start position in pixels. By applying the scale
    //factor, we can translate this into a "real value
    //Event.on("getval", "click", function(e) {
    // YAHOO.log("Current value: " + slider.getValue() + "\n" +
    //"Converted value: " + slider.getRealValue(), "info", "example"); //});
    });//Event.onDomReady
    })();
    </script>


    <!--HTML-->
    <table width="95&#37;" border="1" align="center" cellpadding="0" cellspacing="0" style="margin-bottom: 20px">
    <tr>
    <td align="right">Loan Amount:</td>
    <td width="83%">
    <div id="slider-la" tabindex="1" title="Loan Amount in Thousands" hidefocus="true">
    <div id="slider-thumb1" class="thumb">
    <img src="images/thumb-n.gif" />
    </div>
    </div>
    </td>
    </tr>
    <tr>
    <td width="17%" align="right">Down Payment: </td>
    <td>
    <div id="slider-dp" tabindex="2" title="Down Payment in Thousands" hidefocus="true">
    <div id="slider-thumb2" class="thumb">
    <img src="images/thumb-n.gif" /> </div>
    </div> </td>
    </tr>
    <tr>
    <td width="17%" align="right">Interest Rate: </td>
    <td>
    <div id="slider-ir" tabindex="3" title="Fixed Interest Rate" hidefocus="true">
    <div id="slider-thumb3" class="thumb">
    <img src="images/thumb-n.gif" /> </div>
    </div> </td>
    </tr>
    <tr>
    <td align="right">Term (yrs): </td>
    <td>
    <div id="slider-t" tabindex="4" title="How many years?" hidefocus="true">
    <div id="slider-thumb4" class="thumb">
    <img src="images/thumb-n.gif" /> </div>
    </div> </td>
    </tr>
    <tr>
    <td colspan="2" align="right">&nbsp;</td>
    </tr>
    <tr>
    <td colspan="2" align="center">Approximate Payment: $
    <input name="text" type="text" id="slider-converted-value" size="10" maxlength="4" autocomplete="off" />
    <span id="slider-value">0</span>
    </td>
    </tr>
    <tr>
    <td colspan="2" align="center">&nbsp;</td>
    </tr>
    <tr>

    <td colspan="2"><p>
    <!--We'll use these to trigger interactions with the Slider API -->
    </p>

    <button id="putval">Change slider value to 100 (converted value 150)</button>
    <button id="getval">Write current value to the Logger</button> </td>
    </tr>
    </table>
    Last edited by EricaStar; 02-16-2008 at 08:39 PM.

  • #2
    New Coder
    Join Date
    Nov 2006
    Posts
    47
    Thanks
    2
    Thanked 1 Time in 1 Post
    Would, then, anyone know of some samples for putting multiple YUI sliders on a form?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •