Jump to content

lottydotty

Circle Member
 View Profile  See their activity

  • Posts

    28

  • Joined

  • Last visited

lottydotty's Achievements

Level 5

Level 5 (5/20)

  • Conversation Starter Rare
  • Circle Community Advocate Rare
  • Dedicated Contributor Rare

Recent Badges

5

Reputation

2

Community Answers

  1. lottydotty started following Default to Members Area log on pop up and hide sign up popup , MAP with multiple locations , font resizer buttons for accessibility on government website - any way to do this within Squarespace? and 5 others
  2. lottydotty
    @tuanphanWere you able to help @BDG with this? I'd also love to know the answer to this one. We're trying to show multiple locations of testing facilities for a client with locations throughout Wisconsin. I tried using Folio to create a map with the intention of embedding it within a Squarespace site, but that didn't quite work as planned. (The Code embed seemed to mess with other parts of the site.) If you'd like to take a look, I've attached a PNG image the map I created showing one of the hovered-over pins. Right now it only has 8 locations, but the number will increase over time. I'd love your thoughts! Here's the code that was used, too. <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <script> L_NO_TOUCH = false; L_DISABLE_3D = false; </script> <style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style> <style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style> <script src="https://cdn.jsdelivr.net/npm/leaflet@1.6.0/dist/leaflet.js"></script> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.6.0/dist/leaflet.css"/> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <style> #map_7044ac96c09d919a5be7aa74b740915a { position: relative; width: 100.0%; height: 100.0%; left: 0.0%; top: 0.0%; } .leaflet-fade-anim .leaflet-popup { opacity: 0; -webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; transition: opacity 0.2s linear; width: 200px !important; } </style> </head> <body> <div class="folium-map" id="map_7044ac96c09d919a5be7aa74b740915a" ></div> </body> <script> var map_7044ac96c09d919a5be7aa74b740915a = L.map( "map_7044ac96c09d919a5be7aa74b740915a", { center: [44.5, -89.5], crs: L.CRS.EPSG3857, zoom: 7, zoomControl: true, preferCanvas: false, } ); var tile_layer_cdf85b000aab66eb9cd901a7d4e90898 = L.tileLayer( "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {"attribution": "Data by \u0026copy; \u003ca href=\"http://openstreetmap.org\"\u003eOpenStreetMap\u003c/a\u003e, under \u003ca href=\"http://www.openstreetmap.org/copyright\"\u003eODbL\u003c/a\u003e.", "detectRetina": false, "maxNativeZoom": 18, "maxZoom": 18, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false} ).addTo(map_7044ac96c09d919a5be7aa74b740915a); var marker_12fa991856d1b4ca8bdb906d0d147daf = L.marker( [43.0086369, -88.232888], {} ).addTo(map_7044ac96c09d919a5be7aa74b740915a); var popup_a659c22b580cef00e9a73de70a848e8c = L.popup({"maxWidth": "100%"}); var html_664e62df8fb5f7cee5ea08dcab729ac0 = $(`<div id="html_664e62df8fb5f7cee5ea08dcab729ac0" style="width: 100.0%; height: 100.0%;"><b>Waukesha Public Library</b><br>321 Wisconsin Ave, Waukesha, WI 53186<br>Bruce Gay, Director
