Jump to content

Beyondspace

Circle Member
 View Profile  See their activity

  • Posts

    10,143

  • Joined

  • Last visited

  • Days Won

    80

 Content Type 

Posts posted by Beyondspace

    Custom Read More/Read Less HTML

    in Customize with code

    Posted

    5 hours ago, BilO said:

    Hi, 

    I created custom code block on this page to create a "Read More/Read Less" button for this jobs page (see below) that was very text heavy. The function is working properly on desktop however when I look on my phone is all jumbled up. (Resizing my desktop to a mobile size on my computer everything looks fine.) I modified the code from here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_read_more

    Does anyone have an idea what is happening in mobile and how to fix it, or maybe is there a better code option that I can use for this same effect and look? 

    Appreciate the help in advance. Thanks

    Website Page: https://bell-cheetah-n87s.squarespace.com/jobs
    PW: scratch 

     

    IMG_F1920CFE26EE-1.jpeg

    Regarding read less/ read more, you can try the following solution on this post

     

    Code injection showing on header under nav bar

    in Customize with code

    Posted

    4 hours ago, braydentav said:

    The code is showing under the nav bar even though it is hidden.  .ProductItem .ProductItem-details .product-price,
        .ProductItem .ProductItem-details .afterpayString is the code that is showing. Any help to hide it is greatly appreciated. 

     

    </style>

        .ProductItem .ProductItem-details .product-price,
        .ProductItem .ProductItem-details .afterpayString
        
          {
          
            visibility : hidden;
            
            }
            
        body.twc-spc-show .ProductItem .ProductItem-details .product-price,
        body.twc-spc-show .ProductItem .ProductItem-details .afterpayString
        
          {
          
            visibility : hidden;
            
            }
            
        </style>
        
      <script>
      
        ( ( ) => {
        
          // bail if no mutation observer available
          
          if ( ! ( 'MutationObserver' in window ) ) return;
          
          const initialize = ( ) => {
          
            const isDetail = twcsl.page.store.detail.is;
            
            const options = twc.x8af7a0e8;
            
            const keys = Object.keys ( options.searchReplaceText );
            
            const changeText = ( node ) => {
            
              const walker =
              
                document.createTreeWalker ( node, NodeFilter.SHOW_TEXT );
                
              while ( walker.nextNode ( ) ) {
              
                const node = walker.currentNode;
                
                let t = node.data;
                
                $.each ( keys, function ( i, s ) {
                
                  const m = s.match ( /\/(.+)\/(.*)/ );
                  
                  let r = options.searchReplaceText [ s ];
                  
                  if ( m !== null ) { // m appears to be a regex pattern
                  
                    try {
                    
                      s = new RegExp ( m [ 1 ], m [ 2 ] );
                      
                      } catch {
                      
                        return; // bail on error
                        
                        }
                        
                    if ( ! s.test ( t ) ) return true; // continue if text no match
                    
                    }
                    
                  if ( typeof r == 'function' ) {
                  
                    r = r ( node, isDetail, t, s );
                    
                    if ( typeof r == 'boolean' ) return r;
                    
                    }
                    
                  t = t.replace ( s, r );
                  
                  } );
                  
                node.data = t;
                
                }
                
              }
              
            const $productPrices = $( '.product-price' )
            
              .each ( function ( ) {
              
                changeText ( this );
                
                } );
                
            const $afterpayPrices = $( '.afterpayString' );
            
            if ( options.afterpay )
            
              $afterpayPrices.each ( function ( ) {
              
                changeText ( this );
                
                } );
                
            if ( ! isDetail ) return; // bail if not detail
            
            const attribute = 'data-twc-spc-mo';
            
            const observer = new MutationObserver ( mutations => {
            
              $.each ( mutations, function ( ) {
              
                // continue if no added nodes
                
                if ( ! this.addedNodes.length ) return true;
                
                const target = this.target;
                
                // previous change was forced
                
                if ( this.attributeName == attribute )
                
                  if ( $( target ).attr ( attribute ) == 'true' )
                  
                    $( target ).attr ( attribute, 'false' );
                    
                    else if ( this.oldValue == 'true' )
                    
                      return true;
                      
                observer.disconnect ( );
                
                changeText ( target );
                
                pricesObserve ( );
                
                } );
                
              } );
              
            const pricesObserve = ( ) => {
            
              // listen for changes in product prices
              
              $productPrices.each ( function ( ) {
              
                observer.observe ( this, {
                
                  attributeFilter : [ attribute ],
                  
                  attributeOldValue : true,
                  
                  childList : true
                  
                  } );
                  
                } );
                
              // listen for changes in afterpay prices
              
              if ( options.afterpay )
              
                $afterpayPrices.each ( function ( ) {
                
                  observer.observe ( this, {
                  
                    attributeFilter : [ attribute ],
                    
                    attributeOldValue : true,
                    
                    childList : true,
                    
                    subtree : true
                    
                    } );
                    
                  } );
                
              };
              
            pricesObserve ( );
            
            $( 'body' ).addClass ( 'twc-spc-show' );
            
            };
            
          switch ( true ) {
          
            case twcsl.ss.is71 :
            
              $( initialize );
              
              break;
              
            case twcsl.ss.is70 :
            
              Squarespace.onInitialize ( Y, initialize );
              
              break;
              
            }
            
          } ) ( );
          
        </script>

    Can you share your URL so we can check easier?

    Lightbox a Gallery slideshow block

    in Customize with code

    Posted

    On 2/7/2024 at 8:11 PM, ZKE said:

    I need some code that will turn a Gallery slideshow block into a (slideshow) lightbox when clicked. This is for a course collection page (so it's behind a paywall and I cannot share the URL.)

    I purchased the Lightbox Anything plugin but it does not solve my problem. If anyone could help with this (opening a gallery slideshow block in a lightbox), it would be hugely appreciated! 

    If this isn't possible, another workaround option that I'm currently using is an image block that links to a File that opens a PDF... But I want to be able to add a caption (or caption on hover) that tells people to click in to the image to open the file. How could I do this, and is there any way to use CSS to apply the same affect to all images within this course collection? (So I do not have to update the code for every class page I create, which will have different images and files but all need the same functionality of a caption on hover...)

    Please check out our plugin Lightbox Studio, I have make a step-by-step tutorial to Lightboxify Slide, Carousel and Stacked Gallery block

    Trying to create a slider that adjusts the pricing on my page.

    in Customize with code

    Posted

    10 hours ago, davidgluhaich said:

    I have the business plan. Is there any way to copy the formula?

    This is the code that I'm working with on w3schools but can't quite figure out the rest.

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    .slidecontainer {
      width: 100%;
    }

    .slider {
      -webkit-appearance: none;
      width: 100%;
      height: 15px;
      border-radius: 5px;
      background: #d3d3d3;
      outline: none;
      opacity: 0.7;
      -webkit-transition: .2s;
      transition: opacity .2s;
    }

    .slider:hover {
      opacity: 1;
    }

    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #000000;
      cursor: pointer;
    }

    .slider::-moz-range-thumb {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #000000;
      cursor: pointer;
    }
    </style>
    </head>
    <body>

    <p>Drag the slider to the SQFT of your listing.</p>

    <div class="slidecontainer">
      <input type="range" min="0" max="7000" value="2000" class="slider" id="myRange">
      <p><span id="demo"></span> SQFT</p>
    </div>

    <script>
    var slider = document.getElementById("myRange");
    var output = document.getElementById("demo");
    output.innerHTML = slider.value;

    slider.oninput = function() {
      output.innerHTML = this.value;
    }
    </script>

    </body>
    </html>

    You can try adding the following code to the code block 

    <p>Drag the slider to the SQFT of your listing.</p>

