SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Apr 2006
    Location
    London, United Kingdom
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Interactive category picker/selector?

    I would appreciate if anyone could guide my point by point on how one could create a category picker just like gumtree (preferably in jquery):

    http://www.gumtree.com/add_posting.html?location_id=uk

    Specifically the points

    • How clicking on a category opens another to the right
    • How clicking on a category appends a variable like "#cat-10201" into the url (and vice versa)
    • How css lists are used instead of form select menus (making it easily styled)
    • How clicking on a deep subcategory automatically preselects all parent categories


    I'm not looking for anyone to actually code it for me (that would be outrageous ) but tips on how it's actually structured and steps on how it can be coded would be highly appreciated. I can do PHP and I know CSS also. I don't know plain javascript but I'm sure I can do most of it in jQuery
    eFlair Design | Premium Design Services and Web Consultation

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    This probably wouldn't need to be too complicated.

    GumTree does something along these lines
    - Has a list of all the categories.
    - Has a list of all the sub categories
    - Has a list of all the sub sub categories (etc.)

    - All category links actually link to the list that contains the sub category, and the sub category links to the sub-sub category. (See markup below)

    When someone clicks on the a (parent) category, it links through to the sub category, something you could target with javascript because you would know the href of the link that was clicked (and by extension the id of the category you are targeting).

    You could have a markup structure like Gumtree
    Code html4strict:
    <!-- main category list -->
    <ul id="categories">
        <li><a href="#cat1">Category 1</a></li>
        <li><a href="#cat2">Category 2</a></li>
    </ul>
        <!-- sub categories -->
        <ul id="cat1">
            <li><a href="#subcat1-1">sub category 1</a></li>
            <li><a href="#subcat1-2">sub category 2</a></li>
        </ul>
        <ul id="cat2">
            <li><a href="#subcat2-1">sub category 1</a></li>
            <li><a href="#subcat2-2">sub category 2</a></li>
        </ul>
            <!-- sub sub categories -->
            <ul id="subcat1-1">
                <li><a href="#subcat1-1-1">sub category 1</a></li>
                <li><a href="#subcat1-1-2">sub category 2</a></li>
                <li><a href="#cat1-1-3">category 3</a></li> <!-- final link -->
            </ul>
            <ul id="subcat1-2">
                <li><a href="#subcat1-2-1">sub category 1</a></li>
                <li><a href="#subcat1-2-2">sub category 2</a></li>
            </ul>


    Though, to be honest, their markup isn't very ideal. I would prefer to nest this so it is more logically (and semantically) structured:
    Code html4strict:
    <!-- main category list -->
    <ul id="categories">
        <li>
            <a href="#cat1">Category 1</a>
            <!-- sub categories -->
            <ul id="cat1">
                <li>
                    <a href="#subcat1-1">sub category 1</a>
                    <!-- sub sub categories -->
                    <ul id="subcat1-1">
                        <li><a href="#subcat1-1-1">sub category 1</a></li>
                        <li><a href="#subcat1-1-2">sub category 2</a></li>
                        <li><a href="#cat1-1-3">category 3</a></li> <!-- final link -->
                    </ul>
                </li>
                <li>
                    <a href="#subcat1-2">sub category 2</a>
                    <ul id="subcat1-2">
                        <li><a href="#subcat1-2-1">sub category 1</a></li>
                        <li><a href="#subcat1-2-2">sub category 2</a></li>
                    </ul>
                </li>
            </ul>
            <ul id="cat2">
                <li><a href="#subcat2-1">sub category 1</a></li>
                <li><a href="#subcat2-2">sub category 2</a></li>
            </ul>
        </li>
        <li><a href="#cat2">Category 2</a></li>
    </ul>


    With some CSS to show/hide different <ul>'s and some JS to toggle the hiding/showing you should be able to reproduce this fairly well.

    The hashes are added to the URL if you are not preventing default events on links. Alternatively you could set them explicitly using window.location.hash when a category link is clicked.

    To select all parents, it would be a simple matter of targeting the current item that is clicked, finding the parent list, and subsequently the link with the href of the current category (am I making sense, it gets a bit confusing when talking about parents and sub-sub children :P)

    Hope this helped
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Addict
    Join Date
    Apr 2006
    Location
    London, United Kingdom
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AussieJohn View Post
    x
    Perfect, can't thank you enough
    eFlair Design | Premium Design Services and Web Consultation


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
  •