From Dark and Darker Wiki

No edit summary
(topbar testing)
Tag: Replaced
 
(23 intermediate revisions by 4 users not shown)
Line 1: Line 1:
<table cellspacing="0" class="wikitable sortable jquery-tablesorter" style="width:70%; color:#eee; background:transparent; text-align:center; vertical-align:middle; justify-content:center;">
<templatestyles src="Template:Topbar/styles.css" />


<tr>
<div id="topbar" style="position:fixed; top:50px; z-index:7; width:400px; left:50%; transform:translate(-50%); background-color: #007bff; border: 1px solid #ccc; border-radius: 5px; overflow: hidden;">
<td style="font-weight:bold; background-color:rgb(220,220,220,0.2); width:10%">Crypts</td>
    <!-- Div acting as a button to toggle visibility -->
<td style="text-align-last: center;font-weight:bold">[[File:Lich.png|link=Lich|x100px]]
    <div id="toggleDiv" style="cursor: pointer; padding: 10px; background-color: #0056b3; color: white; text-align: center;">
          <p>[[Lich]]</p></td>
        
        <td style="text-align-last: center;font-weight:bold">[[File:Ghost King.png|link=Ghost King|x100px]]
    </div>
         <p>[[Ghost King]]</p></td>
   
        <td style="text-align-last: center;font-weight:bold">[[File:Skeleton Warlord.png|link=Skeleton Warlord|x100px]]
    <!-- Content that will be shown/hidden -->
         <p>[[Skeleton Warlord]]</p></td></tr>
    <div id="topbarContent" style="padding: 10px; background-color: #f8f9fa;">
       
         <table class="basicsnavtable" style="width: 100%; margin: 0; border-collapse: collapse;">
<tr>
            <tr>
<td style="font-weight:bold; background-color:rgb(220,220,220,0.2); width:10%">Goblin Caves</td>
                <td class="last" style="padding: 5px;">Season End:</td>
  <td style="text-align-last: center;font-weight:bold">[[File:Cave Troll.png|link=Cave Troll|x100px]]
            </tr>
      <p>[[Cave Troll]]</p></td>
            <tr>
      <td style="text-align-last: center;font-weight:bold">[[File:Cyclops.png|link=Cyclops|x100px]]
                <td class="last" style="color:green; padding: 5px;">{{#widget:Countdown|uniqueId=A|date=2024-08-30 02:00:00}}</td>
      <p>[[Cyclops]]</p></td>
            </tr>
        <td style="text-align-last: center;font-weight:bold"></td></tr>
            <tr>
<tr>
                <td class="last" style="padding: 5px;">Wipe Day: [https://media.discordapp.net/attachments/1055538406509264967/1277170341357293568/image.png?ex=66cc3112&is=66cadf92&hm=93ca6dd1100180cbc62b00668ea7be6c4888814d9dd7de844983afa3f52b0ef1 6th of September]</td>
<td style="font-weight:bold; background-color:rgb(220,220,220,0.2); width:10%">Ice Cavern</td>
            </tr>
<td style="text-align-last: center;font-weight:bold">[[File:Frost Wyvern.png|link=Frost Wyvern|x90px]]
            <tr>
        <p>[[Frost Wyvern]]</p></td>
                <td class="last" style="color:red; padding: 5px;">{{#widget:Countdown|uniqueId=B|date=2024-09-06 02:00:00}}</td>
        <td style="text-align-last: center;font-weight:bold"></td>
            </tr>
        <td style="text-align-last: center;font-weight:bold"></td></tr>
        </table>
<tr>
    </div>
</div>


</table>
<script>
    document.getElementById("toggleDiv").addEventListener("click", function() {
        var content = document.getElementById("topbarContent");
        var toggleDiv = document.getElementById("toggleDiv");
        if (content.style.display === "none") {
            content.style.display = "block";
            toggleDiv.textContent = "▼";
        } else {
            content.style.display = "none";
            toggleDiv.textContent = "▲";
        }
    });
 
    // Initially show content
    document.getElementById("topbarContent").style.display = "block";
</script>

Latest revision as of 19:23, 26 August 2024

Season End:
Wipe Day: 6th of September

<script>

   document.getElementById("toggleDiv").addEventListener("click", function() {
       var content = document.getElementById("topbarContent");
       var toggleDiv = document.getElementById("toggleDiv");
       if (content.style.display === "none") {
           content.style.display = "block";
           toggleDiv.textContent = "▼";
       } else {
           content.style.display = "none";
           toggleDiv.textContent = "▲";
       }
   });
   // Initially show content
   document.getElementById("topbarContent").style.display = "block";

</script>