how to move slider bar ??

shahparth

Dear All,


I have one slider bar its code is mentioned below:

<div id="slider-bg" class="yui-h-slider" tabindex="2" title="Slider" style="margin-left: 60px; cursor: pointer; height: 27px; width: 218px;">
            <div id="slider_left" style="background-image: url(http://10.20.20.79/tweb/theme/default/img/allimg.png); background-attachment: scroll; background-origin: initial; background-clip: initial; background-color: transparent; left: 5px; position: absolute; height: 28px; z-index: 1; width: 48px; background-position: -305px -293px; background-repeat: no-repeat no-repeat; "></div>
            <div id="slider-thumb" class="yui-slider-thumb" style="background-image: url(http://10.20.20.79/tweb/theme/default/img/allimg.png); background-attachment: scroll; background-origin: initial; background-clip: initial; background-color: transparent; z-index: 2; height: 25px; width: 25px; left: 40px; top: 5px; background-position: -559px -331px; background-repeat: no-repeat no-repeat; "></div>
            </div>

this slider bar moves from left to right and right to left.


when this slider bar moves, only below mentioned parameter is changed.

div ---> slider_left ----> its width changes from 48px, 88px, 128px, 166px.
div ---> slider-thumb ----> its left parameter changes from 40px, 80px, 120px, 160px.

can somebody tell me how to set this div value ???


when I record and play back in sahi, it is only showing click(_div(slider_left));
something like that.

but what if i want to go to right to left and again left to right..?

can some body tell me how to set this value so,the slider bar can move ???

jmt4b04d4v

You require to write custom functions in order to access (read/write) the DOM (see "Sahi Scripting Basics - Part 2" for more information).

The following piece of code is an example of how that can be accomplished, unfortunately, the sample YUI2 page uses a "Self-Executing Anonymous Function" to instantiate the YUI2 slider, and the original slider reference cannot be accessed from the sample custom functions. This has the drawback that event handlers get disconnected by creating another instance, and I manually update the "slider-value" in order to illustrate this.

Having a global reference to the slider could help, but that might not be always the case.

Replace ';' by ':', '_' by '.' and '\' by '/' at _navigateTo() (the YUI sample page, forum limitations on me) to have the example work.

<browser>
// Got reference? flag
var sliderReferenceObtained = false;
// Another global reference for Sahi handling
var sliderInstance;

/**
 * function getYUI2SliderInstance()
 * Sahi Custom Function
 * 
 * Fake singleton function that creates "another YUI 2 Slider instance" (the
 * first one has already been created on the original code) used for the
 * automated control with Sahi. A single instance reference is required in order
 * to control the same YUI component and keep state (current offset).
 * 
 * _returns YAHOO.widget.Slider instance
 */
function getYUI2SliderInstance() {
    if (!sliderReferenceObtained) {
        var bg = "slider-bg";
        var thumb = "slider-thumb";
        var topConstraint = 0;
        var bottomConstraint = 200
        // FIXME: By creating a new instance we will also lose event handlers
        sliderInstance = YAHOO.widget.Slider.getHorizSlider(bg,thumb,topConstraint, bottomConstraint, 20);
        // FIXME: Having a global reference to the actual slider to control will avoid this
        //sliderInstance = sliderGlobalReference; // required for not loosing the event already defined
        sliderReferenceObtained = true;
    }
    return sliderInstance; 
}

/**
 * function setYUI2SliderValue(sliderValue)
 * Sahi Custom Function
 * 
 * Setter for the Slider value.
 * _param {Number} sliderValue The new value to set.
 * _returns
 */
function setYUI2SliderValue(sliderValue) {
    var sliderObj = getYUI2SliderInstance();
    sliderObj.setValue(sliderValue, false, false, false);
    // FIXME: Manually updating the DOM in case event handlers have been lost by creating a new Slider instance
    var sliderValueSpan = document.getElementById("slider-value");
    sliderValueSpan.innerHTML = sliderValue;
    // Hack: Give a return value of "true" so invoking by a Sahi Browser Action API can be verified using _assertTrue()
    return true;
};

</browser>

_navigateTo("http;\\developer_yahoo_com\yui\examples\slider\slider-ticks.html");
_wait(1000);
_assertTrue(setYUI2SliderValue(40));
_wait(1000);
_assertTrue(setYUI2SliderValue(60));
_wait(1000);
_assertTrue(setYUI2SliderValue(20));
_wait(1000);
_assertTrue(setYUI2SliderValue(140));
_wait(1000);
_assertTrue(setYUI2SliderValue(0));
_wait(1000);
_assertTrue(setYUI2SliderValue(180));
_wait(1000);
_assertTrue(setYUI2SliderValue(100));
_wait(1000);

Regards,
Marvin