Widget:CampaignCards: Difference between revisions

From Unforgotten Realms Wiki
Jump to navigationJump to search
Newer edit →
imported>Pillowkeeper
imported>Pillowkeeper
Created page with "<div onClick="openCard(this)" class="campaignbox" id="test"> <div class="campaignbox-card"> <img class="campaignbox-image" src="https://stream.urealms.com/img/watch/s1c1.j..."
 
imported>Pillowkeeper
No edit summary
Line 1: Line 1:
<div onClick="openCard(this)" class="campaignbox" id="test">
<div onClick="clickCard(this)" class="campaignbox" id="test">
 
<div class="campaignbox-card">
  <img class="campaignbox-image" src="https://stream.urealms.com/img/watch/s1c1.jpg" >
    <div class="campaignbox-text">
      <h4 style="margin:7px">
  <b>Season 1</b></h4>
      <p style="margin-top:4px">Band of Thieves</p>
    </div>
    </div>
  <div class="campaignbox-content">
      <h1 class="darkCrystal">
      Band of Thieves
      </h1>
  </div>
</div>
 
<div onClick="clickCard(this)" class="campaignbox" id="test">
 
<div class="campaignbox-card">
  <img class="campaignbox-image" src="https://stream.urealms.com/img/watch/s1c1.jpg" >
    <div class="campaignbox-text">
      <h4 style="margin:7px">
  <b>Season 1</b></h4>
      <p style="margin-top:4px">Band of Thieves</p>
    </div>
    </div>
  <div class="campaignbox-content">
      <h1 class="darkCrystal">
      Band of Thieves
      </h1>
  </div>
</div>
<div onClick="clickCard(this)" class="campaignbox" id="test">
 
<div class="campaignbox-card">
  <img class="campaignbox-image" src="https://stream.urealms.com/img/watch/s1c1.jpg" >
    <div class="campaignbox-text">
      <h4 style="margin:7px">
  <b>Season 1</b></h4>
      <p style="margin-top:4px">Band of Thieves</p>
    </div>
    </div>
  <div class="campaignbox-content">
      <h1 class="darkCrystal">
      Band of Thieves
      </h1>
  </div>
</div>
<div onClick="clickCard(this)" class="campaignbox" id="test">
 
<div class="campaignbox-card">
  <img class="campaignbox-image" src="https://stream.urealms.com/img/watch/s1c1.jpg" >
    <div class="campaignbox-text">
      <h4 style="margin:7px">
  <b>Season 1</b></h4>
      <p style="margin-top:4px">Band of Thieves</p>
    </div>
    </div>
  <div class="campaignbox-content">
      <h1 class="darkCrystal">
      Band of Thieves
      </h1>
  </div>
</div>
<div onClick="clickCard(this)" class="campaignbox" id="test">


  <div class="campaignbox-card">
  <div class="campaignbox-card">
Line 17: Line 82:


<script>
<script>
function openCard(card){
function clickCard(card){
var height = $(card).height();
var id = card.id
console.log(card.id)
$("div#" + id + "div:not('.campaignbox-content')").fadeToggle('slow');
$("div#test div:not('.campaignbox-content')").fadeToggle('slow');
if(!$("div#" + id).hasClass("opened")){
if(!$("div#test").hasClass("opened")){
$("div#" + id).animate({width: '100%', height:'300px'});
$("div#test").animate({width: '100%', height:'300px'});
$("div#" + id + " .campaignbox-content").show('slow');
$("div#test .campaignbox-content").show('slow');
$("div#" + id + " div:not('.campaignbox-content')").hide('slow');
$("div#test div:not('.campaignbox-content')").hide('slow');
} else {
} else {
$("div#test").animate({width: '200px', height: '184px'});
$("div#" + id + ").animate({width: '200px', height: '184px'});
$("div#test .campaignbox-content").hide('slow');
$("div#" + id + " .campaignbox-content").hide('slow');
$("div#test div:not('.campaignbox-content')").show('slow');
$("div#" + id + " div:not('.campaignbox-content')").show('slow');
}
}
$("div#test").toggleClass("opened");
$("div#" + id + ").toggleClass("opened");
}
}
</script>
</script>

Revision as of 20:25, 29 August 2017

 <img class="campaignbox-image" src="https://stream.urealms.com/img/watch/s1c1.jpg" >

Season 1

Band of Thieves

Band of Thieves 

 <img class="campaignbox-image" src="https://stream.urealms.com/img/watch/s1c1.jpg" >

Season 1

Band of Thieves

Band of Thieves 

 <img class="campaignbox-image" src="https://stream.urealms.com/img/watch/s1c1.jpg" >

Season 1

Band of Thieves

Band of Thieves 

 <img class="campaignbox-image" src="https://stream.urealms.com/img/watch/s1c1.jpg" >

Season 1

Band of Thieves

Band of Thieves

<script> function clickCard(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>

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