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.

Aralisse sorry this took longer! Lunch break was short. Most of this (especially the CSS) is your exact coding, so it should drop right in.

Miniprofile template:
CODE
<div class="miniprofile">
   <div class="mp-name">
       <!-- |name| -->
   </div>
   <div class="mp-species">
       <!-- |g_title| -->
   </div>
   <div class='mp-tabs_container'>
       <ul class='mp-tabs'>
           <li class='mp-active'>
               <a tab='1272TAB1'>I.</a>
           </li>
           <li>
               <a tab='1272TAB2'>II.</a>
           </li>
           <li>
               <a tab='1272TAB3'>III.</a>
           </li>
       </ul>
   </div>
   <div class='mp-tabs_content_container'>
       <div class='1272TAB1 mp-tab_content' style='display:block;'>
           <div class="mp-avatar">
               <!-- |avatar| -->
           </div>
       </div>
       <div class='1272TAB2 mp-tab_content'>
           <div class="mp-box">
               Tab one info</div>
       </div>
       <div class='1272TAB3 mp-tab_content'>
           <div class="mp-box">Tab two awards and stuff
           </div>
       </div>
   </div>
</div>


CSS:
CODE
<style>
.miniprofile {
   background-color: #060404;
   margin: 30px auto;
   text-align: center;
   width: 250px;
   height: 400px;
}
.mp-name {
   background-color: #060404;
   color: #CCCCCC;
   padding: 10px 10px 0;
   width: 230px;
}
.mp-species {
   color: #AAAAAA;
   display: inline-block;
   font-family: calibri;
   font-size: 9px;
   font-weight: normal;
   letter-spacing: 2px;
   line-height: 150%;
   position: relative;
   text-transform: uppercase;
   top: -5px;
}
.mp-tabs {
   background-color: #060404;
   list-style: none;
   margin: 0;
   padding: 0 0 12px;
   width: 250px;
}
.mp-tabs li.mp-active {
   -webkit-transition: 0.8s;
   background-color: #151515;
   transition: 0.8s;
}
.mp-tabs li {
   background-color: #1A1A1A;
   display: inline-block;
   font-family: calibri;
   font-size: 8px;
   line-height: 100%;
   margin: 0;
   padding: 2px;
   cursor: pointer;
}
.mp-tabs li a {
   color: #CCCCCC;
   display: inline-block;
   width: 40px;
}
.mp-tabs_content_container {
   background-color: #060404;
}
.mp-avatar {
   background-image: url(http://placehold.it/250x400);
   height: 400px;
   width: 250px;
}
.mp-box {
   color: #CCCCCC;
   height: 360px;
   padding: 20px;
   position: relative;
   width: 210px;
}
.mp-tab_content {
display: none;
}
</style>


Jquery (goes in the wrapper):
CODE
<script>
   $('.mp-tabs li').click(function() {
       $(this).addClass('mp-active').siblings().removeClass('mp-active')
       $(this).parents('.miniprofile').find('.' + $(this).children().attr('tab')).fadeIn().siblings().hide()
   })
</script>


This post has been edited by Dusty: Today at 02:05 am
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