SitePoint Sponsor

User Tag List

Results 1 to 25 of 26

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to display different articles in same page using side navigation options?

    Hi,
    I have a series of pages, in all of which I have a few (4/5) side menu options. When I select each option, I need to display appropriate article contents beside the options column within the same page. I've used a template with the accordion effect which is similar to what I need, except that I don't want the option itself to expand, but instead just change the content which appears beside it. The page I'm working on is available at http://yourdemosite.in/therapies.html. Can someone please help me with their thoughts on how to do this??

    Thanks,
    Xavier.

  2. #2
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You could use jquery with tabbed content, such as explained here
    http://www.faridesign.net/2012/05/cr...g-css3-jquery/

    here's the version my client requested based on the above
    http://thetransformationalchangesteam.com/coaches.php

    (sometimes a cached version of the stylesheet is delivered for the above and the text is larger than intended; if the menu covers two lines, that's what has happened)

    OR just search on jquery tabbed content vertical and see what you get.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Here's another version of the same thing—a stripped down page to make it easier to grab the code:

    http://pageaffairs.com/code-archive/tabs/

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Here's another version of the same thing—a stripped down page to make it easier to grab the code:

    http://pageaffairs.com/code-archive/tabs/
    Thnx Ralph, that works almost exactly like I wanted , with just one glitch...in my site, whenever I visit a link, it gets highlighted and doesn't go away even after I click another link on the same page...i've tried changing different sections of the code but no luck as of yet...would you be able to point out the error(s), a sample is at http://www.yourdemosite.in/articles.html...

    Btw, I took a few weeks off for the festive season, hence the long break in response ...

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by maxdp73 View Post
    whenever I visit a link, it gets highlighted and doesn't go away even after I click another link on the same page...
    I'm not sure what you are referring to there. I can't see the problem.

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    I'm not sure what you are referring to there. I can't see the problem.
    well, ralph, the format is supposed to be such that all the links should be normally light grey in color, other than the currently selected link which should be black...however, now, when a link is selected, it becomes black only after focus is taken away from it and then it remains black even after another link is selected...so, at any one time, there are at least 2 links that are black in color and the unselected ones turn light grey again only when refocused, strange!

  7. #7
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,657
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    It's your other css prob telling it so. If its on the same page then you have to use JS. Jquery makes this easy. Just have to find it. I have a easy solution but apparently I need to go easy on my own links so mods don't get mad. Good luck.

  8. #8
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,230
    Mentioned
    265 Post(s)
    Tagged
    5 Thread(s)
    You've copied ralph.m's CSS, but haven't used the same class name in your site, hence the rules are not being applied correctly.

    Whereas Ralph has
    Code HTML4Strict:
    <div class="aside" role="complementary">
    <ul class="tabs">
    <li><a href="#one">TAB ONE</a></li>
    <li><a href="#two">TAB TWO</a></li>
    <li><a href="#three">TAB THREE</a></li>
    <li><a href="#four">TAB FOUR</a></li>
    </ul>
    </div>

    You have
    Code HTML4Strict:
    <div class="portfolio-sidebar">
    <ul class="tabs">
    <li><a href="#one">CORPORATE MENTAL HEALTH</a></li>
    <li><a href="#two">EATING DISORDER</a></li>
    <li><a href="#three">MIND MATTERS</a></li>
    <li><a href="#four">SOCIAL ANXIETY DISORDER</a></li>
    </ul>
    </div>
    which is fine, but it means you'll need to change .aside to .portfolio-sidebar in your CSS for the styles to be applied.

  9. #9
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    You've copied ralph.m's CSS, but haven't used the same class name in your site, hence the rules are not being applied correctly.

    Whereas Ralph has
    Code HTML4Strict:
    <div class="aside" role="complementary">
    <ul class="tabs">
    <li><a href="#one">TAB ONE</a></li>
    <li><a href="#two">TAB TWO</a></li>
    <li><a href="#three">TAB THREE</a></li>
    <li><a href="#four">TAB FOUR</a></li>
    </ul>
    </div>

    You have
    Code HTML4Strict:
    <div class="portfolio-sidebar">
    <ul class="tabs">
    <li><a href="#one">CORPORATE MENTAL HEALTH</a></li>
    <li><a href="#two">EATING DISORDER</a></li>
    <li><a href="#three">MIND MATTERS</a></li>
    <li><a href="#four">SOCIAL ANXIETY DISORDER</a></li>
    </ul>
    </div>
    which is fine, but it means you'll need to change .aside to .portfolio-sidebar in your CSS for the styles to be applied.
    Yes, Technobear, I've used .portfolio-sidebar because I want the format of the side menu links like that, but unfortunately, even though everything else works fine, the links don't lose the active link coloring...i have only .current to be highlighted differently, so why would the previous selection remain as though it has also been selected??? If I change .aside to portfolio-sidebar, then I lose all the other formatting which I don't want ...

  10. #10
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,230
    Mentioned
    265 Post(s)
    Tagged
    5 Thread(s)
    Are you sure you've added the script correctly? I don't see the script from the bottom of Ralph's page on yours.

  11. #11
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've included the script in one of the .js files (custom.js), it's definitely there!

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Hm, odd: the first time I checked your page the tabs weren't doing that. Anyhow, I see the problem now. It's hard to tell why that's happening, but I suspect it's something to do with the Cufon script. My advice would be to ditch Cufon, in favor of @font-face, which is vastly better. Cufon is a dead technology, and always was slow and inaccessible anyway.

  13. #13
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hm, odd: the first time I checked your page the tabs weren't doing that. Anyhow, I see the problem now. It's hard to tell why that's happening, but I suspect it's something to do with the Cufon script. My advice would be to ditch Cufon, in favor of @font-face, which is vastly better. Cufon is a dead technology, and always was slow and inaccessible anyway.
    How complex would making those changes be, ralph??? i'm working my way through this site with the help of a template i liked and i'm afraid i have only very basic skills ...

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    OK, well, it should be easy—although templates can sometimes be a mess to work with. In terms of HTML and CSS, though, it's easy. Perhaps for a start, remove all the Cufon stuff and just put plain text into those links.

    Then download the @font-face kit for Bebas from here:

    http://www.fontsquirrel.com/fonts/bebas-neue

    and place the fonts inside your CSS folder, and add the given CSS code to your CSS file.


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
  •