Hidable Text

Hi I wondered if it was possible to do something like hideable text.

On my project pages, add a symbol like a plus sign at the top of the screen that you can still see when scrolling - when you click on it, it reveals text about the project. Currently the text is at the bottom of the screen. I'd like people to be able to read about it instantly instead of scrolling to the bottom - but hide it again by clicking on the cross. So it might look like this in off and on states...

https://www.mattportch.com/lost-america

https://www.mattportch.com/desert-modern

https://www.mattportch.com/desert-modernism

https://www.mattportch.com/forgotten-palms

https://www.mattportch.com/kalah

First, you add a Text Block with plus symbol (use heading 3 or Monospace)

Next, add some text under it

Next, share link to page where you added it, I will give you some JS code to achieve this.

Thanks!

I'd like the cross to be always visible at the top of the screen as you scroll down the page (just as the logo and navigation are) - this way it can be clicked on at any time to read the info.

https://smilodon-ocelot-my5f.squarespace.com/lost-america

On 4/24/2024 at 5:38 PM, mportch said:

Thanks!

I'd like the cross to be always visible at the top of the screen as you scroll down the page (just as the logo and navigation are) - this way it can be clicked on at any time to read the info.

 

https://smilodon-ocelot-my5f.squarespace.com/lost-america

With this lost-america page, you can add this code to Page Header Code Injection

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
   $('div#block-yui_3_17_2_1_1713954438114_16243 pre').click(function(){
    $("div#block-yui_3_17_2_1_1713954438114_16243 p").toggleClass("show");
    }
  );
});
</script>
<style>
  #block-yui_3_17_2_1_1713954438114_16243 pre {
  	cursor: pointer;
  }
  #block-yui_3_17_2_1_1713954438114_16243 p {
  display: none;
  transition: all 0.1s ease;
  }
  .show {
  display: block !important;
     transition: all 0.1s ease;
  }
</style>

Thanks so much!

Is there a way of changing the size of the cross?

And is there also a way of keep the cross at the top of the screen as you scroll so it doesn't dissapear?

https://smilodon-ocelot-my5f.squarespace.com/lost-america

On 4/27/2024 at 1:19 PM, mportch said:

Thanks so much!

Is there a way of changing the size of the cross?

And is there also a way of keep the cross at the top of the screen as you scroll so it doesn't dissapear?

 

 

https://smilodon-ocelot-my5f.squarespace.com/lost-america

Use this code under

<style>
  div#block-yui_3_17_2_1_1713954438114_16243 span * {
    font-size: 30px !important;
}
  div#block-yui_3_17_2_1_1713954438114_16243 {
    position: sticky;
    top: 85px;
    z-index: 99999;
    background-color: white;
}
</style>

Thank you!

Although it doesn't work in desktop view?

It works in mobile view but there is a gap where the image appears behind it as you scroll...?

Try adjust this number

Thanks. I reduced to 65px - this stops the gap in mobile view.

However, the cross still disappears off-screen in desktop view?

Add this code under

<style>
  @media screen and (min-width:768px) {
  div#block-yui_3_17_2_1_1713954438114_16243 {
    top: 85px !important;
}
  }
</style>

Sorry thanks - but the cross still scrolls off the screen on desktop.

Might have to abandon the idea.

You can increase the number 85

Thanks. But I think it just gets too tricky. When I enlarge or reduce the window it messes with the white space - sometimes it works but sometimes it doesn't depending on window size. So might be easier to scrap the idea and keep my text at bottom of page. Thanks for the help on this though!

Folks. If you are enlarging or shrinking (zoom in or out) via the browser then all bets are off for the effectiveness of any custom CSS. It's hard enough to code for 100%. To code for plus or minus is impossible because the browser zoom factor is an emulation in the browser which we have little influence over.