Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

Custom Code - Help adding a Quick Disguised Exit button to my site (Brine template)


SG2

Question

Recommended Posts

  • 0

wrap code in <script> code here</script> and add to Home >Settings > Advanced > Code Injection > Footer

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
7 hours ago, GooseGuy said:

Any luck finding an answer to this? I am currently designing a non profit website for domestic violence and am having the same issue of finding a solution for a safe exit button

Have you solved it yet? Can you share site url? Do you use Personal Plan or higher?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

Site URL: https://www.wcpark.org/

Hello, I'm trying to add a website escape key to a site I'm working on. The site is for victims of domestic abuse, and the user needs a quick exit shortcut key. The standard is the esc key but after lots of digging and testing I haven't gotten anything working, not that I'm advanced in code or anything. I've seen people work magic with code opening a new tab and hiding the old so viewer can't go back, that's cool but first step first how can I get the keyboard shortcut working?


Here's the current site in process being built in Squarespace 7.1: https://www.wcpark.org/

And heres a site that has it working for reference: https://willowcenterny.org/

 

Thanks much for any help.

Link to comment
  • 0
On 2/5/2021 at 12:45 PM, sixwhales said:

The standard is the esc key but after lots of digging and testing I haven't gotten anything working, not that I'm advanced in code or anything. I've seen people work magic with code opening a new tab and hiding the old so viewer can't go back, that's cool but first step first how can I get the keyboard shortcut working?

