SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2001
    Location
    Pacific NW
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question controlling button formatting with onClick

    I'm working on a navigation bar that uses form buttons (just how it worked out with the content management system). With the onClick event I need to be able to set the button to the "on" css style and at the same time set the other buttons to the "default" css style.

    I think I have at least come up with a structure that might work, except for the else statement... don't know what should be there... which might mean I don't need to use a loop? Anyhow, here's the js:

    Code:
    funtion resetButtons()
      thisClassName="default"
    
    hasForm = false
    for (i=0; i<this.form; i++) {
      if (this.form[i].name.indexOf("formName")>=0) {
      hasForm = true
      }
    }
    
    if (hasForm) {
      resetButtons
    }
    
    else {
      ''
    }
    In case it helps, here's the html, with only 2 buttons just as a sample:

    Code:
    <table>
    <tr>
     <td>
    <form name="psx-catformname">
      <input type="button" class="default" onMouseOut="this.className='mouseout'" onMouseOver="this.className='mouseover'" onClick="resetButtons">
    </form>
     </td>
     <td>
    <form name="psx-catformname">
      <input type="button" class="default" onMouseOut="this.className='mouseout'" onMouseOver="this.className='mouseover'"  onClick="resetButtons">
    </form>
     </td>
    </tr>
    </table>

  2. #2
    Rehab is for quiters! spartan's Avatar
    Join Date
    Apr 2002
    Location
    Cape Town, South Africa
    Posts
    343
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wipped this up quickly... hope it helps.

    Code:
    <HTML>
    <HEAD>
    <TITLE></TITLE>
    <style>
    .default{
     color: red
    }
    .on{
    color: blue
    }
    </style>
    
    <script language=javascript>
    function change(theclass){
       var el=event.srcElement
       var objButtons = document.getElementsByTagName("input")
       for (var i = 0; i < objButtons.length; i++)
         {
          var theButton = objButtons.item(i);
          if (theButton.type=="button"){
             if (theButton.id == el.id){
                 theButton.className = theclass
             }else{
                 theButton.className = "default"
             }		
           }
        }
    }
    </script>
    
    </HEAD>
    <BODY>
    
    <table>
    <tr>
     <td>
          <input type="button" class="default" value="another button" id=button1 name=button1 onmouseover="javascript:change('on')">
     </td>
     <td>
          <input type="button" class="default" value="a button" id=button2 name=button2 onmouseover="javascript:change('on')">
     </td>
     <td>
          <input type="button" class="default" value="another button" id=button3 name=button3 onmouseover="javascript:change('on')">
     </td>
     <td>
          <input type="button" class="default" value="a button" id=button4 name=button4 onmouseover="javascript:change('on')">
     </td>
    </tr>
    </table>
    </BODY>
    </HTML>
    good luck
    Spartan
    ---------------------
    It's like our sergeant told us before one trip into the jungle. Men! Fifty of you are leaving on a mission. Twenty-five of you ain't coming back.
    -Mr.Payne

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2001
    Location
    Pacific NW
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow! That is totally different than what I was thinking. I'll give it a go...


Bookmarks

Posting Permissions

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