8OO Posted August 14, 2019 Author Share Posted August 14, 2019 Didn't work unfortunately... And as far as I see, I don't think the CMS program allows for an external file sheet to be used, although I've never done it before. How does that usually work for other CMS programs? I've always seen the reference links on CSS examples, but I've never done that on Notepad++ or on CM1. Link to comment Share on other sites More sharing options...
justsomeguy Posted August 14, 2019 Share Posted August 14, 2019 Yeah it's going nuts trying to figure out the CDATA crap, look at all of the stuff it added. Don't just paste all of that back in to the CMS, you need to remove all of the CDATA stuff and paste your original code back in. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 14, 2019 Share Posted August 14, 2019 Better cms allow you add custom js,css files or add to specific css/js files for you to use. Then you add links to them either in between head tags or bottom of document. https://www.w3schools.com/css/css_howto.asp https://www.w3schools.com/tags/att_script_src.asp Link to comment Share on other sites More sharing options...
8OO Posted August 14, 2019 Author Share Posted August 14, 2019 11 minutes ago, justsomeguy said: Yeah it's going nuts trying to figure out the CDATA crap, look at all of the stuff it added. Don't just paste all of that back in to the CMS, you need to remove all of the CDATA stuff and paste your original code back in. I've gone over it numerous times. I go into the CMS, I add my original code (with no errors) in the editor source code, I preview it, then it doesn't work. I go back to the source code in the editor. It provides me with the extra CDATA code I provided to you guys (not the browser one). I delete that source code with the CDATA error and add my original code, doesn't work. Rinse and repeat. It's crazy... Link to comment Share on other sites More sharing options...
8OO Posted August 14, 2019 Author Share Posted August 14, 2019 20 minutes ago, dsonesuk said: Better cms allow you add custom js,css files or add to specific css/js files for you to use. Then you add links to them either in between head tags or bottom of document. https://www.w3schools.com/css/css_howto.asp https://www.w3schools.com/tags/att_script_src.asp I wish I had a better CMS.... Percussion CM1 is really awful to work with. If I can't even get a simple accordion done, I don't think I can even do any other small, but cool web features. I'll ask them if that's possible to do, but in the instance it's not, should I give up on making an accordion then? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 15, 2019 Share Posted August 15, 2019 (edited) It look as though you may have to use there widget builder ,where you give it a name add link to uploaded css/js files or add script code in widget itself. https://help.percussion.com/percussion-cm1/developers/widget-builder/index Edited August 15, 2019 by dsonesuk Link to comment Share on other sites More sharing options...
justsomeguy Posted August 15, 2019 Share Posted August 15, 2019 I think the root issue is that an accordion is a box-shaped bellows-driven free-reed aerophone type keyboard instrument. It is not in the percussion family. Link to comment Share on other sites More sharing options...
8OO Posted August 15, 2019 Author Share Posted August 15, 2019 16 hours ago, dsonesuk said: It look as though you may have to use there widget builder ,where you give it a name add link to uploaded css/js files or add script code in widget itself. https://help.percussion.com/percussion-cm1/developers/widget-builder/index Okay so, I'm actually able to create and add a separate Javascript file to add to the page. However, it's still not working. This is what the tech advisor said: ...I see that the published JS file is getting loaded from the page source. The accordian isn't working even in the CMS preview. Probably needs JS code update based on HTML element structure. Please review the HTML source and JS file to have it working in CMS and then republish the page. This is how the body of my HTML code looks like now: <h2>Accordion</h2> <div> <button class="accordion">Section 1</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Section 2</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Section 3</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> And here's the JavaScript for the accordion, now in a separate file: var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } }); } Is there really anything I need to change? Because I feel like the structuring should be fine, despite they've now been separated. I'm calling for the JavaScript from a filepath into the head of my HTML code (which she stated is correctly written). Just to note the head of webpage is called, "Meta-data", and is separate from the body HTML where it's placed in the editor's, "Source Code" (see images below). Link to comment Share on other sites More sharing options...
justsomeguy Posted August 15, 2019 Share Posted August 15, 2019 If you're loading the Javascript in the head instead of the body then you need to use a window load handler to run the code after the page finishes loading. Link to comment Share on other sites More sharing options...
8OO Posted August 15, 2019 Author Share Posted August 15, 2019 (edited) Shoot looks I'm out of space to upload images... But I linked the images on imgur: https://imgur.com/a/0nErMaB Edited August 15, 2019 by 8OO Link to comment Share on other sites More sharing options...
8OO Posted August 15, 2019 Author Share Posted August 15, 2019 2 minutes ago, justsomeguy said: If you're loading the Javascript in the head instead of the body then you need to use a window load handler to run the code after the page finishes loading. How does that work? Link to comment Share on other sites More sharing options...
justsomeguy Posted August 15, 2019 Share Posted August 15, 2019 https://www.w3schools.com/jsref/event_onload.asp Link to comment Share on other sites More sharing options...
8OO Posted August 15, 2019 Author Share Posted August 15, 2019 1 hour ago, justsomeguy said: https://www.w3schools.com/jsref/event_onload.asp So something like this then? <head> <style> .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: #ccc; } .panel { padding: 0 18px; display: none; background-color: white; overflow: hidden; } </style> <script> function accordion(){ } </script> </head> <body onload="accordion()"> <h2>Accordion</h2> <div> <button class="accordion">Section 1</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Section 2</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Section 3</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> Link to comment Share on other sites More sharing options...
8OO Posted August 15, 2019 Author Share Posted August 15, 2019 This is the example I used from W3: <html> <head> <script> function myFunction() { alert("Page is loaded"); } </script> </head> <body onload="myFunction()"> <h1>Hello World!</h1> </body> </html> I just removed the alert function from mine Link to comment Share on other sites More sharing options...
justsomeguy Posted August 15, 2019 Share Posted August 15, 2019 Sure. You can also attach the event directly through using addEventListener instead of using the onload attribute in HTML. Link to comment Share on other sites More sharing options...
8OO Posted August 15, 2019 Author Share Posted August 15, 2019 So I tried the code here from W3 Schools, as test, (https://www.w3schools.com/js/js_htmldom_eventlistener.asp) into my CMS and it still didn't work. I added this into the head/meta-data (not as a JS file): <script> document.getElementById("myBtn").addEventListener("click", myFunction); function myFunction() { alert ("Hello World!"); } </script> And this into the HTML portion of the editor: <h2>JavaScript addEventListener()</h2> <p>This example uses the addEventListener() method to execute a function when a user clicks on a button.</p> <button id="myBtn">Try it</button> Link to comment Share on other sites More sharing options...
justsomeguy Posted August 15, 2019 Share Posted August 15, 2019 All of that Javascript needs to go in a ready handler. When the browser executes the code in the head, it has not set up the body of the document yet, so that myBtn element does not exist. That's why you use a document ready or load handler, it waits until the document is finished loading and ready to run the rest of the code. Any code that interacts with any element on the page needs to be in a load handler, or at the end of the body. Once the browser gets to the code at the end of the body it has already created everything else. If it's in the head and trying to work with elements on the page it needs to be in a load handler. Link to comment Share on other sites More sharing options...
justsomeguy Posted August 15, 2019 Share Posted August 15, 2019 You can use the DOMContentLoaded event: document.addEventListener("DOMContentLoaded", function(){ // code to run when the DOM is fully loaded }); Link to comment Share on other sites More sharing options...
8OO Posted August 16, 2019 Author Share Posted August 16, 2019 I'm pretty brand new to Javascript, so please forgive my lack of knowledge, but where would I place this exactly? Would I replace this: <script> document.getElementById("myBtn").addEventListener("click", function() { alert("Hello World!"); }); </script> With this?: <script> document.getElementById("myBtn").addEventListener("DOMContentLoaded", function(){ // code to run when the DOM is fully loaded }); function myFunction() { alert ("Hello World!"); } </script> This is the example I'm using btw from W3: https://www.w3schools.com/js/tryit.asp?filename=tryjs_addeventlistener_add Link to comment Share on other sites More sharing options...
justsomeguy Posted August 16, 2019 Share Posted August 16, 2019 I wouldn't target myBtn for DOMContentLoaded, I would just use the code I posted and put whatever code you want to run when the page is loaded in that event handler. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 16, 2019 Share Posted August 16, 2019 The webpage is read from top to bottom, the elements javascript references either by id, class whatever MUST exist before any manipulation of these elements can take place by javascript. That is why javascript is usually placed at the bottom after all are loaded. However you can place javascript code that references any elements any where if placed in javascript event that waits till the document is fully loadeded, before running itself. That is where document.addEventListener("DOMContentLoaded", function(){ // code to run when the DOM is fully loaded }); Comes in to play, any code that had to be placed at bottom of page as it had wait for the elements it referenced to be loaded, can be placed within this where the comment is. This now can placed anywhere within the page, between head tags, top middle bottom of body tag it doesn't matter. Link to comment Share on other sites More sharing options...
8OO Posted August 16, 2019 Author Share Posted August 16, 2019 IT WORKED!!!! Thank you @dsonesuk for the explanation and thank you @justsomeguy for providing the line of code. Don't think I would've even got this far without you guys! The example finally worked and I can finally run JavaScript on my CMS! I hope now we'll be on the home stretch with this accordion issue. Right now my code for the Accordion is looking like this: <head> <style> .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: #ccc; } .panel { padding: 0 18px; display: none; background-color: white; overflow: hidden; } </style> </head> <body> <h2>Accordion</h2> <div> <button class="accordion">Section 1</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Section 2</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Section 3</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> </body> And the JavaScript in a separate external file(the filename is Accordion.js): <script> var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } }); } </script> So with the JS being in an external file and with it in a different file path from the page I want it on, how would I get this line to work and make the JS for the accordion to work? document.addEventListener("DOMContentLoaded", function(){ // code to run when the DOM is fully loaded }); Link to comment Share on other sites More sharing options...
dsonesuk Posted August 16, 2019 Share Posted August 16, 2019 (edited) Any code that references a element by id, classname will go in that code. So yes ALL the accordion code. Usually with named functions its not necessary as they haved to be called specifically, but any calling of these function must be in onload event function Just to point out, The EXTERNAL .js file does not require script tags in it. Edited August 16, 2019 by dsonesuk Link to comment Share on other sites More sharing options...
8OO Posted August 19, 2019 Author Share Posted August 19, 2019 On 8/16/2019 at 4:14 PM, dsonesuk said: Any code that references a element by id, classname will go in that code. So yes ALL the accordion code. Usually with named functions its not necessary as they haved to be called specifically, but any calling of these function must be in onload event function Just to point out, The EXTERNAL .js file does not require script tags in it. So if the JavaScript was placed in the head (not in an external sheet), it should be like this, I would assume: <script> document.addEventListener("DOMContentLoaded", function(){ var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } }); } </script> But how would that work with the External Sheet file path (the real path is actually longer than this)? Is this correct? <script> document.addEventListener("DOMContentLoaded", function(){ <script src="Accordian.js"> }); </script> Link to comment Share on other sites More sharing options...
dsonesuk Posted August 19, 2019 Share Posted August 19, 2019 Within html you have to identify what sort of code you are using with html script and css tags, while external files don't require such tags as they are not html. You can't have script tag within another script. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now