I don't recommend concentrating on the Esc key idea. It could be added later, but to be honest it's a "nice to have" because it will be of little help to victims using mobile or tablet devices (there's no visible keyboard during browsing). These users typically account for more than 50% of the audience.

It's important to add an on-screen 'button' that can be clicked/tapped. is always visible and easily reachable. In other words large. It's also essential that it sufficiently masks the page that was being viewed, or it won't serve its purpose.

The 'quick escape' option on the reference site you've quoted is unfortunately not very good. It only loads an empty search screen (it should always contain some benign content) and pressing the browser's back button will take someone straight back to the site that was being viewed. 

The CSS tricks article (quoted earlier in this thread) is actually very good. If you need help implementing this on a Squarespace site, do let me know and I'll provide assistance. It's important that potential victims can browse for help more safely.

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0

Thanks for your reply paul2009, I have a button and knew how to add that. For the escape key, I've tried a few attempts of the different snippets of code in the CSS tricks article, but nothings working for me. At the moment I turned on the log-in with escape key as it generally serves the purpose just not to the best place. 

Link to comment
  • 0
Posted (edited)
On 2/10/2021 at 4:07 PM, paul2009 said:

The CSS tricks article (quoted earlier in this thread) is actually very good.

Hi @paul2009, thanks for your comments that led me to this thread. I read the CSS tricks article and am trying to implement their solution in a simple way using the Squarespace announcement bar to 1. open a new tab and 2. close the current window on click. I added the code and it seems simple enough, but it's not working:

<script>
$(".sqs-announcement-bar").on("click", function() {
  window.open("http://weather.com", "_newtab");
  window.location.replace('http://google.com');
});
</script>

Nothing happens when you click the announcement bar. I also tried .sqs-announcement-bar-content and .sqs-announcement-bar-url (both with and without a url added in the normal announcement bar settings). Thoughts?

Site url:https://usafv.squarespace.com/
Password: Alaska

Edited by Inscape
adding site url and password
Link to comment
  • 0

@Inscape

First try wrapping the code in a document ready.

<script>

  $( ( ) => {
  
    $(".sqs-announcement-bar").on("click", function() {
      window.open("http://weather.com", "_newtab");
      window.location.replace('http://google.com');
      });
      
      } );
      
  </script>

What is happening now is that the code is running before the announcement bar is on the DOM. If that change doesn't work then you'd need a MutationObserver.

The ab may not be the best option for displaying the message. If the user clicks on the x to close the announcement bar it won't show up again until the ab is changed.

Please see Adding an announcement bar - Reset visibility.

 

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
19 hours ago, creedon said:

What is happening now is that the code is running before the announcement bar is on the DOM.

Thanks for this @creedon! I tried the code you sent and it seems to work in admin mode only. But only part of it works: it opens a new tab with the weather, but doesn't redirect the current tab to google.

My plan with the announcement bar was just to hide the X so no one could close out of it. 🙂

Link to comment
  • 0
1 minute ago, Inscape said:

My plan with the announcement bar was just to hide the X so no one could close out of it.

👍

I just did some testing of the code with the document ready and when not in preview, even with the code wrapped in document ready, the ab is not on the DOM when the code runs.

So you would need a MutationObserver to wait for the ab to show up and then run your code.

It might be better to use code to add an area where the quick exit could go rather than add a dependency on MutationObserver. Recent popular browsers support MO.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
34 minutes ago, creedon said:

the ab is not on the DOM when the code runs

Ok super helpful, thanks!! It might just be easier to make my own bar. I'm a little scared of MO... Slightly out of my league and afraid I'll mess it up!

Link to comment
  • 0
21 hours ago, Inscape said:

I read the CSS tricks article and am trying to implement their solution in a simple way using the Squarespace announcement bar.

Simple is usually better so, in all honesty, I'd recommend creating the escape bar with some HTML instead of trying to repurpose the announcement bar. This way you can rely on the bar being available.

If you hide the announcement bar, here's an example of what you could add to Settings > Advanced > Code Injection > Header:
 

<div class="escape-bar-wrapper">
  <div class="escape-bar">
    <p><strong>QUICK EXIT</strong></p>
    <p>Click this bar at any time to immediately close this website and check the weather</p>
  </div>
</div>

<style>
  .escape-bar-wrapper {
    z-index: 4;
    position: fixed;
    text-align: center;
    background: #8ae5e2;
    left: 0;
    right: 0;
}
</style>

This should add the bar and style it. You can then amend your script so that when a visitor clicks this the escape-bar-wrapper div, the url is changed.

(Note this is just an example and hasn't been tested, but it will save you lots of complex code.)

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0
25 minutes ago, paul2009 said:

I'd recommend creating the escape bar with some HTML instead of trying to repurpose the announcement bar

I basically just did exactly what you described in your email, @paul2009! Except I put the code in a code block in the footer.

<div id="quick-exit">
  <h4>QUICK EXIT: </h4>
  <p>Tap this bar at any time to immediately close this page and check the weather.</p>
</div>

Custom CSS:

#quick-exit {
  position:fixed;
  top:0;
  left:0;
  z-index:9999;
  background:#8ae5e2;
  width:100% !important;
  padding:16px;
  text-align:center;
}
#quick-exit h4 {margin:0 !important;}
#quick-exit p {margin:0.2em 0 0 0 !important;}

Code Injection:

<script>
$(document).ready(function(){
    $("#quick-exit").on("click", function() {
      window.open("http://weather.com", "_newtab");
      window.location.replace('http://google.com');
     });
});
  </script>

It works perfectly!! Exactly the functionality I wanted! Here it is in action if anyone wants to see: usafv.squarespace.com (password: Alaska).

Thanks again @creedon and @paul2009 for all your help with this. I know my client will be so pleased to have this safety feature for those she serves.

Link to comment
  • 0

@creedon @paul2009  - I have read this thread 100 times and still can't get this to work correctly on our site, but would love some assistance. This is the link : https://www.empowernowproject.org/  (pw: 84532)

I followed Inscape's info exactly:

1. I added the text "quick exit" to a code block in my footer.

2. Add the custom css to design > custom css  (and successfully changed styling a bit)

3. Added the code below to settings > advanced > code injection > header

<script>
$(document).ready(function(){
    $("#quick-exit").on("click", function() {
      window.open("http://weather.com", "_newtab");
      window.location.replace('http://google.com');
     });
});
  </script>

But... nothing happens - no click function. 😞  What am I missing??

Edited by aeperri
Link to comment
  • 0
35 minutes ago, aeperri said:

What am I missing??

Perhaps you didn't add the jQuery library? The example above relies on it, but I see that it isn't mentioned.

To be honest, the examples provide are really simple and could be built without it, but if you are using them, you'll need something like this in your code injection (before the script):

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-vtXRMe3mGCbOeY7l30aIg8H9p3GdeSe4IFlP6G8JMa7o7lXvnz3GFKzPxzJdPfGK" crossorigin="anonymous"></script>

 

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0

@aeperri

Did you install jQuery? That step may have not been explicitly mentioned. Us programmer types may have inferred that from this thread.

If not, then add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
1 minute ago, creedon said:

Ha ha. @paul2009 and I both had the same thought! 🙂

Great minds! 🙂 And it worked! Thank you so much!

Bonus question if I may, since you both are rock stars and responded so quickly! If I wanted to apply this same function to the button on my header (Leave this website button) - is there a way I can assign an CSS ID  to that button to have this same functionality work on that button?  If not no big deal, I can make the added bar work. But wondered if there was a simple way to target that specific button.

 

Link to comment
  • 0

@aeperri

I'm not seeing a leave button in the header. In general not all elements on a page have an explicit id set.

However almost all elements can be targeted somehow with a CSS selector. But to know what selector we'd need to see the specific element.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
1 hour ago, creedon said:

@aeperri

I'm not seeing a leave button in the header. In general not all elements on a page have an explicit id set.

However almost all elements can be targeted somehow with a CSS selector. But to know what selector we'd need to see the specific element.

Yes, sorry, I had to pivot for the client so they didn't get confused. I changed the button to a donate button. But for example, lets say I wanted to use that donate button in the header? Can you use javascript like that on a button? 

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...