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.

  Add ReplyNew TopicNew Poll

 Hiding "No Information" fields and other things with it
#
Okay so, I'm in the middle of making a new profile template for my sit. I've hit a snag in my js, because of course I would. Ahah.

Instead of just hiding the field that contains "No Information" I'm looking to hide that specific tab and the corresponding list element in the tab strip area. So if I haven't filled out the "Other" section of my profile, the user can't even see that the field is there. (#dir6 and #dirtab6-content, using that example)

Profile with all related fields as empty/"No Information"
Profile with the first two tabs filled in and the rest blank

And here's the relevant bits of coding.
CODE
       <div id="dirtabs">
           <center>
               <ul id='dirtab-strip'>
                   <li id='dir1' class='clickable'>Appearance</li>
                   <li id='dir2' class='clickable'>Personality</li>
                   <li id='dir3' class='clickable'>History</li>
                   <li id='dir4' class='clickable'>Family</li>
                   <li id='dir5' class='clickable'>Abilities</li>
                   <li id='dir6' class='clickable'>Other</li>
               </ul>
           </center>
           <div id='dirtabtabs'>
               <div id='dir1-content' class='tab-content'><div class="maintitle">Appearance</div><br /><!-- |field_10| --></div>
               <div id='dir2-content' class='tab-content'><div class="maintitle">Personality</div><br /><!-- |field_11| --></div>
               <div id='dir3-content' class='tab-content'><div class="maintitle">History</div><br /><!-- |field_12| --></div>
               <div id='dir4-content' class='tab-content'><div class="maintitle">Family & Relationships</div><br /><!-- |field_13| --></div>
               <div id='dir5-content' class='tab-content'><div class="maintitle">Powers & Abilities</div><br /><!-- |field_14| --></div>
               <div id='dir6-content' class='tab-content'><div class="maintitle">Other Information</div><br /><!-- |field_15| --></div>
           </div>
       </div>


And the js I'm attempting to get working. The console logs show that I'm getting the correct IDs, I just can't seem to figure out how to alter their CSS styles to "display: none;" My if statement also won't target the tabs that contain "No Information" (and I'm unsure of the syntax after scouring stack overflow/MDN) and when I leave the last two lines in the code, it winds up hiding my entire #dirtab-strip (and all the actual tabs aside from the first). As noted previously, the console log for that section is outputting the correct IDs.

CODE
<script>
   var contents = document.getElementById('dirtabtabs');
   var tabs = document.getElementById('dirtab-strip');
   for (var i = 0; i < contents.children.length; i++) {
       console.log(i + ": " + contents.children[i].id + " and " + tabs.children[i].id);
       if ($('contents.children[i].contains("No Information")')) {
           var c = document.getElementById(contents.children[i].id);
           var t = document.getElementById(tabs.children[i].id);
           console.log(c.id + " and " + t.id);
           document.getElementById(c.id).style.display = "none";
           document.getElementById(t.id).style.display = "none";
       }
   }
</script>
PM
#
Try this instead:
CODE
<script type="text/javascript">
$('div.tab-content i').each(function() {
   if ($(this).text().match('No Information')) {
       $(this).parent('div.tab-content').hide();
       $('#' + $(this).parent('div.tab-content').attr('id').split('-content')[0]).hide();
   }
});
</script>

signature
user posted image
#
Modified slightly so that the tabbed area only shows for the non-OOC accounts as well. (so anything without a parent_id attached in my case) and it works perfectly.

Thank you!
PM
0 User(s) are reading this topic (0 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

Options Add ReplyNew TopicNew Poll