SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Keeping A Section Of A Web Page Static

    I have the same question as therockfordfiles posted in the PHP Application Design topic. They said it is a javascript thing, so I post same question here.

    "How do I create a web page navigation system so that when I click on a link, only part of the page changes (not the url) and the rest remains the same?
    For example, I have a web page. In that web page there's tabs. When clicking on a tab, I want the tab to change along with its respective content."

    Machiel

  2. #2
    SitePoint Guru
    Join Date
    Feb 2008
    Posts
    655
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I understand your question and I achieve it by using invisible <div>s

    For example you have one div for each section you want to toggle. Give each one a unique id and set its style to display:none, except for the default block, for which you add display:block

    Code HTML4Strict:
    <div id="intro1" style="display:block">Section 1 content</div>
    <div id="intro2" style="display:none">Section 2 content</div>
    <div id="intro3" style="display:none">Section 3 content</div>
    <div id="intro4" style="display:none">Section 4 content</div>

    Then use some javascript for show() and hide() functions:

    Code JavaScript:
    function show(obj) {
    var el = document.getElementById(obj);
    el.style.display = 'block';
    }
     
    function hide(obj) {
    var el = document.getElementById(obj);
    el.style.display = 'none';
    }

    You can then toggle each section by accessing the javascript
    Code HTML4Strict:
    <a href="/" onCLick="show('intro_1'); hide('intro_2'); hide('intro_3'); hide('intro_4'); return false;">Show section 1</a>
    <a href="/" onCLick="show('intro_2'); hide('intro_1'); hide('intro_3'); hide('intro_4'); return false;">Show section 2</a>
    <a href="/" onCLick="show('intro_3'); hide('intro_1'); hide('intro_2'); hide('intro_4'); return false;">Show section 3</a>
    <a href="/" onCLick="show('intro_4'); hide('intro_1'); hide('intro_2'); hide('intro_3'); return false;">Show section 4</a>

    There is probably a more efficient way of achieving this, but this is how I do it.

  3. #3
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is working!

    There was one problem in the coding. You called the div's intro1, intro2, etc. but in the links intro_1, intro_2, etc. After introducing the underscore it is working fine.

    Thank you,
    Machiel

  4. #4
    SitePoint Guru
    Join Date
    Feb 2008
    Posts
    655
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Glad it is working.

    Somebody will probably come along later and give you an easier way of doing it rather than manually hiding all the unwanted divs.

  5. #5
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One thing left is keep section static while refreshing page or changing content.
    I think it can be fix with some internal cookie, but I have no idea how to do that.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Use the functions from the following page to handle cookies
    http://www.quirksmode.org/js/cookies.html
    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
  •