I have 2 pop-up menus that basicaly open and close when clicked on. I wrote a little code that close any showing menu when the user click anywhere but 1 of the 2 menus. The code work perfecly fine in Chrome and Firefox but in IE, the menus only close when clicked on. I'm pretty new to Javascript so i am pretty sure that there is a better way to do it .
Here is my code:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="img/">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- Main Header -->
<header id="header">
<nav class="container">
<img onclick="navFunction(this)" id="navMenuImg" src="img/menu.png">
<img onclick="settingFunction(this)" id="navSettingImg" src="img/setting.png">
<div id="navMenuSetting">
<ul id="navMenu" class="navMenu">
<li><a class="navMenuLink" href="#">Videos</a></li>
<li><a class="navMenuLink" href="#">Pictures</a></li>
<li><a class="navMenuLink" href="#">Profiles</a></li>
</ul>
<ul id="navSetting" class="navSetting">
<li><a class="navMenuLink" href="">Account</a></li>
<li><a class="navMenuLink" href="deconnection.php">Log out</a></li>
</ul>
</div>
</nav>
</header>
<!-- Scripts -->
<script type="text/javascript">
function navFunction() {
document.getElementById("navMenu").classList.toggle("navMenuShow");
}
function settingFunction(){
document.getElementById("navSetting").classList.toggle("navMenuShow");
}
document.onclick = function(e) {
if (!e.target.matches('#navMenuImg') && !e.target.matches('#navSettingImg')) {
var navMenu = document.getElementById("navMenu");
var navSetting = document.getElementById("navSetting");
navMenu.classList.remove('navMenuShow');
navSetting.classList.remove('navMenuShow');
}
}
</script>
<!-- CSS -->
<style type="text/css">
#navMenuImg{
width: 55px;
height: 35px;
margin-top: 10px;
cursor: pointer;
}
.navMenu{
z-index: 1;
list-style-type: none;
padding: 0;
margin-top: 10px;
margin-right: 10px;
border-bottom:1px solid #ccc;
display: none;
}
#navSettingImg{
float: right;
width: 30px;
height: 30px;
margin-top: 12px;
margin-right: 12px;
cursor: pointer;
}
.navSetting{
position: relative;
right: 0;
z-index: 1;
list-style-type: none;
padding: 0;
margin-top: 10px;
border-bottom:1px solid #ccc;
display: none;
}
#navMenuSetting{
position: relative;
width: 100%;
background-color: red;
}
.navMenuShow{
display: block;
position: absolute;
float: right;
}
</style>
</body>
Thank you in advance !
The js classList and target.matches is not supported in IE. I have listed the code that you can use instead:
function navFunction() {
document.getElementById("navMenu").className+=" navMenuShow";
}
function settingFunction(){
document.getElementById("navSetting").className+=" navMenuShow";
}
document.onclick = function(event) {
var matchesOne = event.target.matches ? event.target.matches('#navMenuImg') : event.target.msMatchesSelector('#navMenuImg');
var matchesTwo = event.target.matches ? event.target.matches('#navSettingImg') : event.target.msMatchesSelector('#navSettingImg');
if (!matchesOne&&!matchesTwo) {
var navMenu = document.getElementById("navMenu");
var navSetting = document.getElementById("navSetting");
navMenu.className=navMenu.className.replace(/navMenuShow/g,"");
navSetting.className=navSetting.className.replace(/navMenuShow/g,"");
}
}
The code is tested and is working 100% in IE and Chrome.
Related
I just put some JavaScript code for show nav. I mean when I click my navbar icon then show my all nav item. Yeah! perfectly this working, then I need again 2nd time when I click navbar icon then automatic should will remove nav all item by Javascript function remove code. that's is rules. but still i not giving any remove Javascript function code for remove navbar item. But working without remove Javascript function code. So my Question how this remove working Without code.
It(navbar) will only work below 768px in browser display size.
Sorry for double text for publishing my question.
I just put some JavaScript code for show nav. I mean when I click my navbar icon then show my all nav item. Yeah! perfectly this working, then I need again 2nd time when I click navbar icon then automatic should will remove nav all item by Javascript function remove code. that's is rules. but still i not giving any remove Javascript function code for remove navbar item. But working without remove Javascript function code. So my Question how this remove working Without code.
It(navbar) will only work below 768px in browser display size.
// MENU SHOW
const first = document.getElementById('nav-toggle')
const second = document.getElementById('nav-menu')
first.addEventListener('click',()=>{
second.classList.toggle('show')
} )
<!-- begin snippet: js hide: false console: true babel: false -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-Commerce Responsive Website</title>
<link rel="stylesheet" href="./style.css">
<!-- Box icon -->
<link href='https://unpkg.com/boxicons#2.1.1/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<header class="l-header" id="header">
<nav class="nav bd-grid">
<div class="nav__toggle" id="nav-toggle">
<i class="bx bxs-grid"></i>
</div>
Shohel
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">Home</li>
<li class="nav__item">Featured</li>
<li class="nav__item">Women</li>
<li class="nav__item">New</li>
<li class="nav__item">Shop</li>
</ul>
</div>
<div class="nav__shop">
<i class="bx bx-shopping-bag"></i>
</div>
</nav>
</header>
<script src="./script.js"></script>
</body>
</html>
}
html{
scroll-behavior: smooth;
}
body{
margin: var(--header-height) 0 0 0;
font-family: var(--body-font);
font-size: var(--normal-font-size);
font-weight: var(--font-meduim);
color: var(--dark-color);
line-height: 1.6;
}
h1,h2,h3,p,ul{
margin: 0;
}
ul{
padding: 0;
list-style: none;
}
a{
text-decoration: none;
color: var(--dark-color);
}
img{
max-width: 100%;
height: auto;
display: block;
}
/* Class Css */
.section{
padding: 5rem 0 2rem;
}
.section-title{
position: relative;
font-size: var(--big-font-size);
margin-bottom: var(--mb-4);
text-align: center;
letter-spacing: .1rem;
}
.section-title::after{
content: '';
position: absolute;
width: 56px;
height: .18rem;
top: -1rem;
left: 0;
right: 0;
margin: auto;
background-color: var(--dark-color);
}
/* Layout */
.bd-grid{
max-width: 1024px;
display: gird;
grid-template-columns: 100%;
column-gap: 2rem;
width: calc(100%-2rem);
margin-left: var(--mb-2);
margin-right: var(--mb-2);
}
.l-header{
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: var(--z-fixed);
background-color: var(--dark-color-lighten);
}
/* nav */
.nav{
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
}
#media screen and (max-width:768px) {
.nav__menu{
position: fixed;
top: var(--header-height);
left: -100%;
width: 70%;
height: 100vh;
padding: 2rem;
background-color: var(--white-color);
transition: .5s;
}
}
.nav__item{
margin-bottom: var(--mb-4);
}
.nav__logo{
font-weight: var(--font-semi-bold);
}
.nav__toggle, .nav__shop{
font-size: 1.3rem;
cursor: pointer;
}
.show{
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-Commerce Responsive Website</title>
<link rel="stylesheet" href="./style.css">
<!-- Box icon -->
<link href='https://unpkg.com/boxicons#2.1.1/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<header class="l-header" id="header">
<nav class="nav bd-grid">
<div class="nav__toggle" id="nav-toggle">
<i class="bx bxs-grid"></i>
</div>
Shohel
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">Home</li>
<li class="nav__item">Featured</li>
<li class="nav__item">Women</li>
<li class="nav__item">New</li>
<li class="nav__item">Shop</li>
</ul>
</div>
<div class="nav__shop">
<i class="bx bx-shopping-bag"></i>
</div>
</nav>
</header>
<script src="./script.js"></script>
</body>
</html>
I was trying to create an overlay but when I click on the button the overlay don't show up.
In the console log the error 'overlay.js:4 Uncaught TypeError: Cannot read property 'addEventListener' of null' appears. I already tried by myself to solve this problem, I'm just a beginner.. I hope someone can solve the problem for me. Thanks for the effort!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link
href="style.css" media="screen,projection" rel="stylesheet" type="text/css"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
</head>
<body>
<div id="nav" class="overlay">
<button id="afsluiten" href="#" class="close">Afsluiten</button>
<div class="overlay__content">
Home
Profile
Images
About
Product
</div>
</div>
<button id="open" href="#" class=open"">Open Overlay</button>
<script src="overlay.js"></script>
</body>
</html>
CSS
body{
font-family: sans-serif;
}
.overlay{
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 100%;
background: limegreen;
overflow-x: hidden;
z-index: 5;
}
.overlay__content{
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a{
padding: 10px;
color: black;
font-size: 40px;
text-decoration: none;
display: block;
}
.overlay .close{
position: absolute;
top: 20px;
right: 50px;
font-size: 50px;
}
Javascript
var open = document.querySelector('.open');
var close = document.querySelector('.close');
open.addEventListener('click', function (ev) {
ev.preventDefault();
openOverlay();
}, false);
function openOverlay() {
document.querySelector('.nav').style.width = "100%";
}
Your line <button id="open" href="#" class=open"">Open Overlay</button> has a typo on the class name
<button id="open" href="#" class="open">Open Overlay</button>
The DOM hasn't been loaded yet. You need to put in the handler to the load event
I created a responsive Hamburger menu using javascript, which seems to be firing properly, the only problem is that the drop down menu and anchors are completely invisible when I "open" the menu despite being present in the Chrome Inspector (ie when i select a list item/anchor element in the inspector, an area where I should see the item is highlighted, but there's nothing there!)
I thought it could be the image/text in the next container concealing the elements, but I made a fresh .html with only the nav elements present and when I viewed that in the browser, same problem.
#media only screen and (max-width: 660px) {
.icon {
display: inline-block;
color: black;
position: absolute;
right: 2rem;
}
nav {
position: relative;
height: 4rem;
}
.nav-links {
display: none;
position: absolute;
top: 4rem;
left: 0;
background-color: #63B4C9;
width: 100%;
padding: 0.5rem;
box-sizing: border-box;
}
.nav-links li a {
display: block;
padding: 0.5rem;
text-align: center;
}
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Arapey|Homemade+Apple|Fira+Sans" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Starter Files</title>
</head>
<body>
<nav id="theNav" class="nav">
<img src="images/logo.svg" class="logo">
<i class="fa fa-bars"></i>
<ul class="nav-links">
<li>Classes</li>
<li>FAQ</li>
<li>Planting Info</li>
<li>Contact</li>
</ul>
</nav>
<script>
$(".icon").click(function(){
$(".nav-links").slideToggle();
});
</script>
</body>
I am using jQuery to try and find which IDs have a certain class name. The reason this is important to me is I am using toggleClass() from jQuery to show and hide certain divs and when a button is selected I want a viewport to display or hide. I have 2 personal goals: One is to find a way to do this in jquery and the other is to understand how to do this in javascript. I understand the javascript will be much more advanced and I am prepared.
How can I use the resetViewport() to count the amount of "selected" classes?
Is there a better way to do this?
In javascript, how can one do this same thing? Even if you tell me specific methods in js thats ok. I am not asking for exact code. I just want to learn.
Just so there is no question I added the code. Lets start by looking at my personal hosted web page called CodeAmend and here is the code
****html***
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Player</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<p>CodePlayer</p>
<nav>
<ul>
<li id="html-button" class="toggle selected no-highlight">HTML</li>
<li id="css-button" class="toggle selected no-highlight">CSS</li>
<li id="js-button" class="toggle selected no-highlight">JS</li>
<li id="result-button" class="toggle selected no-highlight">Result</li>
</ul>
</nav>
<div id="run-button" class="no-select">Run</div>
</div>
<div id="html-container" class="code-container">
<div class="code-label">HTML</div>
<textarea>Code</textarea>
</div>
<div id="css-container" class="code-container">
<div class="code-label">CSS</div>
<textarea>Code</textarea>
</div>
<div id="js-container" class="code-container">
<div class="code-label">JS</div>
<textarea>Code</textarea>
</div>
<div id="result-container" class="code-container">
<div class="code-label">Result</div>
<iframe>Code</iframe>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
* here is javascript / jquery *
$("[id^=button]").click(function () {
$(this).toggleClass('selected');
// creates the name of a viewport ID. "view-" + html of button
var viewID = "#view-" + $(this).html();
$(viewID).toggle();
resetViewport(4);
});
function resetViewport(numberOfViewports) {
var viewSize;
switch (numberOfViewports) {
case 1:
viewSize = "400px";
break;
case 2:
viewSize = "198px";
break;
case 3:
viewSize = "131px";
break;
case 4:
viewSize = "98px";
break;
}
$("[id^=view]").css("width", viewSize);
}
here is css
* {
margin: 0;
padding: 0;
}
body {
font-size: 14px;
}
.clear-fix {
clear: both;
}
.no-highlight {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* why does menu margin excape parent without padding on container.. change to 0 and all margen excapes. */
#container {
width: 400px;
height: 456px;
margin: 0 auto;
padding-top: 1px;
background-color: #555;
border-radius: 5px;
}
/* Menu styling */
#menu {
width: 231px;
margin: 10px auto;
}
#menu li {
width: 50px;
height: 30px;
border: 2px solid #58d;
border-radius: 10px;
background-color: #000;
color: #333;
line-height: 30px;
text-align: center;
font-size: .8em;
text-transform: uppercase;
list-style: none;
float: left;
cursor: pointer;
}
#menu li+li {
margin-left: 5px;
}
#menu .selected {
background-color: #fff;
color: #333;
font-weight: bold;
}
[id^="view"] {
width: 98px;
height: 400px;
margin: 1px;
float: left;
background-color: #ddd;
}
jQuery collections and Javascript NodeLists are both array-like, so you can use the .length property to get the number of elements.
jQuery:
resetViewport($(".selected").length);
Plain Javascript:
resetViewport(document.getElementsByClassName("selected").length);
I am designing my website and I'm trying to find a way to keep a header always in the screen.
For an example, take a look at this extra long page on Wikia.com. Notice that when you scroll the page, the little toolbar down the bottom stays in one place. However, scroll to the bottom of the page and you will realize that the toolbar stays in a fixed position until it gets out of view.
This is what I would like to do, but in reverse. Have a header that stays in a fixed position on the web-page, but when it was not in view have it at the top.
I tried looking at an example on DynamicDrive.com (search for Dock Content Script, because I can't post another link), but I found that it was too jittery for me.
Can someone please help me do this?
Thanks in advance.
~DragonXDoom
P.S. Now that I notice, the How to Format box on the right of the submit question page has this effect.
Always remember if you have to stick the header or footer { position : fixed; } can be used.
So apply CSS like this:
.header{
top:0;
width:100%;
height:50px;
position:fixed; // this is the key
}
HTML:
<div id="wrap">
<div id="header"> HEADER </div>
<div id="navigation"> NAVIGATION </div>
<div id="content"> CONTENT </div>
</div>
JavaScript:
( function () {
var nav = $( '#navigation' )[0],
top = $( nav ).offset().top,
left,
height = $( nav ).outerHeight(),
width = $( nav ).width(),
fixedClass = 'fixed';
function pageOffset() {
return window.pageYOffset || document.body.scrollTop;
}
$( window ).
resize( function () {
left = $( nav ).offset().left;
}).
scroll( function () {
$( nav ).toggleClass( fixedClass, pageOffset() > top );
if ( $( nav ).hasClass( fixedClass ) ) {
$( nav ).
css({ 'left': left, 'width': width }).
prev().css({ 'marginBottom': height });
} else {
$( nav ).
prev().andSelf().removeAttr( 'style' );
}
}).
trigger( 'resize' );
})();
Live demo: http://jsfiddle.net/simevidas/Mx8hC/show/
If you want it to be stuck to the top even when the user scrolls (i.e. stuck to the top of the browser window), use:
.top-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
margin: 0;
}
Or just to the of the the page:
.top-bar {
margin: 0;
width: 100%;
}
You could use CSS positioning to solve this. The following link has instructions on what you need I believe.
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
Edit: Sorry I misread, these should work for headers as well.
http://www.noobcube.com/tutorials/html-css/fixed-header-footer-layout-a-beginners-guide-/
http://davidchambersdesign.com/css-fixed-position-headers/
Hope these help.
//header//
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title><?php echo SITE_NAME; if(isset($page_title)){ echo ' :: '.$page_title;}?></title>
<meta name="Description" content="<?php echo $SITE_NAME;?>" />
<meta name="robots" content="all, index, follow" />
<meta name="distribution" content="global" />
<link rel="shortcut icon" href="/favicon.ico" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<link href="<?php if(isset($include_file_ext)){ echo $include_file_ext;}?>css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<h1><?php echo SITE_NAME;?></h1>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<!--
<li>About</li>
<li>Services</li>
<li>Contact us</li>-->
</ul>
</div>
<div id="content">
//footer
</div>
<div id="footer">
Copyright © <?php echo SITE_NAME.' , '.date('Y');?>
</div>
</body>
</html>
//css
body,td,th {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333;
}
body {
margin-left: 0px;
margin-top: 30px;
margin-right: 0px;
margin-bottom: 0px;
}
.maindiv{ width:690px; margin:0 auto;}
.textbox{ padding:2px 4px; width:200px;}
.submit{ border:solid 1px #008000; background:#008000; color:#FFF; font-weight:bold;}
#container
{
margin: 0 30px;
background: #fff;
}
#header
{
background: #ccc;
padding: 20px;
}
#header h1 { margin: 0; }
#navigation
{
float: left;
width: 100%;
background: #333;
}
#navigation ul
{
margin: 0;
padding: 0;
}
#navigation ul li
{
list-style-type: none;
display: inline;
}
#navigation li a
{
display: block;
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
#navigation li a:hover { background: #383; }
#content
{
clear: left;
padding: 20px;
}
#content h2
{
color: #000;
font-size: 160%;
margin: 0 0 .5em;
}
#footer
{
background: #ccc;
text-align: right;
padding: 20px;
height: 1%;
}