1. Contracting
    1. General
      1. Brexit
    2. Business / Contracts
      1. Coronavirus Assistance
    3. Accounting / Legal
      1. Umbrella Companies
      2. HMRC Scheme Enquiries
      3. The Future of Contracting
      4. IR35 Reform
    4. Technical
    5. Welcome / FAQs
  2. Social
    1. Light Relief
    2. Social / Events
  • Visitors can check out the Forum FAQ by clicking this link. You have to register before you can post: click the REGISTER link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below. View our Forum Privacy Policy.
  • Want to receive the latest contracting news and advice straight to your inbox? Sign up to the ContractorUK newsletter here. Every sign up will also be entered into a draw to WIN £100 Amazon vouchers!

Reply to: HTML tabs with no round trip to server

Collapse

You are not logged in or you do not have permission to access this page. This could be due to one of several reasons:

  • You are not logged in. If you are already registered, fill in the form below to log in, or follow the "Sign Up" link to register a new account.
  • You may not have sufficient privileges to access this page. Are you trying to edit someone else's post, access administrative features or some other privileged system?
  • If you are trying to post, the administrator may have disabled your account, or it may be awaiting activation.

Previously on "HTML tabs with no round trip to server"

Collapse
  • NickFitz
    replied
    Originally posted by NickFitz View Post
    stuff...
    Updated version - tidies up a couple of things and highlights the active tab. Only changes are to the CSS:

    Code:
    body {
    font-family: Helvetica, Arial, sans-serif;
}

.js #tabs {
    margin: 0;
    padding: 0;
}

.js .tab {
    list-style-type: none;
    border: 3px solid green;
    padding: 0.5em 1em;
    float: left;
}

.js .active {
    border-color: #f0f;
}

.js .active a {
    color: #f0f;
}

.js .tab_content {
    clear: left;
    border: 1px solid green;
    padding: 1em;
}
    and the JS:

    Code:
    (function() {
    var currentTab = null;

    function makeOnclickHandler(tab) {
        return function(e) {
            if (currentTab) {
                currentTab.content.style.display = "none";
                currentTab.element.className = currentTab.element.className.replace(/\bactive\b/, "");
            }
            tab.content.style.display = "block";
            tab.element.className += " active";
            currentTab = tab;
            return false;
        }
    }

    document.body.className += " js";
    var potentialTabs = document.getElementsByTagName("li");
    var tabs = [];
    for (var i = 0, count = potentialTabs.length; i < count; i++) {
        if (/\btab\b/.test(potentialTabs[i].className)) {
            tabs[tabs.length] = potentialTabs[i];
        }
    }

    for (var i = 0, count = tabs.length; i < count; i++) {
        var tab = tabs[i];
        tab = tabs[i] = {
            element: tab
        };
        var a = tab.element.getElementsByTagName("a")[0];
        var href = a.href;
        var contentId = href.substring(href.lastIndexOf("#") + 1);
        tab.content = document.getElementById(contentId);
        tab.content.style.display = "none";
        tab.element.onclick = makeOnclickHandler(tab);
    }
    tabs[0].element.onclick();    
})();

    Leave a comment:

  • suityou01
    replied
    Originally posted by Zippy View Post
    OK. Show and hide divs is good. You can change styles for the tabs using Jscript (but FF and IE are different)
    I'll confess that I don't know what the big problem is here. Sorry
    Who said anything about a big problem? I just wanted a steer. Got one. Did the code. All is well. Thanks for your help all.

    Leave a comment:

  • NickFitz
    replied
    Originally posted by suityou01 View Post
    Seems to work in FF so should be good in IE.
    Bad assumption

    IE has ways of screwing things up that we wot not of. Some bugs are actually worse in IE7 than they were in IE6. You should be all right for something straightforward like this, though.

    Leave a comment:

  • NickFitz
    replied
    General principles:
    1. Use semantic HTML;
    2. Use progressive enhancement.


    Very quick'n'dirty example.

    Goodness: all content is available when JS is disabled; semantic HTML provides useful navigational assistance including for users of assistive technologies such as screen readers; global JS namespace remains unaltered due to encapsulation of code in anonymous self-invoked function expression; all content is readable by spiders, which is good for SEO.

    Badness: old-school event handler attachment; manipulation of styles would be better handled by using classes and additional CSS; CSS and JS ought to be in external files.

    Hereby placed in the public domain for your edification and entertainment

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Tab demo</title>
<style type="text/css">

body {
    font-family: Helvetica, Arial, sans-serif;
}

.js #tabs {
    margin: 0;
    padding: 0;
}

.js .tab {
    list-style-type: none;
    border: 1px solid green;
    padding: 0.5em 1em;
    float: left;
}



.js .tab_content {
    clear: left;
    border: 1px solid green;
    padding: 1em;
}

</style>
</head>
<body>
<h1>Tab demo</h1>
<ol id="tabs">
    <li class="tab"><a href="#foo" rel="tab">Foo</a></li>
    <li class="tab"><a href="#bar" rel="tab">Bar</a></li>
    <li class="tab"><a href="#baz" rel="tab">Baz</a></li>
</ol>
<div id="foo" class="tab_content">
    <h2>Foo stuff</h2>
    <p>This is stuff about foo.</p>
</div>
<div id="bar" class="tab_content">
    <h2>Bar stuff</h2>
    <p>This is stuff about bar.</p>
