Widget:TestTabs
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"></script> <style>
- charPanel button {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
color: #fff;
background-color: #b36e14;
border-color: #9c6011;
display: inline-block;
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 {
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; } 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>)
- Campaign (<a class="link" onclick="filter('s1c1-')">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);
for(var i = 0; i < series1.length; i++){ var keywords = ""; for(var j = 0; j < series1[i].keywords.length; j++){ keywords = keywords + " " + series1[i].keywords[j]; } keywords = keywords.substring(1);
$("div#charHolder").append("
");
}
$("div#charPanel").prepend('<input type="text" id="filter" style="float:right;" onkeyup="charFilter()" placeholder="Search...">
');
$("#filter").before("<button id='nametoggle' style='float:left;' 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) $(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');
}
} }
function loadOther(){ for(var i = 0; i < series1.length; i++){ var campaigns = ""; for(var j = 0; j < series1[i].campaigns.length; j++){ campaigns = campaigns + " " + series1[i].campaigns[j]; } campaigns = campaigns.substring(1); if(campaigns.indexOf("s1c") == -1){
$("div#charHolder").append("
");
} } }
</script>
