[hr][hr][hr] [align=center] [color=gray]Original Title : Tab Content Credit : [url=http://www.dynamicdrive.com/]Dynamic Drive[/url] [b]FTalk Members[/b] Edited By : Andha[/color] [/align] [hr][hr][hr] [table][tr][td][b]Description[/b][/td][/tr][/table] This trick allows u to put many contents (eg : mp3 player, slide show, chat box, etc) in one box. I'll only share the main tutorial. U guys can develop it with ur own way. [table][tr][td][b]Requirements[/b][/td][/tr][/table] [li]Patient.[/li] [li]JS external.[/li] [li]addBox function.[/li] [table][tr][td][b]Tutorial[/b][/td][/tr][/table] 1. [url=http://www.ziddu.com/download/1905154/tabcontent.txt.html]Download[/url] the js file. Then upload it in your web hosting. 2. Put this js injection in ur main js external to call the js file that have been uploaded just now. [quote]var myjs = document.createElement("script"); myjs.type = "text/javascript"; myjs.src = "[b]URL of JS FILE[/b]"; document.getElementsByTagName("head")[0].appendChild(myjs);[/quote] 3. Put this code in ur main js external ([color=red][b]inside the OnLoadHandler[/b][/color]) [spoiler]var content1 = "[color=green][b]CODE OF 1st CONTENT[/b][/color]"; var content2 = "[color=blue][b]CODE OF 2nd CONTENT[/b][/color]"; var content3 = "[color=darkblue][b]CODE OF 3rd CONTENT[/b][/color]"; var multicontent = "<ul id='countrytabs' class='shadetabs'>"+ "<li><a href='#' rel='country1' class='selected'>[color=green][b]TITLE OF 1st CONTENT[/b][/color]</a></li>"+ "<li><a href='#' rel='country2'>[color=blue][b]TITLE OF 2nd CONTENT[/b][/color]</a></li>"+ "<li><a href='#' rel='country3'>[color=darkblue][b]TITLE OF 3rd CONTENT[/b][/color]</a></li>"+ "</ul>"+ "<center><div style='border:1px solid gray; width:450px; -moz-border-radius: 10px!important; margin-bottom: 1em; padding: 10px'>"+ "<div id='country1' class='tabcontent'>"+content1+"</div>"+ "<div id='country2' class='tabcontent'>"+content2+"</div>"+ "<div id='country3' class='tabcontent'>"+content3+"</div>"+ "</div></center>"; [color=purple][b]addBox("RIGHT","TITLE OF THE BOX",multicontent,"multicontent","6");[/b][/color] var countries=new ddtabcontent("countrytabs") countries.setpersist(true) countries.setselectedClassTarget("link") //"link" or "linkparent" countries.init()[/spoiler] [quote][color=red][b]Important ![/b][/color] [li]Contents in html format (similar with addBox contents).[/li] [li]Match the [color=purple][b]addBox[/b][/color] function with the one in ur main js external file.[/li][/quote] 4. Put the below code in ur css external. [spoiler]/* ######### CSS for Shade Tabs ######### */ .shadetabs{ width: 450px; height: 45px; padding: 3px 0; margin-left: 10px; margin-top: 1px; margin-bottom: 0; font: bold 12px Verdana; list-style-type: none; text-align: left; /*set to left, center, or right to align the menu as desired*/ } .shadetabs li{ width: 100px; height: 45px; display: inline; margin: 0; } .shadetabs li a{ width: 100px; height: 45px; text-decoration: none; position: relative; border: none; color: #2d2b2b; } .shadetabs li a:visited{ height: 45px; color: #2d2b2b; } .shadetabs li a:hover{ height: 45px; text-decoration: underline; color: #2d2b2b; } .shadetabs li a.selected{ /*selected main tab style */ height: 45px; position: relative; top: 1px; } .shadetabs li a.selected{ /*selected main tab style */ width: 100px; height: 45px; border-bottom-color: white; } .shadetabs li a.selected:hover{ /*selected main tab style */ height: 45px; text-decoration: none; } .tabcontent{ display:none; } @media print { .tabcontent { display:block !important; } }[/spoiler] [table][tr][td][b]Preview[/b][/td][/tr][/table] [img]http://img353.imageshack.us/img353/844/screenshotus8.png[/img] [li][url=http://profiles.friendster.com/andhamood]Andha's Preview Profile[/url][/li] [hr][hr][hr] [align=center] [flash=250x50]http://si-andha.web44.net/for_friendster/flash/siggy.swf[/flash] [/align] [hr][hr][hr]

Last edited by andHa (2008-08-25 19:50:26)