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.

Pages: (2) 1 2  ( Go to first unread post ) Add ReplyNew TopicNew Poll

 Mini Profiles and Tabs
#
What is "Tav's code", and do you have a live page with it?
PM
#
Sorry for the delay! Okay here's the live page: here

And this should be the coding:

Javascript:
CODE
//  Script by TAV of Jcink Forums

$(document).ready(function(){
//  When user clicks on tab, this code will be executed
$("#mp-tabs li").click(function() {

  //  First, which miniprofile are we in?
  currentprofile = $(this).parent().parent().parent().parent().parent().parent();

  //  Then, remove class "active" from currently active tab
  $("#mp-tabs li", currentprofile).removeClass('mp-active');

  //  Now add class "active" to the selected/clicked tab
  $(this).addClass("mp-active");

  //  Hide all tab content
  $(".mp-tab_content", currentprofile).hide();

  //  Here we get the href value of the selected tab
  var selected_tab = $(this).find("a").attr("href");

  //  Show the selected tab content
  $(selected_tab, currentprofile).fadeIn();

  //  At the end, we add return false so that the click on the link is not executed
  return false;
});
});</script>


And the mini profile part of it:
CODE
<center><div class="miniprofile"><div class="mp-name"><!-- |name| --></div><div class="mp-species"><!-- |g_title| --></div><div id='mp-tabs_container'><ul id='mp-tabs'><li class='mp-active'><a href='#1272TAB1'>I.</a></li><li><a href='#1272TAB2'>II.</a></li><li><a href='#1272TAB3'>III.</a></li></ul></div><div id='mp-tabs_content_container'><div id='1272TAB1' class='mp-tab_content' style='display: block;'><div class="mp-avatar"><!-- |avatar| --></div></div><div id='1272TAB2' class='mp-tab_content'><div class="mp-box">
Tab one info</div></div><div id='1272TAB3' class='mp-tab_content'> <div class="mp-box">Tab two awards and stuff
</div></div></div></center>


Let me know if you need the CSS part of it.
PM
#
All you actually need to do is change the IDs to classes, but if it's alright with you, I'd like to rewrite that script and markup later today.
PM
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

OptionsPages: (2) 1 2  Add ReplyNew TopicNew Poll