Jump to content

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

Recommended Posts

@aeperri

No worries.

Instead of, or in addition to, targeting #quick-exit you could try .header-actions-action--cta a. Also set the link for the cta in the SS interface to #.

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
On 7/29/2021 at 1:08 PM, creedon said:

That step may have not been explicitly mentioned. Us programmer types may have inferred that from this thread.

Sorry @aeperri, that's exactly right... I didn't include the Jquery library script because I had already loaded it for other purposes. I sometimes forget to add it to posts like this! I'm SO GLAD you were able to figure it out!

Link to comment
  • 7 months later...

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

I saw other posts on this topic but am not sure how to execute what Paul2009 is describing. My client would like an "EXIT" button with similar functionality to what is shown on the following site: https://www.journeyneo.org/ The EXIT button on the Journey site opens a new tab to a site (weather.com) and replaces the original Journey site with a different URL (google.com) that then doesn't return to Journey when you hit back. The Journey site appears to be a Squarespace site, when I inspected the EXIT button, I see lots of Squarespace references and the announcement bar at the top looks like Squarespace. 

Link to comment
1 hour ago, SpanerMktg said:

I saw other posts on this topic but am not sure how to execute what Paul2009 is describing.

Hi @SpanerMktg. The site you've mentioned is using the exact solution that I proposed. Which part are you having difficulties following?

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
On 3/29/2022 at 4:59 PM, SpanerMktg said:

I guess where to put the code as it relates to my button.

You could use a Squarespace button but, as seen on your site, the button will scroll out of reach when the header disappears out of view, and this makes it more difficult for the user to quickly mask their browsing.

The solution I described used a button that was generated in the code. This allowed it to be placed in a fixed position within the browser, even when the user scrolled - just like the example you've quoted. You can achieve this by placing the code in the Code Injection area of the site and then adding the CSS to style the button and fix its position.

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
43 minutes ago, paul2009 said:

You could use a Squarespace button but, as seen on your site, the button will scroll out of reach when the header disappears out of view, and this makes it more difficult for the user to quickly mask their browsing.

The solution I described used a button that was generated in the code. This allowed it to be placed in a fixed position within the browser, even when the user scrolled - just like the example you've quoted. You can achieve this by placing the code in the Code Injection area of the site and then adding the CSS to style the button and fix its position.

Got it (i think). I was able to get the full width at the top to work - now it is a matter of styling and positioning it (in Design > Custom CSS). Thanks so much. 

Link to comment
  • 3 months later...

Hello all,

I had this solution working just fine on my 7.1 site for about 4 months and in the past few days it has stopped functioning. Would anyone be able to give me an idea of how to remedy this. I've gone back over this post many times and have tried other options to no avail. Running out of ideas, any help is appreciated. Website is https://avenueshelp.org  

Thanks!

Edited by subrosa
Problem resolved by adding sufficient padding to drop the bar below the header. Need to finesse the appearance but it's functional.
Link to comment
14 hours ago, subrosa said:

Hello all,

I had this solution working just fine on my 7.1 site for about 4 months and in the past few days it has stopped functioning. Would anyone be able to give me an idea of how to remedy this. I've gone back over this post many times and have tried other options to no avail. Running out of ideas, any help is appreciated. Website is https://avenueshelp.org  

Thanks!

Did you solve or still need help? If still need help, which code did you use? I see a lot of code in this topic

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
On 7/20/2022 at 2:33 AM, tuanphan said:

Did you solve or still need help? If still need help, which code did you use? I see a lot of code in this topic

Thank you Tuanphan, I commented in my previous post that it was a padding issue and I applied a fix that worked, until recently.  I've included all of the code I'm using for this feature below, any help is very appreciated, I've gone over it numerous times and I'm just not seeing the solution.

Edit: The gold bar with the feature is intended to be just below the header containing the navigation and logo.

Script in Code Injection

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script>
$(document).ready(function(){
    $("#quick-exit").on("click", function() {
      window.open("https://www.lifehack.org/695043/workout-routine-for-women-to-get-strong-and-toned", "_newtab");
      window.location.replace('https://blogs.womans.org/category/health-fitness/');
     });
});
  </script>


CSS

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

/* Override h2 color style in quick escape bar */
#block-yui_3_17_2_1_1638291030593_8354 
h2 {color: #ffffff !important;
}