Kerry Pinkner, Public Services Mgr.</div>`)[0]; popup_a659c22b580cef00e9a73de70a848e8c.setContent(html_664e62df8fb5f7cee5ea08dcab729ac0); marker_12fa991856d1b4ca8bdb906d0d147daf.bindPopup(popup_a659c22b580cef00e9a73de70a848e8c) ; marker_12fa991856d1b4ca8bdb906d0d147daf.bindTooltip( `<div> Waukesha Public Library </div>`, {"sticky": true} ); var marker_047db3fe965142544927b91283fe531a = L.marker( [45.4073486, -92.6445145], {} ).addTo(map_7044ac96c09d919a5be7aa74b740915a); var popup_d02789cb41bd5de3eca5c55f8c6864a4 = L.popup({"maxWidth": "100%"}); var html_adb018ace440e02b90a4eb1f4be3ac67 = $(`<div id="html_adb018ace440e02b90a4eb1f4be3ac67" style="width: 100.0%; height: 100.0%;"><b>St. Croix Falls Public Library</b><br>230 S Washington St, St Croix Falls, WI 54024<br>Su Leslie, Director</div>`)[0]; popup_d02789cb41bd5de3eca5c55f8c6864a4.setContent(html_adb018ace440e02b90a4eb1f4be3ac67); marker_047db3fe965142544927b91283fe531a.bindPopup(popup_d02789cb41bd5de3eca5c55f8c6864a4) ; marker_047db3fe965142544927b91283fe531a.bindTooltip( `<div> St. Croix Falls Public Library </div>`, {"sticky": true} ); var marker_ad93a483355048651d705183e73fc2ce = L.marker( [42.5594662, -87.8532093], {} ).addTo(map_7044ac96c09d919a5be7aa74b740915a); var popup_90c7de1b945ae89c58b6bbc18459cceb = L.popup({"maxWidth": "100%"}); var html_e17df3008b2e59fde59f141d8b598bc8 = $(`<div id="html_e17df3008b2e59fde59f141d8b598bc8" style="width: 100.0%; height: 100.0%;"><b>Kenosha Public Library</b><br>7979 38th Avenue, Kenosha, WI 53142<br>Barbara Brattin, Director & Sys. Director</div>`)[0]; popup_90c7de1b945ae89c58b6bbc18459cceb.setContent(html_e17df3008b2e59fde59f141d8b598bc8); marker_ad93a483355048651d705183e73fc2ce.bindPopup(popup_90c7de1b945ae89c58b6bbc18459cceb) ; marker_ad93a483355048651d705183e73fc2ce.bindTooltip( `<div> Kenosha Public Library </div>`, {"sticky": true} ); var marker_9bcd271393cc29d918e2e26940d6828d = L.marker( [43.9512716, -88.0958913], {} ).addTo(map_7044ac96c09d919a5be7aa74b740915a); var popup_f8313b5564346e56b18357f7d19a1115 = L.popup({"maxWidth": "100%"}); var html_517c653490bb3c7641d5caf08ab5012f = $(`<div id="html_517c653490bb3c7641d5caf08ab5012f" style="width: 100.0%; height: 100.0%;"><b>New Holstein Public Library</b><br>2115 Washington St, New Holstein, WI 53061<br>D Hankins, Director</div>`)[0]; popup_f8313b5564346e56b18357f7d19a1115.setContent(html_517c653490bb3c7641d5caf08ab5012f); marker_9bcd271393cc29d918e2e26940d6828d.bindPopup(popup_f8313b5564346e56b18357f7d19a1115) ; marker_9bcd271393cc29d918e2e26940d6828d.bindTooltip( `<div> New Holstein Public Library </div>`, {"sticky": true} ); var marker_c66e9ef648ba444a8f3418bb0625803f = L.marker( [44.5147024, -88.0101867], {} ).addTo(map_7044ac96c09d919a5be7aa74b740915a); var popup_989e0c6fa57f7292aa73b01cec614226 = L.popup({"maxWidth": "100%"}); var html_183ec80040979797c04609373e372f3e = $(`<div id="html_183ec80040979797c04609373e372f3e" style="width: 100.0%; height: 100.0%;"><b>Brown County Library</b><br>515 Pine Street, Green Bay, Green Bay, WI 54301<br>Danielle Zeamer, Library Associate
Sarah Sugden, Executive Director</div>`)[0]; popup_989e0c6fa57f7292aa73b01cec614226.setContent(html_183ec80040979797c04609373e372f3e); marker_c66e9ef648ba444a8f3418bb0625803f.bindPopup(popup_989e0c6fa57f7292aa73b01cec614226) ; marker_c66e9ef648ba444a8f3418bb0625803f.bindTooltip( `<div> Brown County Library </div>`, {"sticky": true} ); var marker_dacd66c28bc1aa91a5fd890591668590 = L.marker( [44.260082, -88.3637684], {} ).addTo(map_7044ac96c09d919a5be7aa74b740915a); var popup_4c65c8b85895da6df148d67f949be223 = L.popup({"maxWidth": "100%"}); var html_8f0420b4652798653ee654ab03d2d204 = $(`<div id="html_8f0420b4652798653ee654ab03d2d204" style="width: 100.0%; height: 100.0%;"><b>Appleton Public Library</b><br>3000 E. College Avenue, Appleton, WI 54915<br>Tasha Saeker, Assistant Director
Colleen Rortvedt, Director</div>`)[0]; popup_4c65c8b85895da6df148d67f949be223.setContent(html_8f0420b4652798653ee654ab03d2d204); marker_dacd66c28bc1aa91a5fd890591668590.bindPopup(popup_4c65c8b85895da6df148d67f949be223) ; marker_dacd66c28bc1aa91a5fd890591668590.bindTooltip( `<div> Appleton Public Library </div>`, {"sticky": true} ); var marker_04b8dcbd93e590f504f7ea47650ec27e = L.marker( [43.0136017, -89.288265], {} ).addTo(map_7044ac96c09d919a5be7aa74b740915a); var popup_065f16f1a136b82d75f3a49448213e85 = L.popup({"maxWidth": "100%"}); var html_5a4297b2918064dcc34257460e04a7fc = $(`<div id="html_5a4297b2918064dcc34257460e04a7fc" style="width: 100.0%; height: 100.0%;"><b>E.D. Locke Public Library</b><br>5920 Milwaukee St., McFarland, WI 53558<br>Heidi Cox, Director</div>`)[0]; popup_065f16f1a136b82d75f3a49448213e85.setContent(html_5a4297b2918064dcc34257460e04a7fc); marker_04b8dcbd93e590f504f7ea47650ec27e.bindPopup(popup_065f16f1a136b82d75f3a49448213e85) ; marker_04b8dcbd93e590f504f7ea47650ec27e.bindTooltip( `<div> E.D. Locke Public Library </div>`, {"sticky": true} ); var marker_7df97020dd0cde9a2ae41f05e2df55ff = L.marker( [43.847378, -88.8392248], {} ).addTo(map_7044ac96c09d919a5be7aa74b740915a); var popup_9434448774c29579e864d74b3d368369 = L.popup({"maxWidth": "100%"}); var html_f2527ac103c937d092004b1270c82369 = $(`<div id="html_f2527ac103c937d092004b1270c82369" style="width: 100.0%; height: 100.0%;"><b>Ripon Public Library</b><br>120 Jefferson St, Ripon, WI 54971<br>Susie Menk, Adult & Teen Services Lib.</div>`)[0]; popup_9434448774c29579e864d74b3d368369.setContent(html_f2527ac103c937d092004b1270c82369); marker_7df97020dd0cde9a2ae41f05e2df55ff.bindPopup(popup_9434448774c29579e864d74b3d368369) ; marker_7df97020dd0cde9a2ae41f05e2df55ff.bindTooltip( `<div> Ripon Public Library </div>`, {"sticky": true} ); </script> </html>
  3. lottydotty
    Hey, team! I'm trying to implement a font resizer for a government website. This is all about accessibility and improving the experience for a broad range of folks. Of course, I know that it's up to us as designers to ensure that fonts are effective for all, but our client would like to see if we can implement this. I've borrowed code from somebody who just put together a cool tutorial that makes this work within their small demo. I'd like to see if I can use this or make this work for the site I'm developing across all h3 and p classes. Here's the reference site: https://www.geeksforgeeks.org/allow-users-to-change-font-size-of-a-webpage-using-javascript/ And here's the code that I've played with that's presently limited to only the small container in my code. Any suggestions about how to make this work across the site for all p and h3 classes? <!DOCTYPE html> <html> <body> <div style="text-align:center"> <button type="button" name="btn1" onclick="changeSizeByBtn('1rem')">-A</button> <button type="button" name="btn2" onclick="changeSizeByBtn('1.2rem')">A</button> <button type="button" name="btn3" onclick="changeSizeByBtn('1.4rem')">A+</button> <br /><br /> <input type="range" min="1" max="3" id="slider" value="1" onchange="changeSizeBySlider()" /> </div> <script src="script.js"></script> <div style="padding: 20px; margin: 50px; font-size: 1rem; border: 5px solid green;" id="container" class="container"> <p> A Computer Science portal for geeks. It contains well written, well thought and well explained computer ming science and programarticles,quizzes and practice/ competitive programming/company interview questions. </p> </div> </body> </html> <script> let cont = document.getElementById("container"); function changeSizeByBtn(size) { // Set value of the parameter as fontSize cont.style.fontSize = size; } function changeSizeBySlider() { let slider = document.getElementById("slider"); // Set slider value as fontSize cont.style.fontSize = slider.value + "rem"; } </script>
  4.    lottydotty reacted to a post in a topic: Changing order number sequences
  5.    lottydotty reacted to a post in a topic: Changing order number sequences
  6.    nicole5 reacted to a post in a topic: How to create a reusable registration form for Zoom webinars on Squarespace
  7.    EarvinChong reacted to a post in a topic: Make product categories act like filters without loading the page again and again
  8.    EarvinChong reacted to a post in a topic: is there a way to prevent reload to top of page when category selection is made on a Videos Page?
  9. lottydotty
    Solved thanks to other people's explorations on the Forum. The best method of handling this is via the Universal Filter plugin. Others answered this question in other places (e.g. here), but the Video Page is a newer beast, so it seems worthwhile to let people know this solution also applies on video pages. Once installed I followed the "How to Install Universal Filter on Blog Page in 7.1" and simply used that for the Videos Page structure. That did the trick.
  10. lottydotty
    @paul2009 awesome. thank you!
  11.    lottydotty reacted to a post in a topic: Make product categories act like filters without loading the page again and again
  12. lottydotty
    @DreamrW and @tuanphan I'm trying to do a similar thing on a client website. What "filter plugin" was used to make the Midas Touch Store filter structure work?
  13. lottydotty
    hey, y'all! A client asked a very reasonable question re: a Videos Page. We're using categories to allow users to select from a subset of a large volume of videos hosted on Vimeo and organized on this page. This section of the videos page shows up about half way down the page. Is it possible via javascript or some advanced anchor method to ensure that when people click on any of the categories that the option is just shown right there? @tuanphan and other brilliant minds, I'm always curious if you've got an idea as to how this can or should get solved. videos_page_category_selection.MOV
  14.    tuanphan reacted to a post in a topic: How to create a reusable registration form for Zoom webinars on Squarespace
  15. lottydotty
    @tuanphan great suggestion. I've never tried using that forum. Actually, I found a solution 🙂 I ended up building a Zap hook between Squarespace and Zoom (via both APIs). It works seamlessly! So each form for each event is given a specific name within a given page on the site, then we use the Zoom event API to connect the data to that specific event. It's an elegant result... looking just like a normal Squarespace form, but it's super-charged with Zoom registration form backend!
  16. lottydotty
    Hey, y'all. My client has asked to see if it's possible for us to build a registration form for use for each of the webinars that the client hosts. (They provided a screenshot of this example they came across from another site - Wordpress-based, I believe.) The site presently asks people to Register via Zoom (via a link) instead of within a form on our site. Zoom's recommendation on their forums is to use an iframe. The results are fairly horrendous AND also require a separate acknowledgement of their Cookies policy. I've tried using Squarespace + Zapier + Zoom, and it seems to have potential. Has anybody had luck creating this type of solution? @tuanphan I'm curious if you've ever come across something like this.
  17.    tuanphan reacted to a post in a topic: Change logo link version 7.1
  18. lottydotty
    @tuanphanthank you! I ended up making a slight adjustment to your recommendation to ensure that the first logo went to the client's main site. I chopped up the original image file into two separate images, and I'm really happy with the results. Here's where things ended up... ------------------ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function(){ $('.header-title-logo a').attr('href','https://www.federalcitycouncil.org/'); $('<a href="https://www.districtstrong.org/" class="second-logo"><img src="https://static1.squarespace.com/static/6317838b0dc6040f32e7c8b3/t/6414c9787a1bd341ff99b410/1679083896370/District_Strong_logo_larger.png"/></a>').appendTo('.header-title-logo'); }); </script> <style> a.second-logo img { margin-left: 0px; } </style> ------------------ Thank you for your brilliant advice and feedback!
  19. lottydotty
    @tuanphanIt's https://www.districtstrong.org/ and the left-hand side of the logo is supposed to go to https://www.federalcitycouncil.org/
  20. lottydotty
    @tuanphan I have a strong feeling that you'll know what to do 🙂
  21. lottydotty
    Hey, y'all! I've successfully used the code below (where myclientswebsite.org is a replacement for the client's site). It's been awesome. But now my client wants the main logo image (which includes both the main client logo and the microsite logo) to link to two different sites. They'd like to have the left-hand side of the image link to their main site while the right-hand side of the image will click to the microsite I'm finishing up for them. I was wondering if I could use an image map... something like this... ----------------- <!-- Image Map Generated by http://www.image-map.net/ --> <img src="https://images.squarespace-cdn.com/content/v1/6317838b0dc6040f32e7c8b3/6637a6e7-3969-4909-bdec-e07dc32d0396/myclientscombinedlogo.png?format=1500w" usemap="#image-map"> <map name="image-map"> <area target="" alt="Main Website" title="Main Website" href="https://www.myclientswebsite.org" coords="315,1,1,85" shape="rect"> <area target="" alt="Microsite" title="Microsite" href="https://www.myclientsmicrosite.org" coords="499,84,325,-1" shape="rect"> </map> ------------------ For reference... here's the code that I've been using for the simple url replacement (where myclientswebsite.org is a replacement for the client's site). <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() { $('.header-title-logo a').attr('href','https://www.myclientswebsite.org/'); }); </script>
  22.    lottydotty reacted to a post in a topic: How to have the member area 'invitation only'
  23.    lottydotty reacted to a post in a topic: How to have the member area 'invitation only'
  24.    lottydotty reacted to a post in a topic: How to have the member area 'invitation only'
  25. lottydotty

    Export Analytics

    lottydotty replied to JB58's topic in Commerce

    I just came across this challenge today with a potential client. They (understandably) wish to control and monitor their analytics in their own way. This seems like an important feature that should just be a standard offering.
  26.    lottydotty reacted to a post in a topic: Export Analytics
  27. lottydotty
    @tuanphan ok... it's working, but there's a weird loading thing that happens when a page opens. Pages open first with the original category order then switch to the new order. Is there a way to preload the categories (or approach this differently) to have each page's navigation displayed in the correct order? I removed the #collection-5995fe7a6f4ca37560772435 from the code to see if it would speed up page loading. If you click from "All" to "Sweet Products" etc. you'll see what I mean. Here's the page again... https://david-lopez-aha9.squarespace.com/products-content
  28. lottydotty
    Well... I just want to say that I figured it out! (I was missing hashtags for the collection!). Here's where I landed. And thanks, @tuanphan for your awesome work on this stuff. ------------------------ /*Reorder category list items on Pacific*/ #collection-5995fe7a6f4ca37560772435 .category-nav-links { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */ display: flex; /* NEW, Spec - Firefox, Chrome, Opera */ -webkit-justify-content: space-around; /* Safari 6.1+ */ justify-content: center; } /*"All"*/ #collection-5995fe7a6f4ca37560772435 .category-nav-links li:nth-child(1) { order: 1; } /*"Sweet Products"*/ #collection-5995fe7a6f4ca37560772435 .category-nav-links li:nth-child(4) { order: 2; } /*"Savory Products"*/ #collection-5995fe7a6f4ca37560772435 .category-nav-links li:nth-child(3) { order: 3; } /*"Gifts"*/ #collection-5995fe7a6f4ca37560772435 .category-nav-links li:nth-child(1) { order: 3; }
×
×
  • 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