Widget:CampaignCards: Difference between revisions
imported>Pillowkeeper No edit summary |
imported>Pillowkeeper No edit summary |
||
| Line 23: | Line 23: | ||
for(var i = 0; i < series1.length; i++){ | for(var i = 0; i < series1.length; i++){ | ||
$(".campaign-holder").append('<div id="' + series1[i].key + '" class="campaignbox"> <div class="campaignbox-card" onClick="openCard(this)" data-height="' + series1[i].height +'"> <img class="campaignbox-image" src="' + series1[i].image + '"> <div class="campaignbox-text"> <h4 style="margin:0px"> <b>' + series1[i].season + '</b></h4> <p style="margin-top:4px">' + | var title = series1[i].name.substring(1); | ||
title = title.substring(0, title.indexOf("]")); | |||
$(".campaign-holder").append('<div id="' + series1[i].key + '" class="campaignbox"> <div class="campaignbox-card" onClick="openCard(this)" data-height="' + series1[i].height +'"> <img class="campaignbox-image" src="' + series1[i].image + '"> <div class="campaignbox-text"> <h4 style="margin:0px"> <b>' + series1[i].season + '</b></h4> <p style="margin-top:4px">' + title + '</p> </div> </div> <div class="campaignbox-content"> <table class="campaignbox-content-topbar"> <tr> <td> <span class="campaignbox-content-topbar-back" onClick="closeCard(this)"><i style="float:left;" class="fa fa-arrow-left fa-2x"></i> </span> </td> <td> <span class="campaignbox-content-topbar-name darkCrystal" style="color:' + series1[i].color + '">' + series1[i].name + '</span> </td> <td style="text-align:right;"> <span class="campaignbox-content-topbar-date">' + series1[i].date + '</span> </td> </tr> </table> <p class="campaignbox-content-description">' + series1[i].description + '</p> <p class="campaignbox-content-characters">'+ series1[i].characters +'</p> <table class="campaignbox-content-bottombar"> <tr> <td> <a href="http://youtube.com/' + series1[i].playlist + '"> <span class="campaignbox-content-bottombar-play"><i class="fa fa-youtube-play" aria-hidden="true"></i> Playlist</span></a> </td> </tr> </table> </div> </div>'); | |||
} | } | ||
Revision as of 00:41, 31 August 2017
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script> var series1 = [];
var obj = {};
obj["name"] = ""; obj["image"] = ""; obj["season"] = ""; obj["color"] = ""; obj["description"] = ; obj["key"] = ""; obj["date"] = ""; obj["height"] = ""; obj["characters"] = ""; obj["playlist"] = "";
series1.push(obj);
for(var i = 0; i < series1.length; i++){ var title = series1[i].name.substring(1); title = title.substring(0, title.indexOf("]"));
$(".campaign-holder").append('
' + series1[i].season + '
' + title + '
' + series1[i].description + '
'+ series1[i].characters +'
| <a href="http://youtube.com/' + series1[i].playlist + '"> </a> |
');
}
$(".campaignbox-content-characters a").each(function() { var title = $(this).attr("title"); $(this).removeAttr("title");
$(this).wrap("
$(this).after("" + title + ""); });
$(".campaignbox-content-topbar-name").each(function() { $(this).unwrap(); });
function reset(e) { $(e.currentTarget).find("span.campaignbox-content-characters-characterbox-tooltip").hide(); }
function move(e) { $(e.currentTarget).find("span.campaignbox-content-characters-characterbox-tooltip").css("top", e.clientY + 10); $(e.currentTarget).find("span.campaignbox-content-characters-characterbox-tooltip").css("left", e.clientX + 10); $(e.currentTarget).find("span.campaignbox-content-characters-characterbox-tooltip").show(); }
function openCard(card) {
var id = $(card).parent().attr("id"); var ht = $(card).attr("data-height"); $(".campaignbox:not('div#" + id + "')").hide();
$("div#" + id + " .campaignbox-card").fadeOut("slow");
$("div#" + id + ".campaignbox").animate({width:"662px", height: ht}, function() {
$("div#" + id + " .campaignbox-content").show();
});
}
function closeCard(card) {
var id = $(card).closest(".campaignbox").attr("id"); $(".campaignbox:not('div#" + id + "')").fadeIn();
$("div#" + id + " .campaignbox-content").fadeOut();
$("div#" + id + ".campaignbox").animate({width:"200px", height:"184px"}, function() {
$("div#" + id + " .campaignbox-card").fadeIn("slow");
});
}
</script>
<style> .campaignbox-text a {
color: white;
} .campaignbox-card {
cursor: pointer;
} .campaignbox-content-topbar-back:hover {
cursor: pointer; color: #9c6011;
}
.campaignbox-content-topbar {
width: 100%;
}
.campaignbox-content-topbar-name a {
color: inherit;
} .campaignbox {
width: 200px; height: 184px; border: 2px solid #F9E4CA; border-radius: 10px; overflow: hidden; display: inline-block; background: rgb(33, 33, 33); margin: 8px;
}
.campaignbox-image {
width: 100%; opacity:0.85; margin-bottom: -5px;
} .campaignbox-content {
padding: 10px; text-align: initial; display:none;
} .campaignbox-content-characters-characterbox-portrait {
object-fit: cover; width: 60px; height: 125px; margin-bottom: 2px;
}
.campaignbox-content-characters-characterbox {
display:inline-block;
}
.campaignbox-content-characters-characterbox-tooltip {
overflow:auto; background: rgba(33,33,33,1); border-radius:5px; border: 2px solid #F9E4CA; padding: 5px 8px; color: white; font-family: sans-serif; font-size: 14px; max-width: 400px; max-height: 400px; white-space:pre-line; z-index: 200; position: fixed; display: none;
}
.campaignbox-content-topbar-date {
text-align: right;
} </style>
