Jump to content

raego

Circle Member
 View Profile  See their activity

  • Posts

    68

  • Joined

  • Last visited

 Content Type 

Posts posted by raego

    Create sticky sidebar with CSS

    in Customize with code

    Posted

    On 4/5/2024 at 9:07 PM, tuanphan said:

    I think you can code this with HTML/CSS in Code Block. If you want this, I will try convert it to HTML code in Code Block

    image.thumb.png.a748382807e4ad0f4c4ffbcb58790c43.png

    That would be great if possible - thank you so much!

    Please note the text under each heading will be an anchor link to different sections on the page (these will change as each stage progresses).

    Create sticky sidebar with CSS

    in Customize with code

    Posted · Edited by raego

    On 3/21/2024 at 7:46 PM, tuanphan said:

    Responsive

    What is your problem? Can you describe in more detail? We can check easier

    Apologies – I am trying to see if it's possible to have the sidebar on this page be responsive in the sense that every time the browser changes whether that be from a desktop to smaller desktop, or tablet to mobile, the sidebar parameters break and the elements move outside the shape block underneath. 

    Is there any css that would make this group of blocks stay in the same position regardless of browser size?  E.g. can the 'px' values be something responsive instead of fixed values?

    This is what I currently have:  

     body:not(.sqs-edit-mode-active) .fe-block-yui_3_17_2_1_1710823748951_2234 {
  position: sticky;
  top: 55px;
 }

 body:not(.sqs-edit-mode-active) .fe-block.fe-block-yui_3_17_2_1_1710820931793_13230 {
  position: sticky;
  top: 100px;
 }

 body:not(.sqs-edit-mode-active) .fe-block-yui_3_17_2_1_1710820931793_31196 {
  position: sticky;
  top: 700px;
 }

 body:not(.sqs-edit-mode-active) .fe-block-yui_3_17_2_1_1710820931793_29051 {
  position: sticky;
  top: 740px;
 }

     

    Create sticky sidebar with CSS

    in Customize with code

    Posted

    I am working on a portal update page for a client and would like to know if there's any easier way to create a simple sidebar using a group of blocks. 

    I have currently created a look I really like and the blocks are sticky, however this is not responsive so when the browser size changes on desktop the blocks are skewed.

    Is there better CSS I can use to keep the blocks in the same position regardless of browser size?

    Site - https://brontegroup.com.au/solai-buyers-update-portal

    Screenshot 2024-03-19 at 4.35.29 pm.png

    Image Map Pro - how to get image to appear correctly?

    in Customize with code

    Posted · Edited by raego

    On 1/17/2024 at 12:44 PM, amyvd said:

    Hello! Have you figured this out? Would love some help with my project if you can! 

    Hi there! Unfortunately I had to abandon Image Map Pro as they confirmed their current version isn't compatible with Squarespace. I am using Drawpoint as an alternative - not has much functionality in terms of styling etc but it works and is super easy to setup and embed with iFrame.

    https://www.drawpoint.io/

    Image Map Pro - how to get image to appear correctly?

    in Customize with code

    Posted

    On 10/25/2020 at 1:18 AM, PartTwoDesign said:

    Solved after carefully checking my code 😀

    I had script tags instead of CSS links in my header (and the javascript path was incorrect). Delighted I figured it out!

     

     

    Hi there, I'm hoping to install Image Map Pro on my site but can't for the life of me work out how. Are you able to share how you got it to work? There are no installation steps provided with the plugin and can't work out where each piece of code goes, or what other files are needed to be uploaded etc. Happy to pay for your trouble!

    How to create an interactive 'map' with pop-ups and click-throughs

    in Customize with code

    Posted

    Hi, 

    I'm trying to create an interactive 'map' with hover pop-ups and click-through functionality on an underlying image, that I can then embed into my Squarespace site. 

    I found the perfect solution in the Image Map Pro plugin, however have since been told by the developers that it is not compatible with Squarespace. So while I can create the map exactly how I'd like it to be, I'm unable to get it onto my site. 

    Does anyone have any recommendations for plugins etc that can achieve this and are 100% compatible with Squarespace? 

    Desired functionality:
    - Ability to create poly shapes over my image
    - Pop-up box with property features on hover
    - Click through link to a PDF on the pop-up  

    Site - https://www.brontegroup.com.au/solai-bronte-2023-working
    Password - solai

    Attached screenshot of the interactive image I created for reference. 

    Screen Shot 2023-11-20 at 8.27.29 am.png

    Installing CodeCanyon Interactive Map Pro to Squarespace Site

    in Customize with code

    Posted

    7 hours ago, Beyondspace said:

    Let's take a look at the new Image Map Pro editor for the integration tutorials

    image.thumb.png.6274c269b2d2fbe948db06d417a31a8f.png

    Step 0:

    Open the editor where you save your current image map

    Step 1:
      

    <div id="image-map-pro"></div>

    Go to your page editor, insert a new Code block then paste the snippet into the Code block, make sure you turned off the 'Display source' option

    Step 2.1:

    - First you need to upload the file in the package they gave you, find the file image-map-pro.min.js, and upload the file into your website via accessing the Link Editor, you can check the detail steps here https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files

    Step 2.2:

    - Go to your Footer injection and paste this snippet to the end of the textbox 

    <script src="/s/image-map-promin.js"></script>

    Don't be surprise, Squarespace has rename your file a bit, removing one dot...

    Step 3:

    Paste the given code in the script below the one on Step 2.2

    Thanks so much this has almost worked! The map is now visible and the mouse is recognising the poly shapes on the map - however the actual hover effect is not displaying (e.g. shape overlay and pop up in image below). I have copied the entire script from the editor so not sure what is going wrong.

    Are you able to take a look? (Under the Floor Plans tab on the page)

    https://www.brontegroup.com.au/solai-bronte-2023-working 
    Password: solai

    Screen Shot 2023-11-14 at 7.53.18 am.png

    Installing CodeCanyon Interactive Map Pro to Squarespace Site

    in Customize with code

    Posted · Edited by raego

    Hi, 

    I recently purchased the CodeCanyon Interactive Map Pro plugin - the editor works great and gives me everything I'm looking for. However I'm struggling to work out how to embed the map to my desired site using the code. 

    My main struggle is now knowing where to put the relevant code, or knowing if I need to upload the JS files etc to my Squarespace site as well. 

    Has anyone else managed to embed this plugin to their site successfully?

    This is their documentation - https://preview.codecanyon.net/item/image-map-pro-jquery-interactive-image-map-builder/full_screen_preview/2792438

    Product Images Don't Load without Excessive Scrolling

    in Customize with code

    Posted · Edited by raego

    I have noticed my product images don't load on the product page unless you scroll excessively. I assume this is due to the site-wide animation set. 

    Is there a way to disable to animation on product pages only so images show immediately on loading and not once you start scrolling? I would prefer to keep the site-wide animation but also need the images to load instantly to avoid customers seeing a blank screen next to the description. 

    Site - https://www.raegocreative.com.au/shop

    Screen Shot 2023-10-23 at 8.51.59 am.png

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources