Post by Water Crystals on Jan 21, 2019 20:30:35 GMT -8
I've been working on modifying the mini-profiles on my site and have gotten a bit stuck. A lot of this code is still beyond me and I had to research to try to figure it all out. So I've made it this far but now I have no idea how to fix the things I'm having problems with. Any help would be greatly appreciated.
The concept: add tabs to the mini profile that stores all the info into three categories. First tab shows as default, and the others can be clicked on to reveal the info (I'll be using it for skills exp, class grades, and various other RP stuff).
What I'd like to fix/change:
How it looks right now:
My mini-profile layout template:
Sorry this post is so long, just wanted to be thorough. Of course, let me know if you have any questions or need any other code. I've gotten as far as I can on my own with this at my current code knowledge or research ability, but please keep in mind I need specific instructions on where to put things or whatnot. A lot of this still goes over my head.
The concept: add tabs to the mini profile that stores all the info into three categories. First tab shows as default, and the others can be clicked on to reveal the info (I'll be using it for skills exp, class grades, and various other RP stuff).
What I'd like to fix/change:
- Don't want it to show for staff. Just the standard avatar and whatever info's there for them, if possible. They have no use for the modifications at all.
- I have no idea how to sort custom profile fields into the 2nd and 3rd tabs. So far I have all of them showing in the 2nd tab but I want to pick and choose which go in the 2nd and which go in 3rd. I've tried to work it out, but don't know how to target a specific field and make only it show where I want.
- Is it possible to assign the tab container a set background colour or image depending what group a member is in? I'm thinking for the 4 Hogwarts houses (though there's 7 groups for each house). This is a very minor thing, but thought I may as well ask. Otherwise, how do I change the background at all? (Clarification: of the tab's content boxes only, not the whole mini-profile itself).
- When clicking on a tab, there's an animation involved (I didn't do that code bit entirely, had to google for it) and I don't want that cuz it 's not efficient. I want to click on a tab and boom it's there. I don't like how it "unravels" or slides down. Then if there's a lot of info, it stretches the whole post - is it possible to set a max height and add a scrollbar if that's exceeded?
How it looks right now:
My mini-profile layout template:
<div class="$[miniprofile_class]"><center>
$[user]<br />
{if $[user.is_guest]}Guest<br />{/if}
{if $[user.is_deleted]}<em>Deleted Member</em><br />{/if}
{if $[user.group]}
$[user.group.name]<br />$[user.group.stars]<br />
{elseif $[user.rank]}
$[user.rank.name]<br />
{if $[user.rank.stars]}
$[user.rank.stars]<br />
{/if}
{/if}
{if $[user.custom_title]}$[user.custom_title]<br />{/if}
$[user.warning.bar]
<br />
{if $[user.is_member]}
<div id="tabs_container">
<ul id="tabs">
<li class="active"><a href="#$[user.id]tab1">Main</a></li>
<li><a href="#$[user.id]tab2">Info</a></li>
<li><a href="#$[user.id]tab3">Student</a></li>
</ul>
</div>
<div id="tabs_content_container">
<div id="$[user.id]tab1" class="tab_content" style="display: block;">
{if $[user.avatar]}
<div class="avatar">$[user.avatar]</div><br />
{/if}
{if $[user.personal_text.message]}
$[user.personal_text]
{/if}
<span style="font-weight: bold;" class="money_text"></span><span class="money_symbol"></span><span class="money_amount"></span><br />
<span style="font-weight: bold;" class="headings">Posts:</span> $[user.posts]
{if $[user.is_online]}<br /><span class="italic">Member is Online</span>{/if}
</div>
<div id="$[user.id]tab2" class="tab_content">
<div class="Info">
{foreach $[user.mini_custom_field]}
<br /><span class="$[user.mini_custom_field.content_class]"> <span style="font-weight: bold;" class="headings">$[user.mini_custom_field.name]:</span> $[user.mini_custom_field.value]</span>
{/foreach}
</div><br />
{/if}
</div>
</div><br />
<script type='text/javascript'>
$(document).ready(function(){
$("#tabs li").click(function() {
currentprofile = $(this).parent().parent().parent().parent().parent().parent();
$("#tabs li", currentprofile).removeClass('active');
$(this).addClass("active");
$(".tab_content", currentprofile).hide();
var selected_tab = $(this).find("a").attr("href");
$(selected_tab, currentprofile).fadeIn();
return false;
});
});
</script>
Sorry this post is so long, just wanted to be thorough. Of course, let me know if you have any questions or need any other code. I've gotten as far as I can on my own with this at my current code knowledge or research ability, but please keep in mind I need specific instructions on where to put things or whatnot. A lot of this still goes over my head.
Attachments:
