Jump to content

JMRKER

Members
  • Content Count

    100
  • Joined

  • Last visited

  • Days Won

    3

JMRKER last won the day on June 9 2019

JMRKER had the most liked content!

Community Reputation

7 Neutral

About JMRKER

  • Rank
    Member

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Your request is very unclear, but just to prove that you code can be used in a 'switch' statement, consider this: <!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"/> <!-- link rel="stylesheet" href="common.css" media="screen" --> <style> </style> </head><body> <button onclick="rnd5()">Test</button> <pre id='demo'></pre> <script> function rnd5() { var number = 9; var r = Math.floor(Math.random() * number); // document.getElementById('demo').innerHTML = r+'\n'; // Simple display switch (r) { case 0: document.getElementById('demo').innerHTML += `Number generated by switch was: ${r}\n`; break; case 1: document.getElementById('demo').innerHTML += `Number generated by switch was: ${r}\n`; break; case 2: document.getElementById('demo').innerHTML += `Number generated by switch was: ${r}\n`; break; case 3: document.getElementById('demo').innerHTML += `Number generated by switch was: ${r}\n`; break; case 4: document.getElementById('demo').innerHTML += `Number generated by switch was: ${r}\n`; break; case 5: document.getElementById('demo').innerHTML += `Number generated by switch was: ${r}\n`; break; case 6: document.getElementById('demo').innerHTML += `Number generated by switch was: ${r}\n`; break; case 7: document.getElementById('demo').innerHTML += `Number generated by switch was: ${r}\n`; break; case 8: document.getElementById('demo').innerHTML += `Number generated by switch was: ${r}\n`; break; } } </script> </body></html>
  2. It would be a lot easier to help if you include the HTML with your CSS to determine what interactions would suit your problem best. Without seeing anything but the CSS above my first area to check would be the 'margin-top: -12px;' statement.
  3. Table would not automatically reformat to vertical display as in suggested code, but would be clipped and lost if the images are too large for the screen.
  4. Which, if you looked at the code, is exactly what I suggested.
  5. You will not be able to upload the text files from your desktop using JS. I would be possible to load them from the server.
  6. Too little code to help. For example: 1. What does '.toggler' look like? 2. What does the HTML look like? 3. Is any JS being used to trigger the color change? BTW, welcome to the forums. PS: going by the name, not the # of posts.
  7. Here is 'Ingolme's suggestion in a test script. Very similar to original but without <br> <!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"/> <!-- link rel="stylesheet" href="common.css" media="screen" --> <style> h1 { /* width: 20em; /* single line */ margin: 0 auto; text-align: center; background: wheat; color: magenta; } h1.vertLine { width: 3em; } /* single vertical line */ h1.twoLines { width: 5em; } /* two horiz. lines */ </style> </head><body> <h1 class='vertLine'> We buy cars city</h1> <hr> <h1 class="twoLines"> We buy cars city</h1> <hr> <h1> We buy cars city</h1> <hr> <script> </script> </body></html>
  8. Example of 'dsonesuk's suggestion: <!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"/> <!-- link rel="stylesheet" href="common.css" media="screen" --> <style> h1 { width: 20em; margin: 0 auto; text-align: center; background: wheat; color: magenta; } </style> </head><body> <h1> We buy <br> cars city</h1> <script> </script> </body></html> BTW, welcome to the forums.
  9. JMRKER

    Dropdown menu.

    Here is one very similar that works as you want. Compare codes for inspiration. <!DOCTYPE html><html lang="en"><head><title> Horizontal Drop-down Menu </title> <meta charset="UTF-8"> <meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/> <!-- Modified from: https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar also: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar_click --> <style> ul { width: 800px; list-style-type: none; margin: 0 auto; padding: 0; overflow: hidden; background-color: wheat; } li { float: left; } li a, .dropbtn { display: inline-block; color: black; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, .dropdown:hover .dropbtn { background-color: lime; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: wheat; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover {background-color: lime;} .dropdown:hover .dropdown-content { display: block; } .toRight { float: right; } </style> </head> <body> <ul> <li class="dropdown"> <a href="javascript:void(0)" class="dropbtn">Home</a> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> <li><a href="#news">News</a></li> <li class="dropdown"> <a href="javascript:void(0)" class="dropbtn">Dropdown 1</a> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> <li class="dropdown"> <a href="javascript:void(0)" class="dropbtn">Dropdown 2</a> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> <li class="dropdown"> <a href="javascript:void(0)" class="dropbtn">Dropdown 3</a> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> <li class="dropdown toRight"> <a href="#" class="right">Enter</a> </li> </ul> <h3>Dropdown Menu inside a Navigation Bar</h3> <p>Hover over the "Dropdown" link to see the dropdown menu.</p> </body> </html>
  10. Seventy items long seems excessive (to me). Is there no way to break the list into smaller groups by being more specific about the contents displayed? I don't know what your dropdown looks like, but as an example for a main heading of "Clothes" followed by all kinds of clothes I would break the clothes topic into smaller groups of 'Shirts', 'Blouses', 'Pants', 'Skirts', 'Ties', 'Scarfes', etc. I think any list longer than about 10 items should be split into smaller lists, even if the split is, for example, by alphabet: a-g, h-o, p-z
  11. If you really need an array, you can convert from a collection to an array with the ES6 spread function. <!DOCTYPE html> <html> <body> <h2>JavaScript Arrays</h2> <p>This "home made" isArray() function returns true when used on an array:</p> <p id="demo"></p> <script> var fruits = ["Banana", "Orange", "Apple", "Mango"]; // not used in this demonstration document.getElementById("demo").innerHTML = isArray(document.getElementsByTagName("p")); // false var parasCollection = document.getElementsByTagName('p'); // same as above document.getElementById("demo").innerHTML += '<br>' + isArray(parasCollection); // false var paraArray = [...parasCollection]; // convert collection to an array document.getElementById("demo").innerHTML += '<br>' + isArray(paraArray) + '<br>'; // true // shows tagName of collection array for (var i=0; i<paraArray.length; i++) { document.getElementById('demo').innerHTML += '<br>' + paraArray[i].tagName +' '; } function isArray(myArray) { return myArray.constructor.toString().indexOf("Array") > -1; } </script> </body> </html>
  12. Don't know what is causing this particular problem, but I removed the anchor links and the drop-down works fine. It might be a place to start further investigations. I don't know enough about PHP to help. <div class="dropdown-user-content" id="dropdown-user-content"> <a href="#"><i class="fa fa-fw fa-user"></i> Perfil de usuario</a> <a href="#"><i class="fa fa-fw fa-envelope"></i> Mensajes</a> <a href="#"><i class="fa fa-fw fa-book"></i> Reglas</a> <a href="#" style="color:red"><i class="fa fa-fw fa-arrow-right"></i> Salir</a> </div>
  13. Nope. You will need to add a database and server location somewhere. BTW, welcome to the forums.
  14. Note addition in "Edited" at end. I was unable to alter posted code to show addition. <style> button { background: orange; } button:hover { background: cyan; } button:active { background: pink; } .active { background: lime; } .active:hover { background: yellow; } </style>
  15. See if this test code can illustrate the actions and use of class .active and HTML active button:active has control only while element has focus as in a mouse click hold down mouse button to see color change with focus <!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> Active test </title> <!-- For: http://w3schools.invisionzone.com/topic/60288-active-link-should-stay-colored/ --> <style> button { background: orange; } button:hover { background: cyan; } .active { background: lime; } .active:hover { background: yellow; } </style> </head> <body> <div id="btnLinks"> <button> Test 1 </button> <button> Test 2 </button> <button> Test 3 </button> </div> <script> console.clear(); function init() { const sel = document.querySelectorAll('#btnLinks button'); for (const [i, el] of sel.entries()) { el.addEventListener('click', function() { test(el, i); } ); } } init(); function test(elem, ndx) { elem.classList.toggle('active'); } </script> </body> </html>
×
×
  • Create New...