Jake235

Hi, I have a custom option that I am working on that seems to be working using the window.addEventListener('DOMContentLoaded', ()=> {}, false); methodology. How could I accomplish what I am seeking using squarespace's methodology? Is it possible?

I am volunteering for this organization and it’s really taken me several weeks to figure out (real time) to figure out how to target css to individual Squarespace components. While it’s really helpful to be able to target the individual components of html with the IDs, we should be able to write regular semantic css without needing to know the exact ID for each block. That said, if that’s what we need to do, fine. I have also found it’s possible to target an entire block as well with IDs. 
 

Please stop autogenerating so many <div> tags. It makes the CSS unnecessarily complicated. You should have an html/css expert look at your auto generated tags and they should be able to fix it. 
 

If it’s this complicated for me and I’m intermediate/advanced, imagine how hard it is for the non coders that use this service. Please at least have a manual. You can actually target position with css, it’s not that limited. You just need to know what to target. 

7 hours ago, bangank36 said:

I think you can apply the following event to make sure that all elements (including image) on your page is completely loaded 

<script>
  (function () {
    window.addEventListener('DOMContentLoaded', () => {
      // run your code here
    });
  })()

</script>

 

Thanks. For some reason, that worked. I don’t know why Squarespace doesn’t work the way that you would expect it too. 

<script>
let imgs = document.querySelectorAll('section.page-section.gallery-section.full-bleed-section.background-width--full-bleed.section-height--medium.content-width--wide.horizontal-alignment--center img'); 
for (i= 0; i < imgs.length; i++) {
  alert("Hi!");
  i++;
}
  
</script>

<style>/*
section.page-section.gallery-section.full-bleed-section.background-width--full-bleed.section-height--medium.content-width--wide.horizontal-alignment--center img {
display: none !important;*/</style>

This is the code that I am working with. I am trying to have it match to www.chicagofashioncoalition.org. I am able to get the images to disappear with the CSS that I have commented out, yet, Squarespace seems to edit out the javascript with the nodelist. Anyone have any ideas why Squarespace is not liking this particular line of JavaScript text? I've seen people able to manipulate, so, I know that it's possible. 

Have you tried editing it in mobile first? On the edit page click the mobile icon, otherwise, this is a higher skilled topic, but, if you’re interested this MDN article  is a quick overview to the syntax and that should get you started.  

Hi, you all may need to add a div.content (for custom HTML) before your <element name> for the selector rule. I've encountered this and I think that the people at Squarespace may need to really work on their selectors. It's given me very funny behavior when I've used custom CSS. Other elements may need some similar specific thing, you'll need to look and use the inspect tool in the dev tools to see. 

Actually, I may stand corrected. @paul2009 while there seems to be no native solution for a database, how about having a members only area, and using airtable? If you have a members only area, wouldn’t that be a viable solution? 

On 3/13/2022 at 7:00 PM, paul2009 said:

I think you've picked up mixed messages. If you want to use Ajax to read data then it works exactly the same on Squarespace as it does on any other web builder. 

I suspect you've been reading about Squarespace's own Ajax Page Loader (Mercury) which they used on Squarespace 7.0 for their Brine family of templates. This is used to load site content more quickly by loading the page body only, not the headers and footers. It isn't related to writing your own Ajax requests and isn't used on newer Squarespace 7.1 sites.

@paul2009, I know it’s been a while. I am learning the AJAX language better. Can squarespace allow AJAX post requests too? Would I have to prevent the form from submitting and do an event listener? 

This is not a good idea! While you may be not be okay with that, your users may use many different device types. I highly do not recommend turning off this feature if you can. 

Google sheets is the only integration that I have found so far with Squarespace that seems to just work with HTML forms, no matter what it is. This vastly simplifies the amount of time that I need to take on making a form. If you're an experienced developer, would you say that it is an optimal solution for data, and, is it good enough for sensitive data? 

After doing a lot of trouble shooting, I’ve been able to answer my own question. 
 