Footer Code Block

<div id="quick-exit">
  <h2>QUICK EXIT:</h2>
  <p>Tap this bar anytime to immediately close this page and open two others.</p>
</div>

Edited by subrosa
Add comment regarding the desired position of the escape bar.
Link to comment
On 9/2/2022 at 9:59 PM, subrosa said:

Thank you Tuanphan, I commented in my previous post that it was a padding issue and I applied a fix that worked, until recently.  I've included all of the code I'm using for this feature below, any help is very appreciated, I've gone over it numerous times and I'm just not seeing the solution.

Edit: The gold bar with the feature is intended to be just below the header containing the navigation and logo.

Script in Code Injection

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script>
$(document).ready(function(){
    $("#quick-exit").on("click", function() {
      window.open("https://www.lifehack.org/695043/workout-routine-for-women-to-get-strong-and-toned", "_newtab");
      window.location.replace('https://blogs.womans.org/category/health-fitness/');
     });
});
  </script>


CSS

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

/* Override h2 color style in quick escape bar */
#block-yui_3_17_2_1_1638291030593_8354 
h2 {color: #ffffff !important;
}

Footer Code Block

<div id="quick-exit">
  <h2>QUICK EXIT:</h2>
  <p>Tap this bar anytime to immediately close this page and open two others.</p>
</div>

I think you should move this code to Code Injection > Footer

<div id="quick-exit">
  <h2>QUICK EXIT:</h2>
  <p>Tap this bar to close this page and open two others immediately.</p>
</div>

Then edit this code

#quick-exit {
    position: fixed;
    top: 128px;
    left: 0;
    z-index: 9999;
    background: #f2bb31;
    width: 100% !important;
    padding: 0px;
    text-align: center;
}

to this

#quick-exit {
    position: absolute;
    top: 120px;
    left: 0;
    z-index: 9999;
    background: #f2bb31;
    width: 100% !important;
    padding: 0px;
    text-align: center;
}

image.thumb.png.545533a67e8ba7cc12788a35f0ccc95c.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 9/4/2022 at 1:12 AM, tuanphan said:

I think you should move this code to Code Injection > Footer

<div id="quick-exit">
  <h2>QUICK EXIT:</h2>
  <p>Tap this bar to close this page and open two others immediately.</p>
</div>

Then edit this code

#quick-exit {
    position: fixed;
    top: 128px;
    left: 0;
    z-index: 9999;
    background: #f2bb31;
    width: 100% !important;
    padding: 0px;
    text-align: center;
}

to this

#quick-exit {
    position: absolute;
    top: 120px;
    left: 0;
    z-index: 9999;
    background: #f2bb31;
    width: 100% !important;
    padding: 0px;
    text-align: center;
}

image.thumb.png.545533a67e8ba7cc12788a35f0ccc95c.png

Thank you very much for the assistance. I'll try this now and let you know how it went!

Link to comment
23 minutes ago, subrosa said:

Thank you very much for the assistance. I'll try this now and let you know how it went!

It works perfectly now, the only slight change I made was to have the bar be "fixed" as opposed to "absolute", the client wanted the bar to always be visible regardless of where the visitor was on the page. Thank you again, the nature of their website made this an important feature. 

Link to comment
  • 3 months later...
4 hours ago, houseofruthinc said:

Hi, I tried adding this to the header space for code injections and I'm still not getting a click function.

The line you added is a library that is used for writing custom code. On it's own it doesn't do anything visible on your site. Custom code needs to be written to do something.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 4 months later...

This thread was so helpful in implementing an EXIT button for a intimate partner violence (domestic violence) resource website and study I am helping put together!

My main addition below to adjust it easily with my site header maintain position right below it (where the language translation buttons are). And aesthetic adjustments, too.

#header {
    top: 50px;
}

Thanks!!!

engagingtogether.com

pw: ETHR2

Link to comment
On 4/13/2023 at 2:26 AM, ETHR said:

This thread was so helpful in implementing an EXIT button for a intimate partner violence (domestic violence) resource website and study I am helping put together!

My main addition below to adjust it easily with my site header maintain position right below it (where the language translation buttons are). And aesthetic adjustments, too.

#header {
    top: 50px;
}

Thanks!!!

engagingtogether.com

pw: ETHR2

Did you solve with the code or still need help?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

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.