Widget:CampaignCards: Difference between revisions
From Unforgotten Realms Wiki
Jump to navigationJump to search
imported>Pillowkeeper No edit summary |
imported>Pillowkeeper No edit summary |
||
| Line 18: | Line 18: | ||
<script> | <script> | ||
function openCard(card){ | function openCard(card){ | ||
var | var id = card.id | ||
$("div# | $("div#" + id + " div:not('.campaignbox-content')").fadeToggle('slow'); | ||
if(!$("div# | if(!$("div#" + id).hasClass("opened")){ | ||
$("div# | $("div#" + id).animate({width: '100%', height:'300px'}); | ||
$("div# | $("div#" + id + " .campaignbox-content").show('slow'); | ||
$("div# | $("div#" + id + " div:not('.campaignbox-content')").hide('slow'); | ||
} else { | } else { | ||
$("div# | $("div#" + id).animate({width: '200px', height: '184px'}); | ||
$("div# | $("div#" + id + " .campaignbox-content").hide('slow'); | ||
$("div# | $("div#" + id + " div:not('.campaignbox-content')").show('slow'); | ||
} | } | ||
$("div# | $("div#" + id).toggleClass("opened"); | ||
} | } | ||
</script> | </script> | ||
Revision as of 20:30, 29 August 2017
<img class="campaignbox-image" src="https://stream.urealms.com/img/watch/s1c1.jpg" >
Season 1
Band of Thieves
Band of Thieves
<script> function openCard(card){ var id = card.id
$("div#" + id + " div:not('.campaignbox-content')").fadeToggle('slow'); if(!$("div#" + id).hasClass("opened")){ $("div#" + id).animate({width: '100%', height:'300px'}); $("div#" + id + " .campaignbox-content").show('slow'); $("div#" + id + " div:not('.campaignbox-content')").hide('slow'); } else { $("div#" + id).animate({width: '200px', height: '184px'}); $("div#" + id + " .campaignbox-content").hide('slow'); $("div#" + id + " div:not('.campaignbox-content')").show('slow'); } $("div#" + id).toggleClass("opened"); } </script>
<style> .campaignbox {
width: 200px; height: 184px; border: 3px solid white; border-radius: 10px; overflow: hidden; display: inline-block; background: rgb(33, 33, 33);
} .campaignbox-card {
cursor: pointer;
} .campaignbox-image {
width: 100%; opacity:0.85; margin-bottom: -5px;
} .campaignbox-text {
padding: 0.01em 5px; color: white; text-align: center;
} .campaignbox-content {
display: none; color:white; }
</style>
