SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile tabbed navigation within 1 page

    Hey everyone,

    I'm designing a site where on the home page I would like to have tabs that display some info on the clients three main product categories (and with links to the actual category pages and featured products), such that the first is displayed when the page is first reached and they can then view the info on the other products by clicking on the tabs for those.

    Hope that's clear!

    Ok, so one way of doing this would be to have three diferent versions of the home page - but that's no good because there is other content on the home page and we would run into issues with duplicate content.

    The obvious way is with javascript displaying / hiding the right content onclick. Problem then is accessibility with javascript disabled users unable to get to the other content.

    I guess the answer is writing the code in such a way that the barebones HTML is all there for those without javascript and then the javascript does its work reformatting the sections into the tabbed nav...but that seems like a complicated bit of programming for me.

    Another solution is to simply display an error message "it appears javascript is disabled, please enable if you want this site to function fully" and then hide the message with javascript of course.

    Anyway I was wondering if:
    1. anyone had any thoughts on all of this
    2. anyone can think of a better solution
    3. anyone knows any scripts out there that do this sort of thing that I could use

    Many thanks,

    cph

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    8,906
    Mentioned
    139 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by cph View Post
    Ok, so one way of doing this would be to have three diferent versions of the home page - but that's no good because there is other content on the home page and we would run into issues with duplicate content.
    If something is supplied in the URL that indicates another tab should be open, set <meta name="robots" content="noindex,follow" /> in the head of the HTML, that way you don't get a penalty for duplicate content.

    Quote Originally Posted by cph View Post
    I guess the answer is writing the code in such a way that the barebones HTML is all there for those without javascript and then the javascript does its work reformatting the sections into the tabbed nav...but that seems like a complicated bit of programming for me.
    That's what I do in cases like this. You just put everything in the HTML and then using javascript say: hide this, hide that, show that, apply this style to that element there. If you think about it carefully it's really not that hard. Created something similar just last week in about 30 minutes.

    Quote Originally Posted by cph View Post
    Another solution is to simply display an error message "it appears javascript is disabled, please enable if you want this site to function fully" and then hide the message with javascript of course.
    No offence, but those messages are lame, and they don't help you (probably only makes non-js users angry). Then you'd better hide the alternative tabs and show them using javascript and accept that non-js users can't see them at all.

    Quote Originally Posted by cph View Post
    anyone knows any scripts out there that do this sort of thing that I could use
    No, I always write this kind of thing myself (using jQuery).
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks ScallioXTX,

    That's got me thinking! I recon I've come up with an ideal solution:

    have the links on the other tabs go through to the category pages put have the javascript change the link to show the content on the home page.

  4. #4
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    8,906
    Mentioned
    139 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by cph View Post
    have the links on the other tabs go through to the category pages put have the javascript change the link to show the content on the home page.
    That sounds good
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy


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
  •