www.webdeveloper.com
Results 1 to 3 of 3

Thread: Div-based selection menu help please

  1. #1
    Join Date
    Apr 2009
    Posts
    122

    Div-based selection menu help please

    Hi all, thanks for taking the time to view my posting, i really appreciate it.

    At present, Iím developing a search form, that allows users to search up to 3 places, using a div-based dropdown. The first place to search would be displayed next to the form, and the other 2 hidden. On click of this first search option, a menu with all 3 items would appear, and the user could then choose any of the 3 places to search. The selected search image item would then replace the original search image.

    The reason why i'm not using a select list, is because i am using images instead of text.

    I'm not sure what the best way forward is to accomplish this, and thought i would as the experts' advice if i may. Any code examples, or help would be more than welcome.

    I hope this diagram will be of some help in explaining the task:
    Code:
    http://www.andyram2k.com/jsissue.jpg
    Iím not sure if an image array or an array of divs would be the best method of suppending onclick. Thanks for your time in advance.


    Code:
    <style>
    .dropmenudiv {
     BORDER-RIGHT: #262628 1px solid; BORDER-TOP: #262628 1px solid; Z-INDEX: 100; FONT: 12px Verdana; BORDER-LEFT: #262628 1px solid; WIDTH: 19px; COLOR: #ffffff; BORDER-BOTTOM: #660096 2px solid; POSITION: absolute; TOP: 0px; BACKGROUND-COLOR: #474747; TEXT-ALIGN: left; background-color: #D7D6DC;
    }
    .dropmenudiv IMG {
     border: 0;
    }
    .dropmenudiv A {
     DISPLAY: block; WIDTH: 19px; COLOR: #ffffff; BORDER-BOTTOM: #262628 1px solid; TEXT-DECORATION: none
    }
    * HTML .dropmenudiv A {
     WIDTH: 19px; COLOR: #ffffff; BACKGROUND-REPEAT: no-repeat; TEXT-DECORATION: none
    }
    .dropmenudiv A:hover {
     COLOR: #ffffff; BACKGROUND-REPEAT: no-repeat; BACKGROUND-COLOR: #037c2c; TEXT-DECORATION: none
    }
    </style>
    
    <div class="dropmenudiv">
    <div id="search1"><a href="#" title="Search 1"><img src="image1.gif" alt="Search 1" /></a></div>
    <div id="search2"><a href="#" title="Search 2"><img src="image2.gif" alt="Search 2" /></a></div>
    <div id="search3"><a href="#" title="Search 3"><img src="image3.gif" alt="Search 3" /></a></div>
    </div>

  2. #2
    Join Date
    Apr 2009
    Posts
    96
    try these two examples
    <html>
    <head>
    <script language="javascript">
    function toggle_visibility(id) {
    var s1div = document.getElementById('searchone');
    var s2div = document.getElementById('searchtwo');
    var s3div = document.getElementById('searchthree');
    if(id=='searchone'){
    s1div.style.display = 'block';
    s2div.style.display = 'none';
    s3div.style.display = 'none';
    }else if(id=='searchtwo'){
    s1div.style.display = 'none';
    s2div.style.display = 'block';
    s3div.style.display = 'none';
    }else{
    s1div.style.display = 'none';
    s2div.style.display = 'none';
    s3div.style.display = 'block';
    }
    }
    </script>
    </head>
    <body>
    <table>
    <tr>
    <td>
    <a href="#" onclick="toggle_visibility('searchone');">Search One</a>
    <br>
    <a href="#" onclick="toggle_visibility('searchtwo');">Search two</a>
    <br>
    <a href="#" onclick="toggle_visibility('searchthree');">Search three</a>
    <br>
    </td>
    <td>
    <div id="searchone" style="display: none">
    search one data
    </div>
    <div id="searchtwo" style="display: none">
    search two data
    </div>
    <div id="searchthree" style="display: none">
    search three data
    </div>
    </td>
    </tr>
    </table>
    </body>
    </html>
    these will behave slightly differently i suspect you would want the first one
    <html>
    <head>
    <script language="javascript">
    function toggle_visibility(id) {
    var selecteddiv = document.getElementById(id);
    if(selecteddiv.style.display == 'block')
    selecteddiv.style.display = 'none';
    else
    selecteddiv.style.display = 'block';
    }
    </script>
    </head>
    <body>
    <table>
    <tr>
    <td>
    <a href="#" onclick="toggle_visibility('searchone');">Search One</a>
    <br>
    <a href="#" onclick="toggle_visibility('searchtwo');">Search two</a>
    <br>
    <a href="#" onclick="toggle_visibility('searchthree');">Search three</a>
    <br>
    </td>
    <td>
    <div id="searchone" style="display: none">
    search one data
    </div>
    <div id="searchtwo" style="display: none">
    search two data
    </div>
    <div id="searchthree" style="display: none">
    search three data
    </div>
    </td>
    </tr>
    </table>
    </body>
    </html>
    to insert an iamge obviously just replace the text with an <img> here
    <a href="#" onclick="toggle_visibility('searchone');">Search One</a>

  3. #3
    Join Date
    Apr 2009
    Posts
    122
    Thankyou very much Rufe0, that's a great starting point. Much appreciated!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles