kellyhutsbydesigns

@paul2009 Could you edit this to apply to summary blocks please?

Just to throw in some more background on this in case it's useful to anyone with the same issue.

I had a problem with my client's site's header menu. It would disappear on some browsers and cover the top of the overlay menu with a white bar on others, plus general juddering and scrolling issues. All on mobile.

After painstakingly removing hundreds of lines of code line-by-line, it did indeed turn out to be the line: html, body {overflow-x:hidden;} 

and as @tuanphan suggested, changing it to body {overflow-x:hidden;}  was the fix.

I'd really like to understand from any of the experts on here why that code no longer works? I must have had it in use for three years+ with no issue before (I don't even know why it was there but clearly I had some horizontal overflow at some point that necessitated adding that!). 

I came across this looking for a similar solution - I'm using a free elfsite plugin for reviews on a client's site. When they reach the free views it disappears for the remainder of the month. I thought I'd hacked my way around that by hiding a 'See reviews' link underneath the widget so that it was visible whenever the widget wasn't, but the link isn't clickable, presumably because it's underneath the code block. Is there a way for it to be hidden only when the views have expired? https://www.thefiftychoir.com/ 

@creedon  Any help would be hugely appreciated!

@paul2009 Oops - forgot to attach the screen shot!

Hi Paul, thanks for taking the time to answer. You're spot on that a header doesn't load so it makes total sense that it's not working. However, I added the Jquery to the footer code and it's still not firing the zaps.

I can see the code on the Order Status page, but - as you pointed out - there's no footer as such, the code injection is loading in the page body but it's after the section labelled js-visible, so am I right to surmise that that the footer injection isn't visible and that's why it's not working? 

Is there any way we can force that script higher up the page? And would it make a difference? Or is it just a site-tight and wait and see what happens with the Order status page as it potentially changes over the coming weeks?

Site URL: https://experience-jefferson.squarespace.com/

Is there any way I can code a focal point to a video banner in css? All the client's videos are cropped tightly to the top, so there is lots of heads cutting cut off at certain device sizes! I want to push them all down so that the top of the video aligns with the top of the banner section - rather than the videos being cropped equally from top and bottom.

Bonus would also be to force the video banner below the menu bar, rather than under it as this also doesn't help (I have given that section a margin-top to push it lower but doing this by % or px is obviously an imperfect solution as the menu size is changeable. Is there a way to specify that the margin-top of that section is equal to whatever the current menu bar height is?)

https://experience-jefferson.squarespace.com/

pwrd: jeff

Fabulous! Thank you so much! 

Site URL: https://dev-sioux-city-public-museum.squarespace.com

https://dev-sioux-city-public-museum.squarespace.com/exhibitions/a-life-in-the-wild-t-d-mangelsen

Password: scpm

I found some fabulous code on a blog (sorry, I can't find it to reference!) which allowed me to add these 'This a past event' messages on any events which have already passed.

However, the Java script which takes note of the date is using the date the event started, instead of the date the event finished. For example - this event runs Nov 27th - March 31st - I want the message to kick in on April 1st, but it's been showing since Nov 27th.

This is the code I'm using:

<!-- PAST EVENTS MESSAGE -->
<script>
  // Change past events styling//
  if ( document.body.classList.contains('collection-type-events-stacked') && document.body.classList.contains('view-item') ) {
 
    // Get the date of the event from the datetime attribute of the event-date element
    var eventDate = document.getElementsByClassName("event-date")[0].getAttribute("datetime");
    // Get today's date
    var expDate = new Date();
    // Convert the dates to numbers, for simplicity
    var eventDateParsed = Date.parse(eventDate);
    var expDateParsed = Date.parse(expDate);
    // Add one day (in milliseconds) to today's date
    // This ensures that the class isn't added until the event has ended
    expDateParsed = expDateParsed + (24*60*60*1000);
    // Finally, calculate whether the date is in the past or present/future and apply the appropriate class to the body
    if ( eventDateParsed < expDateParsed ) {
        document.body.classList.add("pastEvent");
    } else {
        document.body.classList.add("futureEvent");
    }
  }
</script>

On 12/10/2021 at 1:52 PM, paul2009 said:

Instead of looking for a single class of summary-title like this:

document.getElementsByClassName("summary-title")[0]

you'll need to look for each class within each section. For example, where the section ID is wxyz, you might use:

 

document.querySelector("section[data-section-id="wxyz"] .summary-title")

 

Thanks so much @paul2009
This didn't work for me using the section ID, but it did with the block ID...

<div id="no-events"></div>

<script>
  window.addEventListener('DOMContentLoaded',function () {
    var sfSummaryExists = document.querySelector("#block-yui_3_17_2_1_1639337200029_6221 .summary-title");
    if (sfSummaryExists == null) {  
      document.getElementById('no-events').innerHTML = "Sorry, we don't currently have any guided tours upcoming.";
    }
  });    
</script>

@iamdavehart Sorry - have only just seen your reply! Great suggestion, will test this one too and report back. Thanks guys!

On 12/4/2021 at 10:05 AM, paul2009 said:

Yes, if you place each Summary Block in a separate section on 7.1 (or pages within an index on 7.0) you could modify the code to check for a Summary Block within the specific section/page. 

@paul2009 That's what I thought but I wasn't able to edit your code to achieve that. Could you drop me a price over to do that please?

On 11/30/2021 at 8:40 AM, tuanphan said:

You want to make image clickable, same url as button?

@tuanphan Yes! After a looong time I got it to work! Thank you

On 11/5/2021 at 3:16 PM, paul2009 said:

You can't achieve the same effect if there is more than one Summary Block, because Squarespace remove the empty Block and there's nothing to check.  

Hi @paul2009

I've spent ages trying to work out why this wouldn't work on one of my pages when it was working perfectly well on another, this makes total sense now!

Is it possible to target one block or section at a time with this at all? I have a museum with different event types so several summaries all on the one page.

On 10/5/2021 at 4:59 AM, bangank36 said:

This pure css trick will make the button cover the whole card

.user-items-list-simple .list-item {
  position: relative;
}
.user-items-list-simple .list-item-content__button-container {
    position: static;
}
.user-items-list-simple .list-item[data-is-card-enabled="true"] .list-item-content__button:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Hey @bangank36 I'm trying this but it's not working because I already have some styling on my auto layouts to shape the buttons (it works when I remove that styling). Could you take a look to see if I can there's anyway I can implement this?
I'd like to put the link on the image only and hide the button ideally.

Site and page: https://dev-sioux-city-public-museum.squarespace.com/visit-sioux-city-museum

login: scpm

I've fixed the above!

Hi @tuanphan

Firstly - thank you so much, this is really helpful as always!

Do you know if I can differentiate between the individual pages in a portfolio and the main portfolio 'landing' page which displays the thumbnail images for each portfolio item?

I have added the sidebar from SQSthemes to a portfolio collection, but I don't want it to display on the main portfolio page - just the individual portfolio items. I have the option to omit certain page IDs in the sidebar code, but I can't seem to target that main page only. I want to avoid listing all of the individual portfolio items in the 'allowed' list as there will be lots of them, but there will only be five main portfolio pages in the 'not allowed' list. If that makes sense?!

Site is https://dev-bcco.squarespace.com/ pward: bcco

The page I'm currently working on is: BLINDS > Roller Blinds