<div class="slidecontainer">
  <input type="range" min="0" max="7000" value="2000" class="slider" id="myRange">
  <p><span id="demo"></span> SQFT</p>
</div>

<style>
  slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #000000;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #000000;
  cursor: pointer;
}
</style>

<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}
</script>

    This is the beginning where you can get the final result

    Coding Greenhorn needs help with a codepen implementation

    in Customize with code

    Posted

    5 hours ago, LeasPhotos said:

    Hello beautiful people,

    I just started to code to pimp my website. Following tutorials, learning some basics. I already implemented some stuff but now I got to a point where I don't understand what to do. Is here someone nice who could help me out?

    I'm trying to implement this text effect to my landing page: https://codepen.io/Valgo/pen/PowZaNY 
    But I don't know where to put the CSS, HTML and JS. I tried a few variations with code boxes, code injection, custom code. I downloaded a google font, imported it. 

    Is there a friendly soul here who could lead me step by step through this project? 

    Best wishes
    Lea

    Have you tried using code block which allow you to input HTML, CSS and JS script?

    image.thumb.png.0ae75cd57865651972bc8dc8dd20e05d.png

    Space on footer

    in Customize with code

    Posted

    4 hours ago, sofia62 said:

    Website: https://www.voodoo-warehouse.com/

    Hi there! I've integrated an Instagram plugin code onto my website to incorporate a chat feature, but it's causing some interference with the space allocation on my footer. Could anyone lend a hand in eliminating the excess space? Much appreciated!

    Captura de Pantalla 2024-04-21 a las 0.43.25.png

    Have you figured it out? I check that there is no space on my side

    adding a subtitle underneath my sight title in my header

    in Customize with code

    Posted

    On 4/20/2024 at 4:51 AM, 1000Watts said:

    Hello,

    I found a code to add the subtitle in my heading but it is landing in the middle of my site name.    How do I move my subtitle "TELEVISION PRODUCER" underneath my site title and change the font?  Site:  https://www.ellekeoghanclark.com/  Password:  ilovejagger.

    CODE FOUND:

    a#site-title:after {

      content: "TELEVISION PRODUCER";

    display: block;

        font: advent pro;

    font-size: 14px;

    }

    Thank you so much!!

    Natalee

    Screen Shot 2024-04-18 at 7.39.46 PM.png

    Do you mean something like this?

    image.thumb.png.f36b2494e11ab8cbee95f56e4abdb3fd.png

    Disappearing hamburger icon when full screen menu is open (desktop)

    in Customize with code

    Posted · Edited by Beyondspace

    1 hour ago, daniellemusarra said:

    Thank you!! This worked great. I'm now wondering if there's a way to remove the logo when the menu pops up and only have the cross? Is this possible?

    Appreciate your help!

    image.thumb.png.df05f8eb337a9c2604b95eb21365ff3c.png

    Sure, here is the code to hide the logo when you open the burger menu on desktop 

    @media only screen and (min-width: 768px) {
  .header--menu-open .header-title-logo {
    visibility: hidden;
  }
}

     

    Trying to create a slider that adjusts the pricing on my page.

    in Customize with code

    Posted · Edited by Beyondspace

    11 hours ago, davidgluhaich said:

    So I have a real estate marketing company and my pricing is based off of square footage of the listing. I'd like to have a slider, like on this page (https://www.mavenxvisuals.com/pricing-and-packages-1), that adjusts the pricing shown when you drag it between different square footage. How did they accomplish this? I've seen it before, but they were always WP websites. This one is Squarespace, so now that I know it's possible, I'd like to do the same on my site.

     

    Thanks in advance!

    I checked that this site is running some code blocks and custom javascript to proceed with this calculation. It is required at least the business plan to achieve this feature.

    Your site requires the same formula as this site or you have a different concept?

    How to customize cards

    in Customize with code

    Posted

    53 minutes ago, PapaJoe said:

    Hi, I'm currently having an issue - I'm currently using "simple list" to create the card feauture but as seen in the attached screenshot I can't replicate/implement the same look as shown in the design. The cards on the site are so far away and "fat". Is there a way to customize and fix this?

    Also, for some reason I can't change the font family/style either - any advice on that?

    Screenshot 2024-04-19 200324.png

    Screenshot 2024-04-19 200351.png

    Screenshot 2024-04-20 010704.png

    Screenshot 2024-04-20 010733.png

    Can you share your URL so we can check it easier?

    Disappearing hamburger icon when full screen menu is open (desktop)

    in Customize with code

    Posted

    7 hours ago, daniellemusarra said:

    Hi there! 

    I'm wondering if I could get some help - my hamburger icon is disappearing when I open my full screen menu. I used this tutorial to create the menu: https://community.elfsight.com/t/squarespace-custom-fullscreen-burger-menu/18276 but it seems like the open menu covers the exit symbol when opened. I'd like the exit icon to be on top of the open full screen menu.

    my site is: https://grouse-pepper-fl3e.squarespace.com/home
    PW: 123

    Current CSS: 

    //show burger icon//
    @media screen and (min-width:768px) {
    .header-burger {
        display: flex !important;
        justify-content: flex-start !important;
      z-index: 1 !important;
    }
    .header-nav {
        display: none;
    }
    .header-actions-action {
        display: none !important;
    }
    .header .header-announcement-bar-wrapper {
        padding-top: 40px !important;
        padding-bottom: 20px !important;
    }
    }
    @media screen and (min-width:768px) {
        /* Fix footer invisible behind page content */
    footer.sections {
         z-index: 9999999 !important;
     }
    /* change footer 2 sections to 100% height and 50% width */
    footer.sections section:nth-child(3), footer.sections section:nth-child(2) {
        width: 50%;
        height: 100vh;
        position: fixed;
        z-index: 9999;
        left: 0;
    }
    footer.sections section:nth-child(3) {
        left: 0;
    }
    /* move footer section 2 to right 50% */
    footer.sections section:nth-child(2) {
        left: 50%;
        right: 0;
    }
    /* disable scroll when burger menu is open */
    .header-burger--open body {
        overflow: hidden;
    }
    /* effect on 2 sections when click burger menu */
      body footer.sections section:nth-child(3), body footer.sections section:nth-child(2) {
        transition: transform 1.2s ease;
          top: 32px !important;
    }
    body footer.sections section:nth-child(3) {
        transform: translateY(-150%);
        transition: transform 0.75s ease;
    }
    body footer.sections section:nth-child(2) {
        transform: translateY(150%);
        transition: transform 0.75s ease;
    }

    body.header--menu-open footer.sections section:nth-child(3) {
        transform: translateY(-0%);
        transition: transform 0.75s ease;
    }

    body.header--menu-open footer.sections section:nth-child(2) {
        transform: translateY(0%);
        transition: transform 0.75s ease;
    }
    }

    Any help would be much appreciated thank you!!

    Your footer is set with 9999999 which is over than header

    Quote

     z-index: 9999999 !important

    Try adding the following Custom CSS to make it visible again 

    #header {
  z-index: 99999999 !important
}

    Let me know how it works

    create parallax in 7.1

    in Customize with code

    Posted

    1 hour ago, hoehtstudio said:

    Hi 

    can someone help me out, please? 

    I want to create a real parallax in 7.1. 

    Example is https://www.franckmuller.com

    The brine family in 7.0 was great for that, but i lacked great features that exist in 7.1. 

     

    Thanks so much for help. 

     

    Kind regards, 

    Hugo

     

    Have you tried the standard image effect on Squarespace yet?

    Linear gradient blending solid header with gallery section below

    in Customize with code

    Posted · Edited by Beyondspace

    4 hours ago, latrell_hopamountain said:

    URL: bhr-harnessing-hope.squarespace.com
    PW: bhhh2024

    I have a full-bleed gallery section that I want to blend with the header color using linear gradient *without* making the gallery part of the header background. I tried using the following CSS from a different thread, but it only works with single background images:  

    section[data-section-id="65de50da35bbef7c964a2ee7"]
.content-wrapper
{
  width:100%!important;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(255, 255, 255, 1));
  z-index: 1;
  max-width: inherit;
}

    If at all possible, I would like the same effect but apply it to a gallery section for a seamless transition between header and gallery.

    @tuanphan might you have some insight?

    Have you tried setting the solid header?

    image.thumb.png.a92868b288e03770961500cc0f114378.png

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources