Jump to content

JMRKER

Members
  • Content Count

    105
  • 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. JMRKER

    Tab Menu

    In the last post, just add this one line: } openCity('click','London'); </script> before the closing script tag.
  2. What does your webpage look like? What code are you using? Make it as simple an example as you can.
  3. Move the id="defaultOpen" From: <button class="tablink" onclick="openPage('Home', this, 'red')">Home</button> <button class="tablink" onclick="openPage('News', this, 'green')" id="defaultOpen">News</button> To: <button class="tablink" onclick="openPage('Home', this, 'red')" id="defaultOpen">Home</button> <button class="tablink" onclick="openPage('News', this, 'green')" >News</button> BTW, welcome to the forums.
  4. Needs following change to make it work. <script> function select() { var sel = document.getElementById("cars").value; document.getElementById("cars1").options[sel-1].disabled = true; } </script> Note also that it will ONLY disable the selection without the ability to deselect a choice once chosen. Also, the label tag 'for=option' is useless as the 'for' applies to an ID not an 'option' to the select tag.
  5. Unclear of request. Clarification please. Are you wanting to display an image each letter of 'Joy' based upon user input? Or, are you trying to display a symbol of each letter of 'Joy' based upon some substitution logic? Or, are you wanting to display 'Joy' as a different font family or size or color? Do you have an example of what you are trying to create?
  6. 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>
  7. 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.
  8. 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.
  9. Which, if you looked at the code, is exactly what I suggested.
  10. 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.
  11. 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.
  12. 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>
  13. 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.
  14. 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>
  15. 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
×
×
  • Create New...