Jump to content

vanAdamme

Member
  • Posts

    7
  • Joined

  • Last visited

vanAdamme's Achievements

  1. Site URL: https://www.firesideediting.com.au/test-page I have the following in Code Injection: <script> var popupArray = []; //Build the array of all popups on the page for (let i = 1; i < 20; i++) { let idString = "myPopup"; idString += i; if (document.getElementById(idString)) { popupArray.push(document.getElementById(idString)); } } var popupLength = popupArray.length; function myFunction(whichTooltip) { var clickedPopup = document.getElementById(whichTooltip); //if clicking on one that has a popup, just close it if (clickedPopup.classList.contains("show")) { clickedPopup.classList.remove("show"); } else { //if clicking on any other, stop showing current popups, and instead show the one clicked closeAllPopups(); clickedPopup.classList.toggle("show"); } } function closeAllPopups() { for (let i = 0; i < popupLength; i++) { popupArray[i].classList.remove("show"); } } </script> This in Custom CSS: .popup { position: relative; display: inline-block; cursor: pointer; color: blue; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* The actual popup */ .popup .popuptext { visibility: hidden; width: 160px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 8px 0; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -80px; } /* Popup arrow */ .popup .popuptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } /* Toggle this class - hide and show the popup */ .popup .show { visibility: visible; -webkit-animation: fadeIn 1s; animation: fadeIn 1s; } /* Add animation (fade in the popup) */ @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } And this in HTML: <p><span class="popup" onclick="myFunction('myPopup1')">Click me to toggle the first popup!<span class="popuptext" id="myPopup1">Popup 1</span></span></p> <p><span class="popup" onclick="myFunction('myPopup2')">Click me to toggle the second popup!<span class="popuptext" id="myPopup2">Popup 2</span></span></p> <p><span class="popup" onclick="myFunction('myPopup3')">Click me to toggle the third popup!<span class="popuptext" id="myPopup3">Popup 3</span></span></p> <p><span class="popup" onclick="myFunction('myPopup4')">Click me to toggle the fourth popup!<span class="popuptext" id="myPopup4">Popup 4</span></span></p> Everything works fine when I test it at JSFiddle, but on SquareSpace the popups don't disappear when you click on a different one. I assume I'm missing something that SquareSpace needs, but I'm not sure what. Can anybody help? PS: The original code was found here.
  2. That's it! Thank you!
  3. Thank you. Do you know of any methods that don't require purchasing plugins?
  4. Site URL: http://www.firesideediting.com.au Howdy, I'm working on a blog for my site and I want to be able to create footnote-style links that instead of taking you to the bottom of the page when clicked, cause the footnote to hover over the text. For example: Here is my example[1]. When a user clicks on the number 1, I want a small textbox to appear where the mouse is, and disappear when the mouse is clicked again. I've searched around but haven't found anything. Any help would be greatly appreciated. Cheers, Adam
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.