Phantom of the Black Parade
|
Post by Kuroya on Feb 28, 2015 7:04:58 GMT -8
I've been wrestling with installing this tabbed content fun, and long story short... something's not quite adding up. As you can see here, when you click on the tabbing, none of it seems to work. I've tried removing it and starting from scratch with no dice. I've just finally reached the point where I think I need skinning tech support.
To avoid slowly murdering the most recent posts with length, I'm going to include my coding in spoilers.
Forum Wrapper
<!DOCTYPE HTML> $[tag.html.open] <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>$[title] | $[forum.name]</title> $[head] </head> <body> {if $[maintenance_mode]} <div class="maintenance-header"> {if $[can.disable_maintenance]}<p>Finished with maintenance? $[disable_maintenance_link].</p>{/if} </div> {/if} <div id="wrapper"> <header> <div class="tophead" align="center"> <table width="90%"><tr> <td width="75%" align="right"><div class="thtittle">divine trinity academy</div> <div class="thsubtittle">an original pokemon roleplay</div></td> <td width="5%"></td> <td align="left"><div class="thicon">$[current_user.avatar]</div> <div class="thuser">{if $[current_user.is_guest]}Visiting Stranger{else}$[current_user.name]{/if}</div></td> </tr></table> </div> <div class="toplinks" align="center"> <table width="90%" role="navigation-menu"><tr> {foreach $[navigation.menu]} <td class="navlinkk"><a href="$[navigation.menu.href]"> $[navigation.menu.name] </a></td> {/foreach} {if $[current_user.is_member]} <td class="navlinkk"><a href="$[logout_link.href]"> Logout </a></td> {else} <td class="navlinkk"><a href="$[login_link.href]"> Login </a></td> <td class="navlinkk"><a href="$[register_link.href]"> Register </a></td> {/if} </tr></table> </div> <div class="topbanner" align="center"> <div class='dem-tabs'> <table width="80%"><tr><td width="20%"> <ul id='tabb-strip'> <li id='tabb1' class='clickabble'>Tab 1</li> <li id='tabb2' class='clickabble'>Tab 2</li> <li id='tabb3' class='clickabble'>Tab 3</li> <li id='tabb4' class='clickabble'>Tab 4</li> </ul> </td> <td width="5%"></td> <td> <div class="tabbs"> <div id='tabb1-content' class='tabb-content'>Hi from tab 1<br>How do you do</div> <div id='tabb2-content' class='tabb-content'>Hi from tab 2<br>Testing, testing, 1 2 3</div> <div id='tabb3-content' class='tabb-content'>Hi from tab 3<br>This is the second line</div> <div id='tabb4-content' class='tabb-content'>Hi from tab 4<br>There is no place I'd rather be, than on my surfboard out at sea</div> </div> </td> </tr></table> </div> </div> </header> <div style="width: 90%; margin-left: 5%; margin-right: 5%;"> $[participated_threads_link] {if $[navigation.tree]} <div id="navigation-tree"> $[navigation.tree] </div> {/if} $[header] <div id="content" role="main"> {if $[notice]} <div class="container"> <div class="title-bar"><h2>$[notice.title]</h2></div> <div class="content pad-all cap-bottom"> $[notice.message] </div> </div> {/if} $[content] $[shoutbox] </div> $[footer] </div> <script type="text/javascript"> $( function() { var myTabs = new KISCODE.TabSwitcher( { container: ".dem-tabs", defaultTab: 0, animate: true } ); } ); </script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="http://yourjavascript.com/3715837511/jquery-tab-switcher.min.js"></script> {if $[is_mobile_browser]} <br /><p class="center">Switch to the $[mobile_switch_link].</p> {/if} </div> </body> </html>
All CSS Additions
/* Top Area */ .tophead { width: 100%; background-color: #000000; padding-top: 30px; padding-bottom: 20px; border-bottom: #666666 ridge 10px; align-content: center; }
.thicon { width: 100px; height: 100px; border: 5px solid #ffffff; }
.thuser { font-size: 16pt; font-family: 'calligraffitti'; line-height: 20px; margin-top: 10px; margin-bottom: -10px; text-transform: lowercase; color: #ffffff; margin-left: 10px; }
.thtittle { font-size: 48pt; line-height: 56px; font-family: 'calligraffitti'; color: #ffffff; margin-right: 5%; letter-spacing: 2px; }
.thsubtittle { font-size: 32pt; line-height: 40px; font-family: 'courgette'; color: #ffffff; margin-right: 10%; letter-spacing: 1px; }
.toplinks { width: 100%; background-color: #000000; padding-top: 15px; align-content: center; padding-bottom: 15px; }
.navlinkk { color: #ffffff; margin: 5px; text-align: center; }
.navlinkk a { color: #ffffff; font-size: 18pt; line-height: 20px; font-family: 'courgette'; border: #666666 ridge 5px; }
.topbanner { background-color: #666666; align-content: center; padding-top: 10px; padding-bottom: 10px; }
.thbantitt { width: 100%; font-size: 16pt; line-height: 20pt; text-align: center; font-family: 'courgette'; letter-spacing: 1px; border-bottom: dotted #666666 3px; }
/* Tabbing */ .clickabble { display: inline; width: 100%; font-size: 16pt; line-height: 20pt; text-align: center; font-family: 'courgette'; letter-spacing: 1px; border-bottom: dotted #666666 3px; margin-top: 5px; cursor: pointer; } #tabb-strip li { list-style: none outside none; margin: 0px; padding: 0px; display: block; background-color: #ffffff; } #tabb-strip a { text-decoration: none; } .tabb-content { display: none; } .tabbs { background-color: #ffff00; border: 1px solid #000000; }
.highlight { background-color: #ffff00; }
;~; I don't know what else to do, SKINNING TECH SUPPORT PLEASE HELP.
|
|
the greatest general under the heavens
|
Post by Egao, Egao Everywhere on Feb 28, 2015 20:36:12 GMT -8
That code looks unnecessarily complicated... Try this instead? jsfiddle.net/tbotc/e7kg48c7/Still requires jquery. I tried looking for a javsscript solution, which exists, but is, in comparison to jquery, super long and harder to understand too.
|
|
gloria luciferis in excelsis
|
Post by THE LEVIATHAN on Feb 28, 2015 22:13:59 GMT -8
I've used this before on a proboards skin. Try removing the first jquery script below:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
If I remember correctly from what Proboards Support told me, jquery is already included in Proboards so you don't need that part of the code.
|
|
the greatest general under the heavens
|
Post by Egao, Egao Everywhere on Mar 1, 2015 0:47:45 GMT -8
If I remember correctly from what Proboards Support told me, jquery is already included in Proboards so you don't need that part of the code. Huh, didn't know that. About time they did it though xD
|
|
gloria luciferis in excelsis
|
Post by THE LEVIATHAN on Mar 1, 2015 11:45:38 GMT -8
If I remember correctly from what Proboards Support told me, jquery is already included in Proboards so you don't need that part of the code. Huh, didn't know that. About time they did it though xD Yeah, jQuery is already embedded into the forum according to the admins. I used the same code Kuroya was using for a skin about a year ago and I included the jquery included in the code and it broke the text editor for replies.
|
|
Phantom of the Black Parade
|
Post by Kuroya on Mar 10, 2015 8:05:20 GMT -8
Oops it's been a while, I tend to be really slow about doing skins since it takes me forever to go from motivation pinnacle to motivation pinnacle.
I removed the line for jquery and it didn't fix it.
So I swapped to the one that Egao, Egao Everywhere linked. It's actually a lot easier to work with and it works ten times better, so thanks. c:
|
|
|
Post by Verse on Mar 10, 2015 9:10:31 GMT -8
Ayy not my thread but just wanna throw up a quick thanks to Egao, Egao Everywhere for the code, made my life 100x easier. Thanks!
|
|
the greatest general under the heavens
|
Post by Egao, Egao Everywhere on Mar 10, 2015 16:04:46 GMT -8
Heh. That's really great to hear. I know what it feels like to struggle through codes and not discovering the easier method until the end. So it's great to hear. If you guys have a code help you need, feel free to drop by here. This is the forum I check onto often.
|
|