bema

Posted by DivineStories on September 6, 2023 at 5:18 pm
<!DOCTYPE html>
<html>
<head>
  <title>Envisioning Scripture: [Your Title Here]</title>
  <style>
    #popup {
      display: none;
      position: fixed;
      border: 1px solid #666;
      padding: 10px;
      background-color: #f9f9f9;
      width: auto;
      max-width: 400px;
      z-index: 1000;
    }
    .reference {
      cursor: pointer;
      text-decoration: underline;
      color: blue;
    }
  </style>
</head>
<body>
  <h1>Envisioning Scripture: [Your Title Here]</h1>
  <div id="article">
    <p>The sky bursts into a myriad of colors as an angel descends [Revelation 14:6].</p>
  </div>
  <div id="popup">
    <span id="popup-text"></span>
    <button onclick="closePopup()">Close</button>
  </div>
  <script>
    var verseMap = {
      'Revelation 14:6': 'Then I saw another angel...'
      // Add other mappings here
    };
    var counter = 1;
    var article = document.getElementById("article");
    article.innerHTML = article.innerHTML.replace(/\[([^\]]+)\]/g, function(match, scripture) {
      if (verseMap[scripture]) {
        var refNum = 'REF-' + counter++;
        return <span class="reference" </p><p>                  onmouseover="showPopup(event, '${verseMap[scripture]}')" </p><p>                  onclick="showPopup(event, '${verseMap[scripture]}')">${refNum}</span>;
      } else {
        return match;
      }
    });
    function showPopup(event, text) {
      var popup = document.getElementById('popup');
      var popupText = document.getElementById('popup-text');
      popupText.innerHTML = text;
      popup.style.left = event.clientX + 'px';
      popup.style.top = (event.clientY - 80) + 'px';
      popup.style.display = 'block';
    }
    function closePopup() {
      var popup = document.getElementById('popup');
      popup.style.display = 'none';
    }
  </script>
</body>
</html>
DivineStories replied 3 weeks, 1 day ago 1 Member · 0 Replies
0 Replies
Sorry, there were no replies found.