SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    Level 8 Chinese guy Archbob's Avatar
    Join Date
    Sep 2001
    Location
    Somewhere in this vast universe
    Posts
    3,741
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do you do that Mac Columns thing with javascript?

    So I have 3 boxes. At first the first box has a bunch of categories. When you highlight one of the categories, the second box appears with the sub-categories of the selecte categories. When you highlight a choice in the second box, the third box shows the categories that are under that highlighted category in the second box. Is there a good tutorial that shows how to do this?

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Like this?

  3. #3
    Level 8 Chinese guy Archbob's Avatar
    Join Date
    Sep 2001
    Location
    Somewhere in this vast universe
    Posts
    3,741
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, sort of like that, but I want multi-select boxes but you can only select one option.

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I don't understand... what's the point of multi-select boxes if you can only select one option? If you only want the user to select one option, the non-multi select box is the way forward.

  5. #5
    Level 8 Chinese guy Archbob's Avatar
    Join Date
    Sep 2001
    Location
    Somewhere in this vast universe
    Posts
    3,741
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just want it to show more than one option at once. I know it sounds weird, but thats what I'm aiming for.

  6. #6
    SitePoint Enthusiast guioconnor's Avatar
    Join Date
    Oct 2007
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Let me see if I got it right:
    You want a select element showing several options at once but only one selectable (as opposed to a drop-down menu that will show only one at once).

    If it's this, is very simple, the size of the select element does not imply in multiple selection.

    This is the code for a drop-down
    HTML Code:
    <select name="option">
    <option value="o1">Option 1</option>
    <option value="o2">Option 2</option>
    <option value="o3">Option 3</option>
    </select>
    This is the code for a select window with 3 rows
    HTML Code:
    <select name="option" size="3">
    <option value="o1">Option 1</option>
    <option value="o2">Option 2</option>
    <option value="o3">Option 3</option>
    </select>
    This is the code for a select window with 3 rows and multiple selection
    HTML Code:
    <select name="option" size="3" multiple>
    <option value="o1">Option 1</option>
    <option value="o2">Option 2</option>
    <option value="o3">Option 3</option>
    </select>
    Just put the size parameter on the select elements on Raffles's link.
    Guilherme Zühlke O'Connor
    www.z-oc.com

  7. #7
    Level 8 Chinese guy Archbob's Avatar
    Join Date
    Sep 2001
    Location
    Somewhere in this vast universe
    Posts
    3,741
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I know how to do select boxes, how do I make it so that the 2nd one appears only after the first one is selected and changes when the first one is changed. Its the invisible layers that are raising havoc for me.

  8. #8
    SitePoint Enthusiast guioconnor's Avatar
    Join Date
    Oct 2007
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Archbob View Post
    Ok, I know how to do select boxes, how do I make it so that the 2nd one appears only after the first one is selected and changes when the first one is changed. Its the invisible layers that are raising havoc for me.
    Ok, I think I understand it know.

    You have two options, basically. One is to create the select boxes as shown before and apply styles with javascript through their Id's.

    Code:
    var box = document.getElementById('selectbox')
    box.style.display = 'none';
    Then, when an option is selected in the first box, along with the code to create the content, do

    Code:
    box.style.display = 'block';
    A second option would be to create only the first box and create further boxes on the fly with javascript.

    You can create it node by node or you can use the widely supported (yet non-standard) innerHTML.

    Code:
    document.getElementById('selectboxContainer').innerHTML = createSelectBox();
    They might be some mistakes on the code, but is more or less like that.
    Guilherme Zühlke O'Connor
    www.z-oc.com

  9. #9

  10. #10
    Level 8 Chinese guy Archbob's Avatar
    Join Date
    Sep 2001
    Location
    Somewhere in this vast universe
    Posts
    3,741
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can already see that integrating this with floating layers and PHP MYSQL selects is going to suck.

  11. #11
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    The bit that will suck the most is getting your logic right and outputting your data into Javascript objects. You need to create something like this:
    Code:
    var data = {
      group1:['g1a','g1b','g1c','g1d'],
      group2:['g2a','g2b','g2c','g2d'],
      group3:['g3a','g3b','g3c','g3d'],
      group4:['g4a','g4b','g4c','g4d']
    }
    Then you need to create your first select box from the first "layer" in the hierarchy:
    Code:
    var sel = document.createElement('select');
    sel.id="groups";
    for (var d in data) {
      var o = sel.appendChild(document.createElement('option'));
      o.value = d;
      o.appendChild(document.createTextNode(d));
    }
    Then get the onchange event and make a new select box based on what got selected in the first one:
    Code:
    sel.onchange = populateLevel2;
    
    function populateLevel2() {
      var group = data[this.value];
      var sel = document.createElement('select');
      sel.id = this.value;
      for (var i = 0, j = group.length; i < j; i++) {
        var o = sel.appendChild(document.createElement('option'));
        o.value = group[i];
        o.appendChild(document.createTextNode(group[i]));
      }
    }
    And so you could then add the extra level of the hierarchy by turning the array in each group into an object, where each member then points to an array. There is some similar code above, so you could reuse the code more efficiently.

  12. #12
    Level 8 Chinese guy Archbob's Avatar
    Join Date
    Sep 2001
    Location
    Somewhere in this vast universe
    Posts
    3,741
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Woot! Thanks all, I finally got it just the way I want it, but now I have another question:

    My page is now here: http://www.flashninjaclan.com/test/demo.html

    If you do view source you'll notice I have a hidden div(I got that to work!!).

    I've been trying to tinker with the Hover property to get it to get the div to appear when I hover over the "Normal chair 1" option in the third box. I think I can get it to work with a regular hyperlinks to I dont know where to put the code to get it to work with the form element.

  13. #13
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This reminds me of an example on Metaprogramming with JavaScript from Adam Logic:
    http://www.adamlogic.com/2007/05/02/...ascript-part-2

    Imagine writing JavaScript like this:
    Code:
    show("states").when("country").is("United States");
    ...
    show("provinces").when("country").is("Canada");
    This is very similar to the concept of your select boxes and categories etc. Anyhow, just food for thought if you were considering writing your own API for this eventually.

  14. #14
    Level 8 Chinese guy Archbob's Avatar
    Join Date
    Sep 2001
    Location
    Somewhere in this vast universe
    Posts
    3,741
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Isn't there an easier property like
    Code:
    if(onhover(choice.true)){ layer.visibility=true;
    }
    Or something like that?

    The metaprogramming would almost be impossible to integrate if the records are stored in a mysql database.

    What I'm aiming at is something like smashingames.com where when you hover over the link it shows a picture of the game, but instead of regular links, I want th hover over effect to be on the select options.

    I'm guessing smashinggames generates all of those on the fly rather than generating them all on page load.


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
  •