Slider control with button action

Discussion in 'Javascript' started by arumuthu@gmail.com, Jan 16, 2009.

  1. Guest

    Hi to all,

    i am able to run slider control in Internet Browser(IE),but i
    couldn't run in Firebox,Please anyone Help me.....I attached
    code...... for your reference...

    /***slider.js****?

    function slider (a_init, a_tpl) {

    this.f_setValue = f_sliderSetValue;
    this.f_getPos = f_sliderGetPos;

    // register in the global collection
    if (!window.A_SLIDERS)
    window.A_SLIDERS = [];
    this.n_id = window.A_SLIDERS.length;
    window.A_SLIDERS[this.n_id] = this;

    // save config parameters in the slider object
    var s_key;
    if (a_tpl)
    for (s_key in a_tpl)
    this[s_key] = a_tpl[s_key];
    for (s_key in a_init)
    this[s_key] = a_init[s_key];

    this.n_pix2value = this.n_pathLength / (this.n_maxValue -
    this.n_minValue);
    if (this.n_value == null)
    this.n_value = this.n_minValue;

    // generate the control's HTML
    document.write(
    '<div style="width:' + this.n_controlWidth + 'px;height:' +
    this.n_controlHeight + 'px;border:0; background-image:url(' +
    this.s_imgControl + ')" id="sl' + this.n_id + 'base">' +
    '<img src="' + this.s_imgSlider + '" width="' + this.n_sliderWidth +
    '" height="' + this.n_sliderHeight + '" border="0"
    style="position:relative;left:' + this.n_pathLeft + 'px;top:' +
    this.n_pathTop + 'px;z-index:' + this.n_zIndex +
    ';cursor:pointer;visibility:hidden;" name="sl' + this.n_id + 'slider"
    id="sl' + this.n_id + 'slider" onmousedown="return f_sliderMouseDown('
    + this.n_id + ')"/></div>'
    );
    this.e_base = get_element('sl' + this.n_id + 'base');
    this.e_slider = get_element('sl' + this.n_id + 'slider');

    // safely hook document/window events
    if (!window.f_savedMouseMove && document.onmousemove !=
    f_sliderMouseMove) {
    window.f_savedMouseMove = document.onmousemove;
    document.onmousemove = f_sliderMouseMove;
    }
    if (!window.f_savedMouseUp && document.onmouseup != f_sliderMouseUp)
    {
    window.f_savedMouseUp = document.onmouseup;
    document.onmouseup = f_sliderMouseUp;
    }
    // preset to the value in the input box if available
    var e_input = this.s_form == null
    ? get_element(this.s_name)
    : document.forms[this.s_form]
    ? document.forms[this.s_form].elements[this.s_name]
    : null;
    this.f_setValue(e_input && e_input.value != '' ? e_input.value :
    null, 1);
    this.e_slider.style.visibility = 'visible';
    }

    function f_sliderSetValue (n_value, b_noInputCheck) {
    if (n_value == null)
    n_value = this.n_value == null ? this.n_minValue : this.n_value;
    if (isNaN(n_value))
    return false;
    // round to closest multiple if step is specified
    if (this.n_step)
    n_value = Math.round((n_value - this.n_minValue) / this.n_step) *
    this.n_step + this.n_minValue;
    // smooth out the result
    if (n_value % 1)
    n_value = Math.round(n_value * 1e5) / 1e5;

    if (n_value < this.n_minValue)
    n_value = this.n_minValue;
    if (n_value > this.n_maxValue)
    n_value = this.n_maxValue;

    this.n_value = n_value;

    // move the slider
    if (this.b_vertical)
    this.e_slider.style.top = (this.n_pathTop + this.n_pathLength -
    Math.round((n_value - this.n_minValue) * this.n_pix2value)) + 'px';
    else
    this.e_slider.style.left = (this.n_pathLeft + Math.round((n_value -
    this.n_minValue) * this.n_pix2value)) + 'px';

    // save new value
    var e_input;
    if (this.s_form == null) {
    e_input = get_element(this.s_name);
    if (!e_input)
    return b_noInputCheck ? null : f_sliderError(this.n_id, "Can not
    find the input with ID='" + this.s_name + "'.");
    }
    else {
    var e_form = document.forms[this.s_form];
    if (!e_form)
    return b_noInputCheck ? null : f_sliderError(this.n_id, "Can not
    find the form with NAME='" + this.s_form + "'.");
    e_input = e_form.elements[this.s_name];
    if (!e_input)
    return b_noInputCheck ? null : f_sliderError(this.n_id, "Can not
    find the input with NAME='" + this.s_name + "'.");
    }
    e_input.value = n_value;
    }

    // get absolute position of the element in the document
    function f_sliderGetPos (b_vertical, b_base) {
    var n_pos = 0,
    s_coord = (b_vertical ? 'Top' : 'Left');
    var o_elem = o_elem2 = b_base ? this.e_base : this.e_slider;

    while (o_elem) {
    n_pos += o_elem["offset" + s_coord];
    o_elem = o_elem.offsetParent;
    }
    o_elem = o_elem2;

    var n_offset;
    while (o_elem.tagName != "BODY") {
    n_offset = o_elem["scroll" + s_coord];
    if (n_offset)
    n_pos -= o_elem["scroll" + s_coord];
    o_elem = o_elem.parentNode;
    }
    return n_pos;
    }

    function f_sliderMouseDown (n_id) {
    window.n_activeSliderId = n_id;
    return false;
    }

    function f_sliderMouseUp (e_event, b_watching) {
    if (window.n_activeSliderId != null) {
    var o_slider = window.A_SLIDERS[window.n_activeSliderId];
    o_slider.f_setValue(o_slider.n_minValue + (o_slider.b_vertical
    ? (o_slider.n_pathLength - parseInt(o_slider.e_slider.style.top) +
    o_slider.n_pathTop)
    : (parseInt(o_slider.e_slider.style.left) - o_slider.n_pathLeft)) /
    o_slider.n_pix2value);
    if (b_watching) return;
    window.n_activeSliderId = null;
    }
    if (window.f_savedMouseUp)
    return window.f_savedMouseUp(e_event);
    }

    function f_sliderMouseMove (e_event) {

    if (!e_event && window.event) e_event = window.event;

    // save mouse coordinates
    if (e_event) {
    window.n_mouseX = e_event.clientX + f_scrollLeft();
    window.n_mouseY = e_event.clientY + f_scrollTop();
    }

    // check if in drag mode
    if (window.n_activeSliderId != null) {
    var o_slider = window.A_SLIDERS[window.n_activeSliderId];

    var n_pxOffset;
    if (o_slider.b_vertical) {
    var n_sliderTop = window.n_mouseY - o_slider.n_sliderHeight / 2 -
    o_slider.f_getPos(1, 1) - 3;
    // limit the slider movement
    if (n_sliderTop < o_slider.n_pathTop)
    n_sliderTop = o_slider.n_pathTop;
    var n_pxMax = o_slider.n_pathTop + o_slider.n_pathLength;
    if (n_sliderTop > n_pxMax)
    n_sliderTop = n_pxMax;
    o_slider.e_slider.style.top = n_sliderTop + 'px';
    n_pxOffset = o_slider.n_pathLength - n_sliderTop +
    o_slider.n_pathTop;
    }
    else {
    var n_sliderLeft = window.n_mouseX - o_slider.n_sliderWidth / 2 -
    o_slider.f_getPos(0, 1) - 3;
    // limit the slider movement
    if (n_sliderLeft < o_slider.n_pathLeft)
    n_sliderLeft = o_slider.n_pathLeft;
    var n_pxMax = o_slider.n_pathLeft + o_slider.n_pathLength;
    if (n_sliderLeft > n_pxMax)
    n_sliderLeft = n_pxMax;
    o_slider.e_slider.style.left = n_sliderLeft + 'px';
    n_pxOffset = n_sliderLeft - o_slider.n_pathLeft;
    }
    if (o_slider.b_watch)
    f_sliderMouseUp(e_event, 1);

    return false;
    }

    if (window.f_savedMouseMove)
    return window.f_savedMouseMove(e_event);
    }

    // get the scroller positions of the page
    function f_scrollLeft() {
    return f_filterResults (
    window.pageXOffset ? window.pageXOffset : 0,
    document.documentElement ? document.documentElement.scrollLeft : 0,
    document.body ? document.body.scrollLeft : 0
    );
    }
    function f_scrollTop() {
    return f_filterResults (
    window.pageYOffset ? window.pageYOffset : 0,
    document.documentElement ? document.documentElement.scrollTop : 0,
    document.body ? document.body.scrollTop : 0
    );
    }
    function f_filterResults(n_win, n_docel, n_body) {
    var n_result = n_win ? n_win : 0;
    if (n_docel && (!n_result || (n_result > n_docel)))
    n_result = n_docel;
    return n_body && (!n_result || (n_result > n_body)) ? n_body :
    n_result;
    }

    function f_sliderError (n_id, s_message) {
    alert("Slider #" + n_id + " Error:\n" + s_message);
    window.n_activeSliderId = null;
    }

    get_element = document.all ?
    function (s_id) { return document.all[s_id] } :
    function (s_id) { return document.getElementById(s_id) };
    **************************************************************************************************
    <body>
    <input name="sliderValue" id="sliderValue1h" type="hidden" size="3"
    onChange="A_SLIDERS[0].f_setValue(this.value)">
    <script language="JavaScript">
    var A_TPL1h = {
    'b_vertical' : false,
    'b_watch': true,
    'n_controlWidth': 65,
    'n_controlHeight': 0,
    'n_sliderWidth': 18,
    'n_sliderHeight': 14,
    'n_pathLeft' : 1,
    'n_pathTop' : 1,
    'n_pathLength' : 46,
    's_imgControl': 'images/slider_spmic_bg.jpg',
    's_imgSlider': 'images/slider_spmic_but.jpg',
    'n_zIndex': 1
    }

    var A_INIT1h = {
    's_form' : 0,
    's_name': 'sliderValue1h',
    'n_minValue' : 0,
    'n_maxValue' : 100,
    'n_value' : 20,
    'n_step' : 1
    }
    new slider(A_INIT1h, A_TPL1h);
    </script>
    </body>



    Regards
    Muthukkumaran
     
    , Jan 16, 2009
    #1
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Alvin Bruney [MVP]

    Re: Slider control

    Alvin Bruney [MVP], Feb 26, 2004, in forum: ASP .Net
    Replies:
    11
    Views:
    788
    Alvin Bruney [MVP]
    Mar 1, 2004
  2. =?Utf-8?B?QUNhdW50ZXI=?=

    Slider / Trackbar Control

    =?Utf-8?B?QUNhdW50ZXI=?=, Mar 2, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    5,773
    Robbe Morris [C# MVP]
    Mar 3, 2005
  3. bill

    slider control

    bill, Jul 18, 2006, in forum: ASP .Net
    Replies:
    4
    Views:
    602
    Kevin Spencer
    Jul 19, 2006
  4. GUI slider control

    , Apr 28, 2006, in forum: Python
    Replies:
    1
    Views:
    1,779
    James Stroud
    Apr 29, 2006
  5. Aahz
    Replies:
    0
    Views:
    693
Loading...

Share This Page