Widget:CharacterList: Difference between revisions

From Unforgotten Realms Wiki
Jump to navigationJump to search
← Older editNewer edit →
imported>Pillowkeeper
VisualWikitext
imported>Pillowkeeper
Undo revision 39374 by Pillowkeeper (talk)
imported>Pillowkeeper
No edit summary
Line 1: Line 1:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"></script>
<style>
<style>
    button {
#charPanel button {
         background-color: #b36e14;
         background-color: #b36e14;
         border: 1px solid #64320d;
         border: 1px solid #64320d;
         outline: none;
         outline: none;
         cursor: pointer;
         cursor: pointer;
         padding: 7px 16px;
         padding: 0px 10px;
         transition: 0.3s;
         transition: 0.3s;
         display: inline;
         display: inline;
         color: white;
         color: white;
         height: 31px;
         height: 25px;
     }
     }
 
#breaker {
    #buttons {
        text-align: center;
        position: relative;
        display: block;
        float: left;
    }
 
    #chars a img.thumbborder {
        display: inline-grid;
        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: Berkshire Swash;
        font-size: 18px;
        display: inline-block;
        width: 135px;
        top: -90px;
        left: 10px;
        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: 20px;
        overflow: hidden;
        display: block;
    }
 
    div#chars {
        text-align: center;
    }
 
    div#chars #breaker {
        text-align: left;
        text-size: 18px;
        text-weight: bold;
    }
 
    #breaker {
         display: block;
         display: block;
         text-align: left;
         text-align: left;
Line 89: Line 20:
     }
     }


    #charSelect-s1,
div.charFilter select{
    #charSelect-s2 {
border: 1px solid #000;
        border: 1px solid #000;
    color: #fff;
        font-size: 14px;
    background: #444;
        color: #fff;
    position: relative;
        background: #444;
    width: 150px;
         padding: 2px;
    float: left;
        position: relative;
    height: 25px;
        width: 220px;
    margin-right: 5px;
        float: right;
}
        height: 31px;
div.charFilter{
     }
display: inline-block;
    padding-left: 15px;
padding-right: 15px;
    width: 100%;
}
div.filterLeft{
float: left;
}
div.filterRight{
float: right;
}
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 {
     text-align: center;
  background: rgba(68,68,68,0.2);
  border-radius: 15px;
  border: 2px solid #8b4513;
  padding: 10px;
}


    #charTitle {
div.charBox a{
        display: block;
display: block;
        text-align: center;
    height: 100%;
        font-size: 24px;
    color: #F9E4CA;
        font-weight: bold;
}
        padding-top: 40px;
.charBox.hovered {
    }
    filter: opacity(100%);
</style>


}


