Jump to content

Search the Community

Showing results for tags 'dropdown'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








  1. <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span id="selected">CHOOSE ARTICLE</span><span class="caret"></span></a> </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">All</a> <a class="dropdown-item" href="#">Art. 1: Definitions</a> <a class="dropdown-item" href="#">Art. 2: Playing Court</a> <a class="dropdown-item" href="#">Art. 3: Equipment</a> <a class="dropdown-item" href="#">Art. 4: Teams</a> <a class="dropdown-item" href="#">Art. 5: Players: Injury and assistance</a> <a class="dropdown-item" href="#">Art. 6: Captain: Duties and powers</a> <a class="dropdown-item" href="#">Art. 7: Head coach and first assistant coach: Duties and powers</a> <a class="dropdown-item" href="#">Art. 8: Playing time, tied score and overtime</a> <a class="dropdown-item" href="#">Art. 9: Beginning and end of a quarter, overtiem or the game</a> <a class="dropdown-item" href="#">Art. 10: Status of the ball</a> <a class="dropdown-item" href="#">Art. 11: Location of a player and a referee</a> <a class="dropdown-item" href="#">Art. 12: Jump ball and alternating possession</a> <a class="dropdown-item" href="#">Art. 13: How the ball is played</a> <a class="dropdown-item" href="#">Art. 14: Control of the ball</a> <a class="dropdown-item" href="#">Art. 15: Player in the act of shooting</a> <a class="dropdown-item" href="#">Art. 16: Goal: When made and its value</a> <a class="dropdown-item" href="#">Art. 17: Throw-in</a> <a class="dropdown-item" href="#">Art. 18: Time-out</a> <a class="dropdown-item" href="#">Art. 19: Substitution</a> <a class="dropdown-item" href="#">Art. 20: Game lost by forfeit</a> <a class="dropdown-item" href="#">Art. 21: Game lost by default</a> <a class="dropdown-item" href="#">Art. 22: Violations</a> <a class="dropdown-item" href="#">Art. 23: Player out-of-bounds and ball out-of-bounds</a> <a class="dropdown-item" href="#">Art. 24: Dribbling</a> <a class="dropdown-item" href="#">Art. 25: Travelling</a> <a class="dropdown-item" href="#">Art. 26: 3 seconds</a> <a class="dropdown-item" href="#">Art. 27: Closely guarded player</a> <a class="dropdown-item" href="#">Art. 28: 8 seconds</a> <a class="dropdown-item" href="#">Art. 29: 24 seconds</a> <a class="dropdown-item" href="#">Art. 30: Ball returned to the backcourt</a> <a class="dropdown-item" href="#">Art. 31: Goaltending and Interference</a> <a class="dropdown-item" href="#">Art. 32: Fouls</a> <a class="dropdown-item" href="#">Art. 33: Contact: General principles</a> <a class="dropdown-item" href="#">Art. 34: Personal foul</a> <a class="dropdown-item" href="#">Art. 35: Double foul</a> <a class="dropdown-item" href="#">Art. 36: Technical foul</a> <a class="dropdown-item" href="#">Art. 37: Unsportsmanlike foul</a> <a class="dropdown-item" href="#">Art. 38: Disqualifying foul</a> <a class="dropdown-item" href="#">Art. 39: Fighting</a> <a class="dropdown-item" href="#">Art. 40: 5 fouls by a player</a> <a class="dropdown-item" href="#">Art. 41: Team fouls: Penalty</a> <a class="dropdown-item" href="#">Art. 42: Special situations</a> <a class="dropdown-item" href="#">Art. 43: Free throws</a> <a class="dropdown-item" href="#">Art. 44: Correctable errors</a> <a class="dropdown-item" href="#">Art. 45: Referees,table officials and commissioner</a> <a class="dropdown-item" href="#">Art. 46: Crew chief: Duties and powers</a> <a class="dropdown-item" href="#">Art. 47: Referees: Duties and powers</a> <a class="dropdown-item" href="#">Art. 48: Scorer and assistant scorer: Duties</a> <a class="dropdown-item" href="#">Art. 49: Timer: Duties</a> <a class="dropdown-item" href="#">Art. 50: Shot clock operator: Duties</a> <a class="dropdown-item" href="#">B: The Scoresheet</a> <a class="dropdown-item" href="#">C: Protest Procedure</a> <a class="dropdown-item" href="#">D: Classification of teams</a> <a class="dropdown-item" href="#">E: Media Time-outs</a> <a class="dropdown-item" href="#">F: Instant Replay System</a> </div> </div> <h5 class="roundborder1" style="text-align: center;font-size:25px"><b>RULES QUIZ</b></h5> <div class="panel"> <br> <div class="question-container" id="question"> Question goes here. </div> <br><br> <div class="option-container"> <button class="option" onclick="" id="op1" >YES</button> <button class="option" onclick="" id="op2" >NO</button> </div> <br><br> <div class="result" id="key"> </div> <br><br> <div class="navigation"> <button class="prev"><b>PREV</b></button> <button class="next" ><b>NEXT</b></button> </div> </div> <script> const Questions = [{ id: 0, q: "Basketball is played by two teams of 12 players each.", a: [{ text: "YES", isCorrect: false }, { text: "NO", isCorrect: true } ], k: "Basketball is played by two teams of 5 players each.(Art. 1 (1.1))" }, { id: 1, q: "The aim of each team is to score in the opponent’s basket.", a: [{ text: "YES", isCorrect: true,}, { text: "NO", isCorrect: false } ], k: "The aim of each team is to score in the opponent’s basket and to prevent the other team from scoring.(Art. 1 (1.1))" }, { id: 2, q: "The basket that is attacked by the team is its own basket.", a: [{ text: "YES", isCorrect: false }, { text: "NO", isCorrect: true } ], k: "The basket that is attacked by the team is the opponent's basket basket.(Art. 1 (1.2))" } ] // Set start var start = true; // Iterate function iterate(id) { // Getting the result display section var result = document.getElementsByClassName("result"); result[0].innerText = ""; // Getting the question const question = document.getElementById("question"); // Setting the question text question.innerText = Questions[id].q; // Getting the options const op1 = document.getElementById('op1'); const op2 = document.getElementById('op2'); op2.style.backgroundColor = "var(--primary-color)"; op2.style.color = "black"; op1.style.backgroundColor = "var(--primary-color)"; op1.style.color = "black"; // Providing option text op1.innerText = Questions[id].a[0].text; op2.innerText = Questions[id].a[1].text; // Providing the true or false value to the options op1.value = Questions[id].a[0].isCorrect; op2.value = Questions[id].a[1].isCorrect; //key.innerText = Questions[id].k; var selected = ""; // Show selection for op1 op1.addEventListener("click", () => { op1.style.backgroundColor = "black"; op1.style.color = "var(--primary-color)"; op2.style.backgroundColor = "var(--primary-color)"; op2.style.color = "black"; selected = op1.value; key.innerText = Questions[id].k; if (selected == "true") { result[0].innerText = "CORRECT \n" + key.innerText ; result[0].style.color = "#00FF00"; } else { result[0].innerText = "WRONG \n" + key.innerText ; result[0].style.color = "#FF0000"; } }) // Show selection for op2 op2.addEventListener("click", () => { op1.style.backgroundColor = "var(--primary-color)"; op1.style.color = "black"; op2.style.backgroundColor = "black"; op2.style.color = "var(--primary-color)"; selected = op2.value; key.innerText = Questions[id].k; if (selected == "true") { result[0].innerText = "CORRECT \n" + key.innerText ; result[0].style.color = "#00FF00"; } else { result[0].innerText = "WRONG \n" + key.innerText ; result[0].style.color = "#FF0000"; } }) } if (start) { iterate("0"); } // Next button and method const next = document.getElementsByClassName('next')[0]; var id = 0; next.addEventListener("click", () => { start = false; if (id < 2) { id++; iterate(id); console.log(id); } }) const prev = document.getElementsByClassName('prev')[0]; prev.addEventListener("click", () => { start = false; if (id > 0) { id--; iterate(id); console.log(id); } }) $('.dropdown-menu a').click(function(){ $('#selected').text($(this).text()); }); </script> .question-container{ background-color: black; font-size: x-large; text-align: center; } .option-container{ display: flex; justify-content: space-evenly; background-color: black; } .result{ text-align: center; font-size: 25px; } .option{ border-color: white; font-family: tahoma; font-weight: bold; width: 10vw; height: 8vh; font-size: 20px; } .option{ border: 2px solid var(--primary-color); color: black; text-transform: uppercase; transition: all 0.5s ease-in-out; border-radius: 10px; background: var(--primary-color); } .option:hover,.option:focus{ background: transparent; text-decoration: none; color: white; font-weight: bold; outline: none; cursor: pointer; } .navigation{ display: flex; justify-content: space-evenly; background-color:black; } .next,.prev{ border-color: white; font-family: tahoma; font-weight: bold; width: 15vw; height: 8vh; font-size: 20px; } .next,.prev{ border: 2px solid var(--primary-color); color: black; text-transform: uppercase; transition: all 0.5s ease-in-out; border-radius: 10px; background: var(--primary-color); } .next:hover,.next:focus{ background: transparent; text-decoration: none; color: white; font-weight: bold; outline: none; cursor: pointer; } .prev:hover,.prev:focus{ background: transparent; text-decoration: none; color: white; font-weight: bold; outline: none; cursor: pointer; } .dropdown-menu { max-height: 280px; overflow-y: auto; } I am trying to create a quiz via html. The dropdown menu contains All and other several options. When i select "All" , all the questions must be available to the user When I select any of the options, only questions related to that topic must be available to the user. How can i achieve this? Kindly help.
  2. Below is an excerpted example from the w3schools website with a right justified on hover dropdown but the dropdown will NOT right justify. Can someone please assist here? Thankyou. <!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <div class="w3-container"> <h2>Navigation Bar with Dropdown</h2> <p>Add a dropdown menu inside the navigation bar:</p> <div class="w3-bar w3-light-grey"> <a href="#" class="w3-bar-item w3-button">Home</a> <a href="#" class="w3-bar-item w3-button">Link 1</a> <div class="w3-dropdown-hover w3-right"> <button class="w3-button">Dropdown</button> <div class="w3-dropdown-content w3-bar-block w3-card-4" style="right:0"> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a> </div> </div> </div> </div> </body> </html>
  3. I've created an outline button menu following the samples here: How TO - Outline Buttons . One of the outline buttons needs to have 3 dropdown items. I've reviewed the samples here: How TO - Dropdown Navbar , but am confused if I can add the dropdown function to only one of the outline buttons. I've attached a screen shot of the effect I'd like to create - except I'd like each item in the dropdown to be a separate outline button. This example is from a CMS we have decided not to use. Here's the HTML code I'm using to create the web page: Thanks in advance.
  4. I incorporated the "Dropdown in TopNav" code, but I have a dropdown list that's over 70 items long. How would I incorporated a scrolling function to this menu, or make it possible to view all the entries by scrolling down using the mouse wheel? Thanks!
  5. So basically, I have my sticky navbar working with a working dropdown inside. My problem: when I scroll down and the sticky class is activated, the dropdown stops working. So how can I fix that? This is the code I have over there <div class="navtop"> <div class="dropdown-user"> <div class="dropbtn"><img src="images/user.png" alt="Perfil de Usuario" width="20px"><span>'.$_SESSION["username"].'&nbsp;&nbsp;<i class="fa fa-angle-down"></i></span></div> <div class="dropdown-user-content" id="dropdown-user-content"> <a href="perfil.php"><i class="fa fa-fw fa-user"></i> Perfil de usuario</a> <a href="mensajes.php"><i class="fa fa-fw fa-envelope"></i> Mensajes</a> <a href="reglas.php"><i class="fa fa-fw fa-book"></i> Reglas</a> <a href="resumen.php?logout=1" style="color:red"><i class="fa fa-fw fa-arrow-right"></i> Salir</a> </div> </div> </div> <style> .sticky { position: sticky; top: 0; z-index: 1; } .navtop { width: 100%; background-color: #000; overflow: hidden; color: #fff; font-size: 12px; } .dropdown-user { float: right; overflow: hidden; } .dropdown-user:hover { background: darkgrey; cursor: pointer; } .dropdown-user .dropbtn { outline: none; height: 31px; background-color: inherit; font-family: inherit; } .dropdown-user img { float: left; margin: 5px 4px 0px 5px; } .dropdown-user span { float: left; padding: 8px 8px 8px 0px; } .dropdown-user-content { display: none; right: 0; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-user-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-user-content a:hover { background-color: #ddd; } .dropdown-user:hover .dropdown-user-content { display: block; } </style Thanks in advance!
  6. Gentle7


    Pleas am studing with w3school and dropdown is not working for me what should i do?
  7. Hi guys, I have a odd problem here. I'm a beginner and I have no idea what it can be.. 😑 ps. English is not my first language, so I hope you can understand... ☺️ In dropdown field below, I put in value property the ID column, but when it registers in the database, it saves as string type and not as integer. <?php $sql = "SELECT id, sigla FROM local ORDER BY sigla ASC"; $result = $conn->query($sql); ?> . . . <select name="local" class="form-control"> <option selected>Selecione...</option> <?php while($row = $result->fetch_assoc()){ echo "<option value=".$row['id'].">".$row['sigla']."</option>"; } ?> </select> . . . I used a var_dump() on ID to know what would happend, and it shows as string type. <pre> <?php $sql = "SELECT id, sigla FROM local ORDER BY sigla ASC"; $result = $conn->query($sql); $row = $result->fetch_assoc(); var_dump($row['id']); ?> </pre> Result: string(1) "5" This is the database: -- phpMyAdmin SQL Dump -- version 4.8.3 -- https://www.phpmyadmin.net/ SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET AUTOCOMMIT = 0; START TRANSACTION; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */; -- -- Banco de dados: `arq` -- -- -------------------------------------------------------- -- -- Estrutura para tabela `local` -- CREATE TABLE `local` ( `id` int(11) NOT NULL, `SIGLA` mediumtext NOT NULL, `LOCAL` mediumtext NOT NULL, `TELEFONE` mediumtext NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8; -- -- Fazendo dump de dados para tabela `local` -- INSERT INTO `local` (`id`, `SIGLA`, `LOCAL`, `TELEFONE`) VALUES (1, 'AAC', 'AAC', '2222-2222'), (2, 'DSV', 'DSV', '1111-1111'), (3, 'SCA', 'SCA', '3333-3333'); -- -- Índices de tabelas apagadas -- -- -- Índices de tabela `local` -- ALTER TABLE `local` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT de tabelas apagadas -- -- -- AUTO_INCREMENT de tabela `local` -- ALTER TABLE `local` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6; COMMIT; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */; Thank you so much!!
  8. Hi, I have rebuild a smarty-template that produces a menu from the cms-database. It can handle multiple levels for the navigation. I have it almost working the only thing is that alle dropdowns are opened upon the first level hover. It can be seen at http://c-m-s.pw/index.php?page=testen_w3css My question, is it possible to use hover for multiple level dropdowns? I cannot use "on click" because the toplevel is also a link to a page. Any ideas how to solve this? Regards, Jan
  9. How do I change the formatting of the drop down tab? I need each category to be shorter and stack nicer. http://03f7e3d.netsolhost.com/wordpress1/manufacturers/ <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } body { background-color: #ffffff; padding: 14px; font-family: Garamond; } /* Center website */ .main { width: 1000px; margin: auto; } h1 { font-size: 40px; word-break: break-all; } .row { margin: 40px; } /* Add padding BETWEEN each column */ .row, .row>.column { padding: 16px; } /* Create 5 equal columns that floats next to each other */ .column { float: left; width: 20%; display: none; } /* Clear floats after rows */ .row:after { content: ""; display: table; clear: both; } /* Content */ .content { background-color: white; padding: 14px; width: 180px; height: 75px; } /* The "show" class is added to the filtered elements */ .show { display: block; } /* Style the buttons */ .btn { border: none; outline: none; padding: 4px; background-color: #ebebee; color: black; cursor: pointer; font-family: :times, sans-serif; } .btn:hover { background-color: #c6c6c6; } .btn.active { background-color: #848484; color: white; } </style> </head> <body> <!-- MAIN (Center website) --> <div class="Main"> <CENTER> <h1>Our Manufacturers</h1> </CENTER> <hr> <div id="myBtnContainer"> <button class="btn active" onclick="filterSelection('ALL')">All</button> <button class="btn" onclick="filterSelection('NTX')"> North Texas</button> <button class="btn" onclick="filterSelection('OK')"> Oklahoma</button> <button class="btn" onclick="filterSelection('AR')"> Arkansas</button> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .dropbtn { background-color: #ebebee; color: black; padding: 7px; font-size:14px; border: none; } .dropdown { position: relative; display: inline-block; text-align: left; } .dropdown-content { display: none; position: absolute; background-color: #ebebee; min-width: 220px; z-index: 1; } .dropdown-content a { color: black; padding: 3px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #ddd; } .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #ffff; } </style> </head> <div class="dropdown" id="dropdown"> <button class=" dropbtn">…</button> <div class=" dropdown-content"> <button class="btn" onclick="filterSelection('WC')"> Wire & Cable</button> <button class="btn" onclick="filterSelection('ACC')"> Wire & Cable Accessories</button> <button class="btn" onclick="filterSelection('MC')"> Motor Control</button> <button class="btn" onclick="filterSelection('WD')"> Wiring Devices</button> <button class="btn" onclick="filterSelection('CF')"> Conduit & Fittings</button> <button class="btn" onclick="filterSelection('FUS')"> Fuses</button> <button class="btn" onclick="filterSelection('TOOL')"> Tools & Fasteners</button> <button class="btn" onclick="filterSelection('EW')"> Enclosures & Wireway</button> <button class="btn" onclick="filterSelection('SPEC')"> Specialty</button> </div> </div> </div> </body> </html> </div> </body> </html> <!-- Portfolio Gallery Grid --> <!--Start TOA--!> <div class="column ALL, column NTX, column OK, column AR, column SPEC"> <div class="content"> <center><a href="https://www.airkinglimited.com" target="_blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/AirKing.jpg" alt="Air King" style=" height:48px"></center> </div> </div> <div class="column ALL,column NTX, column OK, column AR,column WC"> <div class="content"> <center><a href="https://www.cmewire.com/" target="_blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/CME-2.png" alt="CME" style="height:54px"></center> </div> </div> <div class="column ALL,column NTX, column ACC, column CF, column TOOL"> <div class="content"> <center><a href="https://www.lhdottie.com target="_blank"/"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/Dottie-2.png" alt="Dottie" style="height:48px"></center> </div> </div> <div class="column ALL,column OK, column TOOL"> <div class="content"> <center><a href="https://www.dewalt.com/" target="_blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/Dewalt-2.png" alt="Dewalt" style="height:41px"></center> </div> </div> <div class="column ALL,column OK, column SPEC"> <div class="content"> <center><a href="https://www.dymo.com/en-US" target="_blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/Dymo.png" alt="Dymo" style="height:42px"></center> </div> </div> <div class="column ALL,column NTX, column OK, column AR, column FUS"> <div class="content"> <center><a href="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/Bussman.png" target="_blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/Edison-2.png" alt="Edison" style="height:45px"></center> </div> </div> <div class="column ALL,column OK, column AR, column FUS"> <div class="content"> <center><a href="http://http://www.cooperindustries.com/content/public/en/bussmann.html" target="_blank"> <img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/10/Eaton-Bussman.png" alt="Bussman" style="height:46px"></center> </div> </div> <div class="column ALL,column NTX, column OK, column CF, column EW"> <div class="content"> <center> <a href="http://www.cooperindustries.com/content/public/en/b-line.html" target="_Blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/B-line.png" alt="B-Line" style="height:48px"></center> </div> </div> <div class="column ALL,column NTX, column OK, column CF, column MC"> <div class="content"> <center><a href="http://www.cooperindustries.com/content/public/en/crouse-hinds.html" target="_blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/Crouse-Hinds.png" alt="Crouse Hinds" style="height:52px"></center> </div> </div> <div class="column ALL,column NTX, column OK, column AR, column WD"> <div class="content"> <center> <a href="http://www.cooperindustries.com/content/public/en/wiring_devices.html" target="_blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/Wiring-Devices.png" alt="Eaton Wiring" style="height:52px"></center> </div> </div> <div class="column ALL,column NTX,column OK, column AR, column LIT"> <div class="content"> <center> <a href="https://www.eiko.com/" target="_blank"> <img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/Eiko-2.png" alt="Eiko" style="height:50px"></center> </div> </div> <div class="column ALL,column NTX, column WC"> <div class="content"> <center><a href="http://www.galvanelectrical.com/" target="_blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/Galvan-2.png" alt="Galvan" style="height:20px"></center> </div> </div> <div class="column ALL,column NTX, column OK, column WC"> <div class="content"> <center><a href="https://www.generalcable.com/" target="_blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/General-Cable-2.png" alt="General Cable" style="height:24px"></center> </div> </div> <div class="column ALL,column NTX, column EW"> <div class="content"> <center><a href="http://www.highlineproducts.com/" target="_blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/Highline.jpg" alt="Maclean Highline" style="height:21px"></center> </div> </div> <div class="column ALL,column NTX, column CF"> <div class="content"> <center><a href="http://www.ipexna.com/usa" target="_blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/Ipex.png" alt="Ipex" style="height:48px"></center> </div> </div> <div class="column ALL,column OK, column TOOL"> <div class="content"> <center><a href="https://www.irwin.com/" target="_blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/Irwin-2.png" alt="Irwin Tools" style="height:48px"></center> </div> </div> <div class="column ALL,column OK, column TOOL"> <div class="content"> <center><a href="https://www.lenoxtools.com/Pages/Home.aspx" target="_Blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/Lenox.png" alt="Lenox" style="height:30px"></center> </div> </div> <div class="column ALL,column NTX, column OK, column ACC, column LIT, column TOOL"> <div class="content"> <center><a href="http://www.nsiindustries.com/" target="_blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/NSI-2.png" alt="NSI" style="height:48px"></center> </div> </div> <div class="column ALL,column NTX, column CF"> <div class="content"> <center><a href="http://www.nec-inc.com/" target="_blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/nec.png" alt="NEC" style="height:64px"></center> </div> </div> <div class="column ALL,column NTX, column CF"> <div class="content"> <center><a href="https://www.patriotsas.com/" target="_blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/Patriot-2.png" alt="Patriot" style="height:48px"></center> </div> </div> <div class="column ALL,column NTX,column OK, column SPEC"> <div class="content"> <center><a href="https://www.polywater.com/" target="_blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/Polywater-2.png" alt="Polywater" style="height:42px"></center> </div> </div> <div class="column ALL,column NTX, column CF"> <div class="content"> <center><a href="http://www.primeconduit.com/" target="_blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/Prime-2.png" alt="Prime" style="height:28px"></center> </div> </div> <div class="column ALL,column OK, column SPEC"> <div class="content"> <center><a href="https://www.sharpie.com/" target="_blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/Sharpie-2.png" alt="Sharpie" style="height:43px"></center> </div> </div> <div class="column ALL,column NTX, column OK, column AR, column MC"> <div class="content"> <center> <a href="http://spikeelectric.com/" target="_blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/Spike.png" alt="Spike" style="height:42px"></center> </div> </div> <div class="column ALL,column OK"> <div class="content"> <center><a href="https://www.westerntube.com/" target="_blank"><img src="http://03f7e3d.netsolhost.com/wordpress1/wp-content/uploads/2018/11/Western-Tube-2.png" alt="Western Tube" style="height:30px"></center> </div> </div> </hr> </table</table> <!--END Combined--!> <!-- END MAIN --> <!-- END GRID --> <script> filterSelection("all") function filterSelection(c) { var x, i; x = document.getElementsByClassName("column"); if (c == "all") c = ""; for (i = 0; i < x.length; i++) { w3RemoveClass(x, "show"); if (x.className.indexOf(c) > -1) w3AddClass(x, "show"); } } function w3AddClass(element, name) { var i, arr1, arr2; arr1 = element.className.split(" "); arr2 = name.split(" "); for (i = 0; i < arr2.length; i++) { if (arr1.indexOf(arr2) == -1) { element.className += " " + arr2; } } } function w3RemoveClass(element, name) { var i, arr1, arr2; arr1 = element.className.split(" "); arr2 = name.split(" "); for (i = 0; i < arr2.length; i++) { while (arr1.indexOf(arr2) > -1) { arr1.splice(arr1.indexOf(arr2), 1); } } element.className = arr1.join(" "); } // Add active class to the current button (highlight it) var btnContainer = document.getElementById("myBtnContainer"); var btns = btnContainer.getElementsByClassName("btn"); for (var i = 0; i < btns.length; i++) { btns.addEventListener("click", function() { var current = document.getElementsByClassName("active"); current[0].className = current[0].className.replace(" active", ""); this.className += " active"; }); } var btnContainer = document.getElementById("dropdown"); var btns = btnContainer.getElementsByClassName("btn"); for (var i = 0; i < btns.length; i++) { btns.addEventListener("click", function() { var current = document.getElementsByClassName("active"); current[0].className = current[0].className.replace(" active", ""); this.className += " active"; }); } </script> </body> </html>
  10. Hello, I have the following issue with this dropdown menu. The menu is a side panel. Clicking on the option shows the desired page but, the problem is that the options in the submenus (level 2 and 3) jump away / dissappear one way or another. What I want to see as a result is: if is clicked on a submenu then the submenu is still visible. Is there someone who can give a solution about how to solve this. HTML PART: <?php if (!isset($_GET['menuquery'])){ $_GET['menuquery']=''; } ?> <html> <head> <meta charset="utf-8" /> <title>menu</title> <link rel="prefetch" href="http://"> <link rel="stylesheet" type="text/css" href="http://localhost/Begin/CSS/sidepanel/sidepanel-frm.css" media="screen" /> <title>Control Panel </title> </head> <body style="color: white;"> <div class="sidepanel_wrap"> <div class="pan_left"> <div style="height: 50px;"> <?php echo $_SERVER['HTTP_HOST']; ?> </div> <div class="sidenav"> <a href="http://<?php echo $_SERVER['HTTP_HOST'] ?>/your_directory/menu-forum.php?menuquery=home">Home</a> <button class="dropdown-btn">Level-1a <i class="fa fa-caret-down"></i> </button> <div class="dropdown-container"> <a href="http://<?php echo $_SERVER['HTTP_HOST'] ?>/your_directory/menu-forum.php?menuquery=level2a">Level-2a</a> <a href="http://<?php echo $_SERVER['HTTP_HOST'] ?>/your_directory/menu-forum.php?menuquery=level2b">Level-2b</a> <a href="http://<?php echo $_SERVER['HTTP_HOST'] ?>/your_directory/menu-forum.php?menuquery=level2c">Level-2c</a> <a href="http://<?php echo $_SERVER['HTTP_HOST'] ?>/your_directory/menu-forum.php?menuquery=level2d">Level-2d</a> </div> <button class="dropdown-btn">Level-1b <i class="fa fa-caret-down"></i> </button> <div class="dropdown-container"> <button class="dropdown-btn">Level-2b <i class="fa fa-caret-down"></i> </button> <div class="dropdown-containerl3"> <a href="http://<?php echo $_SERVER['HTTP_HOST'] ?>/your_directory/menu-forum.php?menuquery=level3a">level-3a</a> <a href="http://<?php echo $_SERVER['HTTP_HOST'] ?>/your_directory/menu-forum.php?menuquery=level3b">Level-3b</a> </div> </div> </div> </div> <div style="color: black;"> <?php var_dump($_GET['menuquery']); if (!isset($_GET['menuquery'])){ echo 'welcome'; } if (isset($_GET['menuquery'])){ if (($_GET['menuquery']) == 'home' ){ echo '<br>you clicked home !'; } if (($_GET['menuquery']) == 'level2a' ){ echo '<br>you clicked level2a !'; } if (($_GET['menuquery']) == 'level2b' ){ echo '<br>you clicked level2b !'; } if (($_GET['menuquery']) == 'level2c' ){ echo '<br>you clicked level2c !'; } if (($_GET['menuquery']) == 'level2d' ){ echo '<br>you clicked level2d !'; } } ?> </div> </div> <script> /* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */ var dropdown = document.getElementsByClassName("dropdown-btn"); var i; for (i = 0; i < dropdown.length; i++) { dropdown[i].addEventListener("click", function() { this.classList.toggle("active"); var dropdownContent = this.nextElementSibling; if (dropdownContent.style.display === "block") { dropdownContent.style.display = "none"; } else { dropdownContent.style.display = "block"; } }); } </script> </body> </html> CSS PART: body{background-color:#F3E5AB;} .sidepanel_wrap { width: 1880px; height: 860px; /*border: solid blue 2px;*/ display: flex; flex-direction: row; } .pan_left { display: inline-block; width: 235px; height: 860px; background-color: #67591F; color: #F3E5AB; } .main_panel_wrap { width: 1640px; height: 860px; background-color:#F3E5AB; } /* Fixed sidenav, full height */ .sidenav { width: 235px; height: 700px; position: relative; z-index: 1; top: 10; left: 0; background-color: #67591F; overflow-x: hidden; padding-top: 20px; } /* Style the sidenav links and the dropdown button */ .sidenav a, .dropdown-btn { padding: 6px 8px 6px 16px; text-decoration: none; font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans,serif; font-size: 14px; color: #93FFE8; display: block; border: none; background: none; width: 100%; text-align: left; cursor: pointer; outline: none; } /* On mouse-over */ .sidenav a:hover, .dropdown-btn:hover { color: #f1f1f1; } /* Add an active class to the active dropdown button */ .active { background-color: #4863A0; color: white; width:100%; } /* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */ .dropdown-container { display: none; background-color: #2B547E; padding-left: 0px; color: yellow; } .dropdown-containerl3 { display: none; background-color: #566D7E; padding-left: 0px; } /* Optional: Style the caret down icon */ .fa-caret-down { float: right; padding-right: 20px; color: #93FFE8; } /* Some media queries for responsiveness */ @media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} }
  11. Hi, I am using w3css top navigation bar using a drop down menu. I would like to have a multilevel drop down menu for some of the items. I would like that each season opens up to another submenu where I can display eg, the years pictures or blogs etc. At the moment the code for the html and css is eg, HTML <div class="dropdown"> <button class="dropbtn"><strong>History</strong></button> <div class="dropdown-content"> <a href="#">Season2016</a> <a href="#">Season 2017</a> </div> </div> CSS .dropdown { font-family: "Comic Sans MS", cursive, sans-serif; float: left; overflow: hidden; } .dropdown .dropbtn { font-family: "Comic Sans MS", cursive, sans-serif; font-size: 16px; border: none; outline: none; color: black; padding: 14px 16px; background-color: inherit; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #ddd; } .dropdown:hover .dropdown-content { display: block; }
  12. I am trying to adapt some code I found online and I don't understand one (actually more) of the lines of code. The code is from a function to generate dropdown lists that depend on previous dropdown lists. The line says "echo "addOption(document.drop_list.Category, '$nt1[cat_id]', '$nt1[category]');";" What does the $nt1 mean and why are there two different values for it? Can someone explain this to me in novice language? I can't find any reference to addOption in the Javascript reference. I'm trying to substitute my table fields into the code, but can't figure out which goes where.
  13. Hi! I am new here and was wondering if I could possibly get some help. I am having some serious trouble trying to figure out why my menu won't sit behind my modal. =( I have wracked my brain trying to figure out what it could be, but have not been able to come up with a conclusion. Please ignore the text as the page is obviously still in testing, but the page shows how the modal goes in front. I also have other issues with IE in that the menu doesn't show up properly, but that may be due to too many style tags? I do very much enjoy my CSS. lol Things have evolved since 2009 ^_^; Here is the link to the page in question and I am attaching the raw files that I think you would need to see where I may have done something wrong. Is it possible that they just aren't compatible? www.technicolor-dreams.net/ani-001.html Thanks in advance! =D -Sarah Also... If you could... Could you explain things as simply as possible? I am not as advanced with coding in knowing all the terminology such as parent and sibling elements. >_<! css.css ani-001.html menu.html
  14. Am able to use this code to bind a.id = :auc_id in order to display certain result needed for menu code, but when i introduce it in the submenu i dont get any result below are the codes for menu and submenu' MENU works fine, display whats need to be showned thanks to a.id = :auc_id $query = "SELECT s.team_id, s.teams AS teams1, ss.team_id, ss.teams AS teams2, a.id, a.team1, a.team2 FROM " . $DBPrefix . "auctions a LEFT JOIN " . $DBPrefix . "sports s ON (s.team_id = a.team1) LEFT JOIN " . $DBPrefix . "sports ss ON (ss.team_id = a.team2) WHERE a.id = :auc_id and a.id = a.id"; $params = array(); $params[] = array(':auc_id', $id, 'int'); $db->query($query, $params); ?> <script type="text/javascript" src="js/dropdownjquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#menu").change(function() { $(this).after('<div id="loader"><img src="images/loading.gif" alt="loading subcategory" /></div>'); $.get('loadsubcat.php?menu=' + $(this).val(), function(data) { $("#sub_cat").html(data); $('#loader').slideUp(200, function() { $(this).remove(); }); }); }); }); </script> <form name="bid"> <label for="category">Select Winner</label> <select name="willwin" id="menu"> <?php if ($db->numrows() > 0){ while ($row = $db->fetch()) { ?> <option value=''></option> <option value="<?php echo $row["team1"]; ?>"><?php echo $row["teams1"]; ?></option> <option value="<?php echo $row["team2"]; ?>"><?php echo $row["teams2"]; ?></option> <?php } } ?> SUBMENU displays all the details in bid table column auction bidder willwin willlose 38 4 3 2 39 4 2 4 39 5 4 2 the result should have a display for column ((auction) 38) willwin (3) but instead i get 3,2,4 <?php include('config.php'); $menu = $_GET['menu']; $query = mysql_query("SELECT a.id, s.team_id, s.teams, u.nick, b.id, b.willwin, b.willlose, b.bidder FROM vs_bids b LEFT JOIN " . $DBPrefix . "vs_users u ON (u.id = b.bidder) LEFT JOIN " . $DBPrefix . "vs_auctions a ON (a.id = b.auction) LEFT JOIN " . $DBPrefix . "vs_sports s ON (s.team_id = b.willwin) WHERE willlose='$menu' and a.id = b.auction and b.bidder NOT IN ('b.tagged') and b.tagged IN ('b.bidder')"); while($row = mysql_fetch_array($query)) { echo "<option value=''></option>"; echo "<option value='$row[team_id]'>$row[nick]...$row[teams]</option>"; } ?> i cant seem to introduce b.auction = :auc_id which will help in displaying the correct result, but once have converted it like the menu above but doesnt seem to work, so i converted it back. please need help with the issue here, thanks.
  15. I've inserted a clickable dropdown on my site. In FireFox and Chrome, the menu closes when you click outside the menu. This does not work with Internet Explorer. I have taken this code from w3school.com (the same problem on the page): https://www.w3schools.com/howto/howto_js_dropdown.asp What can I do to make it work on the Internet Expolorer the same as in FireFox and Chrome? Thanks for your help.
  16. Hi, Need some CSS help regarding SubMenu creation. I have this below code for responsive Main Menu which is working fine. I need to create a SubMenu under the main menu. For example :- Menu2 will habe two submenu like Menu2_SubMenu1 & Menu2_SubMenu2. The color, format and hovering effect will be same like Main menu. Can you kindly help me out with the CSS for the same. I am messing up with the Submenu CSS code code. Thanks in advance for your help. Regards, Ari. Here is the WORKING code where I would like to include sub-menu.( for example under **Menu2**). <!DOCTYPE html> <html> <head> <style> body { margin: 0; } ul.topnav { list-style-type: none; margin: 0px; padding: 0; overflow: hidden; background-color: #2D5C88; text-align: center; /* For fixed header */ position: fixed; width: 100%; z-index: 1000; } ul.topnav li { display: inline; } ul.topnav li a { display: inline-block; color: #fff; text-align: center; padding: 8px 30px 8px 30px; text-decoration: none; transition: 0.3s; font-size: 13px; font-family: 'Verdana', Geneva, sans-serif; } ul.topnav li a:hover { background-color: #33699b; } ul.topnav li.icon { display: none; } @media screen and (max-width:680px) { ul.topnav li:not(:first-child) { display: none; } ul.topnav li.icon { float: right; display: inline-block; } } @media screen and (max-width:680px) { ul.topnav.responsive { position: relative; } ul.topnav.responsive li.icon { position: absolute; right: 0; top: 0; } ul.topnav.responsive li { float: none; display: inline; } ul.topnav.responsive li a { display: block; text-align: left; } } </style> </head> <body> <ul class="topnav" id="myTopnav"> <li><a class="active" href="google.com">Menu1</a></li> <li><a href="http://www.gogle.com">**Menu2**</a></li> <li><a href="http://www.gogle.com/">Menu3</a></li> <li class="icon"> <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a> </li> </ul> </body> </html>
  17. <html> <head> <script type="text/javascript"> function CheckColors(val){ var element=document.getElementById('color-test'); if(val=='pick a color'||val=='others') element.style.display='block'; else element.style.display='none'; } </script> </head> <body bgcolor='lime'> <div style="margin-left: 400px; margin-top:100px; width: 200px; height: 200px; border: solid blue 1px; display: inline-block; float: left;"> <p style=""> name </p> <p style=""> ball </p> <p style=""> color </p> </div> <div style="margin-left: 50px; margin-top:100px; width: 200px; height: 200px; border: solid blue 1px; display: inline-block; float: left;"> <p><input type ="text" ></p> <p><input type ="text" ></p> <select name="color" onchange='CheckColors(this.value);'> <option>pick a color</option> <option value="red">RED</option> <option value="blue">BLUE</option> <option value="others">others</option> </select> <p><input type="text" name="color" id="color-test" style='display:none;'/></p> </div> </body> </html> I created an example script of a situation I would like to solve. There are 2 divs. The right div receives an extra input field when onChange detects an event. In the left div there should also be a new html element like <p>. How can I program this with javascript?
  18. Hi Everyone. I would like to create a dropdown list with the features described below and have played around with various existing code on the web, however, I thought it would be wise if I found out first if my aim is even possible to start with before exerting any further effort on something that has no chance of working. My knowledge on the subject is very limited; I am familiar with basic HTML and am able to modify/combine some code from existing examples/demos. I am posting in the JavaScript section of the forums as I presume that JavaScript will be necessary. The features I have described below are all that I require; I don't need a whole bunch of 'options' to change things around. I have composed a picture (attached) to help show what I wish to achieve and have provided some explanatory notes below. SECOND BOX: List of all items available in alphabetical order. List items visible upon loading. Vertical scroll bar, as there will be hundreds of items in the list. Each list item can be quite long so box should be wide enough, however, horizontal scroll bar if necessary; no text wrapping, only one item per line. FIRST BOX: Field to type search terms into. No minimum number of characters. As soon as a single letter is typed in the box, all items that 'contain' (not only start with) that letter are revealed in the second box. Pressing backspace to delete a letter increases the list in the second box again. Letters typed are emboldened in the second box; no highlighting, underlining or other emphasis. AREA UNDER SECOND BOX: Single-clicking an item in the second box removes that item from the second box and displays a block of four or three lines of text relating to that item underneath the second box. Clicking on another item in the second box removes it from the second box and displays its corresponding block of text underneath the first block of text, i.e. in the order it was selected and NOT in the order that it originally appeared in the second box. Single-clicking a block of text removes it from the area under the second box and displays its corresponding item in the second box again in its original (alphabetical) position. I think I would prefer the blocks of text to be in a free area under the second box and not boxed in, however, I am not 100% sure of this and would consider a third box. ADDITIONAL: Must work in IE8 and IE9 and compatibility with other versions/browsers would be a bonus. Must allow being maintained in the long term. Speed is very important and whatever method/language/code is used needs to load as fast as possible with its features/functions responding as quickly as possible. Note that the picture shows everything just for illustrative purposes. Of course, in an actual working example, in this instance, if 'Fruits' and 'Nuts' were displayed in the second box, the area under the second box would be blank and if the area under the second box displayed the two blocks of text, the second box would be blank. So, my questions are: Is the above possible? If yes, would anyone be kind enough to point me in the right direction, i.e. advise me on which language/type of code would be most suitable for this task. Any links to similar examples/demos would be very much appreciated! Most avenues I've come across seem to lead to JQuery! Is my task not possible without dependencies on JQuery or other/external scripts? Am I correct to assume that if I wanted everything to be hard-coded, I would require a LOT of knowledge? Any advice would be appreciated. Thanks.
  19. Hi, I am having some problem while creating a mega dropdown menu. I want the mega-dropdown-content to be divided to 4 column and 3column will be for the menu and rest 1 column will be for an image. But this is not the expected result. Here is the code. Please tell how can I fix it? Thank you. <!DOCTYPE html> <html> <head> <link rel= "stylesheet" href= "mega%20menu%20copy%20copy.css"/> <link rel= "stylesheet" href= "font-awesome-4.7.0/css/font-awesome.min.css"/> <style> .menu-container, .mega-menu, .nav, .nav li, .nav a, .nav div{ margin: 0; padding: 0; border: none; outline:none; } .nav { position: relative; } .nav a { text-decoration: none; } .nav li { list-style: none; } a { color: white; } .menu-container { position: relative; width: 100%; } .mega-menu { position: absolute; width: 48%; left: 26%; height: 40px; background-color: red; } .nav > li { display: inline-block; height: 40px; font-size: 20px; font-weight: bold; } .nav > li > a { display: block; padding: 10px 10px; color: white; text-align: left; vertical-align: center; margin-bottom: 10px; } .mega-menu-content, .dropdown { padding-top: 60px; position: absolute;; width: 100%; display: none; background-color: white; color: black; font-size: 16px; border: 2px solid lightgrey; } .mega-menu-content > ul > li:first-child,.dropdown > ul >li:first-child { padding-top: 10px; } .mega-menu-content > ul> li, .dropdown > ul > li { display: block; min-width: 120px; min-height: 40px; margin: 0; padding: 0; } .mega-menu-content > ul > li > a, .dropdown > ul > li > a { color: red; font-size: 16px; min-width: 120px; padding: 8px 10px; border: 1px solid lightgrey; } .mega-menu-content { column-count: 3; column-width: 33%; column-gap: 0; } .mega-menu-content > ul > li > a:hover, .dropdown > ul > li > a:hover { background-color: lightgrey; } .nav > li:hover .mega-menu-content, .nav > li:hover .dropdown{ display: block; } </style> </head> <body> <div class= "menu-container"> <div class= "mega-menu"> <ul class= "nav"> <li><a href= "#">Home</a></li> <li><a href= "#">Clothing <i class="fa fa-chevron-circle-down" aria-hidden="true"></i></a> <div class= "mega-menu-content"> <ul>Men<hr/> <li><a href= "#">T-shirts</a></li> <li><a href= "#">Shirts</a></li> <li><a href= "#">Pants</a></li> <li><a href= "#">Shoes</a></li> <li><a href= "#">Sunglasses</a></li> <li><a href= "#">Caps</a></li> <li><a href= "#">Jewelry</a></li> <li><a href= "#">Others</a></li> </ul> <ul>Women<hr/> <li><a href= "#">Jewelry</a></li> <li><a href= "#">Coats & Jackets</a></li> <li><a href= "#">Tops & Blouses</a></li> <li><a href= "#">Intimate & Sleep</a></li> <li><a href= "#">Jeans</a></li> <li><a href= "#">Pants</a></li> <li><a href= "#">Skirts</a></li> <li><a href= "#">Sweaters</a></li> </ul> <ul>Others<hr/> <li><a href= "#">Boys</a></li> <li><a href= "#">Girls</a></li> <li><a href= "#">Baby</a></li> <li><a href= "#">Luggage</a></li> </ul> <ul>From Popular Sites<hr/> <li><a href= "#">Amazon</a></li> <li><a href= "#">Ebay</a></li> <li><a href= "#">Etsy</a></li> <li><a href= "#">Shoppify</a></li> </ul> <img src= "#" height= "100px" width= "100px" style= "float: right;"/> </div> </li> <li><a href= "#">Products <i class="fa fa-chevron-circle-down" aria-hidden="true"></i></a> <div class= "mega-menu-content"> <img src= "#" height= "100%" width= "25%" style= "float: left;"/> <hr/> <ul>Electronics & Computers<hr/> <li><a href= "#">TV & Video</a></li> <li><a href= "#">Cellphone & Camera</a></li> <li><a href= "#">Head Phones</a></li> <li><a href= "#">Video Games</a></li> <li><a href= "#">Computers & Tablets</a></li> <li><a href= "#">Monitors</a></li> <li><a href= "#">Schools & Office Supplies</a></li> <li><a href= "#">Trade In Your Electronics</a></li> <hr/></ul> <ul>Health & Beauty<hr/> <li><a href= "#">All Beauty</a></li> <li><a href= "#">Luxury Beauty</a></li> <li><a href= "#">Specialty Diets</a></li> <li><a href= "#">Health,Household & Baby care</a></li> <li><a href= "#">Coupons</a></li> <hr/></ul> <ul>Sports & Outdoors<hr/> <li><a href= "#">Athletic Clothing</a></li> <li><a href= "#">Exercise & Fitness</a></li> <li><a href= "#">Hunting & Fishing</a></li> <li><a href= "#">Team Sports</a></li> <li><a href= "#">Cycling</a></li> <li><a href= "#">Water Sports</a></li> <li><a href= "#">Winter Sports</a></li> <li><a href= "#">All Sports</a></li> </ul> </div> </li> <li><a href= "#">Gifts <i class="fa fa-chevron-circle-down" aria-hidden="true"></i></a> <div class="dropdown"> <ul> <li><a href= "#">Games</a></li> <li><a href= "#">Books</a></li> <li><a href= "#">Show Piece</a></li> <li><a href= "#">Kids Birthday</a></li> </ul> </div> </li> <li><a href= "#">Arts & Crafts</a></li> <li><a href= "#">Services</a></li> </ul> </div> </div> </body> </html>
  20. Hi there, I just recently started using w3.css and was looking for some code template for a navigation bar, that is responsive. Here on your website there is just one useful suggestion for a collapsing navigation bar (near the end). Sadly this didn't help me with a navigation bar, which has a dropdown element, since these links won't be displayed on small devices (especially since hovering is not supported on most respective devices). So I made a few alterations based on the try it code (original code here) to make it work. I wanted to post my modifications here so, if you think they are useful, they might be implemented as another code snippet for orientation on the w3.css navigaton page. Hope you enjoy, if not so be it my code: <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <body> <ul class="w3-navbar w3-large w3-black w3-hide-small"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li class="w3-dropdown-hover"><a href="#">Dropdown Hover</a> <div class="w3-dropdown-content w3-card-4"> <a href="#">Sublink 3a</a> <a href="#">Sublink 3b</a> <a href="#">Sublink 3c</a> </div> </li> </ul> <a class="w3-center w3-hide-medium w3-hide-large" href="#" onclick="myFunction()"> <div class="w3-black" style="padding: 8px 16px"> ☰ </div> </a> <div id="demo" class="w3-hide w3-hide-large w3-hide-medium"> <ul class="w3-navbar w3-left-align w3-border-top w3-large w3-black"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Dropdown Hover</a> <ul class="w3-navbar w3-left-align" style="padding-left: 15px;"> <li><a href="#">Sublink 3a</a></li> <li><a href="#">Sublink 3b</a></li> <li><a href="#">Sublink 3c</a></li> </ul> </li> </ul> </div> <div class="w3-container"> <p>In the example below, the navigation bar is replaced with a button (☰) in the center when shown on tablets and mobile devices. When the button is clicked, the navigation bar will be displayed stacked. Dropdown Menus will be displayed, since mobile devices don't support hovering.</p> <p>Resize the screen to see the effect.</p> </div> <script> function myFunction() { var x = document.getElementById("demo"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } </script> </body> </html> Peace and love
  21. Hello, Having some issues with this Given http://codepen.io/caim/pen/pggZOx I'm trying to replace the first column from input to select dropdown but having trouble figuring out how to read the data for each cell. It was working fine with an input and normal td but now the select entered the picture and it's skipping one column. The day drop-downs are for newly added rows currently. This is how I'm trying to read the data, maybe I'm missing something essential here $BTN.click(function () { var $rows = $TABLE.find('tr:not(:hidden)'); var $tds = $TABLE.find('td:not(:hidden)'); var headers = []; var data = []; // Get the headers (add special header logic here) $($rows.shift()).find('th:not(:empty)').each(function () { headers.push($(this).text().toLowerCase()); }); // Turn all existing rows into a loopable array $rows.each(function () { var $td = $(this).find('td'); var $td2 = $td.find('input'); var $td3 = $td.find('select'); var h2 = {}; // Use the headers from earlier to name our hash keys headers.forEach(function (header, i) { // h2[header] = $td.eq(i).text(); //the dropdown value -> //console.log($td3.eq(i).val()); h2[header] = $td3.eq(i).val(); if ($td3.eq(i).val() === undefined){ // it's not dropdown ? read it normaly.. console.log(i); h2[header] = ($td.eq(i).text() == '') ? $td2.eq(i).val() : $td.eq(i).text(); } //console.log(h2[header]); }); data.push(h2); }); // Output the result $EXPORT.text(JSON.stringify(data)); });
  22. This is an example working with optgroup. <form action="#" ><SELECT name="rubsel" class="btn"><?php$tmp=0;while($row = $result->fetch_assoc() ) {$reeks = implode(" " , $row); ?> <optgroup ="btn" label = "<?php echo $reeks; ?>" ><?php echo $reeks ;$tmp ; ?><option class="btn" name="rub_sub1" value="<?php echo $reeks; ?>">1 t/m 10 </option><option class="btn" name="rub_sub2" value="<?php echo $reeks; ?>">11 t/m 20 </option><option class="btn" name="rub_sub3" value="<?php echo $reeks; ?>">21 t/m 30 </option><option class="btn" name="rub_sub4" value="<?php echo $reeks; ?>">31 t/m 40 </option></optgroup><?php $tmp++;}?></SELECT><br><br><input type="submit" class ="btn" name ="tab_wrd" value="Kies Rubriek" /> <br><br></form> What i would like to know is how the input is being processed when using php. Especially how to find exactly the value of <option> The Select name input is found and echoed but what if I put a name attribute in the option element? I cant get an output of that. Or is there another way to get the option value with other attributes for instance?
  23. So my goal is now to have a table list read from the database. The content of the table is supposed to be put in an <SELECT> <OPTION VALUE> form for a dropdown menu having the user select only 1 value. $conn = new mysqli($servername, $username, $password, $dbname); if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); } $sql = "SHOW TABLES"; if (!$result = $conn->query($sql)){ die('There was an error running the query[' .$conn->error. ']'); } foreach($row = $result->fetch_assoc()){ echo "<center>"; $reeks = implode(" " , $row); // echo $reeks; // echo "<br>"; echo "</center>"; ?> <center> <form name = "inpform" method="post" action="Add-succ7.php"> <SELECT > <option value = "<?php echo $reeks; ?>" > </option> </SELECT> </center> <?php } mysqli_close($conn); ?> Do I have to do this with foreach or while? (or something else?) In the checkbox version I use while but when doing that I get a list of 8 checkboxes without any value. I see the dropdown menu is placed in the loop of while so another condition (like foreach) seems to be the first thing to think about. But what kinda solutions would you have for the script above?
  24. Hi, I'm quite new to bootstrap and not an expert HTML/CSS coder either, but I'm hoping to learn more. The first problem I've encountered is the dropdown menu. I'm basically not able to open it up, even if I'm using the example provided on w3schools. This is the code I'm using, can anyone see why it's not opening up? <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Home <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">CV</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div>
  25. psychoboy

    Dropdown menu

    Hey , I have a problem with the positioning of my dropdown menu .. All is working fine but when I hover with my mouse the dropdown doesn't paste the initial menu . If someone could help me <html> <head> <style> #nav ul{ display: table; margin: 100px auto; width:700px; padding: 0px; font-size:25px; font-weight:bold; background: Gray; background: -webkit-linear-gradient(Gray, DarkGray); background: -moz-linear-gradient(Gray, DarkGray); background: -ms-linear-gradient(Gray, DarkGray); background: -o-linear-gradient(Gray, DarkGray); background: linear-gradient(Gray, DarkGray); border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15); } #nav ul li{ display:table-cell; } #nav ul li a{ display: block; text-align: center; color: rgba(0, 0, 0, .7); padding: 8px 8px 17px 8px; text-shadow: 0 1px 0 rgba(255, 255, 255, .4); box-shadow: 0 1px 0 rgb #A9A9A9 inset, 0 -1px 0 hsl(210, 100%, 32%) inset, 0 -2px 0 hsl(210, 100%, 38%) inset, 0 -3px 0 hsl(210, 100%, 44%) inset, 0 -4px 0 hsl(210, 100%, 50%) inset, 0 -5px 0 hsl(210, 100%, 60%) inset; } #nav .divider-vertical{ border-right: 1px solid grey; } #nav .elem { display:none; position:absolute; width:inherit; } #nav .elem li{ background:#262626; display:block; text-align:center; } #nav .elem a{ color: white; font-size:25; text-shadow: 0 1px 0 rgba(255, 255, 255, .4); } #nav li:hover > .elem{ display:block; } </style> </head> <body> <div id="nav"> <ul> <li><a href="#">a</a></li> <li class="divider-vertical"></li> <li><a href="#">b</a></li> <li class="divider-vertical"></li> <li><a href="#">c</a></li> <li class="divider-vertical"></li> <li><a href="#">d</a> <ul class="elem"> <li><a href="#">d1</a></li> <li><a href="#">d2</a></li> <li><a href="#">d3</a></li> </ul> </li> </ul> </div> </body></html>
  • Create New...