Jump to content

Kroeg1

Members
  • Posts

    2
  • Joined

  • Last visited

Kroeg1's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. Thanks for the quick reply, dsonesuk. I'll have a look into .matches() as suggested.
  2. Hello there Can anyone explain where I'm going wrong: My simple javascript code works perfectly in FireFox but not in Chrome or Explorer. It's a hamburger menu for a responsive website. The hamburger appears/disappears correctly according to viewport dimensions in all three browsers, but the pulldown only functions in FireFox. The general idea is to keep it simple without relying on external libraries or external images. The hamburger icon is just an image called menu.png in a \images subfolder. Thanks for any input! <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <link href="stylesheet.css" rel="stylesheet" type="text/css"/> </head> <body> <div id="fullWidth"> <div id="mainheader"> <div id="Dropdown" class="dropdown"> <button onclick="myFunction()" class="dropbtn"><img src="images/menu.png" id="Menu" width="56" height="45" alt="Menu"/></button> <div id="myDropdown" class="dropdown-content"> <a href="index.html" title="Home">Home</a> <a href="about.html" title="About">About</a> <a href="contact.php" title="Contact">Contact</a> </div> </div> <div id="mainlogo"> </div> </div> </div> <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(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } </script> </body> </html> body{margin:0 2vw 0 0;padding:0;position:relative;background:#fff url("images/ge01.jpg") repeat-y;background-size:60.25%;z-index:1;font-family:Verdana, Arial, sans-serif;color:#6f7a9f} div.fullWidth{width:100%}form{margin:0;padding:0}h1,h2,h3,h4{color:#6f7a9f}a{border-bottom:0;text-decoration:none;color:#4369d1}a:hover{border:0}img{border-style:none}.boxed .boxed{margin:0;padding:0.25vw 0.5vw 0.25vw 0.5vw}.boxed .content{padding-bottom:0.25vw;background:url(images/ge03.jpg) no-repeat left bottom;background-size:90% auto}.boxed ul{margin:0;padding:0;list-style:none}.boxed li{padding:0.25vw 0.5vw 0.25vw 0.5vw;background:url(images/ge04.jpg) no-repeat;background-size:90% auto}.boxed a{border:0}.column{float:left;width:20%;text-align:center}.row::after{content:"";clear:both;display:table}#mainlogo{width:20%;height:auto;margin:0;padding:0}#mainheader h1{margin:0;padding:0}#mainheader h2{margin:-0.75em 0 0 0.5vw;padding:0}#mainheader h3{margin:-0.75em 0 0 0.5vw;padding:0}#mainheader h4{margin:-0.75em 0 0 0.5vw;padding:0}#mainheader a{border:0;color:#6f7a9f}#maincontent{float:left;position:absolute;left:23%;top:0;margin:0.25vw 0.5vw 0 0;}#maincontent li{margin-bottom:0.5vw}.content{margin-bottom:0.25vw;padding-bottom:0.25vw;border-bottom:0.01vw dotted #6f7a9f}#panel{width:20%;height:auto;background:transparent url("images/babbage.png") no-repeat;position:relative;top:0;left:0;z-index:2;background-size:100% auto}#mainfooter{clear:both}#mainfooter p{padding-top:0.25vw;padding-bottom:0.25vw;text-align:left}#mainfooter a{border-bottom:0;color:#6f7a9f} /* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 600px) {#myDropdown {z-index:4} .dropbtn { background-color: white; color: white; padding: 0vw; font-size: 2vw; border: none; cursor: pointer; } .dropbtn:hover, .dropbtn:focus { background-color: #6f7a9f; } .dropdown {float:right;margin: 2vw 20vw 0vw 0vw; position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 10vw; overflow: auto; box-shadow: 0vw 1vw 2vw 0vw rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 2vw 3vw; text-decoration: none; display: block; } .dropdown a:hover {background-color: #ddd;} .show {display: block;} .sidecontent{ display: none; } #welcome{ display: none;} #customers{ display: none;} #maincontent{/*float:left;*/position:absolute;left:2%;top:10vw;margin:0.25vw 0.5vw 0 0;z-index:3} h1, h2{font-size:10vw} h3{font-size:8vw} h4{font-size:6vw} .content{font-size:6vw} .design{font-size:2vw} strong{font-size:6vw} .boxed{font-size:3vw} .heading{font-size:3vw} .li{font-size:2.8vw} .caption{display:none;/*font-size:1.5vw;clear:left*/}} /* Small devices (portrait tablets and large phones, 600px and up) */ @media only screen and (min-width: 600px) {#Dropdown{ display: none;} #customers{ display: none;} h1, h2{font-size:5vw} h3{font-size:4.5vw} h4{font-size:4.5vw} .content{font-size:3vw} .design{font-size:2vw} strong{font-size:3vw} .boxed{font-size:3vw} .heading{font-size:3vw} .li{font-size:2.8vw} .caption{font-size:1.2vw;clear:left}} /* Medium devices (landscape tablets, 768px and up) */ @media only screen and (min-width: 768px) {#Dropdown{ display: none;} #customers{ display: block;} h1, h2{font-size:4vw} h3{font-size:3vw} h4{font-size:3vw} .content{font-size:2.2vw} .design{font-size:1.6vw} strong{font-size:2.2vw} .boxed{font-size:2vw} .heading{font-size:2vw} .li{font-size:1.8vw} .caption{font-size:1vw;clear:left}} /* Large devices (laptops/desktops, 992px and up) */ @media only screen and (min-width: 992px) {#Dropdown{ display: none;} h1, h2{font-size:2vw} h3{font-size:1.8vw} h4{font-size:1.6vw} .content{font-size:1.6vw} .design{font-size:1vw} strong{font-size:1.6vw} .boxed{font-size:1.6vw} .heading{font-size:1.6vw} .li{font-size:1.4vw} .caption{font-size:1.5vw;clear:left}} /* Extra large devices (large laptops and desktops, 1200px and up) */ @media only screen and (min-width: 1200px) {#Dropdown{ display: none;} h1, h2{font-size:1.8vw} h3{font-size:1.4vw} h4{font-size:1.4vw} .content{font-size:1.6vw} .design{font-size:1vw} strong{font-size:1.6vw} .boxed{font-size:1.2vw} .heading{font-size:1.2vw} .li{font-size:1vw} .caption{font-size:1vw;clear:left}}
×
×
  • Create New...