Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Tradeskill Widget
Nivo007 (New Admin) 2/16/2011 12:54 PM EST : Tradeskill Widget
Nivo007
Posts: 54
Posts With Wolves

Hey again guys,

I'm currently looking for a way to flash-up our trade-skill widget. I had a quick look around Mottie's site to see if there was anything, but didn't see much relating to it.

I'm not so good with CSS, so figured here would be the best place to ask

Would it be possible to have it so that the skill headings operate as buttons, and the members with that skill expand/collapse on click? Just something that stops it taking over the page when lots of people have entered their details would be great.

Thanks in advance

Nivo007
TopBottom

Mottie (MVP) 2/19/2011 10:32 AM EST : RE: Tradeskill Widget
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Nivo007!

Well I wouldn't call this flashy, but it scrunches up the list and opens when clicked.

Tradeskill Widget Smushing

Before After

Add the following code to a hidden Free Form Text/HTML widget (code to hide it) on the same page as the trade widget.

Code
<style type="text/css">
 .ts-indicator { display: inline-block; float: right; cursor: pointer; }
</style>
<script type="text/javascript">
$(document).ready(function(){
 var ts = $('.gpWidget-tradeskills');
 if (ts.length){
  ts.find('.StyledListHeader')
   .append('<span class="ts-indicator">[<span class="ts-status">-</span>]</span>').parent()
   .addClass('StyledListHeaderRow')
   .click(function(){
    var rows = $(this).nextUntil('.StyledListHeaderRow').toggle();
    $(this).find('.ts-status').html( rows.is(':hidden') ? '-' : '+' );
   })
   .nextUntil('.StyledListHeaderRow').hide();
 }
});
</script>
Customizing

There are no custom settings.
TopBottom

Nivo007 (New Admin) 2/21/2011 11:24 AM EST : RE: Tradeskill Widget
Nivo007
Posts: 54
Posts With Wolves

Thanks Mottie, works a treat!
TopBottom

Valdaglerion (Guild Admin) 11/27/2011 12:33 AM EST : RE: Tradeskill Widget
Valdaglerion
Posts: 2473
Zomgawsh Poster

If I use the code as is, it shows the "-" symbol next to an expandable category to begine with, then changes to a plus sign after I expand it.  That's backwards.  Typically, expandable items in Windows or on the web are indicated with the + and can be collapsed with the "-".

I tried swapping the two symbols in the script and something strange happened.  The widget still stats collapsed with the minus  "-" symbol next to each category.  When expanded, the "-" symbol remains and it doesn't turn to a plus until collapsed again.
TopBottom

nkitch77 (New Admin) 11/28/2011 5:37 AM EST : RE: Tradeskill Widget
nkitch77
Posts: 143
Posts With Wolves

Nice mod makes things a lot tidier, thanks
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%