Widget:CharacterList
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"></script>
<style>
- chars a img.thumbborder {
border: none;
}
- chars a:hover img.thumbborder {
-webkit-filter: grayscale(50%) brightness(50%); filter: grayscale(70%) brightness(50%) blur(2px);
-webkit-transition : -webkit-filter 250ms linear; transition: filter 250ms linear;
}
- chars a:hover .tcont{
opacity: 1;
transition: opacity 250ms linear;
}
- chars a:hover
{
text-decoration: none;
} div#chars .tcont{ position: relative; opacity: 0; color:white; font-family: Cinzel Decorative; font-weight: bold; font-size: 14px; display: inline-block; width: 140px; top: -90px; left: 6px; text-align: center;
}
- chars a {
display: inline-grid; max-width: 150px; max-height: 150px; margin-right: 20px; margin-left:30px; margin-bottom: 30px;
} div#filter{ border: 3px solid #dddddd; border-radius: 200px; overflow: hidden; display: block; }
div#chars { text-align: center; } div#chars #breaker { text-align: left; text-size: 18px; text-weight: bold; }
- breaker {
display: block; text-align:left; font-size: 20px; font-weight: bold; padding: 5px; }
- charSelect {
border: 1px solid #000;
font-size: 14px; color: #fff; background: #444; padding: 2px; position: relative; width: 220px;
}
- charTitle{
display: inline-block; text-align:center; font-size: 24px; font-weight: bold; width: 58%; } </style>
<script>
window.addEventListener('load',
function() {
$("#chars img.thumbborder").wrap("
");
$("div#filter").each(function(){ $(this).after("" + $(this).parent("a").attr("title") +"")});
$("#chars img").each(function() { var text = $(this).attr("class"); text = text.substring(0, text.indexOf(" ")); $(this).parent().parent().attr("class", text); });
$("span.tcont").each(function() { if($(this).height() >= 44 && $(this).height() < 67){ $(this).parent().css("position", "relative"); $(this).css("top", "-100px"); } if($(this).height() >= 67){ $(this).parent().css("position", "relative"); $(this).css("top", "-110px"); } });
var classList = []; $("div#chars a").each(function() { var val = $(this).attr("class"); val = val.substring(0, val.indexOf("-")); if(classList.indexOf(val) < 0){ classList.push(val); } });
var charList = []; $("span.tcont").each(function() { if(charList.indexOf($(this).text()) < 0){ charList.push($(this).text()); } });
var s1List = []; $("div#chars a").each(function() { if($(this).attr("class").startsWith("s1")){ if(s1List.indexOf($(this).find("span.tcont").text()) < 0){ s1List.push($(this).find("span.tcont").text()); } } });
var s2List = []; $("div#chars a").each(function() { if($(this).attr("class").startsWith("s2")){ if(s2List.indexOf($(this).find("span.tcont").text()) < 0){ s2List.push($(this).find("span.tcont").text()); } } });
$("div#chars").before("<select id='charSelect'> <option>Season 1 Characters</option> <option>Season 2 Characters</option> <option>All Characters</option> <option>Band of Thieves</option> <option>Porc Hunters</option> <option>The Jewel of the Dingo Isles</option> <option>The Many Gobos of Pat</option> <option>The Sunswords</option> <option>The Unseen Rogues</option> <option>Kobold Headhunters</option> <option>Zarlin Catacombs</option> <option>The New Crew</option> <option>Silvermine Mountains</option> <option>Woodcarvers</option> <option>Okagnoma Guild Hall</option> <option>Murder Bros</option> <option>The Cobblers</option> <option>The Tower of Ultimate Wizardry: Chapter One</option> <option>Unexpected Discovery</option> <option>Buckeroos</option> <option>Fall of Dundinborough</option> <option>Den of Devils</option> <option>The Skeleton King</option> </select>");
/*Default*/ $("div#chars a").hide(); $("span#breaker").remove(); $("#charTitle").remove(); for(var i = 0; i < s1List.length; i++){ $("span.tcont:contains('" + s1List[i] + "')").parent("[class*='s1c']:first").show(); } $("#charSelect").after("Season 1 Characters");
$("select#charSelect").change(function () { $("div#chars a").hide(); $("span#breaker").remove(); $("#charTitle").remove(); $("#charSelect").after("" + $(this).val() + ""); if($(this).val() == "All Characters"){ for(var i = 0; i < charList.length; i++){ $("span.tcont:contains('" + charList[i] + "'):first").parent().show(); } } if($(this).val() == "Season 1 Characters"){ for(var i = 0; i < s1List.length; i++){ $("span.tcont:contains('" + s1List[i] + "')").parent("[class*='s1c']:first").show(); } } if($(this).val() == "Season 2 Characters"){ for(var i = 0; i < s2List.length; i++){ $("span.tcont:contains('" + s2List[i] + "')").parent("[class*='s2c']:first").show(); } } if($(this).val() == "Band of Thieves"){ $("div#chars a").hide(); $("div#chars a[class*='s1c1-']").show(); $("span#breaker").remove(); $("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters"); $("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters"); } if($(this).val() == "Porc Hunters"){ $("div#chars a").hide(); $("div#chars a[class*='s1c2-']").show(); $("span#breaker").remove(); $("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters"); $("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters"); } if($(this).val() == "The Jewel of the Dingo Isles"){ $("div#chars a").hide(); $("div#chars a[class*='s1c3-']").show(); $("span#breaker").remove(); $("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters"); $("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters"); } if($(this).val() == "The Many Gobos of Pat"){ $("div#chars a").hide(); $("div#chars a[class*='s1c4-']").show(); $("span#breaker").remove(); $("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters"); $("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters"); } if($(this).val() == "The Sunswords"){ $("div#chars a").hide(); $("div#chars a[class*='s1c5-']").show(); $("span#breaker").remove(); $("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters"); $("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters"); } if($(this).val() == "The Unseen Rogues"){ $("div#chars a").hide(); $("div#chars a[class*='s1c6-']").show(); $("span#breaker").remove(); $("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters"); $("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters"); } if($(this).val() == "Kobold Headhunters"){ $("div#chars a").hide(); $("div#chars a[class*='s1c7-']").show(); $("span#breaker").remove(); $("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters"); $("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters"); } if($(this).val() == "Zarlin Catacombs"){ $("div#chars a").hide(); $("div#chars a[class*='s1c8-']").show(); $("span#breaker").remove(); $("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters"); $("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters"); } if($(this).val() == "The New Crew"){ $("div#chars a").hide(); $("div#chars a[class*='s1c9-']").show(); $("span#breaker").remove(); $("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters"); $("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters"); } if($(this).val() == "Silvermine Mountains"){ $("div#chars a").hide(); $("div#chars a[class*='s1c10-']").show(); $("span#breaker").remove(); $("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters"); $("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters"); } });
}, false);
</script>
