Jump to content
  • 1

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

Question

Recommended Posts

  • 0
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
  • 0

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
  • 0
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?

Improve your online store with our extensions.
About: Sqsp Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Expert and founder of SF Digital, dedicated to improving websites by building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0

@paul2009 I guess where to put the code as it relates to my button. Right now I have my EXIT button in the secondary navigation - not sure where all that code goes. Or is your solution not using a button in the navigation. I apologize - I'm just a graphic designer trying to do this web thing.  127053281_ScreenShot2022-03-29at11_56_25AM.thumb.png.0af87a5ded5c58e876a9da2fd51cbb50.png

Link to comment
  • 0
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.

Improve your online store with our extensions.
About: Sqsp Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Expert and founder of SF Digital, dedicated to improving websites by building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0
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
  • 0

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
  • 0
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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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
  • 0
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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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
  • 0
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

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.