Event overview July 2024

by Kofod

HTML

<div class="backgroundCont">
        <div class="Textarea">
            <div>
                <strong>Another month, another event overview!</strong><br><br>This time I have not saved space for other events to be added later on, but fear not! If you have an event planned you will still be able to message either Kofod, EventTeam or NewsTeam.<br><br>A thread will come up later on to guide you through the process that is needed before your event can be shown in the overview.
            </div>
        </div>

        <img src="https://i.imgur.com/ej3Mkhc.png" usemap="#image-map">

        <map name="image-map">
            <area target="_blank" alt="Passport" title="Passport" href="https://en.virtualpopstar.com/home/competitions?x=read&id=2605" coords="737,334,203,298" shape="rect">
            <area target="_blank" alt="Weddings" title="Weddings" href="https://en.virtualpopstar.com/social/forum?category=11&topic=362207" coords="203,346,738,383" shape="rect">
            <area target="_blank" alt="Pinterest" title="Pinterest" href="https://en.virtualpopstar.com/social/forum?category=11&topic=362312" coords="203,394,738,431" shape="rect">
            <area target="" alt="Friendship" title="Friendship" href="" coords="202,442,737,480" shape="rect" data-popup="popup1">
            <area target="_blank" alt="Raffle" title="Raffle" href="https://en.virtualpopstar.com/social?category=11&topic=362317" coords="202,492,738,528" shape="rect">
            <area target="_blank" alt="WWIB" title="WWIB" href="https://en.virtualpopstar.com/social/forum?category=11&topic=362240" coords="201,539,739,575" shape="rect">
            <area target="_blank" alt="FlipScript" title="FlipScript" href="https://en.virtualpopstar.com/social/forum?category=11&topic=361859" coords="202,587,736,624" shape="rect">
        </map>

        <div id="popup1" class="popup">
            <img src="https://i.imgur.com/Y2OjFxE.png" alt="Image 1">
        </div>
    </div>

CSS

.Textarea {
  position: absolute;
  overflow: auto;
  width: 640px;
  height: 100px;
  left: 132px;
  top: 150px;
  text-align: center;
}

.backgroundCont {
  position: relative;
}

.img {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 100%;
  max-width: 100%;
}

.popup {
  display: none;
  position: absolute;
  background-color: transparent;
  border: none;
  border-radius: 15px;
  padding: 10px;
  z-index: 1000;
  left: 50%;
  top: 50%;
  transform: translate(150%, 200%);
}

.popup img {
  max-width: 300px;
  max-height: 300px;
  border-radius: 15px;
}

.popup a {
  color: blue;
  text-decoration: underline;
}

.Othertextarea {
  text-align: center;
}

* {
  font-family: Arial, sans-serif;
  font-size: 12px;
  color: black;
}

JavaScript

$(document).ready(function() {
    $('area[data-popup]').on('click', function(event) {
        event.preventDefault();
        const popupId = $(this).data('popup');
        const $popup = $('#' + popupId);

        if ($popup.length) {
            console.log('Showing popup with id:', popupId);
            console.log('Popup element:', $popup);

            // Hide any visible popups
            $('.popup').hide();

            // Show the clicked popup
            const rect = this.getBoundingClientRect();
            console.log('Area rect:', rect);
            $popup.css({
                left: rect.left + window.scrollX + 'px',
                top: rect.bottom + window.scrollY + 'px',
                display: 'block'
            });
            console.log('Popup CSS:', $popup.css());
        } else {
            console.error('No popup found with id:', popupId);
        }
    });

    $(document).on('click', function(event) {
        if (!$(event.target).closest('area[data-popup], .popup').length) {
            console.log('Click outside of popup, hiding popups');
            $('.popup').hide();
        }
    });
});