Page 1 of 1

Facebooks "Tab" functionality

Posted: Thu Nov 26, 2009 8:04 am
by ems.customer
I want to implement Facebooks "Tab" functionality to add modules dynamically
Anybody has idea How to implement it ??

I basically want How the div structure will be and css help

Re: Facebooks "Tab" functionality

Posted: Fri Nov 27, 2009 7:57 pm
by BlaineSch
It's javascript basically. You'd have your tabbed looking links at the top but those would basically just call a function, the function would switch the image or color of the one clicked and the one that was clicked before hand to look like the others, hide the current div box and unhide the one you selected. I'd probably just switch classes of everything that would be the easiest.

Code: Select all

<html><head><title>BlaineSch.com</title><style>    a.selected {        display:block;        border: 2px 2px 2px 2px;        padding:10px;        background: #546c9b;        width:50px;        float:left;    }    a.unselected {        display:block;        border: 2px 2px 2px 2px;        padding:10px;        background: #7e89a1;        width:50px;        float:left;    }    div.selected {        margin: 30px 0px 0px 0px;        display:block;        border: 2px 2px 2px 2px;        padding:10px;        background: #9fadc9;    }    div.unselected {        display:none;    }</style><script>    function switchey(a, b) {        var links = document.getElementsByTagName("a");         for (var i = 0; i < links.length; i++) {             if(links[i].className=="selected") {                links[i].className = "unselected";            }        }        var boxes = document.getElementsByTagName("div");         for (var i = 0; i < boxes.length; i++) {             if(boxes[i].className=="selected") {                boxes[i].className = "unselected";            }        }        document.getElementById(a).className="selected";        document.getElementById(b).className="selected";    }</script></head><body><a class="selected" id="home" href="javascript&#058;switchey('home', 'home1');">Home</a><a class="unselected" id="wall" href="javascript&#058;switchey('wall', 'wall1');">Wall</a><a class="unselected" id="info" href="javascript&#058;switchey('info', 'info1');">Info</a><br /><div class="selected" id="home1">This is the homepage information :)</div><div class="unselected" id="wall1">This is the wall information :)</div><div class="unselected" id="info1">This is the info information :)</div></body></html>