Jump to content

8OO

Members
  • Content Count

    33
  • Joined

  • Last visited

Community Reputation

0 Neutral

About 8OO

  • Rank
    Newbie
  1. I'm pretty sure it's an issue with my HTML code, but I'm not sure as to what is causing the issue in CM1 Edit: Didn't know I could edit my topic lol. Just added this into my original topic
  2. I was setting up content that was left and right aligned along with a responsive table and it worked out perfectly on Notepad++ and W3 Schools But then, I put it into my CMS editor, CM1 and it got all jacked up (as per usual...). The table content is moved inside for some odd reason.... When I saw this I thought, I'll just add a few <br> tags before the table content to move it down. It fixed one problem, but created another. So when my table gets to a smaller window size, there's too much white space between the Address/Telephone line and the table and it's super annoyi
  3. 8OO

    Accordion Issue

    Got it! I'll make sure to do that then. Hopefully I won't have any more issues with any more things I would like to take from W3. Once again, thanks @justsomeguy and @dsonesuk, your help on this has been truly appreciated!
  4. 8OO

    Accordion Issue

    So I'm assuming that for my CMS anytime I need to use JavaScript in my code for some of the stuff shown in W3, I would need to use this in order for it to run? document.addEventListener("DOMContentLoaded", function(){
  5. 8OO

    Accordion Issue

    AT LONG LAST, IT FINALLY WORKS!!!! @dsonesuk & @justsomeguy, THANK YOU BOTH SO MUCH FOR ALL YOUR HELP!! I finally got the code to work for my CMS! Putting this down for anyone struggling with accordions on their CMS: Accordion.js (External JavaScript File): 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
  6. 8OO

    Accordion Issue

    Oh I see... So you're saying Accordion.js should be: 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"; } }); } And then the head, should be this: <script type = "text/javascript" src="Accordion.js" >&
  7. 8OO

    Accordion Issue

    I figured as much. So would this work then: <script type = "text/javascript" src="Accordion.js" ></script>
  8. 8OO

    Accordion Issue

    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
  9. 8OO

    Accordion Issue

    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:
  10. 8OO

    Accordion Issue

    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.a
  11. 8OO

    Accordion Issue

    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> &l
  12. 8OO

    Accordion Issue

    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
  13. 8OO

    Accordion Issue

    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()"> <h
  14. 8OO

    Accordion Issue

    How does that work?
  15. 8OO

    Accordion Issue

    Shoot looks I'm out of space to upload images... But I linked the images on imgur: https://imgur.com/a/0nErMaB
×
×
  • Create New...