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 8 of 8
  1. #1
    New Coder
    Join Date
    Jan 2003
    Posts
    93
    Thanks
    0
    Thanked 0 Times in 0 Posts

    button stays pressed onclick?

    Hello,

    I would like to know how to modify the following script in order to cause a button to stay depressed, until another is clicked (which will then become depressed).

    This script changes the color of buttons in such a manner, but I haven't yet found a reference for keeping a clicked button down.

    Thanks for any help:
    -----------------------------------------------------------------------------------


    <html>
    <head>
    </head>
    <body>
    <div align="center">
    <center>
    <table border="0" cellpadding="5" cellspacing="0" width="100%">
    <tr>
    <td>
    <input type=text name=tex_t value=Text.>
    <input type=button id=button0 value='button1' onclick="window.location.href='#">&nbsp;
    <input type=button id=button1 value='button2' onclick="window.location.href='#">&nbsp;
    <input type=button id=button2 value='button3' onclick="window.location.href='#">&nbsp;
    <input type=reset id=button3 value='button4' onclick="window.location.href='#">&nbsp;
    </td>
    </tr>
    </table>
    <script language=JavaScript>
    //Insert these lines into any place of page
    //Set parameter "ID" for buttons so that it began with "butt".
    //For example - "button1", "button2", "butt_shan"...
    //You can use all types of buttons - "button", "submit", "reset".
    //It is possible to add to them events. E.g. - onClick.
    //---- Choice of variables ----\\

    m_over_col="#ff9944"
    m_out_col="#5555ee"
    m_down_col="#90dd90"

    m_over_col_tx="#4444ff"
    m_out_col_tx="#ffffff"
    m_down_col_tx="#000000"

    //---------The description---------\\
    /*
    m_over_col - background of buttons at MouseOver
    m_out_col - background of buttons at MouseOut and initial colors
    m_down_col - background of buttons at MouseDown

    m_over_col_tx - Color of text in buttons at MouseOver
    m_out_col_tx - Color of text in buttons at MouseOut and initial colors
    m_down_col_tx - Color of text in buttons at MouseDown
    */
    //----------------------------------\\

    //This and others free scripts you can find on a site: artdhtml.com

    dow_key=''
    window.onload=recolor_butt

    function recolor_butt()
    {
    len_all=document.all.length
    for (i=0; i<len_all; i++)
    {
    id=document.all[i].id
    if (id.indexOf('butt')==0)
    {
    document.all[i].style.background=m_out_col
    document.all[i].style.color=m_out_col_tx
    }
    }
    }

    function document.onmouseover()
    {
    id=window.event.srcElement.id
    if (id.indexOf('butt')==0)
    {
    if(dow_key==id){return}
    document.all[id].style.background=m_over_col
    document.all[id].style.color=m_over_col_tx
    }
    }

    function document.onmouseout()
    {
    id=window.event.srcElement.id
    if (id.indexOf('butt')==0)
    {
    if(dow_key==id){return}
    document.all[id].style.background=m_out_col
    document.all[id].style.color=m_out_col_tx
    }
    }

    function document.onmousedown()
    {
    id=window.event.srcElement.id
    if (id.indexOf('butt')==0)
    {
    if(dow_key!=''){
    document.all[dow_key].style.background=m_out_col
    document.all[dow_key].style.color=m_out_col_tx
    }
    dow_key=id
    document.all[id].style.background=m_down_col
    document.all[id].style.color=m_down_col_tx
    }
    }
    </script>
    </body>
    </html>

    ------------------------------------------------------------------------------------
    Last edited by F.N.G.; 01-11-2003 at 12:46 AM.

  • #2
    Regular Coder
    Join Date
    Sep 2002
    Location
    Louisiana
    Posts
    576
    Thanks
    0
    Thanked 0 Times in 0 Posts
    there is no way that i know of to keep a button depressed, unless
    Code:
    setTimeOut("document.formname.buttonname.click()",1);

  • #3
    New Coder
    Join Date
    Jan 2003
    Posts
    93
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If I could somehow implement [ style="border:2px inset;" ] into the onmousedown function/variable, it would cause the button to appear pressed.

    I just don't know how or where, exactly, to fit it in...

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    There is no way to keep a button depress ........... unless ............
    You create your own.

    I have adapted one of my scripts.

    See what you think






    <HTML>
    <HEAD>
    <TITLE>Document Title</TITLE>
    <script language="JavaScript">
    <!--
    LastID = ""
    function on(id,clas){
    (LastID != id?document.getElementById(id).className = clas:"")
    }

    function off(id,clas){
    (LastID != id?document.getElementById(id).className = clas:"")
    }

    function active(id,clas){
    document.getElementById(id).className = clas; // onclick
    if (LastID != id){
    (LastID != ""?document.getElementById(LastID).className = "butta":"")
    }
    LastID = id
    }
    // -->
    </script>
    <style>
    .butta{width:100; height:20;text-align:center;font-size:10;color:#ffffff;vertical-align:center;border-top:2px solid #eeeeee; border-left:2px solid #bbbbbb; border-right:2px solid #dddddd; border-bottom:2px solid #cccccc; background:#b0bbce}
    .buttovera{width:100; height:20;text-align:center;font-size:10;vertical-align:center;color:#93a2bb;border-top:2px solid #93a2bb; border-left:2px solid #93a2bb; border-right:2px solid #93a2bb; border-bottom:2px solid #93a2bb; background:#b0bbce}
    .buttdowna{width:100; height:20;text-align:center;font-size:9;vertical-align:center;color:#b0bbce;border-top:2px solid #dce1e9; border-left:2px solid #dce1e9; border-right:2px solid #dce1e9; border-bottom:2px solid #dce1e9; background:#718099}
    </style>


    </HEAD><BODY>

    <div style="position:absolute; top:100; left:20;cursor:hand">
    <div id="button1" class="butta" onmouseover="on('button1','buttovera')" onMouseOut="off('button1','butta')" onmousedown="active('button1','buttdowna')">BUTTON 1</div>

    <div id="button2" class="butta" onmouseover="on('button2','buttovera')" onMouseOut="off('button2','butta')" onmousedown="active('button2','buttdowna')">BUTTON 2</div>

    <div id="button3" class="butta" onmouseover="on('button3','buttovera')" onMouseOut="off('button3','butta')" onmousedown="active('button3','buttdowna')">BUTTON 3</div>

    <div id="button4" class="butta" onmouseover="on('button4','buttovera')" onMouseOut="off('button4','butta')" onmousedown="active('button4','buttdowna')">BUTTON 4</div>
    </div>
    </BODY></HTML>


  • #5
    New Coder
    Join Date
    Jan 2003
    Posts
    93
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That looks good.

    Along those lines, I don't see why a regular button couldn't have its border attributes alternated, along with the background color, in the script I referred to.

    For example, these buttons appear either up or down:

    -------------------------------------------------------------------------
    <html>
    <body bgcolor="#31465c">

    <input type="button" style="border:3px inset #496383; width:55px;height:55px;background-color:#31465c;color:#B5DAF0" value="01" name="bt1">

    <input type="button" style="border:3px ridge #496383; width:55px;height:55px;background-color:#31465c;color:#B5DAF0" value="02" name="bt2">

    </body>
    </html>
    ----------------------------------------------------------------------------

    Therefore, if the following style could be applied to the onmouseover & onmouseout sections of that script: "border:3px ridge"


    ... and this style applied onmousedown: "border:3px inset"


    the button should appear to be clicked on and off.


    I don't know how to put these styles in with the javascript, however.

  • #6
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Hows this?



    <HTML>
    <HEAD>
    <TITLE>Document Title</TITLE>
    <script language="JavaScript">
    <!--
    LastID = ""
    function on(id,clas){
    (LastID != id?document.getElementById(id).className = clas:"")
    }

    function off(id,clas){
    (LastID != id?document.getElementById(id).className = clas:"")
    }

    function active(id,clas){
    document.getElementById(id).className = clas; // onclick
    if (LastID != id){
    (LastID != ""?document.getElementById(LastID).className = "butta":"")
    }
    LastID = id
    }
    // -->
    </script>
    <style>
    .butta{width:100; height:20;text-align:center;font-size:10;color:#ffffff;vertical-align:center;border-top:2px outset #eeeeee; border-left:2px outset #bbbbbb; border-right:2px outset #dddddd; border-bottom:2px outset #cccccc; background:#b0bbce}
    .buttovera{width:100; height:20;text-align:center;font-size:10;vertical-align:center;color:#93a2bb;border-top:2px solid #93a2bb; border-left:2px solid #93a2bb; border-right:2px solid #93a2bb; border-bottom:2px solid #93a2bb; background:#b0bbce}
    .buttdowna{width:100; height:20;text-align:center;font-size:9;vertical-align:center;color:#b0bbce;border-top:2px inset #dce1e9; border-left:2px inset #dce1e9; border-right:2px inset #dce1e9; border-bottom:2px inset #dce1e9; background:#718099}
    </style>


    </HEAD><BODY>

    <form>
    <input type="button" value="button 1" id="button1" class="butta" onmouseover="on('button1','buttovera')" onMouseOut="off('button1','butta')" onmousedown="active('button1','buttdowna')" onclick="this.blur()">

    <input type="button" value="button 4" id="button2" class="butta" onmouseover="on('button2','buttovera')" onMouseOut="off('button2','butta')" onmousedown="active('button2','buttdowna')" onclick="this.blur()">

    <input type="button" value="button 4" id="button3" class="butta" onmouseover="on('button3','buttovera')" onMouseOut="off('button3','butta')" onmousedown="active('button3','buttdowna')" onclick="this.blur()">

    <input type="button" value="button 4" id="button4" class="butta" onmouseover="on('button4','buttovera')" onMouseOut="off('button4','butta')" onmousedown="active('button4','buttdowna')" onclick="this.blur()">
    </form>
    </BODY></HTML>





  • #7
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Or this maybe?


    <HTML>
    <HEAD>
    <TITLE>Document Title</TITLE>
    <script language="JavaScript">
    <!--
    LastID = ""
    function on(id,clas){
    (LastID != id?document.getElementById(id).className = clas:"")
    }

    function off(id,clas){
    (LastID != id?document.getElementById(id).className = clas:"")
    }

    function active(id,clas){
    document.getElementById(id).className = clas; // onclick
    if (LastID != id){
    (LastID != ""?document.getElementById(LastID).className = "butta":"")
    }
    LastID = id
    }
    // -->
    </script>
    <style>
    .butta{width:70;text-align:center;font-size:14;color:#000000;vertical-align:center;border-top:2px outset #eeeeee; border-left:2px outset #bbbbbb; border-right:2px outset #dddddd; border-bottom:2px outset #cccccc; background:#b0bbce}
    .buttovera{width:70; text-align:center;font-size:14;vertical-align:center;color:#93a2bb;border-top:2px solid #93a2bb; border-left:2px solid #93a2bb; border-right:2px solid #93a2bb; border-bottom:2px solid #93a2bb;background:#b0bbce}
    .buttdowna{width:70; text-align:center;font-size:12;vertical-align:center;color:#000000;border-top:2px inset #dce1e9; border-left:2px inset #dce1e9; border-right:2px inset #dce1e9; border-bottom:2px inset #dce1e9; background:#718099}
    </style>


    </HEAD><BODY>

    <form>
    <input type="button" value="button 1" id="button1" class="butta" onmouseover="on('button1','butta')" onMouseup="off('button1','buttovera')" onmousedown="active('button1','buttdowna')" onclick="this.blur()">

    <input type="button" value="button 4" id="button2" class="butta" onmouseover="on('button2','butta')" onMouseOut="off('button2','butta')" onmousedown="active('button2','buttdowna')" onclick="this.blur()">

    <input type="button" value="button 4" id="button3" class="butta" onmouseover="on('button3','butta')" onMouseOut="off('button3','butta')" onmousedown="active('button3','buttdowna')" onclick="this.blur()">

    <input type="button" value="button 4" id="button4" class="butta" onmouseover="on('button4','butta')" onMouseOut="off('button4','butta')" onmousedown="active('button4','buttdowna')" onclick="this.blur()">
    </form>
    </BODY></HTML>


  • #8
    New Coder
    Join Date
    Jan 2003
    Posts
    93
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Those are both outstanding.

    T H A N K S !


  •  

    Posting Permissions

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