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

Floating button that opens a lightbox form

Question

I'm pretty new to Squarespace but I've been picking apart code for quite some time.

I'm trying to put a floating button on a single page that will pop a lightbox form.  I actually have it completely working using a collection tag with CSS and Advanced HTML.  I was able to get it working exactly the way that I want by creating a button elsewhere in the page and then copying the code and adding it to the floating button.  However, I end up with the original button AND the floating button on the page.  The problem is that if I delete the original button then the floating form stops working.

I feel like the solution would be to try and completely hide the original form or somehow change the original button to be the floating one.

Any ideas or suggestions are greatly appreciated!

Thank you!

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 0

Can you provide some more information to help us understand the issue? It will be difficult for the community to make suggestions if we can't see the site, and don't know the code that you've used. If the site isn't live, the URL will only help if you set a password in the visibility settings and tell us what it is.
 


sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include
I am a Squarespace Expert and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDatepicker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

Share this post


Link to post
  • 0

Thanks for replying, Paul.  The temp page that I have up for testing is https://www.ww2matchmaker.com/test-request-to-buy.

The fixed button and the floating button both work as intended.  But, if I delete the fixed button, the floating ones stops working also.  I guess this make sense as the fixed object is the code that is being used for the floating object. 

Maybe there is a better way to accomplish my objective(float with lightbox pop) but I'm not seeing it.

 

Thanks!

Share this post


Link to post
  • 0

Yes, exactly. You are literally copying the Squarespace button code from one area of the page and injected it again on the same page. That's not something that I'd recommend, as you now have duplicate IDs. You could fuge it by removing the duplicate ID and hiding the original button with some CSS but it's not something I'd recommend on a live site.

Typically a developer would use JavaScript to relocate the button and, if required, encapsulate it in a new div so that you can apply the CSS as you have in your test. Moving it means that there won't be duplicates of elements or IDs.


sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include
I am a Squarespace Expert and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDatepicker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

Share this post


Link to post
  • 0

I see what you are saying.  That pointed me towards another tactic, which seems to be working.

I deleted all the Advanced HTML to remove the duplicate button.  Then I targeted the original button block with Custom CSS, which moved it right into the same floating position that the deleted button was in. 

Now I just need to find a way to keep the floater between the banner and footer.

 

Thanks!

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...