SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need better way to display this info - Ideas please

    I have a page with lots of people, and each person may be included in a sub-directory by specialty.
    Is there a way to do this without a database but just using jquery / css?

    Here is the existing page:
    http://www.coldwellutah.com/test/agents.html
    Each sub-directory goes to a different page. This is way too cumbersome to keep maintained. I'd like to have everyone in one place.
    For example could I assign a class to each specialty and have them list with some jquery mechanism?

    I'm looking at this in this light because I don't have a good understanding of DB or how to implement.

    Thoughts?

    Thanks.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    You could use a definition list.

    Code html4strict:
    <dl>
        <dt>Office Agents</dt>
        <dd>Mike Ash</dd>
        <dd>Scott Mangum</dd>
        <dd>...</dd>
        <dt>Retail Agents</dt>
        <dd>Zach Beaudry</dd>
        <dd>Kevin Harper</dd>
        <dd>...</dd>
    </dl>

    Or, you could place them in a list, and use an accordion to show/hide the content.

    Code html4strict:
    <ul>
        <li>Office Agents
            <ul>
                <li>Mike Ash</li>
                <li>Scott Mangum</li>
                <li>...</li>
            </ul>
        </li>
        <li>Retail Agents
            <ul>
                <li>Zach Beaudry</li>
                <li>Kevin Harper</li>
                <li>...</li>
            </ul>
        </li>
    </ul>

    And there are a vast array of other types of structures as well. It all depends on what you're intentions are going to be.

    And we haven't even started yet to touch any JavaScript.

    Do you have any ideas of examples from other web pages around the internet that do things in a similar way to what you desire?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm liking this as an example:
    http://css-tricks.com/examples/OrganicTabs/

    I'll pursue this unless I find a better solution.
    Thanks for the input. These should be represented as a list. You are right on that for sure I think.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Well if you're using the jQuery library, here is their tabs solution:
    http://docs.jquery.com/UI/Tabs
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the link!
    Do you think this will allow me to show specialty by adding a class?
    Or do you think I'm looking the wrong direction for this...

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    yes, you should be able to use a class to adjust the presentation, so that you can show speciality.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok I hate to bother you on this but hoping for some glimmer of understanding.
    I get that the "organic tabs" example is showing and hiding different UL's by ID. However, it would be great to have only one list and show and hide parts of the one list by different classes. – I have no idea how to write this code. Any chance someone could show me an example of how this works, or if it will work?

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Classes don't work for tabs. Each tab relates to a single specific section of the page, which is why unique identifiers are the correct tool to use for them.

    So the question needs to be asked. What are you attempting to do with tabs that makes using unique identifiers a problem.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem is if I have 1 list of say 10 people, and 2 of those people are specialists in Office, 5 are specialists in Retail, 2 are specialists in BOTH Office and Retail...

    I can't give them a unique ID. They all need to be of the "retail" class and show when I hit that tab. I can do this by simply adding a list of all the retail only people, office only people, etc. to a unique UL but it would be nice if I could have each person in once list with a way to filter or show only people associated with that specialty.

    Example of current solution:
    http://www.coldwellutah.com/test/agents.html
    Bad

    Organic Tabs in unique UL = better
    One UL with the ability to show li with specific class = BEST

    Sorry, I think I know what I want but don't know if it can be done really.
    Makes me think this needs to be a database I suppose.

  10. #10
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.coldwellutah.com/test/agents.html

    Ok I just updated this page using a half-baked version of the script.
    Default is a massive list of people. The Office division tab loads the office division UL.
    But it would be cool if it could just load li elements that had a class of .office so I could keep everyone in one list instead of having multiple lists with redundant names.

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Then perhaps you need something completely different than a standard tabbed solution.

    It is possible to use classes so css automatically shows/hides the appropriate people, but do you first need to ensure that non=-javascript visitors can use it?

    Or to phrase it another way, do you plan to provide a non-working page for non-javascript users? If yes, then there are ways that classes can help to automate the work for you.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    right now I'm taking baby steps at this.
    ultimately yes I'd like maximum usability. I'm just trying to figure out if I can do this a more efficient way than having a completely different page for each specialty.

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    A more efficient way is to have a separate page for each tab. Each page uses some server-side code to generate the list of people. That works for the no-scripting situation.

    Then from the main page, you use scripting to request from the server (via AJAX) the list of people to show when people click on each category, and replace the list of people with that retrieved list instead.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •