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 1: | Line 1: | ||
<div onClick=" | <div onClick="openCard(this)" class="campaignbox" id="test"> | ||
<div class="campaignbox-card"> | <div class="campaignbox-card"> | ||
| Line 15: | Line 15: | ||
</div> | </div> | ||
</div> | </div> | ||
<script> | <script> | ||
function | function openCard(card){ | ||
var | var height = $(card).height(); | ||
$("div# | console.log(card.id) | ||
if(!$("div#" | $("div#test div:not('.campaignbox-content')").fadeToggle('slow'); | ||
$("div#" | if(!$("div#test").hasClass("opened")){ | ||
$("div# | $("div#test").animate({width: '100%', height:'300px'}); | ||
$("div# | $("div#test .campaignbox-content").show('slow'); | ||
$("div#test div:not('.campaignbox-content')").hide('slow'); | |||
} else { | } else { | ||
$("div# | $("div#test").animate({width: '200px', height: '184px'}); | ||
$("div# | $("div#test .campaignbox-content").hide('slow'); | ||
$("div# | $("div#test div:not('.campaignbox-content')").show('slow'); | ||
} | } | ||
$("div# | $("div#test").toggleClass("opened"); | ||
} | } | ||
</script> | </script> | ||
Revision as of 20:28, 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 height = $(card).height(); console.log(card.id) $("div#test div:not('.campaignbox-content')").fadeToggle('slow'); if(!$("div#test").hasClass("opened")){ $("div#test").animate({width: '100%', height:'300px'}); $("div#test .campaignbox-content").show('slow'); $("div#test div:not('.campaignbox-content')").hide('slow'); } else { $("div#test").animate({width: '200px', height: '184px'}); $("div#test .campaignbox-content").hide('slow'); $("div#test div:not('.campaignbox-content')").show('slow'); } $("div#test").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>
