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 6 of 6
  1. #1
    New Coder
    Join Date
    Oct 2002
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Using images like radio buttons?

    This may be more of a general programming question than a Javascript question, but I hope it's ok that I post here since Javascript is the language I am having to do this in.

    I have three buttons, each with an "up" and a "down" state. Just like a set of radio buttons, only one can be selected (or in the "down" state) at any time. Clicking an unselected button will reset the previously selected button back to it's "up" state and so-on.

    I know how to pass the appropriate value to the form based on which of the three buttons is down, but I'm having trouble coming up with an elegant way to toggle between the three buttons correctly (I can If-Then-Else it to death, but that just looks shaggy).

    Does anyone have any suggestions for how I could approach this or know of any examples that might offer me insight?

  • #2
    Regular Coder
    Join Date
    Jun 2004
    Location
    underground
    Posts
    186
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is an example w/ buttons.

    Code:
    <html>
    <head>
    <style type="text/css">
    button
     {
       border:2px outset;
     }
    .toolbar
     {
       text-align:center;
       background:buttonface;
       border:2px outset;
       margin:1em;
       padding:1em;
     }
    .up
     {
       border:2px outset;
     }
    .dn
     {
       border:2px inset;
       background:buttonhighlight;
     }
    </style>
    
    <script type="text/javascript">
    var on;
    function setState(el)
     {
       if(el != on)
        {
          if(on)
            on.className = "up";
          el.className = "dn";
          on = el;
        }
     }
    </script>
    
    </head>
    <body>
    <div class="toolbar">
    <button onclick="setState(this)"> - 01 - </button>
    <button onclick="setState(this)"> - 02 - </button>
    <button onclick="setState(this)"> - 03 - </button>
    <button onclick="setState(this)"> - 04 - </button>
    <button onclick="setState(this)"> - 05 - </button>
    <button onclick="setState(this)"> - 06 - </button>
    <button onclick="setState(this)"> - 07 - </button>
    <button onclick="setState(this)"> - 08 - </button>
    <button onclick="setState(this)"> - 09 - </button>
    </div>
    </body>
    </html>
    The same sort of thing would work for images; just change the class information appropriately.

  • #3
    New Coder
    Join Date
    Oct 2002
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    brilliant! Thanks a ton.

  • #4
    New Coder
    Join Date
    Oct 2002
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    the working model

    I have a long ways to go to get this integrated into my app, but I thought you might like to see a working model of the button structure using your code suggestions. I've got to get more attuned to thinking of manipulating styles like this, this is awesome!

    http://www.halibutharpoon.com/dev/alignmentbuttons.html

    You don't see any problems or potential pitfalls there, do you?

  • #5
    Regular Coder
    Join Date
    Jun 2004
    Location
    underground
    Posts
    186
    Thanks
    0
    Thanked 0 Times in 0 Posts

    That looks good to me, Beau.

    The only thing I noticed was a delay in loading the background on the first click.
    To make that down image immediately available, placing something like this at the bottom of the page might work:
    <span class="dn" style="visibility:hidden"></span>

  • #6
    Regular Coder
    Join Date
    Jun 2004
    Location
    underground
    Posts
    186
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hey Beau,

    I put together a script for setting default state images, which incorporates your array idea.
    Check it out here, if you'd like: Discuss: Images as Radio Buttons


  •  

    Posting Permissions

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