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 10 of 10
  1. #1
    mst
    mst is offline
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts

    menu image-swap triggered by onclick

    Hello, I'm having a lot of trouble with a requirement. I'm trying to build a menu, similar to the fairly standard kind where the images are swapped on mouseover. (example)
    Mine would just be toggling visibility of a text area on the same page, something like this:

    There will be a collection of buttons
    1. When you click one - you'll see its ON state and some text will show in a different area of the page
    2. When you click a different one, the previously ON button will show it's OFF state, its corresponding text is hidden, and the new button will show it's ON state and related text.


    When I'm googling to find something like this I only find rollover menus. So my question is 1) has anyone seen something similar that I could modify?
    or 2) can you help me with how to approach this... should i loop through the buttons and then change them to their alternate state based on ID?

    I think I'm making this harder for myself than it actually is. Would someone help me to work out the logic of how to implement this? Thanks in advance.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    Yes, you are surely making it harder than it is.
    Code:
    <html><head>
    <script>
    function choose(which)
    {
        for ( var i = 1; i <= 4; ++i )
        {
            var button = document.getElementById("RB"+i);
            var text = document.getElementById("TEXT"+i);
            button.className = (button == which) ? "RBON" : "RB";
            text.style.display = (button == which) ? "block" : "none";
        }
    }
    </script>
    <style>
    div.TEXT { border: solid blue 1px; background-color: lightblue; display: none; width: 450px; }
    input.RB { border: solid red 1px; background-color: pink; color: red; width: 100px; }
    input.RBON { border: solid blue 1px; background-color: lightblue; color: blue; width: 100px; }
    </style>
    </head>
    <body>
    <form>
    <input class="RB" type=button id="RB1" value="First" onclick="choose(this);">
    <input class="RB" type=button id="RB2" value="Second" onclick="choose(this);">
    <input class="RB" type=button id="RB3" value="Third" onclick="choose(this);">
    <input class="RB" type=button id="RB4" value="Fourth" onclick="choose(this);">
    <br/><br/>
    <div id="TEXT1" class="TEXT">Once upon a midnight dreary</div>
    <div id="TEXT2" class="TEXT">While I pondered, weak and weary</div>
    <div id="TEXT3" class="TEXT">O'er many a tome</div>
    <div id="TEXT4" class="TEXT">Of long forgotten lore...</div>
    </form>
    </body>
    </html>
    I just used buttons with text and color, so that I didn't have to upload images here, but I'm sure you can see that you could use, for example, image buttons in place of those.

  • The Following 2 Users Say Thank You to Old Pedant For This Useful Post:

    jmrker (06-17-2009), mst (06-29-2009)

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,146
    Thanks
    39
    Thanked 505 Times in 499 Posts

    Lightbulb Thanks 'Old Pedant'

    Old_Pedant

    Looking at your posted code gave me the idea for the creation of a SUPER EASY tab display!

    Code:
    <html>
    <head>
    <title>Tab Display</title>
    <script type="text/javascript">
    function choose(which) {
      var maxTabs = 4;
      for ( var i = 1; i <= maxTabs; ++i ) {
        var button = document.getElementById("RB"+i);
        var text = document.getElementById("TEXT"+i);
        button.className = (button == which) ? "RBON" : "RB";
        text.style.display = (button == which) ? "block" : "none";
      }
    }
    </script>
    
    <style>
    div.TEXT { border: solid blue 1px;
    		   background-color: lightblue; 
    		   display: none;
    		   width: 450px; 
    		   height: 200px;
    		   overflow:auto;
    }
    div.TEXT ul { font-weight:bold;
     		      margin-left:-35px;
    }
    div.TEXT li {
    	       font-weight:normal;
    		   list-style: none;
    		   margin-left:16px;
    }
    
    input.RB { border: solid black 1px; 
    		   background-color: white; 
    		   color: black; 
    		   width: 70px;
    }
    input.RBON { border: solid blue 1px;
    			 background-color: lightblue; 
    			 color: blue; 
    			 width: 70px;
    }
    </style>
    
    </head>
    <!-- body -->
    <!-- use following to initialize display as full display -->
    <body onload="choose(document.getElementById('RB1'))">
    <form>
    <div id="tabContainer" style="position:relative; top:100px; left:200px">
     <input class="RB" type=button id="RB1" value="First" onclick="choose(this);">
     <input class="RB" type=button id="RB2" value="Second" onclick="choose(this);">
     <input class="RB" type=button id="RB3" value="Third" onclick="choose(this);">
     <input class="RB" type=button id="RB4" value="Fourth" onclick="choose(this);">
     <br/>
     <div id="TEXT1" class="TEXT">
      <ul>Tab Info 1A   <li>1a-1</li>   <li>1a-2</li>  </ul>
      <ul>Tab Info 1B   <li>1b-1</li>   <li>1b-2</li>  </ul>
      <ul>Tab Info 1C   <li>1c-1</li>   <li>1c-2</li>  </ul>
      <ul>Tab Info 1D   <li>1d-1</li>   <li>1d-2</li>  </ul>
      <ul>Tab Info 1E   <li>1e-1</li>   <li>1e-2</li>  </ul>
     </div>
     <div id="TEXT2" class="TEXT">
      <ul>Tab Info 2a   <li>2a-1</li>   <li>2a-2</li>  </ul>
      <ul>Tab Info 2b   <li>2b-1</li>   <li>2b-2</li>  </ul>
     </div>
     <div id="TEXT3" class="TEXT">
      <ul>Tab Info 3   <li>3-1</li>   <li>3-2</li>  </ul>
     </div>
     <div id="TEXT4" class="TEXT">
      <ul>Tab Info 4   <li>4-1</li>   <li>4-2</li>  </ul>
     </div>
    </div>
    </form>
    </body>
    </html>
    And with a little more modification, a horizontal menu display.
    Code:
    <html>
    <head>
    <title>Tab Horiz. Menu</title>
    <script type="text/javascript">
    function choose(which) {
      var maxTabs = 4;
      for ( var i = 1; i <= maxTabs; ++i ) {
        var button = document.getElementById("RB"+i);
        var text = document.getElementById("TEXT"+i);
        button.className = (button == which) ? "RBON" : "RB";
        text.style.display = (button == which) ? "block" : "none";
      }
    }
    </script>
    
    <style>
    div.TEXT { border: solid blue 1px;
    		   background-color: lightblue; 
    		   display: none;
    		   width:800px;
    }
    #tabContainer span {
    		   border-right: solid blue 1px;
    		   padding-left:10px;
    		   padding-right:10px;
    		   width:70px;
    		   text-align:center
    }
    input.RB { border: solid black 1px; 
    		   background-color: white; 
    		   color: black; 
    		   width: 70px;
    }
    input.RBON { border: solid blue 1px;
    			 background-color: lightblue; 
    			 color: blue; 
    			 width: 70px;
    }
    </style>
    
    </head>
    <!-- body -->
    <!-- use following to initialize display as full display -->
    <body onload="choose(document.getElementById('RB1'))">
    <form>
    <div id="tabContainer" style="position:relative; top:20px; left:20px">
    <input class="RB" type=button id="RB1" value="First" onclick="choose(this);">
    <input class="RB" type=button id="RB2" value="Second" onclick="choose(this);">
    <input class="RB" type=button id="RB3" value="Third" onclick="choose(this);">
    <input class="RB" type=button id="RB4" value="Fourth" onclick="choose(this);">
    <br/>
    <div id="TEXT1" class="TEXT">
    <span onclick="alert('1')">Menu Info 1</span>   
    <span onclick="alert('1.1')">1-1</span>   
    <span onclick="alert('1.2')">1-2</span>
    </div>
    <div id="TEXT2" class="TEXT">
    <span onclick="alert('2')">Menu Info 2</span>   
    <span onclick="alert('2.1')">2-1</span>   
    <span onclick="alert('2.2')">2-2</span>
    </div>
    <div id="TEXT3" class="TEXT">
    <span onclick="alert('3')">Menu Info 3</span>   
    <span onclick="alert('3.1')">3-1</span>   
    <span onclick="alert('3.2')">3-2</span>
    </div>
    <div id="TEXT4" class="TEXT">
    <span onclick="alert('4')">Menu Info 4</span>   
    <span onclick="alert('4.1')">4-1</span>   
    <span onclick="alert('4.2')">4-2</span>
    </div>
    </div>
    </form>
    </body>
    </html>
    Two pretty neat applications for the price of one (free).
    Might even become better looking with some who understands CSS better than me.

    Thank you!

  • The Following 2 Users Say Thank You to jmrker For This Useful Post:

    mst (06-29-2009), Old Pedant (06-17-2009)

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    Hey, I like the horizontal menu adaptation! Hadn't thought of the twist.

    I was doing something similar for a simple tab system but didn't tumble to the menu.

    Thanks right back!

  • #5
    mst
    mst is offline
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts
    wow, thanks so much to both of you!

    two more questions if I may:

    (button == which) ? "RBON" : "RB";
    I see how this works but I can't say I understand the syntax... what subject-header would I look under to find more info in a tutorial/reference?

    second Q is since I'm new to this forum -- I want to "thank" you both - will the forum let me do that or only one?

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,146
    Thanks
    39
    Thanked 505 Times in 499 Posts

    Lightbulb

    Questions:

    1. I believe the statement is called a 'ternary' syntax and can usually be found in the logic or 'if' statement descriptions
    Here's one description: http://www.hscripts.com/tutorials/ja...pt/ternary.php
    but a 'google' search will display several others.

    2. Yes, I think you can thank more than one. But if not, most of the work was done by 'Old Pedant' as I just stole his idea for another use and did not add much to your problem.

    Good Luck!

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    The syntax
    Code:
    button.className = (button == which) ? "RBON" : "RB";
    is using the "ternary operator". If you get any decent JS reference and look in "operators" you'll find it there.

    That operator has been around a long time. I think it existed in "B" (the predecessor to "C") back in the early 1970's. It's available in most languages that are based on C syntax: PHP, Java, C++, C#, Perl (I think...not a Perl person), and JavaScript.

    It's simple:
    Code:
          variable = condition ? value1 : value2
    is evaluated the same as if you had coded:
    Code:
          if ( condition ) 
              variable = value1;
          else
              variable = value2;
    But it has the advantage that it can be used any place any other expression element can be used, not just in assignments. So, for example, you could convert code such as:
    Code:
        if ( a == 1 ) 
             callSomething("testing");
        else
             callSomething("never mind");
    into simply
    Code:
        callSomething( a == 1 ? "testing" : "never mind" );
    And, of course, it can be used multiple times in the same expression and even be nested:
    Code:
        var foo = a < 20 ? "small" : a > 40 ? a > 60 : "extra large" : "large" : "medium";
    though that's so ugly I would at least rewrite it as
        var foo = a < 20 ? "small" : ( a > 40 ? ( a > 60 : "extra large" : "large" ) : "medium" );
    Okay?

    Re the "thanking" rules: No idea. Doesn't matter. I'm not sure what "thanks" points buy us, in any case. So far, nobody a codingforums has offered me any gold watches. <grin/>

  • Users who have thanked Old Pedant for this post:

    mst (06-29-2009)

  • #8
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,146
    Thanks
    39
    Thanked 505 Times in 499 Posts

    Thumbs up

    For 'Old Pedant':
    Code:
    That operator has been around a long time. 
    I think it existed in "B" (the predecessor to "C") back in the early 1970's. 
    It's available in most languages that are based on C syntax: PHP, Java, C++, C#, 
    Perl (I think...not a Perl person), 
    and JavaScript.
    Perl does ternary.
    See: http://www.uic.edu/depts/accc/semina...pressions.html

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    Figured Perl used it, since it uses so much other similar syntax. I "read" Perl, just don't write it. <grin/>

    Thanks.

  • #10
    mst
    mst is offline
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you both so much!


  •  

    Posting Permissions

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