Widget:CharacterList: Difference between revisions
imported>Pillowkeeper Replaced content with "<script> charList(); </script>" |
imported>Pillowkeeper Undo revision 38474 by Pillowkeeper (talk) |
||
| Line 1: | Line 1: | ||
<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: 144px; | |||
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> | <script> | ||
charList(); | window.addEventListener('load', | ||
function() { | |||
if(!$("#filter").length){ | |||
$("#chars img.thumbborder").wrap("<div id='filter'></div>"); | |||
} | |||
$("div#filter").each(function(){ | |||
$(this).after("<span class='tcont'>" + $(this).parent().attr("title") +"</span>")}); | |||
$("#chars img").each(function() { | |||
var text = $(this).attr("class"); | |||
text = text.substring(0, text.indexOf(" ")); | |||
$(this).parent().parent("a").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 text = $(this).attr("class"); | |||
text = text.substring(0, text.indexOf("-")); | |||
if(classList.indexOf(text) < 0){ | |||
classList.push(text); | |||
} | |||
}); | |||
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()); | |||
} | |||
} | |||
}); | |||
}, false); | |||
</script> | </script> | ||
Revision as of 06:56, 1 May 2017
<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: 144px; 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() {
if(!$("#filter").length){
$("#chars img.thumbborder").wrap("
");
} $("div#filter").each(function(){ $(this).after("" + $(this).parent().attr("title") +"")});
$("#chars img").each(function() { var text = $(this).attr("class"); text = text.substring(0, text.indexOf(" ")); $(this).parent().parent("a").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 text = $(this).attr("class"); text = text.substring(0, text.indexOf("-")); if(classList.indexOf(text) < 0){ classList.push(text); } });
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()); } } });
}, false);
</script>
