Widget:CharacterList

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"></script> <style>

1. charPanel button {

       float:left;
       padding: 5px 10px;
       font-size: 12px;
       line-height: 1.5;
       border-radius: 3px;
       color: #fff;
       background-color: #b36e14;
       border-color: #9c6011;
       margin-bottom: 0;
       font-weight: normal;
       text-align: center;
       vertical-align: middle;
       touch-action: manipulation;
       cursor: pointer;
       background-image: none;
       border: 1px solid transparent;
       white-space: nowrap;
   }

div.charBox {

       display: inline-block;
   padding: 3px;
   position: relative;
   width: calc((100% / 6) - 3px);
   border: 2px solid rgba(0,0,0,0.0);
   filter:  opacity(70%);	
   transition: filter .6s;

border-radius:7px; overflow: hidden;

    margin-bottom:-6px;

} .charBox:hover .charName, .charBox.hovered .charName {

   display: block;

} div#charPanel {

 min-height: 100px;
 text-align: center;
 background: rgba(68,68,68,0.2);
 border-radius: 15px;
 border: 2px solid #8b4513;
 padding: 10px;

}

input#filter {

   float:right;
   width: 200px;
   height: 36px;
   padding: 6px 12px;
   margin-bottom: 8px;
   font-size: 14px;
   line-height: 1.6;
   color: #555555;
   background-color: #fff;
   background-image: none;
   border: 1px solid white;
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
   transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;

}

input#filter:focus {

   border-color: #edad5a;
   outline: 0;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(237, 173, 90, 0.6);

}

div.charBox a{ display: block;

   height: 100%;
   color: #F9E4CA;

} .charBox.hovered {

   filter:  opacity(100%);	

}

.charBox:hover { border-color:#F9E4CA;

   filter:  opacity(100%);	

}

div.charName{

   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   text-align: center;
   font-weight: bold;
   display: none;
   background: rgba(15,15,15,0.7);
   padding: 3px;

font-family: "Cinzel Decorative";

}

div.charBox img { width:150px; }

@media screen and (max-device-width: 768px) { button#nametoggle { display: none !important; } input#filter { float:none; } div.charBox img { width:85px; } div.charBox { width: calc((85% / 6) - 3px); filter: opacity(100%); } div.charName { font-size: 10px; display: block; } } </style>

Quick Reference Search

• Character Names (<a class="link" onclick="filter('Bumbley')">Bumbley</a>)
• Player Names (<a class="link" onclick="filter('Justin')">Justin</a>, <a class="link" onclick="filter('Deadbones')">Deadbones</a>)
• Races (<a class="link" onclick="filter('Elf')">Elf</a>, <a class="link" onclick="filter('Porc')">Porc</a>)
• Classes (<a class="link" onclick="filter('Wizard')">Wizard</a>, <a class="link" onclick="filter('Paladin')">Paladin</a>)
• Status/Attribute (<a class="link" onclick="filter('Ageless')">Ageless</a>, <a class="link" onclick="filter('Believer')">Believer</a>)
• Type (<a class="link" onclick="filter('Minor')">Minor</a>, <a class="link" onclick="filter('Companion')">Companion</a>)
• Campaign (<a class="link" onclick="filter('s1c1-')">Season 1 Campaign 1 - Band of Thieves</a>)
  • NPC Within Campaign (<a class="link" onclick="filter('s1c1-n')">Band of Thieves NPC</a>)
  • Players Within Campaign (<a class="link" onclick="filter('s1c1-p')">Band of Thieves Players</a>)

<img id="loading" height="500" src="/images/4/42/Loading.gif">

<script>

$("#charHolder").hide();

var series1 = [];

var obj = {};

 obj["name"] = "";
 obj["image"] = "";
 obj["link"] = "";
 obj["keywords"] = ;
 series1.push(obj);

var list = []; for(var i = 0; i < series1.length; i++){ var keywords = " "; for(var j = 0; j < series1[i].keywords.length; j++){ if(list.indexOf(series1[i].keywords[j]) < 0){ list.push(series1[i].keywords[j]); } keywords = keywords + " " + series1[i].keywords[j]; } keywords = keywords.substring(1);

$("div#charHolder").append("

<a class='charLink' href='" + series1[i].link +"'> <img src='" + series1[i].image + "'>

" + series1[i].name + "

</a>

");

} console.log(list); $("div#charPanel").prepend('<input type="text" id="filter" onkeyup="charFilter()" placeholder="Search...">

'); $("#filter").before("<button id='nametoggle' onclick='toggleNames(this)'>Toggle Names</button>"); $("#filter").hide(); $("#nametoggle").hide(); /* Default */

$(window).on("load", function() { $("#loading").remove(); $("#charHolder").show(); $("#filter").show(); $("#nametoggle").show();

});

function filter(search) { $("#filter").val(search); charFilter(); } function charFilter() { var filter = $("#filter").val().trim().toLowerCase(); $(".charBox").each(function() { if (filter == ) $(this).show();

               else if ($(this).attr('data-keywords').toLowerCase().indexOf(" " + filter) >= 0){

console.log(filter + "|" + $(this).attr('data-keywords').toLowerCase()) $(this).show();} else $(this).hide(); }); }

function toggleNames(val){ if(val.id = "nametoggle"){

       if($(val).css("background-color") == "rgb(179, 110, 20)"){
           $(".charName").css("display", "block");
           $(".charBox").css('filter', 'opacity(100%)');
           $("#nametoggle").css('background-color', '#89540F');
       } else {
           $(".charName").css("display", "");
           $(".charBox").css("filter", "");
           $("#nametoggle").css('background-color', '#b36e14');
              }

} }

</script>