Attention:

Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
  • Please briefly mark any links to forums that may not be work-safe.
This will help ensure your support issue will be attended to in a quick and efficient manner.

  ClosedNew TopicNew Poll

 Javascript/JQuery in Posts [SOLVED]
#
I am attempting to make a tabbed character bio/profile sheet for use on my RP forum.

The CSS and HTML work fine, but the code controlling my tabs does not function. I'm wondering if part of the problem is that I'm linking to some offsite js files?

I have tried to break up the script tags with DoHtml, but no luck. The inactive tabs aren't hidden, everything just lines up one below the other and breaks the CSS layout.

Forum: The Crossroads RP

Pic of Results: Click Here

CODE

[dohtml]
<link rel="stylesheet" type="text/css" href="http://crossroadsrp.b1.jcink.com/uploads/crossroadsrp/Application_Codes/crossroadsappscript2.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>

[/dohtml][dohtml]<sc[/dohtml][dohtml]ript type="text/javascript">[/dohtml][dohtml]
$(document).ready(function(){
 $(".ui-tabs").tabs();
});[/dohtml][dohtml]
</sc[/dohtml][dohtml]ript>[/dohtml][dohtml]

<div id="newapptablewrap" style="border: solid 5px #009999;">
<table align="center" cellpadding="0" class="applicationTable">
<tr>
<td height="5" colspan="2" align="center" valign="middle">
   <div id="name">
   Firstname Lastname
   </div>
   </td>
   </tr>
 <tr>
   <td width="200" height="215" align="center" valign="middle"><div id="photo" class="grayscale" style="background-image: url(#);"></div></td>
   <td width="300" align="center" valign="middle">
 <table width="250" border="0" align="center" cellspacing="1" class="newapp" style="color:#fff !important;">
         <tr>
           <th width="128" align="left" valign="middle">
           Age:</th>
           <td width="159">##</td>
         </tr>
         <tr>
           <th align="left" valign="middle">Gender:</th>
           <td>M/F</td>
         </tr>
         <tr>
           <th align="left" valign="middle">Orientation:</th>
           <td>??</td>
         </tr>
         <tr>
           <th align="left" valign="middle">Species:</th>
           <td>??</td>
         </tr>
         <tr>
           <th align="left" valign="middle">Height:</th>
           <td>#' #''</td>
         </tr>
         <tr>
           <th align="left" valign="middle">Weight:</th>
           <td>###</td>
         </tr>
         <tr>
           <th align="left" valign="middle">Hair:</th>
           <td>??</td>
         </tr>
         <tr>
           <th align="left" valign="middle">Eyes:</th>
           <td>??</td>
         </tr>
         <tr>
           <th align="left" valign="middle">&nbsp;</th>
           <td>&nbsp;</td>
         </tr>
         <tr>
           <th align="left" valign="middle">Played By:</th>
           <td>??</td>
         </tr>
         <tr>
           <th align="left" valign="middle">Face Claim:</th>
           <td>First Last</td>
         </tr>
       </table>
   </td>
 </tr>
 <tr>
  <td valign="top" colspan="2">  

<div class="ui-tabs">
<ul class="ui-tabs-nav">
 <li><a href="#tabs-1">Description</a></li>
 <li><a href="#tabs-2">Personality</a></li>
 <li><a href="#tabs-3">History</a></li>
 <li><a href="#tabs-4">Strengths</a></li>
       <li><a href="#tabs-5">Weaknesses</a></li>
       <li><a href="#tabs-6">Abilities</a></li>
</ul>
<div id="tabs-1" class="ui-tabs-panel">
 <p>Content one.</p>
</div>
<div id="tabs-2" class="ui-tabs-panel">
 <p>Content two.</p>
</div>
<div id="tabs-3" class="ui-tabs-panel">
 <p>Content three.</p>
</div>
   <div id="tabs-4" class="ui-tabs-panel">
 <p>Content four.</p>
</div>
   <div id="tabs-5" class="ui-tabs-panel">
 <p>Content five.</p>
</div>
   <div id="tabs-6" class="ui-tabs-panel">
 <p>Content six.</p>
</div>
</div>
</td>
</tr>
</table>
</div>
[/dohtml]

signature
user posted image user posted image
PM
#
Js includes in posts aren't really supported. That being said the error may possibly be related to existing use of a tab script within the forum you're posting on itself. I would like a link to a post example to check what the error output is.

signature
email: admin@jcink.com :: blog: John C.
#
For what it's worth, you can make a tabbed doHTML template with only CSS. The trick is knowing that if you click on a label in a form, it will check the associated input (radio is great for tabs). Use CSS to hide the content by default, and show it based on whether the input is checked (input:checked). Hide the inputs by default and style the labels like tabs.

Allowing javascript in doHTML is unsafe, and was a big reason why a lot forum owners didn't use it. I always assumed script tags were filtered out of doHTML, so if it's not working, and you're trying to trick a filter in place by breaking it up, I really can't advise on how to bypass this security measure. I can take over your site (by redirecting users) with under 100 characters using javascript if I have doHTML permissions, or embed it in a template that one of your members might use.

This post has been edited by disco before the breakdown: Feb 23 2016, 06:43 PM
PM
#
The tabbed CSS-only scripts have never worked on my site, unfortunately.

That being said, I was able to continue troubleshooting things myself and got my own code working just fine.

Thanks anyways, guys!

Problem solved.

signature
user posted image user posted image
PM
#
This topic has been solved. If you need anymore help please post a new thread. Thanks for choosing Jcink services.

signature
email: admin@jcink.com :: blog: John C.
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

Options ClosedNew TopicNew Poll