</div>
<div id="baz" class="tab_content">
    <h2>Baz stuff</h2>
    <p>This is stuff about baz.</p>
</div>
<script type="text/javascript">
(function() {
    var currentContent;
    function makeOnclickHandler(tab) {
        return function(e) {
            if (currentContent) {
                currentContent.style.display = "none";
            }
            tab.content.style.display = "block";
            currentContent = tab.content;
            return false;
        }
    }

    document.body.className += " js";
    var potentialTabs = document.getElementsByTagName("li");
    var tabs = [];
    for (var i = 0, count = potentialTabs.length; i < count; i++) {
        if (/\btab\b/.test(potentialTabs[i].className)) {
            tabs[tabs.length] = potentialTabs[i];
        }
    }

    for (var i = 0, count = tabs.length; i < count; i++) {
        var tab = tabs[i];
        tab = tabs[i] = {
            element: tab
        };
        var a = tab.element.getElementsByTagName("a")[0];
        var href = a.href;
        var contentId = href.substring(href.lastIndexOf("#") + 1);
        tab.content = document.getElementById(contentId);
        tab.content.style.display = "none";
        tab.element.onclick = makeOnclickHandler(tab);
    }
    tabs[0].element.onclick();    
})();


</script>
</body>
</html>
    EDIT: a few changes to the CSS and JS are posted below...
    Last edited by NickFitz; 12 January 2010, 20:18.

    Leave a comment:

  • d000hg
    replied
    I want to do some stuff similar to this. The problem I see is the pain of designing DIVs you can't view in a visual layout system - like a VB6 app with a single dialog with hundreds of controls, turned on/off on different states.

    Leave a comment:

  • Zippy
    replied
    Originally posted by suityou01 View Post
    Yip.
    OK. Show and hide divs is good. You can change styles for the tabs using Jscript (but FF and IE are different)
    I'll confess that I don't know what the big problem is here. Sorry

    Leave a comment:

  • Ardesco
    replied
    I'm not saying your a numpty because you don't know jQuery, i'm saying it numpty stuff i.e. not particularly difficult.

    To do 4 tabs all you need to do is have 4 specific areas of the site and use css to hide and display them when an href is clicked.

    Something like:
    Code:
    <ul>
<li><a href="one"></li>
<li><a href="two"></li>
<li><a href="three"></li>
<li><a href="four"></li>
</ul>
<div id="one"> Tab one content here</div>
<div id="two"> Tab two content here</div>
<div id="three"> Tab three content here</div>
<div id="four"> Tab four content here</div>
    then default div id's two three and four to display: none.

    Then a snippet of javascript (or jQuery because you will be able to do in in one line after spending about 5 mins on the jquery site) that will set one of the divs to display: block and all the other divs to display: none when you click on the links in the <ul>

    Really not that hard conceptually. If you don't like the idea of display none you can set an absolute position of -9999em or something.

    Leave a comment:

  • suityou01
    replied
    Originally posted by Zippy View Post
    So you need to load all the info in one hit and then just hide/show (and change your tabs)?
    Yip.

    Leave a comment:

  • Zippy
    replied
    So you need to load all the info in one hit and then just hide/show (and change your tabs)?

    Leave a comment:

  • suityou01
    replied
    Originally posted by Zippy View Post
    If you include the Javascript and CSS files as links they will be cached by the client so no round trip necessary.

    Have I missed the point here?
    Yes.

    The CSS tab tutorials I found styled a <ul> and each <li> was <a>ed, each href then displayed a different page, with the respective clicked "tab" shown in a different colour.

    This means round trips to the server.

    I am using some jscript to show and hide divs at the moment. Seems to work in FF so should be good in IE.

    Leave a comment:

  • Zippy
    replied
    If you include the Javascript and CSS files as links they will be cached by the client so no round trip necessary.

    Have I missed the point here?

    Leave a comment:

  • suityou01
    replied
    Originally posted by Ardesco View Post
    http://jquery.com

    just need some basic css and use a bit of jQuery to hide/display the tab. numpty stuff tbh, what was your specialism again...
    Not jquery.

    Thanks for your help. This is one thing about IT that urks me though.

    I can have worked in the industry for 13 years as a programmer, have countless years experience in loads of different technologies, databases, CMS, DMS, object oriented languages, yada yada yada and just because I don't know jQuery I'm suddently a numpty.

    Can't wait for my plan B to take off.

    Leave a comment:

  • HairyArsedBloke
    replied
    Like this?

    Leave a comment:

  • Ardesco
    replied
    http://jquery.com

    just need some basic css and use a bit of jQuery to hide/display the tab. numpty stuff tbh, what was your specialism again...

    Leave a comment:

  • suityou01
    started a topic HTML tabs with no round trip to server

    HTML tabs with no round trip to server

    I'm looking for some code to do html tabs. Easy enough to do with CSS, but I don't want a round trip with every tab click. Rather I would like the tabs to display the relevant content without doing a round trip, possibly with some client side java script to say, hide a panel and display the next panel.

    Anyone got any linkys. Googled but got nuttin.
    Tags: None

Advertisers

  1. Contracting
    1. General
      1. Brexit
    2. Business / Contracts
      1. Coronavirus Assistance
    3. Accounting / Legal
      1. Umbrella Companies
      2. HMRC Scheme Enquiries
      3. The Future of Contracting
      4. IR35 Reform
    4. Technical
    5. Welcome / FAQs
  2. Social
    1. Light Relief
    2. Social / Events
Working...
X