Jump to content

GraeMedia

Circle Member
  • Posts

    8
  • Joined

  • Last visited

Posts posted by GraeMedia

  1. 20 minutes ago, GraeMedia said:

    Trying to make a menu folder clickable and have not been able to find this setting in 7.1 (IE someone clicks the folder name rather than a page item within it). 

    I'm having a really hard time believing that this isn't suppored by default and required custom code to enable, but everyting seems to point in that direction. How can that possibly be...? This needs to be an option on the folder settings page asap, but in the meantime, need a workaround. Any help is appreciated.  

    Update: I found a very helpful custom code from https://www.will-myers.com/articles/clickable-folders-for-squarespace-71

    See below - 

    optional: remove extra link on mobile
    In the code below, remove the function call on line 33, addToMobile(folder). This will prevent the mobile link from being added. 



     

    <script>
    (function () {
      let folders;

      function createEventListener(e) {
        let href = e.target.href.replace("-folder/", "");
        window.open(href, "_self");
      }

      function addToMobile(folder) {
        let href = folder.getAttribute("href"),
          hrefAdjusted = href.replace("-folder/", ""),
          text = folder.innerText,
          mobileFolder = document.querySelector(`[data-folder="${href}"]`),
          backButton = mobileFolder.querySelector(".header-menu-nav-folder-content > *:first-of-type");

        //If it exists already
        if (mobileFolder.querySelector(`[href="${href}"]`)) return;

        let newLinkContainer = document.createElement("div"),
          newLink = `<a href="${hrefAdjusted}" tabindex="0">All ${text}</a>`;

        newLinkContainer.classList = "container header-menu-nav-item header-menu-nav-item--external";
        newLinkContainer.innerHTML = newLink;
        insertAfter(newLinkContainer, backButton);
      }

      /* Select All Folder Links &  */
      function setFolderLinks() {
        folders = document.querySelectorAll('.header-display-desktop .header-nav-folder-title[href*="-folder/"]');

        for (folder of folders) {
          addToMobile(folder);
          folder.addEventListener("click", createEventListener);
        }
      }

      /* Insert After Helper Function */
      function insertAfter(newNode, existingNode) {
        existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
      }

      setFolderLinks();
    })();
    </script>

  2. Trying to make a menu folder clickable and have not been able to find this setting in 7.1 (IE someone clicks the folder name rather than a page item within it). 

    I'm having a really hard time believing that this isn't suppored by default and required custom code to enable, but everyting seems to point in that direction. How can that possibly be...? This needs to be an option on the folder settings page asap, but in the meantime, need a workaround. Any help is appreciated.  

  3. On 2/26/2021 at 11:12 PM, kasandramurray said:

    I was having issues with the above code. The comma after the img property causing the code not function properly. Once I removed that comma it worked for me. Here is my updated code:

     

    
    @media (max-width: 768px) {
    	section[data-section-id="5ea5df28b7d80f496463e8db"] .section-background img
    	
    	{
    		display:none;
    	}
    }

     

    Thank you both, this was a huge help!

     

  4. On 7/23/2020 at 3:07 AM, caseyscalf said:

    BOOM! Nailed it. This is how you do it. Make the Width & Height 100%.

    
    <div style="padding:56.25% 0 0 0;position:relative;">
      <a href="https://www.sensebellum.com/new-page" style="position:absolute; top:0; left:0; display:inline-block; width:100%; height:100%; z-index:5;"></a>
      <iframe src="https://player.vimeo.com/video/440169206?background=1?autoplay=1&loop=1&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen>
      </iframe>
    </div>
    
    
    

    Thank You! This is exactly what I was looking for 🙏 

     

×
×
  • 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.