ahile91 Posted April 6, 2017 Share Posted April 6, 2017 <!DOCTYPE html> <html> <head> <style> .container { overflow: hidden; background-color: #333; font-family: Arial; } .container a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { cursor: pointer; font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; } .container a:hover, .dropdown:hover .dropbtn { background-color: red; } .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; } .show { display: block; } </style> </head> <body> <div class="container"> <a href="#home">Home</a> <a href="#news">News</a> <div class="dropdown"> <button class="dropbtn" onclick="myFunction()">Dropdown</button> <div class="dropdown-content" id="myDropdown"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </div> <h3>Dropdown Menu inside a Navigation Bar</h3> <p>Click on the "Dropdown" link to see the dropdown menu.</p> <script> /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } // Close the dropdown if the user clicks outside of it window.onclick = function(e) { if (!e.target.matches('.dropbtn')) { var myDropdown = document.getElementById("myDropdown"); if (myDropdown.classList.contains('show')) { myDropdown.classList.remove('show'); } } } </script> </body> </html> i just tryit by myself to change from "myDropdown" to "myDropdown_2" but it wasan't work...i just want to add this to my categories so i want to multiplay this content like 2-3 times how do i make this ? please help Link to comment Share on other sites More sharing options...
davej Posted April 6, 2017 Share Posted April 6, 2017 Try experimenting with this and you will see the problem... window.onclick = function(e) { if (!e.target.matches('.dropbtn')) { alert('try to remove show from myDropdown'); var myDropdown = document.getElementById("myDropdown"); if (myDropdown.classList.contains('show')) { myDropdown.classList.remove('show'); } }else{ alert('ignore'); } } Link to comment Share on other sites More sharing options...
ahile91 Posted April 7, 2017 Author Share Posted April 7, 2017 i tryed before posting..is work for one only<script> /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction() { document.getElementById("myDropdown_2").classList.toggle("show"); } // Close the dropdown if the user clicks outside of it window.onclick = function(e) { if (!e.target.matches('.dropbtn_2')) { var myDropdown_2 = document.getElementById("myDropdown_2"); if (myDropdown_2.classList.contains('show')) { myDropdown_2.classList.remove('show'); } } } </script> Link to comment Share on other sites More sharing options...
ahile91 Posted April 7, 2017 Author Share Posted April 7, 2017 Just now, ahile91 said: i tryed before posting..is work for one only<script> <script> /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction() { document.getElementById("myDropdown_2").classList.toggle("show"); } // Close the dropdown if the user clicks outside of it window.onclick = function(e) { if (!e.target.matches('.dropbtn_2')) { var myDropdown_2 = document.getElementById("myDropdown_2"); if (myDropdown_2.classList.contains('show')) { myDropdown_2.classList.remove('show'); } } } </script> Link to comment Share on other sites More sharing options...
justsomeguy Posted April 7, 2017 Share Posted April 7, 2017 You should show all of your code, your attempt to make it work. Are you trying to use the name myFunction for more than function, for example? Are you overwriting window.onclick? I can't tell from what you're showing. Show your complete attempt. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 7, 2017 Share Posted April 7, 2017 The problem is you are using getElementById(), which is singular, when you should target specific classnames which are multiple, by targeting classnames you use 'this' to transverse down to specfic element that you can toggle class 'show' and 'hide' with. Link to comment Share on other sites More sharing options...
ahile91 Posted April 7, 2017 Author Share Posted April 7, 2017 (edited) ok i'm confuse now idk how to make it...so this is the code..let me explain better. first i want to make "rental" and "cars" to dropdown and the dropdown content (submenu) style it to put it in a box container. all this in the header than under to put some slideshow and 6/8 col photo gallery. i'm using 16grid from 960 <!DOCTYPE html> <html lang="en-US"> <head> <title>title</title> <meta name="keywords" content="bla bla"> <meta name="description" content="about bla bla"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source Serif Pro"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <![endif]--> </head> <!-- body --> <body> <div class="container_16"> <style> body,h1,h2,h3,h4,h5,h6 {font-family: "Source Serif Pro", sans-serif} </style> <!-- header --> <header> <div class="grid_5 alpha brand">webname</div> <div class="grid_11 omega"> <!-- navigation --> <nav> <ul> <li><a href="#">Contact</a> |</li> <li><a href="#">Home</a> |</li> <li><a href="#">SingUp</a></li> </ul> </nav> </div> <div class="grid_5"> <div class="dropdown_1"> <button onclick="myFunction()" class="dropbtn_1">Rental</button> <div id="myDropdown_1" class="dropdown-content_1"> <a href="#">House</a> <a href="#">Studio</a> <a href="#">Flat</a> </div> </div> </div> <div class="grid_5"> <div class="dropdown_2"> <button onclick="myFunction()" class="dropbtn_2">Cars</button> <div id="myDropdown_2" class="dropdown-content_2"> <a href="#">Electric</a> <a href="#">Petrol</a> <a href="#">Diesel</a> </div> </div> </div> </header> <!-- footer --> <footer> <p>© 2017 All rights reserved.</p> </footer> <!-- navigation java script --> <script> /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction() { document.getElementById("myDropdown_1").classList.toggle("show"); } // Close the dropdown if the user clicks outside of it window.onclick = function(e) { if (!e.target.matches('.dropbtn_1')) { var myDropdown_1 = document.getElementById("myDropdown_1"); if (myDropdown_1.classList.contains('show')) { myDropdown_1.classList.remove('show'); } } } </script> <script> /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction() { document.getElementById("myDropdown_2").classList.toggle("show"); } // Close the dropdown if the user clicks outside of it window.onclick = function(e) { if (!e.target.matches('.dropbtn_2')) { var myDropdown_2 = document.getElementById("myDropdown_2"); if (myDropdown_2.classList.contains('show')) { myDropdown_2.classList.remove('show'); } } } </script> </body> </html> Edited April 7, 2017 by ahile91 Link to comment Share on other sites More sharing options...
dsonesuk Posted April 7, 2017 Share Posted April 7, 2017 Lose the id ref on on div its obsolete for this, all you need is for example is <div class="dropdown"> <button class="dropbtn" onclick="myFunction(this)">Dropdown</button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <div class="dropdown"> <button class="dropbtn" onclick="myFunction(this)">Dropdown #2</button> <div class="dropdown-content"> <a href="#">Link 2#1</a> <a href="#">Link 2#2</a> <a href="#">Link 2#3</a> </div> </div> When you click the button it pass with 'this parameter to identify which element the event came from. Then you tell it to move to next sibling element which will be the div cont element with this function myFunction(elem) { elem.nextElementSibling.classList.toggle("show"); } And toggle 'show' class. Now for window onclick event, you loop through all 'dropdown-content' and if classList includes 'show' you remove it window.onclick = function(e) { if (!e.target.matches('.dropbtn')) { var myDropdown = document.getElementsByClassName("dropdown-content"); for (var i = 0; i < myDropdown.length; i++) { if (myDropdown[i].classList.contains('show')) { myDropdown[i].classList.remove('show'); } } } }; Link to comment Share on other sites More sharing options...
ahile91 Posted April 7, 2017 Author Share Posted April 7, 2017 i don't get it...why is not opening now? Link to comment Share on other sites More sharing options...
dsonesuk Posted April 7, 2017 Share Posted April 7, 2017 I wouldn't know unless I see actual code used. sorry not a mind reader. Link to comment Share on other sites More sharing options...
ahile91 Posted April 7, 2017 Author Share Posted April 7, 2017 <!DOCTYPE html> <html lang="en-US"> <head> <title>title</title> <meta name="keywords" content="bla bla"> <meta name="description" content="about bla bla"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source Serif Pro"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <![endif]--> </head> <!-- body --> <body> <div class="container_16"> <style> body,h1,h2,h3,h4,h5,h6 {font-family: "Source Serif Pro", sans-serif} </style> <!-- header --> <header> <div class="grid_5 alpha brand">webname</div> <div class="grid_11 omega"> <!-- navigation --> <nav> <ul> <li><a href="#">Contact</a> |</li> <li><a href="#">Home</a> |</li> <li><a href="#">SingUp</a></li> </ul> </nav> </div> <div class="grid_5"> <div class="dropdown"> <button onclick="myFunction(elem)" class="dropbtn">Rental</button> <div class="dropdown-content"> <a href="#">House</a> <a href="#">Studio</a> <a href="#">Flat</a> </div> </div> </div> <div class="grid_5"> <div class="dropdown_2"> <button onclick="myFunction()" class="dropbtn_2">Cars</button> <div class="dropdown-content_2"> <a href="#">Electric</a> <a href="#">Petrol</a> <a href="#">Diesel</a> </div> </div> </div> </header> <!-- footer --> <footer> <p>© 2017 All rights reserved.</p> </footer> <!-- navigation java script --> <script> /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction(elem) { elem.nextElementSibling.classList.toggle("show"); } // Close the dropdown if the user clicks outside of it window.onclick = function(e) { if (!e.target.matches('.dropbtn')) { var myDropdown = document.getElementsByClassName("dropdown-content"); for (var i = 0; i < myDropdown.length; i++) { if (myDropdown[i].classList.contains('show')) { myDropdown[i].classList.remove('show'); } } } }; </script> <script> /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction() { document.getElementById("myDropdown_2").classList.toggle("show"); } // Close the dropdown if the user clicks outside of it window.onclick = function(e) { if (!e.target.matches('.dropbtn_2')) { var myDropdown_2 = document.getElementById("myDropdown_2"); if (myDropdown_2.classList.contains('show')) { myDropdown_2.classList.remove('show'); } } } </script> </body> </html> Link to comment Share on other sites More sharing options...
dsonesuk Posted April 7, 2017 Share Posted April 7, 2017 (edited) TUT, tut ALL <button onclick="myFunction(elem)" class="dropbtn">....</button> should be (very important to have exact class name shown and onclick="myFunction(this)") <button onclick="myFunction(this)" class="dropbtn">....</button> ALL opening divs following above should be <div class="dropdown-content"> Finally! get rid of this (at the bottom) <script> /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction() { document.getElementById("myDropdown_2").classList.toggle("show"); } // Close the dropdown if the user clicks outside of it window.onclick = function(e) { if (!e.target.matches('.dropbtn_2')) { var myDropdown_2 = document.getElementById("myDropdown_2"); if (myDropdown_2.classList.contains('show')) { myDropdown_2.classList.remove('show'); } } } </script> Edited April 7, 2017 by dsonesuk Link to comment Share on other sites More sharing options...
ahile91 Posted April 7, 2017 Author Share Posted April 7, 2017 yeah ! not is working for bouth but why when i open bouth is stay opens bout of them why is not closeing one ? btw your the best ! thanks so much ! and how is posible cuz in my head is not matching "this" with "elem" Quote <button onclick="myFunction(this)" class="dropbtn">....</button> function myFunction(elem) { elem.nextElementSibling.classList.toggle("show"); } and this "e" is same "elem" ? just shortcut ? window.onclick = function(e) { if (!e.target.matches('.dropbtn')) { var myDropdown = document.getElementsByClassName("dropdown-content"); for (var i = 0; i < myDropdown.length; i++) { if (myDropdown[i].classList.contains('show')) { myDropdown[i].classList.remove('show'); } } } }; Link to comment Share on other sites More sharing options...
dsonesuk Posted April 7, 2017 Share Posted April 7, 2017 'this' is JavaScript ref to element that triggered event, 'elem' can be called whatever you want within reason NOT 'this', it still refers to element that triggered event. 'e' is shortcut and represents an event that was triggered, totally different from 'this'. To have one open at a time means you have to loop through all but current and close, similar script of for loop in window.onclick event. Link to comment Share on other sites More sharing options...
ahile91 Posted April 7, 2017 Author Share Posted April 7, 2017 can you writhe it for me please? after i get good knowlage of html and css i'll start studyng java and php..you want to hear something funny ? i not even finish the high school but i'm trying to build my own website and start a busines with it. i think i pasion can beat some mistake that i make them when i was younger Link to comment Share on other sites More sharing options...
justsomeguy Posted April 7, 2017 Share Posted April 7, 2017 Since it wasn't clearly stated, you just copied and pasted the Javascript code twice. You used the same function name, and you overwrote window.onclick. The second time you define myFunction, it removes the first one (or it causes a fatal error, I'm not sure which in this case). And the second time you assign a function to window.onclick, you remove the first function that you assigned to it. You need to name things differently, names in Javascript are unique. You can't name 10 things the same thing and expect to be able to refer to all of them at the same time. And if you need multiple things to happen when an event happens, like window.onclick, then you need to combine that instead of replacing one with the other. This is one way to do that: old_onclick = window.onclick; // save the old function window.onclick = function() { old_onclick(); // run the old handler // then do new stuff } The more modern way is to use window.addEventListener to add a new event handler instead of changing things like window.onclick. https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener Link to comment Share on other sites More sharing options...
ahile91 Posted April 7, 2017 Author Share Posted April 7, 2017 (edited) now i just write that and u say now is an easy way ? hehhe is very dificult this java script i'm going to sleep now is 2:30am so tomorrow i'll see what i do... Edited April 7, 2017 by ahile91 Link to comment Share on other sites More sharing options...
dsonesuk Posted April 7, 2017 Share Posted April 7, 2017 function myFunction(elem) { elem.nextElementSibling.classList.toggle("show"); var myDropdown = document.getElementsByClassName("dropdown-content"); for (var i = 0; i < myDropdown.length; i++) { if (myDropdown[i].classList.contains('show')) { if (elem.nextElementSibling !== myDropdown[i]) { myDropdown[i].classList.remove('show'); } } } } BUT! you do realise, the window onclick example (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown) does not work in MS Edge, its so good of w3schools to give you an example that does not work in MS Edge and not tell you. 1 Link to comment Share on other sites More sharing options...
dsonesuk Posted April 8, 2017 Share Posted April 8, 2017 Here's the fix for MS kak, you would have thought they would have known better by now. // Close the dropdown if the user clicks outside of it window.onclick = function(e) { /*because of MS god complex thou shall do it how I WANT, and not how every else wants, which I thought they had finally begun to see the light, but apparently not! we have to allow for MS kak way of doing things*/ matches = e.target.matches ? e.target.matches('.dropbtn') : e.target.msMatchesSelector('.dropbtn'); if (!matches) { var myDropdown = document.getElementsByClassName("dropdown-content"); for (var i = 0; i < myDropdown.length; i++) { if (myDropdown[i].classList.contains('show')) { myDropdown[i].classList.remove('show'); } } } }; 1 Link to comment Share on other sites More sharing options...
ahile91 Posted April 8, 2017 Author Share Posted April 8, 2017 sorry i was out of town now i came. i see here ur script but what to keep from all of them ? Link to comment Share on other sites More sharing options...
dsonesuk Posted April 8, 2017 Share Posted April 8, 2017 Last two posts from me. 1 Link to comment Share on other sites More sharing options...
ahile91 Posted April 15, 2017 Author Share Posted April 15, 2017 it's work perfeclty thanks man take care of you Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now