<script>
.charBox:hover {
    window.addEventListener('load',
border-color:#F9E4CA;
        function() {
    filter:  opacity(100%);
            $("#chars img.thumbborder").wrap("<div id='filter'></div>");
}


            $("div#filter").each(function() {
div.charName{
                $(this).after("<span class='tcont'>" + $(this).parent("a").attr("title") + "</span>")
    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";
 
}


            $("#chars img").each(function() {
div.charBox img {
                var text = $(this).attr("class");
width:150px;
                text = text.substring(0, text.indexOf(" "));
}
                $(this).parent().parent().attr("class", text);
</style>
            });


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


            $("span.tcont").each(function() {
<script>
                if ($(this).height() >= 29 && $(this).height() < 57) {
                    $(this).parent().css("position", "relative");
                    $(this).css("top", "-100px");
                }
                if ($(this).height() >= 57) {
                    $(this).parent().css("position", "relative");
                    $(this).css("top", "-110px");
                }
            });


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


            var classList = [];
var series1 = [];
            $("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 = [];
<!--{foreach from=$character key=key item=data}-->
            $("span.tcont").each(function() {
var obj = {};
                if (charList.indexOf($(this).text()) < 0) {
  obj["name"] = "<!--{$data.name|escape:'javascript'}-->";
                    charList.push($(this).text());
  obj["image"] = "<!--{$data.image}-->";
                }
  obj["link"] = "<!--{$data.link|escape:'javascript'}-->";
            });
  obj["campaigns"] = <!--{$data.campaigns}-->;
  series1.push(obj);
<!--{/foreach}-->
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("<div class='charBox' data-campaigns='" + campaigns + "' data-name='" + series1[i].name + "'><a class='charLink' href='" + series1[i].link +"'> <img src='" + series1[i].image + "'> <div class='charName'>" + series1[i].name + "</div></a></div>");
}
}
$("div#charPanel").prepend("<div class='charFilter'><div class='filterLeft'></div> <div class='filterRight'></div></div>");
$("div.filterLeft").append("<select id='mainFilter'><option>Season 1</option><option>Season 2</option><option>Season 3</option>");
$("div.filterRight").append("<select id='seasonFilter-s1'><option>Season 1 Characters</option><option>Band of Thieves</option> <option>Porc Hunters</option> <option>The Jewel of the Dingo Isles</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>Guild of Explorers</option><option>Battle of the Bards</option><option>The Blood Snake Queen</option><option>The Death of Virgo</option><option>Player Characters</option><option>NPC Characters</option><option>Minor Characters</option></select> <select id='seasonFilter-s2'><option>Season 2 Characters</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><option>Player Characters</option><option>NPC Characters</option><option>Minor Characters</option></select> <select id='seasonFilter-s3'><option>Season 3 Characters</option><option>The Grand Paladin Order</option><option>Player Characters</option><option>NPC Characters</option><option>Minor Characters</option></select>");
$("#mainFilter").after("<button id='nametoggle' onclick='toggleNames(this)'>Toggle Names</button>");
$(".charFilter").hide();
/* Default */


            var s1List = [];
$("div.filterRight select:not(#seasonFilter-s1)").hide();
            $("div#chars a").each(function() {
$(".charBox:not([data-campaigns*='s1c'])").hide();
                if ($(this).attr("class").startsWith("s1")) {
var firstChange = true;
                    if (s1List.indexOf($(this).find("span.tcont").text()) < 0) {
var allS1;
                        s1List.push($(this).find("span.tcont").text());
var allS2;
                    }
var allS3;
                }
$("#mainFilter").change(function() {
            });
if(firstChange){
loadOther();
allS1 = $(".charBox[data-campaigns*='s1c']");
allS2 = $(".charBox[data-campaigns*='s2c']");
allS3 = $(".charBox[data-campaigns*='s3c']");
firstChange=false;
}
$("div.filterRight select").hide();
if($("#nametoggle").css("background-color") != "rgb(179, 110, 20)"){
$("#nametoggle").click();
}
if ($(this).val() == "Season 1") {
$("#seasonFilter-s1").show();
$('div.filterRight select:not(#seasonFilter-s1)').prop('selectedIndex', 0);
$("#charHolder").empty();
for(var i = 0; i < allS1.length; i++){
$("#charHolder").append(allS1[i]);
}
$("div.charBox[data-campaigns*='s1'").show();
}
if ($(this).val() == "Season 2") {
$("#seasonFilter-s2").show();
$('div.filterRight select:not(#seasonFilter-s2)').prop('selectedIndex', 0);
$("#charHolder").empty();
for(var i = 0; i < allS2.length; i++){
$("#charHolder").append(allS2[i]);
}
$("div.charBox[data-campaigns*='s2'").show();
}
if ($(this).val() == "Season 3") {
$("#seasonFilter-s3").show();
$('div.filterRight select:not(#seasonFilter-s3)').prop('selectedIndex', 0);
$("#charHolder").empty();


            var s2List = [];
for(var i = 0; i < allS3.length; i++){
            $("div#chars a").each(function() {
$("#charHolder").append(allS3[i]);
                if ($(this).attr("class").startsWith("s2")) {
}
                    if (s2List.indexOf($(this).find("span.tcont").text()) < 0) {
$("div.charBox[data-campaigns*='s3'").show();
                        s2List.push($(this).find("span.tcont").text());
}
                    }
});
                }
            });


            $("div#chars").before("<select id='charSelect-s1'> <option>Season 1 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>Guild of Explorers</option><option>Battle of the Bards</option><option>The Blood Snake Queen</option><option>The Death of Virgo</option><option>Player Characters</option><option>NPC Characters</option><option>Minor Characters</option><option>All Characters</option></select>");
$("#seasonFilter-s1").change(function() {
$("div.charBox").hide();
$("span#breaker").remove();
if ($(this).val() == "Season 1 Characters") {
$("#charHolder").empty();
for(var i = 0; i < allS1.length; i++){
$("#charHolder").append(allS1[i]);
}
$("div.charBox[data-campaigns*='s1'").show();}
if ($(this).val() == "Band of Thieves") {
$("div.charBox[data-campaigns*='s1c1-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s1c1-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s1c1-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s1c1-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "Porc Hunters") {
$("div.charBox[data-campaigns*='s1c2-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s1c2-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s1c2-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s1c2-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "The Jewel of the Dingo Isles") {
$("div.charBox[data-campaigns*='s1c3-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s1c3-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s1c3-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s1c3-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "The Sunswords") {
$("div.charBox[data-campaigns*='s1c5-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s1c5-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s1c5-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s1c5-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "The Unseen Rogues") {
$("div.charBox[data-campaigns*='s1c6-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s1c6-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s1c6-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s1c6-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "Kobold Headhunters") {
$("div.charBox[data-campaigns*='s1c7-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s1c7-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s1c7-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s1c7-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "Zarlin Catacombs") {
$("div.charBox[data-campaigns*='s1c8-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s1c8-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s1c8-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s1c8-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "The New Crew") {
$("div.charBox[data-campaigns*='s1c9-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s1c9-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s1c9-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s1c9-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "Silvermine Mountains") {
$("div.charBox[data-campaigns*='s1c10-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s1c10-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s1c10-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s1c10-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "Guild of Explorers") {
$("div.charBox[data-campaigns*='s1c11-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s1c11-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s1c11-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s1c11-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "Battle of the Bards") {
$("div.charBox[data-campaigns*='s1c12-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s1c12-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s1c12-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s1c12-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "The Blood Snake Queen") {
$("div.charBox[data-campaigns*='s1c13-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s1c13-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s1c13-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s1c13-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "The Death of Virgo") {
$("div.charBox[data-campaigns*='s1c14-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s1c14-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s1c14-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s1c14-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "Player Characters") {
$("#charHolder").empty();
for(var i = 0; i < allS1.length; i++){
$("#charHolder").append(allS1[i]);}
$("div.charBox").hide();
for(var i = 1; i <= 14; i++){
$("div.charBox[data-campaigns*='s1c" + i + "-p']").show();}
}
if ($(this).val() == "NPC Characters") {
$("#charHolder").empty();
for(var i = 0; i < allS1.length; i++){
$("#charHolder").append(allS1[i]);}
$("div.charBox").hide();
for(var i = 1; i <= 14; i++){
$("div.charBox[data-campaigns*='s1c" + i + "-n']").show();}
}
if ($(this).val() == "Minor Characters") {
$("#charHolder").empty();
for(var i = 0; i < allS1.length; i++){
$("#charHolder").append(allS1[i]);}
$("div.charBox").hide();
for(var i = 1; i <= 14; i++){
$("div.charBox[data-campaigns*='s1c']").show();}
$("div.charBox a:not([href*='Minor_Characters'])").parent().hide();
}
});


            $("#charSelect-s1").before("<select id='charSelect-s2'><option>Season 2 Characters</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><option>Player Characters</option><option>NPC Characters</option><option>Minor Characters</option><option>All Characters</option></select>");
$("#seasonFilter-s2").change(function() {
$("div.charBox").hide();
$("span#breaker").remove();


            $("#charSelect-s2").before('<div id="buttons"><button id="b-s1" onclick="changeSeason(this)">Season One</button><button id="b-s2" onclick="changeSeason(this)">Season Two</button>');
if ($(this).val() == "Season 2 Characters") {
$("#charHolder").empty();
for(var i = 0; i < allS2.length; i++){
$("#charHolder").append(allS2[i]);
}
$("div.charBox[data-campaigns*='s2'").show();}
if ($(this).val() == "Woodcarvers") {
$("div.charBox[data-campaigns*='s2c1-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s2c1-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s2c1-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s2c1-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "Okagnoma Guild Hall") {
$("div.charBox[data-campaigns*='s2c2-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s2c2-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s2c2-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s2c2-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "Murder Bros") {
$("div.charBox[data-campaigns*='s2c3-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s2c3-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s2c3-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s2c3-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "The Cobblers") {
$("div.charBox[data-campaigns*='s2c4-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s2c4-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s2c4-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s2c4-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "The Tower of Ultimate Wizardry: Chapter One") {
$("div.charBox[data-campaigns*='s2c5-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s2c5-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s2c5-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s2c5-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "Unexpected Discovery") {
$("div.charBox[data-campaigns*='s2c6-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s2c6-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s2c6-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s2c6-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "Buckeroos") {
$("div.charBox[data-campaigns*='s2c7-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s2c7-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s2c7-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s2c7-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "Fall of Dundinborough") {
$("div.charBox[data-campaigns*='s2c8-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s2c8-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s2c8-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s2c8-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "Den of Devils") {
$("div.charBox[data-campaigns*='s2c9-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s2c9-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s2c9-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s2c9-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "The Skeleton King") {
$("div.charBox[data-campaigns*='s2c10-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s2c10-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s2c10-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s2c10-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}
if ($(this).val() == "Player Characters") {
$("#charHolder").empty();
for(var i = 0; i < allS2.length; i++){
$("#charHolder").append(allS2[i]);}
$("div.charBox").hide();
for(var i = 1; i <= 10; i++){
$("div.charBox[data-campaigns*='s2c" + i + "-p']").show();}
}
if ($(this).val() == "NPC Characters") {
$("#charHolder").empty();
for(var i = 0; i < allS2.length; i++){
$("#charHolder").append(allS2[i]);}
$("div.charBox").hide();
for(var i = 1; i <= 10; i++){
$("div.charBox[data-campaigns*='s2c" + i + "-n']").show();}
}
if ($(this).val() == "Minor Characters") {
$("#charHolder").empty();
for(var i = 0; i < allS2.length; i++){
$("#charHolder").append(allS2[i]);}
$("div.charBox").hide();
for(var i = 1; i <= 10; i++){
$("div.charBox[data-campaigns*='s2c']").show();}
$("div.charBox a:not([href*='Minor_Characters'])").parent().hide();
}


            /*Default Select Behavior */
});
            $("#charSelect-s1").show();
            $("#charSelect-s2").hide();
            $("#b-s1").css('background-color', '#89540F');


            /*Default*/
$("#seasonFilter-s3").change(function() {
            $("div#chars a").hide();
$("div.charBox").hide();
            $("span#breaker").remove();
$("span#breaker").remove();
            $("#charTitle").remove();
if ($(this).val() == "Season 3 Characters") {
            for (var i = 0; i < s1List.length; i++) {
$("#charHolder").empty();
                $("span.tcont:contains('" + s1List[i] + "')").parent("[class*='s1c']:first").show();
for(var i = 0; i < allS3.length; i++){
            }
$("#charHolder").append(allS3[i]);
            $("#charSelect-s1").after("<span id='charTitle'>Season 1 Characters</span>");
}
$("div.charBox[data-campaigns*='s3'").show();}
if ($(this).val() == "The Grand Paladin Order") {
$("div.charBox[data-campaigns*='s3c1-'").show();
var box = $(".charBox:visible");
for(var i = 0; i < box.length; i++){
if(box[i].getAttribute("data-campaigns").indexOf("s3c1-n") > -1){
$(".charBox:visible:last").after(box[i]);
}
}
$("div#charHolder").find("[data-campaigns*='s3c1-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("div#charHolder").find("[data-campaigns*='s3c1-p']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");}


            $("select#charSelect-s1").change(function() {
if ($(this).val() == "Player Characters") {
                $("div#chars a").hide();
$("#charHolder").empty();
                $("span#breaker").remove();
for(var i = 0; i < allS3.length; i++){
                $("#charTitle").remove();
$("#charHolder").append(allS3[i]);}
                $("#charSelect-s1").after("<span id='charTitle'>" + $(this).val() + "</span>");
$("div.charBox").hide();
                if ($(this).val() == "All Characters") {
for(var i = 1; i <= 10; i++){
                    for (var i = 0; i < charList.length; i++) {
$("div.charBox[data-campaigns*='s3c" + i + "-p']").show();}
                        $("span.tcont:contains('" + charList[i] + "'):first").parent().show();
}
                    }
if ($(this).val() == "NPC Characters") {
                }
$("#charHolder").empty();
                if ($(this).val() == "Season 1 Characters") {
for(var i = 0; i < allS3.length; i++){
                    for (var i = 0; i < s1List.length; i++) {
$("#charHolder").append(allS3[i]);}
                        $("span.tcont:contains('" + s1List[i] + "')").parent("[class*='s1c']:first").show();
$("div.charBox").hide();
                    }
for(var i = 1; i <= 10; i++){
                }
$("div.charBox[data-campaigns*='s3c" + i + "-n']").show();}
                if ($(this).val() == "Band of Thieves") {
}
                    $("div#chars a").hide();
if ($(this).val() == "Minor Characters") {
                    $("div#chars a[class*='s1c1-']").show();
$("#charHolder").empty();
                    $("span#breaker").remove();
for(var i = 0; i < allS3.length; i++){
                    $("div#chars").find("[class*='-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
$("#charHolder").append(allS3[i]);}
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
$("div.charBox").hide();
                }
for(var i = 1; i <= 10; i++){
                if ($(this).val() == "Porc Hunters") {
$("div.charBox[data-campaigns*='s3c']").show();}
                    $("div#chars a").hide();
$("div.charBox a:not([href*='Minor_Characters'])").parent().hide();
                    $("div#chars a[class*='s1c2-']").show();
}
                    $("span#breaker").remove();
});
                    $("div#chars").find("[class*='-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                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("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                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("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                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("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                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("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                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("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                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("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                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("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                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("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                if ($(this).val() == "Guild of Explorers") {
                    $("div#chars a").hide();
                    $("div#chars a[class*='s1c11-']").show();
                    $("span#breaker").remove();
                    $("div#chars").find("[class*='-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                if ($(this).val() == "Battle of the Bards") {
                    $("div#chars a").hide();
                    $("div#chars a[class*='s1c12-']").show();
                    $("span#breaker").remove();
                    $("div#chars").find("[class*='-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                if ($(this).val() == "The Blood Snake Queen") {
                    $("div#chars a").hide();
                    $("div#chars a[class*='s1c13-']").show();
                    $("span#breaker").remove();
                    $("div#chars").find("[class*='-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                if ($(this).val() == "The Death of Virgo") {
                    $("div#chars a").hide();
                    $("div#chars a[class*='s1c14-']").show();
                    $("span#breaker").remove();
                    $("div#chars").find("[class*='-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                if ($(this).val() == "Player Characters") {
                    $("div#chars a").hide();
                    for (var i = 0; i < s1List.length; i++) {
                        $("span.tcont:contains('" + s1List[i] + "')").parent("[class*='s1c']:first").show();
                    }
                    $("div#chars a:not([class*='-m'])").hide();
                    $("span#breaker").remove();
                }
                if ($(this).val() == "NPC Characters") {
                    $("div#chars a").hide();
                    for (var i = 0; i < s1List.length; i++) {
                        $("span.tcont:contains('" + s1List[i] + "')").parent("[class*='s1c']:first").show();
                    }
                    $("div#chars a:not([class*='-n'])").hide();
                    $("span#breaker").remove();
                }
                if ($(this).val() == "Minor Characters") {
                    $("div#chars a").hide();
                    for (var i = 0; i < s1List.length; i++) {
                        $("span.tcont:contains('" + s1List[i] + "')").parent("[class*='s1c']:first").show();
                    }
                    $("div#chars a:not([href*='Minor_Characters'])").hide();
                    $("span#breaker").remove();
                }
            });


            $("select#charSelect-s2").change(function() {
$(window).on("load", function() {
                $("div#chars a").hide();
$("#loading").remove();
                $("span#breaker").remove();
$("#charHolder").show();
                $("#charTitle").remove();
$(".charFilter").show();
                $("#charSelect-s2").after("<span id='charTitle'>" + $(this).val() + "</span>");
});
                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 2 Characters") {
                    for (var i = 0; i < s2List.length; i++) {
                        $("span.tcont:contains('" + s2List[i] + "')").parent("[class*='s2c']:first").show();
                    }
                }
                if ($(this).val() == "Woodcarvers") {
                    $("div#chars a").hide();
                    $("div#chars a[class*='s2c1-']").show();
                    $("span#breaker").remove();
                    $("div#chars").find("[class*='-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                if ($(this).val() == "Okagnoma Guild Hall") {
                    $("div#chars a").hide();
                    $("div#chars a[class*='s2c2-']").show();
                    $("span#breaker").remove();
                    $("div#chars").find("[class*='-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                if ($(this).val() == "Murder Bros") {
                    $("div#chars a").hide();
                    $("div#chars a[class*='s2c3-']").show();
                    $("span#breaker").remove();
                    $("div#chars").find("[class*='-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                if ($(this).val() == "The Cobblers") {
                    $("div#chars a").hide();
                    $("div#chars a[class*='s2c4-']").show();
                    $("span#breaker").remove();
                    $("div#chars").find("[class*='-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                if ($(this).val() == "The Tower of Ultimate Wizardry: Chapter One") {
                    $("div#chars a").hide();
                    $("div#chars a[class*='s2c5-']").show();
                    $("span#breaker").remove();
                    $("div#chars").find("[class*='-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                if ($(this).val() == "Unexpected Discovery") {
                    $("div#chars a").hide();
                    $("div#chars a[class*='s2c6-']").show();
                    $("span#breaker").remove();
                    $("div#chars").find("[class*='-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                if ($(this).val() == "Buckeroos") {
                    $("div#chars a").hide();
                    $("div#chars a[class*='s2c7-']").show();
                    $("span#breaker").remove();
                    $("div#chars").find("[class*='-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                if ($(this).val() == "Fall of Dundinborough") {
                    $("div#chars a").hide();
                    $("div#chars a[class*='s2c8-']").show();
                    $("span#breaker").remove();
                    $("div#chars").find("[class*='-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                if ($(this).val() == "Den of Devils") {
                    $("div#chars a").hide();
                    $("div#chars a[class*='s2c9-']").show();
                    $("span#breaker").remove();
                    $("div#chars").find("[class*='-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                if ($(this).val() == "The Skeleton King") {
                    $("div#chars a").hide();
                    $("div#chars a[class*='s2c10-']").show();
                    $("span#breaker").remove();
                    $("div#chars").find("[class*='-n']:parent:visible").first().before("<span id='breaker'>NPC Characters</span>");
                    $("div#chars").find("[class*='-m']:parent:visible").first().before("<span id='breaker'>Player Characters</span>");
                }
                if ($(this).val() == "Player Characters") {
                    $("div#chars a").hide();
                    for (var i = 0; i < s2List.length; i++) {
                        $("span.tcont:contains('" + s2List[i] + "')").parent("[class*='s2c']:first").show();
                    }
                    $("div#chars a:not([class*='-m'])").hide();
                    $("span#breaker").remove();
                }
                if ($(this).val() == "NPC Characters") {
                    $("div#chars a").hide();
                    for (var i = 0; i < s2List.length; i++) {
                        $("span.tcont:contains('" + s2List[i] + "')").parent("[class*='s2c']:first").show();
                    }
                    $("div#chars a:not([class*='-n'])").hide();
                    $("span#breaker").remove();
                }
                if ($(this).val() == "Minor Characters") {
                    $("div#chars a").hide();
                    for (var i = 0; i < s2List.length; i++) {
                        $("span.tcont:contains('" + s2List[i] + "')").parent("[class*='s2c']:first").show();
                    }
                    $("div#chars a:not([href*='Minor_Characters'])").hide();
                    $("span#breaker").remove();
                }
            });


 
function loadOther(){
            $("span.tcont").each(function() {
for(var i = 0; i < series1.length; i++){
                if ($(this)[0].scrollWidth > 135) {
var campaigns = "";
                    console.log("Fix Spacing > " + $(this).text());
for(var j = 0; j < series1[i].campaigns.length; j++){
                }
campaigns = campaigns + " " + series1[i].campaigns[j];
            });
}
 
campaigns = campaigns.substring(1);
            if ($(window).width() <= 992) {
if(campaigns.indexOf("s1c") == -1){
$("span.tcont").each(function() {
$("div#charHolder").append("<div class='charBox' data-campaigns='" + campaigns + "' data-name='" + series1[i].name + "'><a class='charLink' href='" + series1[i].link +"'> <img src='" + series1[i].image + "'> <div class='charName'>" + series1[i].name + "</div></a></div>");
if($(this).height() >= 56){
$(this).parent().css("position", "relative");
$(this).parent().css("top", "24px");
}
}
if($(this).height() >= 84){
$(this).parent().css("position", "relative");
$(this).parent().css("top", "52px");
}
}
});
                $("span.tcont").css("opacity", "1");
                $("#chars a img.thumbborder").css("filter", "brightness(50%)");
            } else {
            $("div#buttons").after("<button id='nametoggle' onclick='toggleNames(this)' style='float:right;'>Toggle Names</button>");
}
}
 
function toggleNames(val){
        }, false);
 
function toggleNames(val){
if(val.id = "nametoggle"){
if(val.id = "nametoggle"){
         if($(val).css("background-color") == "rgb(179, 110, 20)"){
         if($(val).css("background-color") == "rgb(179, 110, 20)"){
             $("span.tcont").css("opacity", "1");
             $(".charName").css("display", "block");
             $("#chars a img.thumbborder").css("filter", "brightness(50%)");
             $(".charBox").css('filter', 'opacity(100%)');
             $("#nametoggle").css('background-color', '#89540F');
             $("#nametoggle").css('background-color', '#89540F');
} else {
        } else {
             $("span.tcont").css("opacity", "");
             $(".charName").css("display", "");
             $("#chars a img.thumbborder").css("filter", "");
             $(".charBox").css("filter", "");
             $("#nametoggle").css('background-color', '#b36e14');
             $("#nametoggle").css('background-color', '#b36e14');
              }
}
}
}
}
}
    function changeSeason(val) {
        if (val.id == "b-s1") {
            $("#b-s1").css('background-color', '#89540F');
            $("#b-s2").css('background-color', '#b36e14');
            $('#charSelect-s2').prop('selectedIndex', 0);
            $("#charSelect-s1").show();
            $("#charSelect-s2").hide();
            $('#charSelect-s1').trigger('change');
        }
        if (val.id == "b-s2") {
            $("#b-s2").css('background-color', '#89540F');
            $("#b-s1").css('background-color', '#b36e14');
            $('#charSelect-s1').prop('selectedIndex', 0);
            $("#charSelect-s1").hide();
            $("#charSelect-s2").show();
            $('#charSelect-s2').trigger('change');
if ($(window).width() <= 992) {
$("span.tcont").each(function() {
if($(this).height() >= 56){
$(this).parent().css("position", "relative");
$(this).parent().css("top", "24px");
}
if($(this).height() >= 84){
$(this).parent().css("position", "relative");
$(this).parent().css("top", "52px");
}
});
}
        }
 


    }
</script>
</script>

Revision as of 05:17, 30 May 2017

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

  1. charPanel button {
       background-color: #b36e14;
       border: 1px solid #64320d;
       outline: none;
       cursor: pointer;
       padding: 0px 10px;
       transition: 0.3s;
       display: inline;
       color: white;
       height: 25px;
   }
  1. breaker {
       display: block;
       text-align: left;
       font-size: 20px;
       font-weight: bold;
       padding: 5px;
   }

div.charFilter select{ border: 1px solid #000; 

   color: #fff;
   background: #444;
   position: relative;
   width: 150px;
   float: left;
   height: 25px;
   margin-right: 5px;

} div.charFilter{ display: inline-block; 

   padding-left: 15px;

padding-right: 15px; 

   width: 100%;

} div.filterLeft{ float: left; } div.filterRight{ float: right; } 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 { 

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

}

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; } </style>

<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["campaigns"] = ;
 series1.push(obj);

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("

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

");

} }

$("div#charPanel").prepend("

");

$("div.filterLeft").append("<select id='mainFilter'><option>Season 1</option><option>Season 2</option><option>Season 3</option>"); $("div.filterRight").append("<select id='seasonFilter-s1'><option>Season 1 Characters</option><option>Band of Thieves</option> <option>Porc Hunters</option> <option>The Jewel of the Dingo Isles</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>Guild of Explorers</option><option>Battle of the Bards</option><option>The Blood Snake Queen</option><option>The Death of Virgo</option><option>Player Characters</option><option>NPC Characters</option><option>Minor Characters</option></select> <select id='seasonFilter-s2'><option>Season 2 Characters</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><option>Player Characters</option><option>NPC Characters</option><option>Minor Characters</option></select> <select id='seasonFilter-s3'><option>Season 3 Characters</option><option>The Grand Paladin Order</option><option>Player Characters</option><option>NPC Characters</option><option>Minor Characters</option></select>"); $("#mainFilter").after("<button id='nametoggle' onclick='toggleNames(this)'>Toggle Names</button>"); $(".charFilter").hide(); /* Default */

$("div.filterRight select:not(#seasonFilter-s1)").hide(); $(".charBox:not([data-campaigns*='s1c'])").hide(); var firstChange = true; var allS1; var allS2; var allS3; $("#mainFilter").change(function() { if(firstChange){ loadOther(); allS1 = $(".charBox[data-campaigns*='s1c']"); allS2 = $(".charBox[data-campaigns*='s2c']"); allS3 = $(".charBox[data-campaigns*='s3c']"); firstChange=false; } $("div.filterRight select").hide(); if($("#nametoggle").css("background-color") != "rgb(179, 110, 20)"){ $("#nametoggle").click(); } if ($(this).val() == "Season 1") { $("#seasonFilter-s1").show(); $('div.filterRight select:not(#seasonFilter-s1)').prop('selectedIndex', 0); $("#charHolder").empty(); for(var i = 0; i < allS1.length; i++){ $("#charHolder").append(allS1[i]); } $("div.charBox[data-campaigns*='s1'").show(); } if ($(this).val() == "Season 2") { $("#seasonFilter-s2").show(); $('div.filterRight select:not(#seasonFilter-s2)').prop('selectedIndex', 0); $("#charHolder").empty(); for(var i = 0; i < allS2.length; i++){ $("#charHolder").append(allS2[i]); } $("div.charBox[data-campaigns*='s2'").show(); } if ($(this).val() == "Season 3") { $("#seasonFilter-s3").show(); $('div.filterRight select:not(#seasonFilter-s3)').prop('selectedIndex', 0); $("#charHolder").empty();

for(var i = 0; i < allS3.length; i++){ $("#charHolder").append(allS3[i]); } $("div.charBox[data-campaigns*='s3'").show(); } });

$("#seasonFilter-s1").change(function() { $("div.charBox").hide(); $("span#breaker").remove(); if ($(this).val() == "Season 1 Characters") { $("#charHolder").empty(); for(var i = 0; i < allS1.length; i++){ $("#charHolder").append(allS1[i]); } $("div.charBox[data-campaigns*='s1'").show();} if ($(this).val() == "Band of Thieves") { $("div.charBox[data-campaigns*='s1c1-'").show(); var box = $(".charBox:visible"); for(var i = 0; i < box.length; i++){ if(box[i].getAttribute("data-campaigns").indexOf("s1c1-n") > -1){ $(".charBox:visible:last").after(box[i]); } } $("div#charHolder").find("[data-campaigns*='s1c1-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s1c1-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "Porc Hunters") { $("div.charBox[data-campaigns*='s1c2-'").show(); var box = $(".charBox:visible"); for(var i = 0; i < box.length; i++){ if(box[i].getAttribute("data-campaigns").indexOf("s1c2-n") > -1){ $(".charBox:visible:last").after(box[i]); } } $("div#charHolder").find("[data-campaigns*='s1c2-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s1c2-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "The Jewel of the Dingo Isles") { $("div.charBox[data-campaigns*='s1c3-'").show(); var box = $(".charBox:visible"); for(var i = 0; i < box.length; i++){ if(box[i].getAttribute("data-campaigns").indexOf("s1c3-n") > -1){ $(".charBox:visible:last").after(box[i]); } } $("div#charHolder").find("[data-campaigns*='s1c3-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s1c3-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "The Sunswords") { $("div.charBox[data-campaigns*='s1c5-'").show(); var box = $(".charBox:visible"); for(var i = 0; i < box.length; i++){ if(box[i].getAttribute("data-campaigns").indexOf("s1c5-n") > -1){ $(".charBox:visible:last").after(box[i]); } } $("div#charHolder").find("[data-campaigns*='s1c5-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s1c5-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "The Unseen Rogues") { $("div.charBox[data-campaigns*='s1c6-'").show(); var box = $(".charBox:visible"); for(var i = 0; i < box.length; i++){ if(box[i].getAttribute("data-campaigns").indexOf("s1c6-n") > -1){ $(".charBox:visible:last").after(box[i]); } } $("div#charHolder").find("[data-campaigns*='s1c6-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s1c6-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "Kobold Headhunters") { $("div.charBox[data-campaigns*='s1c7-'").show(); var box = $(".charBox:visible"); for(var i = 0; i < box.length; i++){ if(box[i].getAttribute("data-campaigns").indexOf("s1c7-n") > -1){ $(".charBox:visible:last").after(box[i]); } } $("div#charHolder").find("[data-campaigns*='s1c7-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s1c7-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "Zarlin Catacombs") { $("div.charBox[data-campaigns*='s1c8-'").show(); var box = $(".charBox:visible"); for(var i = 0; i < box.length; i++){ if(box[i].getAttribute("data-campaigns").indexOf("s1c8-n") > -1){ $(".charBox:visible:last").after(box[i]); } } $("div#charHolder").find("[data-campaigns*='s1c8-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s1c8-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "The New Crew") { $("div.charBox[data-campaigns*='s1c9-'").show(); var box = $(".charBox:visible"); for(var i = 0; i < box.length; i++){ if(box[i].getAttribute("data-campaigns").indexOf("s1c9-n") > -1){ $(".charBox:visible:last").after(box[i]); } } $("div#charHolder").find("[data-campaigns*='s1c9-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s1c9-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "Silvermine Mountains") { $("div.charBox[data-campaigns*='s1c10-'").show(); var box = $(".charBox:visible"); for(var i = 0; i < box.length; i++){ if(box[i].getAttribute("data-campaigns").indexOf("s1c10-n") > -1){ $(".charBox:visible:last").after(box[i]); } } $("div#charHolder").find("[data-campaigns*='s1c10-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s1c10-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "Guild of Explorers") { $("div.charBox[data-campaigns*='s1c11-'").show(); var box = $(".charBox:visible"); for(var i = 0; i < box.length; i++){ if(box[i].getAttribute("data-campaigns").indexOf("s1c11-n") > -1){ $(".charBox:visible:last").after(box[i]); } } $("div#charHolder").find("[data-campaigns*='s1c11-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s1c11-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "Battle of the Bards") { $("div.charBox[data-campaigns*='s1c12-'").show(); var box = $(".charBox:visible"); for(var i = 0; i < box.length; i++){ if(box[i].getAttribute("data-campaigns").indexOf("s1c12-n") > -1){ $(".charBox:visible:last").after(box[i]); } } $("div#charHolder").find("[data-campaigns*='s1c12-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s1c12-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "The Blood Snake Queen") { $("div.charBox[data-campaigns*='s1c13-'").show(); var box = $(".charBox:visible"); for(var i = 0; i < box.length; i++){ if(box[i].getAttribute("data-campaigns").indexOf("s1c13-n") > -1){ $(".charBox:visible:last").after(box[i]); } } $("div#charHolder").find("[data-campaigns*='s1c13-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s1c13-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "The Death of Virgo") { $("div.charBox[data-campaigns*='s1c14-'").show(); var box = $(".charBox:visible"); for(var i = 0; i < box.length; i++){ if(box[i].getAttribute("data-campaigns").indexOf("s1c14-n") > -1){ $(".charBox:visible:last").after(box[i]); } } $("div#charHolder").find("[data-campaigns*='s1c14-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s1c14-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "Player Characters") { $("#charHolder").empty(); for(var i = 0; i < allS1.length; i++){ $("#charHolder").append(allS1[i]);} $("div.charBox").hide(); for(var i = 1; i <= 14; i++){ $("div.charBox[data-campaigns*='s1c" + i + "-p']").show();} } if ($(this).val() == "NPC Characters") { $("#charHolder").empty(); for(var i = 0; i < allS1.length; i++){ $("#charHolder").append(allS1[i]);} $("div.charBox").hide(); for(var i = 1; i <= 14; i++){ $("div.charBox[data-campaigns*='s1c" + i + "-n']").show();} } if ($(this).val() == "Minor Characters") { $("#charHolder").empty(); for(var i = 0; i < allS1.length; i++){ $("#charHolder").append(allS1[i]);} $("div.charBox").hide(); for(var i = 1; i <= 14; i++){ $("div.charBox[data-campaigns*='s1c']").show();} $("div.charBox a:not([href*='Minor_Characters'])").parent().hide(); } });

$("#seasonFilter-s2").change(function() { $("div.charBox").hide(); $("span#breaker").remove();

if ($(this).val() == "Season 2 Characters") { $("#charHolder").empty(); for(var i = 0; i < allS2.length; i++){ $("#charHolder").append(allS2[i]); } $("div.charBox[data-campaigns*='s2'").show();} if ($(this).val() == "Woodcarvers") { $("div.charBox[data-campaigns*='s2c1-'").show(); var box = $(".charBox:visible"); for(var i = 0; i < box.length; i++){ if(box[i].getAttribute("data-campaigns").indexOf("s2c1-n") > -1){ $(".charBox:visible:last").after(box[i]); } } $("div#charHolder").find("[data-campaigns*='s2c1-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s2c1-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "Okagnoma Guild Hall") { $("div.charBox[data-campaigns*='s2c2-'").show(); var box = $(".charBox:visible"); for(var i = 0; i < box.length; i++){ if(box[i].getAttribute("data-campaigns").indexOf("s2c2-n") > -1){ $(".charBox:visible:last").after(box[i]); } } $("div#charHolder").find("[data-campaigns*='s2c2-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s2c2-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "Murder Bros") { $("div.charBox[data-campaigns*='s2c3-'").show(); var box = $(".charBox:visible"); for(var i = 0; i < box.length; i++){ if(box[i].getAttribute("data-campaigns").indexOf("s2c3-n") > -1){ $(".charBox:visible:last").after(box[i]); } } $("div#charHolder").find("[data-campaigns*='s2c3-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s2c3-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "The Cobblers") { $("div.charBox[data-campaigns*='s2c4-'").show(); var box = $(".charBox:visible"); for(var i = 0; i < box.length; i++){ if(box[i].getAttribute("data-campaigns").indexOf("s2c4-n") > -1){ $(".charBox:visible:last").after(box[i]); } } $("div#charHolder").find("[data-campaigns*='s2c4-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s2c4-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "The Tower of Ultimate Wizardry: Chapter One") { $("div.charBox[data-campaigns*='s2c5-'").show(); var box = $(".charBox:visible"); for(var i = 0; i < box.length; i++){ if(box[i].getAttribute("data-campaigns").indexOf("s2c5-n") > -1){ $(".charBox:visible:last").after(box[i]); } } $("div#charHolder").find("[data-campaigns*='s2c5-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s2c5-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "Unexpected Discovery") { $("div.charBox[data-campaigns*='s2c6-'").show(); var box = $(".charBox:visible"); for(var i = 0; i < box.length; i++){ if(box[i].getAttribute("data-campaigns").indexOf("s2c6-n") > -1){ $(".charBox:visible:last").after(box[i]); } } $("div#charHolder").find("[data-campaigns*='s2c6-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s2c6-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "Buckeroos") { $("div.charBox[data-campaigns*='s2c7-'").show(); var box = $(".charBox:visible"); for(var i = 0; i < box.length; i++){ if(box[i].getAttribute("data-campaigns").indexOf("s2c7-n") > -1){ $(".charBox:visible:last").after(box[i]); } } $("div#charHolder").find("[data-campaigns*='s2c7-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s2c7-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "Fall of Dundinborough") { $("div.charBox[data-campaigns*='s2c8-'").show(); var box = $(".charBox:visible"); for(var i = 0; i < box.length; i++){ if(box[i].getAttribute("data-campaigns").indexOf("s2c8-n") > -1){ $(".charBox:visible:last").after(box[i]); } } $("div#charHolder").find("[data-campaigns*='s2c8-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s2c8-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "Den of Devils") { $("div.charBox[data-campaigns*='s2c9-'").show(); var box = $(".charBox:visible"); for(var i = 0; i < box.length; i++){ if(box[i].getAttribute("data-campaigns").indexOf("s2c9-n") > -1){ $(".charBox:visible:last").after(box[i]); } } $("div#charHolder").find("[data-campaigns*='s2c9-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s2c9-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "The Skeleton King") { $("div.charBox[data-campaigns*='s2c10-'").show(); var box = $(".charBox:visible"); for(var i = 0; i < box.length; i++){ if(box[i].getAttribute("data-campaigns").indexOf("s2c10-n") > -1){ $(".charBox:visible:last").after(box[i]); } } $("div#charHolder").find("[data-campaigns*='s2c10-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s2c10-p']:parent:visible").first().before("Player Characters");} if ($(this).val() == "Player Characters") { $("#charHolder").empty(); for(var i = 0; i < allS2.length; i++){ $("#charHolder").append(allS2[i]);} $("div.charBox").hide(); for(var i = 1; i <= 10; i++){ $("div.charBox[data-campaigns*='s2c" + i + "-p']").show();} } if ($(this).val() == "NPC Characters") { $("#charHolder").empty(); for(var i = 0; i < allS2.length; i++){ $("#charHolder").append(allS2[i]);} $("div.charBox").hide(); for(var i = 1; i <= 10; i++){ $("div.charBox[data-campaigns*='s2c" + i + "-n']").show();} } if ($(this).val() == "Minor Characters") { $("#charHolder").empty(); for(var i = 0; i < allS2.length; i++){ $("#charHolder").append(allS2[i]);} $("div.charBox").hide(); for(var i = 1; i <= 10; i++){ $("div.charBox[data-campaigns*='s2c']").show();} $("div.charBox a:not([href*='Minor_Characters'])").parent().hide(); }

});

$("#seasonFilter-s3").change(function() { $("div.charBox").hide(); $("span#breaker").remove(); if ($(this).val() == "Season 3 Characters") { $("#charHolder").empty(); for(var i = 0; i < allS3.length; i++){ $("#charHolder").append(allS3[i]); } $("div.charBox[data-campaigns*='s3'").show();} if ($(this).val() == "The Grand Paladin Order") { $("div.charBox[data-campaigns*='s3c1-'").show(); var box = $(".charBox:visible"); for(var i = 0; i < box.length; i++){ if(box[i].getAttribute("data-campaigns").indexOf("s3c1-n") > -1){ $(".charBox:visible:last").after(box[i]); } } $("div#charHolder").find("[data-campaigns*='s3c1-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s3c1-p']:parent:visible").first().before("Player Characters");}

if ($(this).val() == "Player Characters") { $("#charHolder").empty(); for(var i = 0; i < allS3.length; i++){ $("#charHolder").append(allS3[i]);} $("div.charBox").hide(); for(var i = 1; i <= 10; i++){ $("div.charBox[data-campaigns*='s3c" + i + "-p']").show();} } if ($(this).val() == "NPC Characters") { $("#charHolder").empty(); for(var i = 0; i < allS3.length; i++){ $("#charHolder").append(allS3[i]);} $("div.charBox").hide(); for(var i = 1; i <= 10; i++){ $("div.charBox[data-campaigns*='s3c" + i + "-n']").show();} } if ($(this).val() == "Minor Characters") { $("#charHolder").empty(); for(var i = 0; i < allS3.length; i++){ $("#charHolder").append(allS3[i]);} $("div.charBox").hide(); for(var i = 1; i <= 10; i++){ $("div.charBox[data-campaigns*='s3c']").show();} $("div.charBox a:not([href*='Minor_Characters'])").parent().hide(); } });

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

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("

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

");

} } } 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>

Retrieved from "https://URwiki.phijkchu.com/index.php?title=Widget:CharacterList&oldid=45430"