SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2010
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Switching DIV Content & Changing Link Appearence

    Hi there,

    Please bare with me as I try to explain my problem...I'm not always that great at putting it into words!

    I am using HTML/Javascipt/CSS to maintain a page whereby the content of the page is switched when a user selects a link. An example of the code used is below for your better understanding:

    The container in which all of the content is loaded:

    Code HTML4Strict:
    <div id="container">
    	<div id="sub1"></div>
    	<div id="sub2" class="hide"></div>
    	<div id="sub3" class="hide"></div>
       	<div id="sub4" class="hide"></div>
    	<div id="sub5" class="hide"></div>
    	<div id="sub6" class="hide"></div>
    </div>


    The Links that control which "sub" to display in the container:

    Code HTML4Strict:
    <a href="#" class="mininav" onclick="switchContent('sub3'); self.scrollTo(0,0); return false;">Yesterday</a> | 
    		<a href="#" class="mininav" onclick="switchContent('sub1'); self.scrollTo(0,0); return false;">Today</a> | 
    		<a href="#" class="mininav" onclick="switchContent('sub2'); self.scrollTo(0,0); return false;">Tomorrow</a><br />
            <a href="#" class="mininav" onclick="switchContent('sub4'); self.scrollTo(0,0); return false;">Monthly</a> | 
            <a href="#" class="mininav" onclick="switchContent('sub5'); self.scrollTo(0,0); return false;">Yearly</a> | 
            <a href="#" class="mininav" onclick="switchContent('sub6'); self.scrollTo(0,0); return false;">Financial</a>


    The javascript from the header:


    Code JavaScript:
    <script type="text/javascript">
     
    function switchContent(obj) {
     
    		obj = (!obj) ? 'sub1' : obj;
     
    		var contentDivs = document.getElementById('container').getElementsByTagName('div');
    		for (i=0; i<contentDivs.length; i++) {
    			if (contentDivs[i].id && contentDivs[i].id.indexOf('sub') != -1) {
    				contentDivs[i].className = 'hide';
    			}
    		}
    		document.getElementById(obj).className = '';
     
    	}
     
    </script>

    And finally, the CSS attribute assigned to the class "hide":


    Code CSS:
    .hide {
    	display: none;
    }


    Now all of this works perfectly for me! The user selects whether or not they want to view today's, tomorrow's, yesterday's content etc.. and whichever one they select it loads it into the container DIV and hides the rest... just like an iframe but better!

    So - I want to add 1 thing to this page and this is what I need help with.

    I need the page to detect which "sub" is being displayed and change the style of that particular link so the user can see which is the active link.

    For instance - When the page loads, by default, all subs are hidden except sub1 which is today's content - So when the page loads, I want the "Today" link to be styled differently to the rest... However, if they then go on to click "Tomorrow" - as well as changing the content like it already does, I need it to also switch the style of the link from the "Today" link to the "Tomorrow" link.

    I hope I'm making sense - it sounds ok in my head LOL.

    Can anyone help?

  2. #2
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I need the page to detect which "sub" is being displayed and change the style of that particular link so the user can see which is the active link.
    Check out this example esp the function checkTab (written in jQuery). I also changed the HTML & CSS by adding a class called current. So if you load this in a browser, you see Today is in red, then when you click on another link, that will get highlighted as well in red.
    PHP Code:
    <!doctype html>
    <
    html>
        <
    head>
            <
    title>Test</title>
            <
    style>
                .
    hide {
                    
    displaynone;
                }    
                .
    current{
                    
    colorred;
                }
            </
    style>
            <
    script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
        </head>
        <body>
            <div id="tabs">
                <ul>
                    <li><a href="#sub3" id="yesterday">Yesterday</a></li>
                    <li><a href="#sub1" id="today" class="current">Today</a></li>
                    <li><a href="#sub2" id="tomorrow">Tomorrow</a></li>
                    <li><a href="#sub4" id="monthly">Monthly</a></li>
                    <li><a href="#sub5" id="yearly">Yearly</a></li>
                    <li><a href="#sub6" id="financial">Financial</a></li>
                </ul>

                <div id="sub1">Test 1</div>
                <div id="sub2" class="hide">Test 2</div>
                <div id="sub3" class="hide">Test 3</div>
                <div id="sub4" class="hide">Test 4</div>
                <div id="sub5" class="hide">Test 5</div>
                <div id="sub6" class="hide">Test 6</div>
            </div>

            <script>
                function switchContent(obj) {
                    obj = (!obj) ? 'sub1' : obj;

                    var contentDivs = document.getElementsByTagName('div');
                    for (i=0; i<contentDivs.length; i++) {
                        if (contentDivs[i].id && contentDivs[i].id.indexOf('sub') !== -1) {
                            contentDivs[i].className = 'hide';
                        }
                    }
                    document.getElementById(obj).className = '';
                }

                function checkTab() {
                    $('a').each(function() {
                        $(this).click(function() {
                            tab = $(this).attr('href').split('#');
                            switchContent(tab[1]);
                            $('.current').attr('class','');
                            $(this).attr('class','current');
                        });
                    });
                }

                window.onload = function() {
                    checkTab();
                };
          
            </script>
        </body>
    </html> 

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2010
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi centered_effect,

    Sorry for waiting so long to reply to you - I've been snowed under with other work and I've only just had the chance to try out your method.

    It does work perfectly so thank you very much for your help.

    I would like to know 1 thing though - If you, or anyone else, can help - When I click on the "Yearly" tab in my page, the content of this DIV is substantially longer than the rest of the tabs so I scroll down the page to read it all and then when I click on one of the other tabs at the bottom, I need it to jump back up to the top, which at the moment it does not do - I need to manually scroll back up to the top with this code...

    What would I add to the code to make it automatically jump back to the top?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    window.scrollTo(0,0);
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Zealot
    Join Date
    Oct 2010
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Thanks - I did realise after I posted it that I already had the answer to that in my original code lol - I was having a forgetful moment.

    There is something you might be able to help with though... I want to change the names of the DIV ID's from sub1, sub2, sub3, sub4, sub5 and sub6 to "today, tomorrow, yesterday, monthly, yearly & financial" respectively.

    I tried to do this myself but it messed up the page, presumably because the javascript code calls for "sub1" and "indexOf('sub')" - Is there any easy way for me to do this?

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by CBResources View Post
    Is there any easy way for me to do this?
    Yes there is. Adjust the code so that it it doesn't rely explicitly on those id attributes. Instead, have the script use the link href values to work out which div to use.

    See my post from four days ago that guides you through using this technique.
    http://www.sitepoint.com/forums/java...ml#post4884518
    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
  •