Making a Tabs Comment Will make your comments more compact, by putting it in a separate tab for each comment. [b][update 20-09-2008][/b] Adding optOwnBox option, so you can put your Public Comments inside your own box [spoiler][b][update 13-09-2008][/b] Adding How to make your own Tab Image How to put your HTML string [b][update 11-09-2008][/b] Fixing so that IE user can use it Forgot to put var arrTabsComments in the codes at my prev update Already tested locally for IE, if anyone already test this online. Please share the result [b][update 09-09-2008][/b] JS Codes : Function changes, adding Effect Options, n Duration Options CSS Codes : Nothing Changes[/spoiler] [b]Credits:[/b] tekfatliu, [color=skyblue]Moo[/color]Tools [b]Live preview:[/b] -- [url=http://profiles.friendster.com/50738231]Profile Tester[/url] [quote][b]Usage:[/b] var strMyTCLayout = "Your HTML string"; var arrTabsComments = []; tflTabsComment(arrTabsComments,strMyTCLayout,[optEffect],[optDuration],[optOwnBox]);[/quote] optEffect = [b]'slide'[/b] atau 'fade' optDuration = number (500, [b]1000[/b], 1500, ...) optOwnBox = [b]'18'[/b] or Box ID from your addBox(..) function [b]Bold[/b] == Default Options If you're using own box, make sure you call addBox() before tflTabsComment() [quote]addBox("RIGHT","BoxHeader","Box Content","[b]MyBoxID[/b]","2"); var strMyTCLayout = ""; var arrTabsComments = []; tflTabsComment(arrTabsComments,strMyTCLayout,'fade',1500,'[b]MyBoxID[/b]');[/quote] [b]Ex:[/b] tflTabsComment(arrTabsComments,strMyTCLayout); - Effect 'slide', duration 1000 tflTabsComment(arrTabsComments,strMyTCLayout,'fade'); - Effect 'fade', duration 1000 tflTabsComment(arrTabsComments,strMyTCLayout,'fade', 1500); - Effect 'fade', duration 1500 tflTabsComment(arrTabsComments,strMyTCLayout,'', 1500,'MyBoxID'); [b]Incorrect:[/b]: tflTabsComment(arrTabsComments,strMyTCLayout,, 1500); [b]Correct:[/b] tflTabsComment(arrTabsComments,strMyTCLayout, [b]""[/b], 1500); [b]JS Codes:[/b] <">[b]CSS Codes:[/b] <">[hr] How to make your own Tab Image: [spoiler]Tab Image file must size [b]35x75px[/b]. The image that we seen on public comments, sizing 35x25px. The trick is to slide the position of the image up n down. Which can be seen from CSS Codes. [quote].tfltpwrapper li a{ background-position: left [b]bottom[/b] .tfltpwrapper li a:hover{ background-position: left [b]top[/b] .tfltpwrapper li a.selected{ background-position: left [b]center[/b][/quote] [img]http://tekfatliu.web44.net/FS/images/3dtabxexp.gif[/img] Make 3 transparent GIF files size 35x25px. Make a rounded rectangle so it looks like a tab. Color each file according the status of your tab. Then make one transparent GIF file size 35x75px, Copy n Paste 3 files before, arrange all these files vertically, like this: Tab Image Status [img]http://tekfatliu.web44.net/FS/images/3dtabxexpfin.gif[/img] Finished, upload to your server. Don't forget to [b]change[/b] the [b]URL[/b] of CSS. [quote]... background-image: url("http://tekfatliu.web44.net/FS/images/3dtabx.gif"); //replace with background-image: url("[b]URL of your Tab Image[/b]"); ...[/quote] This are 2 ready to use Tab Image: -- [url=http://tekfatliu.web44.net/FS/images/3dtabx.gif]Tab Image[/url] -- [url=http://tekfatliu.web44.net/FS/images/3dtabx1.gif]Tab Image[/url][/spoiler] How to put your HTML string in var strMyTCLayout: [spoiler][quote]var strMyTCLayout= "<table align='center'><tr><td width='150px'bgcolor='#C8E458'><div align='center'>[color=red]Insert your HTML here[/color]</div></td><td width='300px'><div style='text-align:center'>[color=blue]Insert your HTML here[/color]</div></td></tr></table>";[/quote] You can make your own layout using HTML editor like Dreamweaver. But here i already prepared one for you, a table with 2 columns. Change red color n blue color text with your HTML string. [color=red]Red[/color] for left side column [color=blue]Blue[/color] for right side column One thing to remember, don't use double quote [color=red][b]"[/b][/color] in your HTML string. Like when you writing an URL: <img src =[color=red][b]"[/b][/color]http://...[color=red][b]"[/b][/color]> Instead use single quote [b]'[/b] or backslash double quote[b]\"[/b] <img src =[b]'[/b]http://...[b]'[/b]>[/spoiler] Script issues, questions, ideas & suggestions please post a reply Thanks.

Last edited by tekfatliu (2008-10-18 04:54:19)