Jump to content

JMRKER

Members
 View Profile  See their activity

  • Posts

    194

  • Joined

  • Last visited

  • Days Won

    5

 Content Type 

Everything posted by JMRKER

  1. JMRKER
    The only intended difference between the grid displays in the following are the use of DIV versus PRE tags. I don't understand why there is a large vertical gap between the displays. Not a major problem, just would like to know why the difference or where it is coming from. <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=yes"/> <title>css Simple Grid compare</title> <!-- From: https://medium.com/better-programming/make-a-responsive-grid-with-only-3-lines-of-css-5e2f3837ccc see also: https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/ see also: https://gridbyexample.com/examples/example37/ see also: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout --> <style> .grid { display: grid; /* auto-fill is the same */ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-gap: 4px; } .Ditem { border: 1px solid blue; } .Pitem { border: 1px solid blue; white-space: pre-wrap; } </style> </head><body> <h2>Grid - DIV</h2> <div class="grid"> <div class="Ditem">Product 1 <br> This contains a longer number of words within the item. </div> <div class="Ditem">Product 2</div> <div class="Ditem">Product 3</div> <div class="Ditem">Product 4</div> <div class="Ditem">Product 5</div> <div class="Ditem">Product 6</div> <div class="Ditem">Product 7 - no vertical gap!</div> </div> <h2>Grid - PRE</h2> <div class="grid"> <pre class="Pitem">Product A <br> This contains a longer number of words within the item. </pre> <pre class="Pitem">Product B</pre> <pre class="Pitem">Product C</pre> <pre class="Pitem">Product D</pre> <pre class="Ditem">Product E</pre> <pre class="Ditem">Product F</pre> <pre class="Pitem">Product G - why such a large vertical gap?</pre> </div> </body></html>
  2. JMRKER

    help pls

    JMRKER replied to pro coder 69's topic in HTML/XHTML

    You should include code in a readable format. Consider using the '<>' tag.
  3. JMRKER
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/> <title> Accordion Panels </title> <!-- From: https://jsfiddle.net/1rsb7gmo/5/ --> <style> #container { width: 50%; } .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 1em; width: 100%; border: none; text-align: left; outline: none; font-size: 1em; } .accordion:hover { background-color: lime; } .accordion.open { background-color: lime; } .panel { padding: 10px; display: none; background-color: wheat; overflow: hidden; } .panel.open { display: block; } </style> </head> <body> <h1> Accordion Panels </h1> <div id="container"> <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> <script> const acc = document.querySelectorAll('.accordion'); acc.forEach( function(elem) { elem.addEventListener('click', function(evt) { acc.forEach(function(elem) { if (elem != evt.target) { // optional display elem.nextElementSibling.classList.remove("open"); elem.classList.remove("open"); } }); var panel = evt.target.nextElementSibling; var accordion = evt.target; panel.classList.toggle('open'); accordion.classList.toggle('open'); }, true); } ); </script> </body> </html> OK, figured it out.
  4. JMRKER
    Is this what you want or do you want drop-down lists to be separated? <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/><title> Accordion Panels </title><!-- From: https://jsfiddle.net/1rsb7gmo/5/ --><style> #container { width: 50%; } .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 1em; width: 100%; border: none; text-align: left; outline: none; font-size: 1em; } .accordion:hover { background-color: lime; } .accordion.open { background-color: lime; } .panel { padding: 10px; display: none; background-color: wheat; overflow: hidden; } .panel.open { display: block; }</style></head><body><h1> Accordion Panels </h1><div id="container"> <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><script> const acc = document.querySelectorAll('.accordion'); acc.forEach( function(elem) { elem.addEventListener('click', function(evt) { acc.forEach(function(elem) { if (elem != evt.target) { // optional display elem.nextElementSibling.classList.remove("open"); elem.classList.remove("open"); } }); var panel = evt.target.nextElementSibling; var accordion = evt.target; panel.classList.toggle('open'); accordion.classList.toggle('open'); }, true); } );</script></body></html>
  5. JMRKER
  6. JMRKER
    How did you modify the code in the link to create the second 'to-do' list? My guess is that the event to strike out the text is using a reference to the 1st list, not the second. Need to see your code
  7. JMRKER
    You're most welcome. Happy to help. Good Luck and welcome to the forums.
  8. JMRKER
    Here is an example of how it could be done. You can save the counts as a string or submit them in a form individually. They could also be saved in local storage or cookies, but again JS is not designed so that everyone the web would see total counts. Only the user. I had no images, but you should be able to supply your own. The 'Clear Counts' button is optional and can be removed. Note that it is the only 'button' with an associated ID value. Only tested in FF & Chrome. It should be tested further if you expect to use MSIE. <!DOCTYPE html><html lang="en"><head> <title> Multiple Button Counter </title> <meta charset="UTF-8"> <meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/> <!-- For: https://w3schools.invisionzone.com/topic/61942-help-with-cookies-functions-arguments/ --> <style> button { background: yellow; font-weight: bold; } img { height: 3em; width: 3em; } </style> </head><body> <div id="btnLikes"> <img src='' alt='image'><br> <button data-cnt="0">&#128077; Like</button> <span></span><br><br> <img src='' alt='image'><br> <button data-cnt="0">&#128077; Like</button> <span></span><br><br> <img src='' alt='image'><br> <button data-cnt="0">&#128077; Like</button> <span></span><br><br> <img src='' alt='image'><br> <button data-cnt="0">&#128077; Like</button> <span></span><br><br> <img src='' alt='image'><br> <button data-cnt="0">&#128077; Like</button> <span></span><br><br> <img src='' alt='image'><br> <button data-cnt="0">&#128077; Like</button> <span></span><br><br> <img src='' alt='image'><br> <button data-cnt="0">&#128077; Like</button> <span></span><br><br> <img src='' alt='image'><br> <button data-cnt="0">&#128077; Like</button> <span></span><br><br> <img src='' alt='image'><br> <button data-cnt="0">&#128077; Like</button> <span></span><br><br> </div> <button id='btnClear'>Clear Counts</button> <pre id='demo'></pre> <script> console.clear(); const demo = document.getElementById('demo'); const btnSel = document.querySelectorAll('button'); function collectCounts() { const sel = document.querySelectorAll('#btnLikes button'); let selCounts = []; for (let el of sel) { const count = el.dataset.cnt || 0; selCounts.push(count); } return selCounts; // return array of counts } function clrCounts() { // clear counts display for each button for (let btn of btnSel) { btn.dataset.cnt = 0; elemClear(btn.nextElementSibling); } } function init() { for (let btn of btnSel) { btn.addEventListener('click', function (evt) { const count = evt.target.dataset.cnt || 0; evt.target.dataset.cnt = parseInt(count) + 1; evt.target.nextElementSibling.innerHTML = evt.target.dataset.cnt; demo.innerHTML = collectCounts().join(','); }, false); } } init(); function elemClear(el) { while (el.firstChild) el.removeChild(el.firstChild); } const btnClear = document.getElementById('btnClear') btnClear.addEventListener('click', () => { elemClear(demo); clrCounts(); } ); </script> </body></html> Good Luck!
  9. JMRKER
    Do you realize that the like counts will go no further than the user's computer? Cookies are only save on the currently used computer and not sent or shared with any others. Based on this information, do you still want to pursue additional like button functions?
  10. JMRKER
    See if you can use this: <script> const recpSqrt = (value) => { return 1/(Math.sqrt(value)); } var v = 2; alert('Value: '+v+'\nSqrt: '+Math.sqrt(v)+'\nRecpSqrt: '+recpSqrt(v)); v = 3; alert('Value: '+v+'\nSqrt: '+Math.sqrt(v)+'\nRecpSqrt: '+recpSqrt(v)); v = 4; alert('Value: '+v+'\nSqrt: '+Math.sqrt(v)+'\nRecpSqrt: '+recpSqrt(v)); v = 5; alert('Value: '+v+'\nSqrt: '+Math.sqrt(v)+'\nRecpSqrt: '+recpSqrt(v)); </script>
  11. JMRKER
    I don't know if this is the problem, but you have "tablink" as the className reference in your program but the linked program in your last post uses "tablinks". (note the plural form) I don't know enough about PHP to help with that portion, you don't have the CSS available and your HTML section is missing for comparison purposes.
  12. JMRKER
    The code of the link works !00% of the time. What does your code look like? I can view the code of the former, but have no idea what your code looks like. Please include some. BTW, welcome to the forums. :)
  13. JMRKER
    You can also preceed the string with a + to convert it to a number. For example: <script> function mytab1(byyr,bymo) { var x = byyr, y = x + 1; // expect 201 z = +x +1; // expect 21 alert(y+' : '+z); var a = bymo * 10; // expect 50 alert(a); } mytab1('20','5'); // test </script>
  14. JMRKER
    See if you can modify this to your needs... <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Multi-Modals</title> <!-- <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <!-- // optional --> <!-- From: http://w3schools.invisionzone.com/topic/55976-multiple-modal-boxes-on-webpage/ For: https://w3schools.invisionzone.com/topic/61800-html-or-js-problem/ --> <style> /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content */ .modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; } /* The Close Button */ .close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } </style> </head> <body> <h2>Modal Examples</h2> <!-- Trigger/Open The Modal --> <button class="myBtn_multi">Open Modal</button> <button class="myBtn_multi">Open Modal2</button> <button class="myBtn_multi">Open Third Modal</button> <!-- The Modal --> <div class="modal modal_multi"> <!-- Modal content --> <div class="modal-content"> <span class="close close_multi">×</span> <p>Some text in the Modal..</p> </div> </div> <!-- The Modal2 --> <div class="modal modal_multi"> <!-- Modal2 content --> <div class="modal-content"> <span class="close close_multi">×</span> <p>Some text in the Modal..2</p> </div> </div> <!-- The Modal3 --> <div class="modal modal_multi"> <!-- Modal3 content --> <div class="modal-content"> <span class="close close_multi">×</span> <p>Some text in the third Modal..3</p> </div> </div> <script> // Get the modal elements var modalparent = document.getElementsByClassName("modal_multi"); // Get the button that opens the modals var modal_btn_multi = document.getElementsByClassName("myBtn_multi"); // Get the <span> element that closes the modals var span_close_multi = document.getElementsByClassName("close_multi"); // When the user clicks the button, open the modal function setDataIndex() { for (i = 0; i < modal_btn_multi.length; i++) { modal_btn_multi[i].setAttribute('data-index', i); modalparent[i].setAttribute('data-index', i); span_close_multi[i].setAttribute('data-index', i); } } for (i = 0; i < modal_btn_multi.length; i++) { modal_btn_multi[i].onclick = function() { var ElementIndex = this.getAttribute('data-index'); modalparent[ElementIndex].style.display = "block"; }; // When the user clicks on <span> (x), close the modal span_close_multi[i].onclick = function() { var ElementIndex = this.getAttribute('data-index'); modalparent[ElementIndex].style.display = "none"; }; } window.onload = function() { setDataIndex(); }; window.onclick = function(event) { if (event.target === modalparent[event.target.getAttribute('data-index')]) { modalparent[event.target.getAttribute('data-index')].style.display = "none"; } }; </script> </body> </html> BTW, welcome to the forums.
  15. JMRKER
    Don't know if this is what the OP wants. His definitions are somewhat sparse. Example code lets people see their selections only. Would need to add logic for correctness. The display could be printed out (Ctrl-P) and submitted for evaluation to OP without a server, but I'm with you, not recommended without some additional code. But it is definitely short for a beginner example.
  16. JMRKER
    Welcome to the forums. What you want to do is possible, but the devil is in the details. What have you attempted to this point? How many questions? Multiple choice or true/false? Is this for a real grade or just a practice display for the user. Sound what you are looking for is a "quiz". There are a ton of examples on the web. Search with google using "javascript quiz" as a start. Modify for your needs. Just for grins, this is the simplest response form I could come up with: <!DOCTYPE html><html lang="en"><head> <title> VERY Simple Quiz </title> <meta charset="UTF-8"> <meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/> <!-- link rel="stylesheet" href="common.css" media="screen" --> <style> ul { list-style-type: none; cursor: pointer; } dt { font-size: 1.1em; font-weight: bold; padding-left: 3em; } dd { margin-bottom: 2em; } </style> </head><body> <h1>Very Simple Quiz</h1> <!-- form onsubmit="return false" // for testing purposes only --> <dl> <dt>1. What is today?</dt> <dd> <ul> <li><label><input type="radio" name="q1" value='Q1:Sun'>Sunday</input></label></li> <li><label><input type="radio" name="q1" value='Q1:Sat'>Saturday</input></label></li> <li><label><input type="radio" name="q1" value='Q1:None'>None of the above</input></label></li> </ul> </dd> <dt>2. Is today part of a weekend?</dt> <dd> <ul> <li><label><input type="radio" name="q2" value='Q2:Yes'>Yes</input></label></li> <li><label><input type="radio" name="q2" value='Q2:No'>No</input></label></li> </ul> </dd> </dl> <p> <button id="checkAns">Responses in console.log</button> </p> <!-- /form // for testing only --> <pre id='demo'>Your Responses </pre> <script> console.clear(); function checkAnswers() { let sel = document.querySelectorAll('input[type="radio"]'); for (let i=0; i<sel.length; i++) { if (sel[i].checked) { // answers in console: #'s start a zero console.log(i,sel[i].value); document.getElementById('demo').innerHTML += `${i} : ${sel[i].value}<br>`; } } } function init() { document.getElementById('checkAns').addEventListener('click', checkAnswers); } init(); </script> </body></html>
  17. JMRKER
    I am unclear as to what you are trying to do with your project so I am just making a guess as to what you are trying to accomplish with your initial post. Therefore just use my post below for information if it of no use to your project. Note that I do not use any ID references except for the new button selection. Also, I opened your Logo for display. If you do not intend it to be displayed then don't include it in the program instead of setting the height and width of the image to be 1px. Normally the 'onload' is not included in the image display. It could have been put into the <body> element, but I chose to put it in the JS initialization section along with the button event logic. <!DOCTYPE html><html lang="en"><head><title> Test Page </title> <meta charset="UTF-8"> <meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/> <!-- Modified from: https://w3schools.invisionzone.com/topic/61788-only-changes-the-first-element/ --> <style> hr { border: 2px solid red; } .hide { display: none; } </style> </head><body> <p> <img src="https://wecarepro.be/img/cms/PharmaBelgium-Belmedis_Logo2.png" title='Logo' width="200" height="100" /> </p> <p class="price">€5.99</p> <p class="cost">€3.02</p></p> <hr> <p class="price">€14.50</p> <p class="cost">€7.90</p></p> <hr> <button id="btnHide"> Cost Displays </button> <script> console.clear(); function CheckApoPriceDisplay() { let p = document.getElementsByClassName("price"); for (let el of p) { el.style.color = "Darkgreen"; el.style.fontWeight = "Bold"; } let c = document.getElementsByClassName("cost"); for (let el of c) { el.style.color = "Darkred"; el.style.fontWeight = "Bold"; } } function HideCosts() { let c = document.getElementsByClassName("cost"); for (let el of c) { el.classList.toggle('hide'); } } function init() { CheckApoPriceDisplay(); document.getElementById('btnHide').addEventListener( 'click', HideCosts ); } init(); </script> </body></html> Hopefully this helps with your understanding if it is not of benefit to your project. Good Luck!
  18. JMRKER
    Using your analogy, the 'ambassador' is not part of the security force (police) and should not be named as part of security. And if there is more than one 'ambassador', who is to respond when the 'ambassador' is paged? If both the 'ambassador' and the 'security force' are involved, then they should be classified as 'authority'. If both are to be notified or contacted at the same time, don't use ID as the target as all SHOULD have UNIQUE names. Instead look into the use of 'class' if you need to determine who is collectively in 'authority'. Note: Your project should contain appropriately named elements suitable for the project. In this case not ambassasor, police or authority When grouping different IDs for identification consider using a 'class' to be able to collect the representatives.
  19. JMRKER

    HTML & CSS

    JMRKER replied to Benito's topic in CSS

    What kind of problems are you having? What have you tried so far? Whose examples are you following? Link? What are the folders supposed to contain? HTML and CSS code? BTW, welcome to the forums.
  20. JMRKER
    Ctrl-A is a defined event by the browser. Similar to using Ctrl-X and Ctrl-V to cut-and-paste. I don't think your "myFunction(e)" is checking either keypress as written.
  21. JMRKER
    You have at least two <div> tags with id="apoPrice". That's like going on to an airport and calling to your friend, "Hi Jack". Who's going to respond? Your friend, another passenger or the TSA agent named "Jack" with a gun? Change references to id="apoPrice1", id="apoPrice2" as needed so that only unique id values are used in your program. Note also that your "else" condition will never be reached with your logic. It will ALWAYS find the first element when looking for "getElementsByClassName('price')[0] so it cannot return false for the 'else' statement to be executed.
  22. JMRKER
    Without seeing the HTML, CSS and JS working together, the following is just a SWAG at your problem. What makes me suspect is your statement: "The script is supposed to change all elements with ID "apoPrice" if one element of class "price" is avaible. " ID values must be unique, so when you say "all elements with ID...", it may be where things must be changed. Hope this helps resolve your problem. BTW, welcome to the forums.
  23. JMRKER
    Also look at your '=' key logic where you check for the previous '+' or '-' key entry. I don't think you want to CHECK for the status of the key with this: if (sign='+'){ Other thoughts: 1. What kind of calculator does not let you enter a zero? 2. And why do you need to use parseFloat() when you have not ability to enter a decimal?
  24. JMRKER
    How OLD is that script you found? <script> no longer requires the language='JavaScript' addition. Notice that you clear out the 'results.value' and change the 'firstNumber' value as soon as you press '+' or '-' Then when you press the '=' key, the blank value is added to the newest entry. You may want to re-think your logic here. BTW, welcome to the forums.
  25. JMRKER
    OK. Just tried in Chrome and it does change size of display. I had initially tested with FF and there is no change to display size. (Using version 78.0.2) Unclear as to why the difference. Untested with other browsers.
×
×
  • Create New...