One error I see many people making is that they think they need to use the custom code panel. This is not true. With only injecting code into the page itself with the external stylesheet, I was able to get it to work. First, I had to correct all errors in the stylesheet. Secondly, positioning does work with squarespace, but, you have to give out elements really high specificity with css, and, you need to make it very simple. Once I simplified it by adding an ID to the link selector, everything else worked like a charm. I believe squarespace is funny with links. You can get normal html and css to work. I didn’t need to inject the media queries. 
 

Secondly, I found that the vw and vh elements don’t work as well as REMs. Just something to keep in mind. I can do this with version 7.1. 

This is the external css that I am using. 
 

https://github.com/Azalea9X/css_style_sheets/blob/main/jan.css
 

It likes a certain amount of my code, but, doesn’t seem to like all of it, even when I do it on the custom css section.  

Question... how familiar are you with html and css? This is something that you can present as table data. 

I'm trying to do a regular CSS media query with a basic HTML table using a .container class. This is pure HTML, CSS, and JS, no bootstrap. I seem to not be able to affect the width of the table.container. Is this a limitation on squarespace 7.1? Would I need to inject it through the site in order to do it? 

    /*Trying media queries to target small, and medium screens*/
    @media screen and (min-width: 400px) and (max-width: 600px) {
        .container {
            position: relative;
            left: 100px;
            width: 300px;
            height: 600px;
            position: relative;
            margin-bottom: 400px;

            background-size: contain;
            max-width: 100%;
            max-height: 100%;
        }
    }

    /*For a medium tablet*/
    @media screen and (min-width: 600px) and (max-width: 800px) {
        .container {
            position: relative !important;
            left: 100px !important;
            min-width: 300px !important;
            max-width: 300px !important;
            height: 600px !important;
            position: relative !important;
            margin-bottom: 400px !important;

            background-size: contain !important;
            max-width: 100% !important;
            max-height: 100% !important;
        }
    }

@paul2009, I think you're exactly correct. But, question, since I am using squarespace 7.0, do I need to use it? I am using Squarespace 7.0 and I thought that in order to use AJAX that I had to do something special. I think that the issue is with accessing the squarespace static API on a trial site. I am, however, able to access my Github pages. I have an example of my working code here, and, now that I have a working code, I can play around with things and break things, then, go back to here when I mess up. I believe that I followed this guidance.

window.addEventListener('load', loadXMLDoc);
window.addEventListener('mercury:load', loadXMLDoc);

function loadXMLDoc() {
    var xmlhttp = new XMLHttpRequest();
 
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == XMLHttpRequest.DONE) {   // XMLHttpRequest.DONE == 4
           if (xmlhttp.status == 200) {
               document.getElementById("demo").innerHTML = xmlhttp.responseText;
           }
           else if (xmlhttp.status == 400) {
              alert('There was an error 400');
           }
           else {
               alert(xmlhttp.status);
           }
        }
    };
 
    xmlhttp.open("GET", 'https://#######.github.io/portfolio/Ajax_material/test.txt', true);
    //This should work
    xmlhttp.send();
}

@paul2009 I’m trying to hook into a local .xml file which can be read like data in browsers. Ajax, it’s supposed to natively work with them, but, I believe squarespace has its own flavor of it. Would providing a link be helpful with a free trial?

@paul2009 I’m following this tutorial. I’m volunteering for a non profit and it would make my life a lot easier if I could store sensitive data in an xml file and retrieve it as needed. I know that you are limited with the backend, and, squarespace seems to want to play nice with Ajax, but, whenever I tried all the online solutions, I could not get it to work.

@johnnyapples is that why I have issues with simple Ajax requests? My txt or xml files do not load in the static cdn. 

I want to be able to link xml data. I’m following along a tutorial for Ajax with Mozilla and I know it works. I also know other people have had success with Mercury, but, whenever I try to do it, it fails. Can someone please walk me through that and how to get the exact path to use for the Ajax file? 

Hi, my website is a trial website. This is what my code is, it should give you an idea of what I want to do. Question is, is it possible, am I going about it the wrong way, do I need to only use JSON-T? I have been able to connect to mongodb on my own with localhost, but, I would love to be able to make an application myself with squarespace and cut out the middle-ware. Question is, does that require a lot more sophistication? Something like this works in the local host.