SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 26
  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,321
    Mentioned
    462 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,321
    Mentioned
    462 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 Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    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.

  7. #7
    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!

  8. #8
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,423
    Mentioned
    274 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,423
    Mentioned
    274 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,321
    Mentioned
    462 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,321
    Mentioned
    462 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.

  15. #15
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.
    I didn't really believe you when you said it'd be easy, ralph, but boy, was i wrong !!!! thnx a bunch for ur tips!

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,321
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Glad to hear it. I checked your page, but it still has Cufon in it. Was that just a demo page?

  17. #17
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Glad to hear it. I checked your page, but it still has Cufon in it. Was that just a demo page?
    Well, I did remove the Cufon script initially, ralph, thinking it only impacted the font, but then found that the slideshow didn't work without it, so back in it went!! Think I can change that quickly as well??? I've got to finish the site by this month-end...

  18. #18
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Glad to hear it. I checked your page, but it still has Cufon in it. Was that just a demo page?
    Oh, i didn't answer ur qn, did i ...yes, that's a demo site that i use for the customer (plural, hopefully in the near future )...

  19. #19
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,321
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by maxdp73 View Post
    the slideshow didn't work without it
    Which slideshow?

  20. #20
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahh, got a bit confused, the slideshow's on the index page, i've removed the Cufon scripts from all pages not using slides on my system, gotta update the site...

  21. #21
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,321
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Removing Cufon shouldn't affect your slider functionality at all. What do you mean by "the slider wouldn't work"?

  22. #22
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Removing Cufon shouldn't affect your slider functionality at all. What do you mean by "the slider wouldn't work"?
    Well, I've uploaded a new page www.yourdemosite.in/index1.html, in which the only difference from the original index.html is commenting out of the script inclusion code:

    <!--script src="js/cufon-yui.js" type="text/javascript"></script>

    And when you take a look at the page, you can see that the slider doesn't work in it!!!

  23. #23
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,321
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Try removing the Cufon code from your custom.js:

    Code:
    // cufon
    	Cufon.replace('.custom, .link-button, #nav>li>a, #social-bar, h1, h2, h3, h4, h5, h6, .bullet-title .big, .bullet-title .small, .title, .subtitle, .portfolio-sidebar ul li a, .post-title, #sidebar ul li a, .staff .information .header .name, .headline', { 
    Uncaught ReferenceError: Cufon is not defined
    				fontFamily: 'bebas-neue',
    				hover: true	
    	});
    Or if not removing it, either comment it out for testing purposes or move it to the bottom of the code.

  24. #24
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Try removing the Cufon code from your custom.js:

    Code:
    // cufon
    	Cufon.replace('.custom, .link-button, #nav>li>a, #social-bar, h1, h2, h3, h4, h5, h6, .bullet-title .big, .bullet-title .small, .title, .subtitle, .portfolio-sidebar ul li a, .post-title, #sidebar ul li a, .staff .information .header .name, .headline', { 
    Uncaught ReferenceError: Cufon is not defined
    				fontFamily: 'bebas-neue',
    				hover: true	
    	});
    Or if not removing it, either comment it out for testing purposes or move it to the bottom of the code.
    That works! So what does the Cufon code in custom.js do? It overrides the other settings in CSS?

  25. #25
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,321
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    No, I think it was causing a JS error, because the main Cufon script was removed—meaning the call to Cufon.replace() was broken—and so it was messing up the JS that followed it in that custom.js 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
  •