Widget:TestTabs

From Unforgotten Realms Wiki
Revision as of 08:09, 3 August 2017 by imported>Pillowkeeper
Jump to navigationJump to search

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

@media only screen and (max-device-width: 768px) { div.charBox img { width:85px; } div.charBox { width: calc((85% / 6) - 3px); } div.charName { font-size: 10px; } } </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"] = ;
 obj["keywords"] = ;
 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]; } var keywords = ""; for(var j = 0; j < series1[i].keywords.length; j++){ keywords = keywords + " " + series1[i].keywords[j]; } campaigns = campaigns.substring(1); keywords = keywords.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('<input type="text" id="filter" onkeyup="charFilter()" placeholder="Search...">'); /* Default */

if($("#nametoggle").css("background-color") == "rgb(137, 84, 15)"){ $("#nametoggle").click(); }


$("#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() == "The Senate of Deadlantis") { $("div.charBox[data-campaigns*='s3c2-'").show(); var box = $(".charBox:visible"); for(var i = 0; i < box.length; i++){ if(box[i].getAttribute("data-campaigns").indexOf("s3c2-n") > -1){ $(".charBox:visible:last").after(box[i]); } } $("div#charHolder").find("[data-campaigns*='s3c2-n']:parent:visible").first().before("NPC Characters"); $("div#charHolder").find("[data-campaigns*='s3c2-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(); $("#nametoggle").click(); });

function filter(search) { $("#filter").val(search); charFilter(); } function charFilter() { var filter = $("#filter").val().trim().toLowerCase(); console.log(filter); $(".charBox").each(function() { if (filter == ) $(this).show(); else if ($(this).attr('data-keywords').toLowerCase().indexOf(filter) >= 0) $(this).show(); else $(this).hide(); }); }

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>

");

} } }



</script>

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