8OO
-
Posts
33 -
Joined
-
Last visited
8OO's Achievements
Newbie (1/7)
0
Reputation
-
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
-
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 annoying... Is there a way this could be fixed so it's like the way I originally have it where everything is correctly spaced out? 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 Here's my code that works the way I would like it to on Notepad++ and W3 schools: CSS <head> <style> @media screen and (min-width: 901px) { .alignleft { float: left; } .alignright { float: right; } } tr:hover td{background-color:#ffff99;} th { color: white; font-size: 18px; } table { border-collapse: collapse; margin: 0; padding: 0; width: 100%; table-layout: fixed; } .link { color: #c69906; } td { word-wrap: break-word; } @media screen and (max-width: 900px) { table { border: 0; } table thead { border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } table tr { border-bottom: 3px solid #ddd; display: block; margin-bottom: .625em; } table td { border-bottom: 1px solid #ddd; display: block; font-size: .8em; text-align: right; } table td::before { content: attr(data-label); float: left; font-weight: bold; text-transform: uppercase; } table td:last-child { border-bottom: 0; } } </style> </head> HTML <h1 style="text-align:center;"><b><u>Title Here</b></u></h1> <br> <br> <div> <div class="alignleft"> <div><b>Location and Mailing Address:</b></div> <div>ABC</div> <div>DEF</div> <div>GHI</div> <br> </div> <div class="alignright"> <div><b>Telephone:</b><a href="tel: 610-867-5309">Ex. #</a><span></div> </div> <div style="clear: both;"></div> </div> <h2>More Info Here</u></h2> <div style="overflow-x: auto;"> <table style="width:100%"> <thead> <tr style="background: linear-gradient(to right, #66002b 0%, #cc0055 100%);"> <th scope="col"><b>Cat. 1</b></th> <th scope="col"><b>Cat. 2</b></th> <th scope="col"><b>Cat. 3</b></th> <th scope="col"><b>Cat. 4</b></th> <th scope="col"><b>Cat. 5</b></th> </tr> </thead> <tbody> <tr> <td data-label="Name"><b>Name Here</b></td> <td data-label="Email">Email Here</td> <td data-label="Location">Location Here</td> <td data-label="Phone">Phone Here</td> <td data-label="Title">Title Here</td> </tr> <tr> <td data-label="Name"><b>Name Here</b></td> <td data-label="Email">Email Here</td> <td data-label="Location">Location Here</td> <td data-label="Phone">Phone Here</td> <td data-label="Title">Title Here</td> </tr> </tbody> </table> <br> <br>
-
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!
-
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(){
-
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") { panel.style.display = "none"; } else { panel.style.display = "block"; } }); } }); CSS & JavaScript in <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 src="Accordion.js"</script> HTML <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>
-
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" ></script> Right? I apologize for repeatedly asking if it's written correctly, I just want to make sure I'm not missing what you and @dsonesuk are saying
-
I figured as much. So would this work then: <script type = "text/javascript" src="Accordion.js" ></script>
-
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>
-
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 });
-
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
-
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>
-
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
-
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>
-
How does that work?
-
Shoot looks I'm out of space to upload images... But I linked the images on imgur: https://imgur.com/a/0nErMaB
