method
-
Posts
510 -
Joined
-
Last visited
-
Days Won
30
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Posts posted by method
-
-
On 6/1/2022 at 2:22 AM, nmilc said:
Hey, thanks so much for taking a look at this! I gave it a shot, adding the div class results and appending the buttons there instead of to the document body, but no luck.
Anything else I might be able to try?
For the HTML section:
<body>
<h1>NMILC Pro Bono Opportunities</h1>
<div class="results"></div>
<script src = "jquery-3.6.0.js"></script>...
</body>
For the output section in the JS code:
// Adds all relevant HTML elements to document
results.appendChild(nameEl);
results.appendChild(availEl);
results.appendChild(descripEl);
results.appendChild(claimBtn);
results.appendChild(releaseBtn);@nmilc I can't really troubleshoot much further without seeing the code you're adding to your site, feel free to pm me a link if you can and I'll take a look!
-
2 hours ago, Bauyu said:
Hi,
Sorry I need to change the layout of my design, the current layout looks like this:
It included two facebook video, the tablet and mobile view still needs to be adjusted.
tablet view:
mobile view:
I really appreciate your help, thank you!
Thanks okay, with the new layout just remove that second part of the code (updated above) – that was purely for the tablet scaling.
-
4 hours ago, Bauyu said:
Hello!
It seems works in the tablet view very well, but in the mobile view still like this:
Hey! Try it now, I've added a couple !important's in there
-
Hi @Bauyu
Try adding this into your Custom CSS, it will apply to all iframe embeds with a square aspect ratio
.embed-block iframe[src][height="476"][width="476"] { @supports (aspect-ratio: 1/1) { width: 100% !important; height: 100% !important; aspect-ratio: 1/1; } }
Let me know how it goes!
-
Have you tried using a fetch request to handle the retrieval and parsing of the json file?
-
Hi @NomadicPB
I'm not 100% clear on what you're asking for exactly, but I'll take an educated guess.
If you change the width in this part of your styling to be 100% it'll ensure the diagram will be responsive and scale to the current browser width. As opposed to always being 1100px wide.
.diagramContainer { position: relative; aspect-ratio: 3 / 2; width: 100%; margin: auto; z-index: 2; }
Hope that helps!
-
Hi @nmilc
I don't believe there's an issue using appendChild, just the way you're trying to create a document inside a code block and then append elements into it.
I'd recommend adding a placeholder element into the code block to add these items into.
Restructure your code to look like this:<h1>Results: </h1> <div class="results"></div> <script src="jquery-3.6.0.js"></script> <script> // Initialization clear console.clear(); // GET SECTION: Retrieves and populates information on available cases const getSettings = { "async": true, "crossDomain": true, "url": "method": "GET", "headers": { "Content-Type": "application/json", "Authorization": } }; // PATH SECTION, TAKE: Takes opportunity when button is clicked const claimSettings = { "async": true, "crossDomain": true, "method": "PATCH", "headers": { "Content-Type": "multipart/form-data", "Authorization": }, "processData": false, "contentType": false, "mimeType": "multipart/form-data", "data": form }; // PATCH SECTION, RELEASE: Releases opportunity when button is clicked const releaseSettings = { "async": true, "crossDomain": true, "method": "PATCH", "headers": { "Content-Type": "multipart/form-data", "Authorization": }, "processData": false, "contentType": false, "mimeType": "multipart/form-data", "data": form }; $.ajax(getSettings).done(function (response) { const results = document.querySelector(".results") // Iterates through each of the cases let numCases = response.results.length; for (let i = 0; i < numCases; i++) { // Populates array of case numbers idArray[i]=response.results[i].id.raw_value; // Creates basic HTML elements on page let nameEl = document.createElement("h2"); nameEl.innerHTML = "Case Number: " + idArray[i]; let lpcEl = document.createElement("h3"); let availEl = document.createElement("h3"); let descripEl = document.createElement("h4"); let claimBtn = document.createElement("button"); let releaseBtn = document.createElement("button"); // Adds all relevant HTML elements to document results.appendChild(nameEl); results.appendChild(availEl); results.appendChild(lpcEl); results.appendChild(descripEl); results.appendChild(claimBtn); results.appendChild(releaseBtn); } }) </script>
Let me know how that goes!
-
-
Hi @waypoint
This is the code you need, add it into your Custom CSS panel.
body:not(.sqs-edit-mode-active) { overflow-x: hidden; // full width blocks #block-yui_3_17_2_1_1533160323790_11724, #block-yui_3_17_2_8_1471981268301_7054 { position: relative; width: 100vw; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } // extra space for slideshow controls #block-yui_3_17_2_1_1533160323790_11724 .sqs-gallery-controls { .next { right:2rem; } .previous { left: 2rem; } } }
If you need to make more blocks full width, you can do this by finding and adding the block ID to the code
Custom font will not appear and is using a different custom font!
in Customize with code
Posted · Edited by method
Hi @CarlyC
it's due to this line:
[class*="button"] is targeting any element (or descendants of) with a class name containing "button". Which is the whole site essentially as the document body includes several matching classes.
Solution: increase the specificity of this code so you only target buttons