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
    Example of how it might be done. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title> Screen / Print Displays </title> <style> @media only screen { body { color: green; } #prnButton { display: inline; } } @media only print { body { color: black; } #prnButton { display: none; } } </style> </head> <body> <h1>The @media Rule</h1> <p>Use mediaqueries to set the text color to green <br>when the document is displayed on the screen, and to black when it is printed.</p> <input id="prnButton" type='Button' value='Print' onclick='printpage()'> </body> <script> function printpage() { window.print(); // logic to print the page } </script> </html>
  2. JMRKER
    It may be that the call to your progress display is only called when the AJAX call has been completed. After it received the completed data access, the function is not called upon again.
  3. JMRKER
    Can you provide an HTML example of the layout of the elements you are trying to include in your request? I'm unclear as to the requirements.
  4. JMRKER
    There is no "$*" in the link you provided. In fact there is no code in the link you provided, just an image of some code. I like to program, but I don't like to type. You have mastered how to copy and paste a picture, now try with code usable code.
  5. JMRKER
    I'm a bit tired of guessing what it is that you want. Your requirements are too vague for me. Log-on display is always available so what do you mean by replacing alert with figure?
  6. JMRKER
    To which piece of code are you referring? That last requirement is totally new to the original post?
  7. JMRKER
    Following is stripped down code to show proof of concept. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title> HTML5 page </title> </head> <body> <!-- <label for="uname"><b>Username</b></label> <input type="text" id="uname" placeholder="Enter Username" name="uname" required><br/><br/> <label for="psw" ><b>Password</b></label> <input type="password" placeholder="Enter Password" id="psw" name="psw" required><br/><br/> --> <button onclick="login()" id="log">Login</button><br/><br/><br/> <button onclick="one()" id="fir">one</button> <button onclick="two()" id="sec">two</button> <button onclick="three()"id="thi">three</button> <button onclick="four()" id="for">four</button> <script> function one() { alert("first button"); } function two() { alert("second button"); } function three() { alert("third button"); } function four() { alert("fourth button"); } function threeOFF() { alert("third button turned OFF"); } function fourOFF() { alert("fourth button turned OFF"); } function login() { document.getElementById('thi').onclick = threeOFF; document.getElementById('thi').style.opacity = 0.4; document.getElementById('for').onclick = fourOFF; document.getElementById('for').style.opacity = 0.4; } </script> </body> </html> You could reconnect by changing the 'onclick' event back to the function 'three' instead off 'threeOFF'
  8. JMRKER
    You could change the 'opacity' of the button to make it appear disabled. If you actually disable the button, then it will not react to any other events, such as onclick. You could modify the logic to use the functions 'addEventListener' and 'removeEventListener' to change the event actions and avoid the 'disable' altogether. For example, you could remove the original event assignments with 'removeEventListener' and then reference a new function to execute with 'addEventListener'. If you need to go to another user/password then you could reverse the assignments back to the original settings.
  9. JMRKER
    Is this a change from your original request? Is the time expected to be the time of the date selection? If not, where is the time selection supposed to be collected from? What kind of time intervals - 0 to 23 hours? - any minutes/seconds required? Difficult for me to envision solution with current information provided. Sorry
  10. JMRKER
    You can change the function called as a quick and dirty solution. function myFunction() { var x = document.getElementById("myDate").value.split('-'); document.getElementById("demo").innerHTML = x[1]+'/'+x[2]+'/'+x[0]; }
  11. JMRKER
    Yes, hence the reason for my comment: " 'dsonesuk's idea more dynamic with code changes ..."
  12. JMRKER
    Removing radio button sections and adding drop-down was too easy. Why did you not try this yourself? Remainder of code remains the same as last post. You will still need to add the server-side submisison checks with password information as you seem to know how to do this already. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title> MARK tabs </title> <!-- From: http://w3schools.invisionzone.com/topic/58299-login-with-tabs/ Idea from: https://stackoverflow.com/questions/35564148/css-to-open-details-box-on-thumbnail-hover-or-click --> <style> #container { width: 100%; height: 30em; border: 1px solid blue; } main { width: 100%; height: 94%; border: 1px solid blue; ; } mark { margin: 0 0.25em; cursor: pointer; font-size: 1.5em; } mark:hover { background-color: lime; } .hide { display: none; } .orange { background-color: orange; } </style> </head> <body> <select id="users"> <option value=""> Select user </option> <option value="1"> User 1 </option> <option value="2"> User 2 </option> <option value="3"> User 3 </option> <option value="4"> User 4 </option> </select> <input type="password" id="password" value=""> <!-- Add <form> information for PHP submission --> <button onclick="checkUsers()"> Fake Submission </button> <ul id="instructions"> <li>Choose a 'User' above</li> <li> User #1 has access to first two tabs below </li> <li> User #2 has access to first four tabs below </li> <li> User #3 has access to first six tabs below </li> <li> User #4 has access to all eight tabs below </li> </ul> <div id="container"> <div id="selections"> <mark> Home </mark> <mark> Settings </mark> <mark> Changes </mark> <mark> Total </mark> <mark> Input </mark> <mark> Output </mark> <mark> Calibration </mark> <mark> Selftest </mark> </div> <main> <article> <h2> Home </h2> </article> <article> <h2> Settings </h2> </article> <article> <h2> Changes </h2> </article> <article> <h2> Total </h2> </article> <article> <h2> Input </h2> </article> <article> <h2> Output </h2> </article> <article> <h2> Calibration </h2> </article> <article> <h2> Selftest</h2> </article> </main> </div> <script> function show(info) { info.classList.remove('hide'); } // function showhide(info, act) { info.classList.toggle(act); } function hideAll() { var sel = document.querySelectorAll('#container article'); for (var i=0; i<sel.length; i++) { sel[i].classList.add('hide'); } return sel; } function unmarkAll() { var sel2 = document.querySelectorAll('#selections mark'); for (let i=0; i<sel2.length; i++) { sel2[i].classList.remove('orange'); } return sel2; } function checkUsers() { document.getElementById('instructions').classList.add('hide'); var vlu = Number(document.getElementById('users').value); var sel1 = hideAll(), sel2 = unmarkAll(); for (let i=0; i<sel2.length; i++) { // mouse click display effects if (i < (vlu*2)) { sel2[i].addEventListener('click', function() { hideAll(); show(sel1[i]); unmarkAll(); sel2[i].classList.add('orange'); } ); // tab marker } else { sel2[i].addEventListener('click', function() { hideAll(); unmarkAll(); } ); // tab marker } } } function init() { // initialize events and actions var sel1 = hideAll(); var sel2 = unmarkAll(); // for (let i=0; i<sel2.length; i++) { for (let i=0; i<0; i++) { // mouse click display effects sel2[i].addEventListener('click', function() { hideAll(); show(sel1[i]); unmarkAll(); sel2[i].classList.add('orange'); } ); // tab marker } } init(); </script> </body> </html>
  13. JMRKER
    'dsonesuk's idea more dynamic with code changes, but you could also do it old style in a pinch. <script> for (var i=1; i<=20; i++) { document.getElementById("Test"+i).value = Dotoff; } </script>
  14. JMRKER
    Obviously I don't understand the requests. What parts are supposed to be tabs and what parts are to be user/password selections? Where do the drop down options come into play? I need a better explanation or example for me to try to help.
  15. JMRKER
    In code above, remove the user choices after the first time if you don't wish for others to be available. Similar to 'instructions' element. You can add the logic to accept a valid password with the 'user's choice, but JS is not a very secure language for these duties. Good Luck!
  16. JMRKER
    If you are going to modify the code at least keep the parts that are working correctly. Also, it always a good idea to let the user know what to do if it is different from normal conditions. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title> MARK tabs </title> <!-- From: http://w3schools.invisionzone.com/topic/58299-login-with-tabs/ Idea from: https://stackoverflow.com/questions/35564148/css-to-open-details-box-on-thumbnail-hover-or-click --> <style> #container { width: 100%; height: 30em; border: 1px solid blue; } main { width: 100%; height: 94%; border: 1px solid blue; ; } mark { margin: 0 0.25em; cursor: pointer; font-size: 1.5em; } mark:hover { background-color: lime; } .hide { display: none; } .orange { background-color: orange; } </style> </head> <body> <div id="users" class="users"> <input type="radio" id="user1" name="user" value="1"> <label for="user1"> User 1 </label> <input type="radio" id="user2" name="user" value="2"> <label for="user2"> User 2 </label> <input type="radio" id="user3" name="user" value="3"> <label for="user3"> User 3 </label> <input type="radio" id="user4" name="user" value="4"> <label for="user4"> User 4 </label> </div> <ul id="instructions"> <li>Choose a 'User' above</li> <li> User #1 has access to first two tabs below </li> <li> User #2 has access to first four tabs below </li> <li> User #3 has access to first six tabs below </li> <li> User #4 has access to all eight tabs below </li> </ul> <div id="container"> <div id="selections"> <mark> Home </mark> <mark> Settings </mark> <mark> Changes </mark> <mark> Total </mark> <mark> Input </mark> <mark> Output </mark> <mark> Calibration </mark> <mark> Selftest </mark> </div> <main> <article> <h2> Home </h2> </article> <article> <h2> Settings </h2> </article> <article> <h2> Changes </h2> </article> <article> <h2> Total </h2> </article> <article> <h2> Input </h2> </article> <article> <h2> Output </h2> </article> <article> <h2> Calibration </h2> </article> <article> <h2> Selftest</h2> </article> </main> </div> <script> function show(info) { info.classList.remove('hide'); } // function showhide(info, act) { info.classList.toggle(act); } function hideAll() { var sel = document.querySelectorAll('#container article'); for (var i=0; i<sel.length; i++) { sel[i].classList.add('hide'); } return sel; } function unmarkAll() { var sel2 = document.querySelectorAll('#selections mark'); for (let i=0; i<sel2.length; i++) { sel2[i].classList.remove('orange'); } return sel2; } function checkRBtns() { document.getElementById('instructions').classList.add('hide'); var sel = document.querySelectorAll("#users input"), vlu = 0; for (var i=0; i<sel.length; i++) { if (sel[i].checked) { vlu = sel[i].value; } } var sel1 = hideAll(), sel2 = unmarkAll(); for (let i=0; i<sel2.length; i++) { // mouse click display effects if (i < (vlu*2)) { sel2[i].addEventListener('click', function() { hideAll(); show(sel1[i]); unmarkAll(); sel2[i].classList.add('orange'); } ); // tab marker } else { sel2[i].addEventListener('click', function() { hideAll(); unmarkAll(); } ); // tab marker } } } function init() { // initialize events and actions var sel1 = hideAll(); var sel2 = unmarkAll(); // for (let i=0; i<sel2.length; i++) { for (let i=0; i<0; i++) { // mouse click display effects sel2[i].addEventListener('click', function() { hideAll(); show(sel1[i]); unmarkAll(); sel2[i].classList.add('orange'); } ); // tab marker } document.getElementById('user1').addEventListener('click', checkRBtns ); document.getElementById('user2').addEventListener('click', checkRBtns ); document.getElementById('user3').addEventListener('click', checkRBtns ); document.getElementById('user4').addEventListener('click', checkRBtns ); } init(); </script> </body> </html>
  17. JMRKER
    You have 8 (!) repeated code for an AJAX file access. Seems very wasteful code. I don't have access to a server to test your code and it does not run locally. Do you have it online somewhere? Why are you using 8 (!) paragraph elements to display the error information when 'dsonesuk' and I have suggested workable alternatives?
  18. JMRKER
    Replace the "Simulated events" with the actual event logic regardless of where they came from. You have provided no code for me to give suggestions about. Use the function "add2errs" logic to limit your list display to any number of errors desired. The error information is just saved to an array which you control the display to the max desired. You could also save ALL errors and just display only the last 8 received.
  19. JMRKER
    Since you choose to provide no code, you get a SWAG. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title> Simulated Errors </title> <!-- link rel="stylesheet" href="common.css" media="screen" --> </head> <body> <h2> Simulated errors </h2> <div id="simErrors"> <label> <input type="radio" name="rbtn" value="1"> Error 1 </label> <label> <input type="radio" name="rbtn" value="2"> Error 2 </label> <label> <input type="radio" name="rbtn" value="3"> Error 3 </label> <label> <input type="radio" name="rbtn" value="4"> Error 4 </label> <label> <input type="radio" name="rbtn" value="5"> Error 5 </label> <label> <input type="radio" name="rbtn" value="6"> Error 6 </label> <label> <input type="radio" name="rbtn" value="7"> Error 7 </label> <label> <input type="radio" name="rbtn" value="8"> Error 8 </label> </div> <h3>Last 10 Error List</h3> <pre id="errList"></pre> <script> var errs = []; function add2errs(info) { // alert(info.value); errs.unshift('Error: '+info.value); if (errs.length > 10) { errs.length = 10; } document.getElementById('errList').innerHTML = errs.join('\n'); } function init() { var sel = document.querySelectorAll('#simErrors input'); for (let i=0; i<sel.length; i++) { sel[i].addEventListener('click', function () { add2errs(this); } ); } } init(); </script> </body> </html>
  20. JMRKER
    See if this meet with your approval or use as template for further modifications. Change hover and clicked colors a desired. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title> MARK tabs </title> <!-- From: http://w3schools.invisionzone.com/topic/58299-login-with-tabs/ Idea from: https://stackoverflow.com/questions/35564148/css-to-open-details-box-on-thumbnail-hover-or-click --> <style> #container { width: 400px; height: 400px; border: 1px solid blue; } main { width: 100%; height: 94%; border: 1px solid blue; } mark { margin: 0 0.25em; cursor: pointer; } mark:hover { background-color: lime; } .hide { display: none; } .orange { background-color: orange; } </style> </head> <body> <div id="users" class="users"> <input type="radio" id="user1" name="user" value="1"> <label for="user1"> User 1 </label> <input type="radio" id="user2" name="user" value="2"> <label for="user2"> User 2 </label> <input type="radio" id="user3" name="user" value="3"> <label for="user3"> User 3 </label> <input type="radio" id="user4" name="user" value="4"> <label for="user4"> User 4 </label> </div> <div id="container"> <main> <article> Article 1 </article> <article> Article 2 </article> <article> Article 3 </article> <article> Article 4 </article> <article> Article 5 </article> <article> Article 6 </article> <article> Article 7 </article> <article> Article 8 </article> </main> <div id="selections"> <mark> Tab 1 </mark> <mark> Tab 2 </mark> <mark> Tab 3 </mark> <mark> Tab 4 </mark> <mark> Tab 5 </mark> <mark> Tab 6 </mark> <mark> Tab 7 </mark> <mark> Tab 8 </mark> </div> </div> <script> function show(info) { info.classList.remove('hide'); } // function showhide(info, act) { info.classList.toggle(act); } function hideAll() { var sel = document.querySelectorAll('#container article'); for (var i=0; i<sel.length; i++) { sel[i].classList.add('hide'); } return sel; } function unmarkAll() { var sel2 = document.querySelectorAll('#selections mark'); for (let i=0; i<sel2.length; i++) { sel2[i].classList.remove('orange'); } return sel2; } function checkRBtns() { var sel = document.querySelectorAll("#users input"), vlu = 0; for (var i=0; i<sel.length; i++) { if (sel[i].checked) { vlu = sel[i].value; } } var sel1 = hideAll(), sel2 = unmarkAll(); for (let i=0; i<sel2.length; i++) { // mouse click display effects if (i < (vlu*2)) { sel2[i].addEventListener('click', function() { hideAll(); show(sel1[i]); unmarkAll(); sel2[i].classList.add('orange'); } ); // tab marker } else { sel2[i].addEventListener('click', function() { hideAll(); unmarkAll(); } ); // tab marker } } } function init() { // initialize events and actions var sel1 = hideAll(); var sel2 = unmarkAll(); // for (let i=0; i<sel2.length; i++) { for (let i=0; i<0; i++) { // mouse click display effects sel2[i].addEventListener('click', function() { hideAll(); show(sel1[i]); unmarkAll(); sel2[i].classList.add('orange'); } ); // tab marker } document.getElementById('user1').addEventListener('click', checkRBtns ); document.getElementById('user2').addEventListener('click', checkRBtns ); document.getElementById('user3').addEventListener('click', checkRBtns ); document.getElementById('user4').addEventListener('click', checkRBtns ); } init(); </script> </body> </html>
  21. JMRKER
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title> HTML5 page </title> <style> span { background-color: red; color: white; text-align: center; font-size: 2em; display: inline-block; width: 20em; } </style> </head> <body> Message <span> Hello world! </span> contents </body> </html>
  22. JMRKER
    Expand upon as necessary ... <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title> HTML5 page </title> <style> span { background-color: red; color: white; text-align: center; font-size: 2em; display: inline-block; width: 20em; } </style> </head> <body> <span> Hello world! </span> </body> </html>
  23. JMRKER
    Instead of using "alert"s everywhere, which will get verrrry frustrating, why not make the background of the element a color of warning (perhaps red or pink) until the elements has an acceptable response? Or put within a bordered element until filled?
  24. JMRKER
    What is "eased"? If the user will "always reply 'yes'", why bother to have a button to start the event?
  25. JMRKER
    Are you trying to bypass the user choices about what is allowed to be saved on his/her computer? If yes, you may lose a lot of users on your site regardless of the services you may provide. What is your purpose for this request?
×
×
  • Create New...