Site Overlay not working "Uncaught ReferenceError: closeNav is not defined" - javascript

I'm trying to code a site just to learn but i can't get something to work on my site togheter with all the other elments but if i code that part alone it works. I'm talking about a bottom navigation bar or "Filter". I want it to slide down if i press on "x" but it doesn't and in the browser console i get this message "Uncaught ReferenceError: closeNav is not defined" and "Uncaught ReferenceError: openNav is not defined"
Here's the code (it's pretty messy):
function openNav() {
document.getElementById("myFilterTab").style.height = "100px";
}
function closeNav() {
document.getElementById("myFilterTab").style.height = "0%";
}
body {
margin:0;
background-color: white;
color: #a5a5af;
font: 12px/1.4em Arial,sans-serif;
}
#header {
position: relative;
background-color: #77c9d4;
color: #FFF;
height: 11.3%;
}
#header input{
position:absolute;
top: 20px;
padding: 5px 9px;
height: 30px;
margin-left: 700px;
width: 600px;
border: 1px solid #a4c3ca;
background: #FFFFFF;
border-radius: 6px 0px 0px 6px;
}
.SearchBar{
color:black;
}
.SearchBar:focus{
outline:0;
color:black;
}
.SearchButton{
position:absolute;
padding:6px 15px;
left:1300px;
bottom:64px;
border: 1px solid #57BC90;
background-color:#57BC90;
color:#fafafa;
border-radius: 0px 6px 6px 0px;
}
.SearchButton:active{
outline:0;
}
.SearchButton:hover{
background-color:#015249;
border-color: #015249;
}
#logo {
font-size: 30px;
line-height: 40px;
padding: 15px;
color:white;
}
ul {
position:relative;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #57BC90;
}
li {
border-right:1px solid #57BC90;
float:left;
}
#NavBar{
width:455.76px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.Login{
float:right;
text-decoration: none;
}
li a:hover{
color:white;
text-decoration:none;
}
li a:hover:not(.active) {
background-color: #015249;
}
.active {
background-color: #015249;
}
br.clearLeft {
clear: left;
}​
* {
margin: 0;
}
.glyphicon-log-in{
right: 4px !important;
}
.openBox{
position:absolute;
width: 50px;
background-color: #57BC90;
top: -24px;
left:926px;
cursor:pointer;
}
.glyphicon-chevron-right{
transform: rotate(-90deg);
font-size:20px;
color:white;
right: -13px;
top: 3px;
}
.glyphicon-remove{
position:absolute;
left: 1865px;
top: 13px;
font-size:20px;
color:white;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
.footer{
background-color:#77c9d4;
}
.ShowBox{
padding:1px;
border: 1px solid gray;
height:108px;
width: 192px;
}
.FilterTab{
transition: 0.5s;
position: fixed;
height: 100px;
width: 100%;
padding: 1px;
background-color: #57BC90;
bottom: 0px;
border-radius: 20px 20px 0px 0px;
}
#media screen and (max-height: 450px) {
.FilterTab {padding-top: 15px;}
.FilterTab a {font-size: 18px;}
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
<!DOCTYPE html>
<html>
<head>
<title>PC Master</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" type="text/css" href="ScrollBar.css">
<link rel="stylesheet" type="text/javascript" href="ScrollBar.js">
</head>
<body>
<div id="header">
<div id="logo">PC Master</div>
<form method="get">
<input class="SearchBar" type="text" name="search" placeholder="Cauta.." required>
<button type="submit" Value="submit" class="SearchButton"><span class="glyphicon glyphicon-search"></span></button>
</form>
<ul>
<li>Home</li>
<li>Componente</li>
<li>Periferice</li>
<li>Contact</li>
<li class="Login"><span class="glyphicon glyphicon-log-in" ></span>Login</li>
</ul>
<br class="clearLeft" />
</div>
<div class="FilterTab" id="myFilterTab">
</span>
<div class="openBox"><span class="glyphicon glyphicon-chevron-right" onclick='openNav()'></span></div>
</div>
<div class='wrapper'>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class='push'></div>
</div>
<div class='footer' id="logo">PC Master</div>
</body>
</html>
The site is only for full hd monitor so in smaller monitors it won't look ok.

JavaScript is not a stylesheet
<link rel="stylesheet" type="text/javascript" href="ScrollBar.js">
use a script tag like all of the other includes in the page
<script src="ScrollBar.js"></script>

Related

How do I make my vertical navbar's text stay at the same place when it opens?

So I have a vertical navbar on my project and I think it's almost finalized but when I click on the "hamburger" menu (three lines) the text inside the navbar move in a weird way during the transition from close to open navbar. I would like it to stay still while the navbar opens.
Also I'm using Bootstrap and I would appreciate any help but even more if it can fit any device (responsive) !
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
.nav div {
height: 4px; /*4px*/
background-color: white;
margin : 5px 0;/*5px 0*/
border-radius: 25px;
transition: 0.3s;
}
.nav {
width: 30px;/*30px*/
display: block;
margin : 1em 0 0 1em;
}
.one {
width: 30px;/*30px*/
}
.two {
width: 25px;/*25px*/
}
.three {
width: 20px;/*20px*/
}
.nav:hover div{
width: 30px;/*30px*/
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 0px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition : 0.1s;/*0.3s*/
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
.dropdown-toggle::after {
position: relative;
left: 36%;
}
.dropdown-menu {
border: 0;
border-radius: 0;
}
ul {
padding: 8px 0px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
transition: 0.3s;
padding-left: 0px;
left: 0px;
margin-left: 0px;
}
.mainNav li:hover ul{
display: block;
}
.scroll {
overflow: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<title></title>
</head>
<body style="background-color: white;">
<!-- Code du Navbar vertical -->
<div class ="container-fluid" style="background-color: white; margin-top: 0px; margin-bottom: 0px;padding-bottom: 0px;padding-top:0px;overflow-y: auto;" >
<a href="javascript:void(0)" class="nav" onclick="openNav()" draggable ="false">
<div class="one" style="background-color: black;" draggable ="false"></div>
<div class="two" style="background-color: black;" draggable ="false"></div>
<div class="three" style="background-color: black;" draggable ="false"></div>
</a>
<div id="mySidenav" class="sidenav" style="z-index: 3;">
×
<ul class = "mainNav">
<li>Home</li>
<div >
<li>Catalog
<div class="scroll">
<div class ="tops">
<ul>Tops
<li>Tees + Tanks</li>
<li>Graphic Tees</li>
<li>Shirts</li>
<li>Polos</li>
<li>Hoodies + Sweatshirts</li>
<li>Sweaters + Cardigans</li>
</ul>
</div>
<div class="bottoms">
<ul>Bottoms
<li>Jeans</li>
<li>Shorts</li>
<li>Pants</li>
<li>Joggers</li>
<li>Overrall</li>
</ul>
</div>
<div class="S&A">
<ul>Shoes and accessories
<li>Shoes</li>
<li>Sunglasses & Readers</li>
<li>Jewelry</li>
<li>Watches</li>
<li>Socks & Underwear</li>
<li>Hats & Beanies</li>
<li>Bags & Backpacks</li>
</ul>
</div>
<ul>Sales</ul>
</div>
</li>
</div>
<li>About</li>
<li>Contact</li>
</div>
</ul>
</div>
</div>
</body>
</html>
change it like this:
.sidenav {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: -250;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
<script>
function openNav() {
document.getElementById("mySidenav").style.left ="0";
}
function closeNav() {
document.getElementById("mySidenav").style.left ="-250";
}
</script>
you are changing the width while your text font is set to a static number. so while you are changing the width the html is trying to set the text of same length to a different width, and there is nothing to do with it. So instead of changing the width. just create a static "box", put it to the left so it wouldn't be seen, and bring it right after clicking on a button.
It looks like the issue you're having is because the width is gradually increased.
This means that as it grows, the text goes broken over 2 lines on your longer link names. See example in the image below:
There would be a few ways to fix this but I think the simplest would be to add a min-width: 200px; to your .sidenav a selector like so:
.sidenav a {
padding: 8px 0px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.1s;
min-width: 200px;
}
See this JS Fiddle for an example
Instead of width you need to set the left position to remove the flickering text issue.
Please refer to the below demo.
Working Demo Code
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<title></title>
</head>
<style>
/* Code du Navbar à 3 lignes*/
.nav div {
height: 4px;
/*4px*/
background-color: white;
margin: 5px 0;
/*5px 0*/
border-radius: 25px;
transition: 0.3s;
}
.nav {
width: 30px;
/*30px*/
display: block;
margin: 1em 0 0 1em;
}
.one {
width: 30px;
/*30px*/
}
.two {
width: 25px;
/*25px*/
}
.three {
width: 20px;
/*20px*/
}
.nav:hover div {
width: 30px;
/*30px*/
}
.sidenav {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: -250px;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 0px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.1s;
/*0.3s*/
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
.dropdown-toggle::after {
position: relative;
left: 36%;
}
.dropdown-menu {
border: 0;
border-radius: 0;
}
ul {
padding: 8px 0px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
transition: 0.3s;
padding-left: 0px;
left: 0px;
margin-left: 0px;
}
.mainNav li:hover ul {
display: block;
}
.scroll {
overflow: auto;
}
</style>
<body style="background-color: white;">
<!-- Code du Navbar vertical -->
<div class="container-fluid" style="background-color: white; margin-top: 0px; margin-bottom: 0px;padding-bottom: 0px;padding-top:0px;overflow-y: auto;">
<a href="javascript:void(0)" class="nav" onclick="openNav()" draggable="false">
<div class="one" style="background-color: black;" draggable="false"></div>
<div class="two" style="background-color: black;" draggable="false"></div>
<div class="three" style="background-color: black;" draggable="false"></div>
</a>
<div id="mySidenav" class="sidenav" style="z-index: 3;">
×
<ul class="mainNav">
<li>Home</li>
<div>
<li>Catalog
<div class="scroll">
<div class="tops">
<ul>Tops
<li>Tees + Tanks</li>
<li>Graphic Tees</li>
<li>Shirts</li>
<li>Polos</li>
<li>Hoodies + Sweatshirts</li>
<li>Sweaters + Cardigans</li>
</ul>
</div>
<div class="bottoms">
<ul>Bottoms
<li>Jeans</li>
<li>Shorts</li>
<li>Pants</li>
<li>Joggers</li>
<li>Overrall</li>
</ul>
</div>
<div class="S&A">
<ul>Shoes and accessories
<li>Shoes</li>
<li>Sunglasses & Readers</li>
<li>Jewelry</li>
<li>Watches</li>
<li>Socks & Underwear</li>
<li>Hats & Beanies</li>
<li>Bags & Backpacks</li>
</ul>
</div>
<ul>Sales</ul>
</div>
</li>
</div>
<li>About</li>
<li>Contact</li>
</div>
</ul>
</div>
</div>
<script>
function openNav() {
document.getElementById("mySidenav").style.left = "0px";
}
function closeNav() {
document.getElementById("mySidenav").style.left = "-250px";
}
</script>
</body>
</html>

Dropdown won't work when hovering nav bar

I've been having a problem with a dropdown menu option. The thing refuses to display when I hover "Store". I've already tried in different ways (in some I was almost lucky, in others not so much) but in the end nothing really worked for me.
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("tituloh").style.fontSize = "15px";
document.getElementById("tituloh").style.marginBottom = "70px";
document.getElementById("tituloh").style.top = "20px";
document.getElementById("header").style.paddingBottom = "0px";
document.getElementById("remove").style.top = "47px";
} else {
document.getElementById("tituloh").style.fontSize = "30px";
document.getElementById("tituloh").style.top = "35px";
document.getElementById("tituloh").style.marginBottom = "100px"
document.getElementById("header").style.paddingBottom = "0px";
document.getElementById("remove").style.top = "50px";
}
}
#body {
margin: 0px;
}
#remove {
list-style-type: none;
background-color: black;
margin: 0;
padding: 0;
}
.order {
display: inline-block;
}
#remove .opt {
display: inline-block;
color: white;
text-align: center;
font-size: 24px;
padding: 14px 16px;
background-color: black;
text-decoration: none;
}
#remove .opt:hover,
.dropmenu:hover .dropbutton {
background-color: white;
color: black;
}
.dropmenu {
float: right;
}
.dropmenu .dropbutton {
font-size: 24px;
border: none;
outline: none;
color: white;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropcont {
position: absolute;
background-color: white;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
display: none;
}
.dropcont .dropitem {
text-decoration: none;
width: 150px;
height: 30px;
margin: 5px 0;
padding-top: 5px;
padding-left: 5px;
display: inline-block;
text-align: left;
}
.dropcont a {
text-decoration: none;
color: black;
font-size: 24px;
}
.dropcont a:hover {
text-decoration: underline;
transition: 0.5s;
}
.dropmenu:hover .dropcont {
display: block;
}
#header {
left: 0;
top: 0;
text-align: center;
padding: 20px 5px;
padding-bottom: 0px;
position: fixed;
width: 100%;
margin: 0px;
padding-left: 0px;
transition: 0.2s;
background-color: black;
background-image: url(header/AvettBrothers-loja.jpg);
background-repeat: no-repeat;
background-position: 0 10%;
background-size: cover;
z-index: 1;
}
#tituloh {
position: relative;
top: 35px;
text-shadow: -5px 5px 10px #000000;
font-size: 30px;
color: white;
transition: 0.3s;
margin-bottom: 100px;
}
.sales {
margin-top: 300px;
}
.thumbnails {
width: 50%;
margin: 0 auto;
text-align: center;
}
#tshirts,
#casacos,
#posters,
#acessorios,
#projects,
#kids {
position: relative;
display: inline;
border: solid red;
padding: 20px 0;
margin-bottom: 100px;
}
img.contrast {
margin: 20px 10px;
filter: contrast(70%) opacity(90%);
border: solid blue;
}
.textimgcentro {
position: absolute;
left: 0;
top: -150%;
width: 100%;
font-size: 30px;
text-align: center;
color: white;
text-shadow: -10px 5px 10px #000000;
border: solid black;
}
#top {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" ; http-equiv="refresh" content="5">
<title>Loja</title>
<link rel="stylesheet" type="text/css" href="loja/loja.css">
<script type="text/javascript" src="loja/loja.js"></script>
</head>
<body>
<div id="header">
<div id="tituloh">
<h1>Store</h1>
</div>
<ul id="remove">
<li class="order">Home</li>
<li class="order">About</li>
<li class="order">Albuns</li>
<li class="order">Tours</li>
<li class="dropmenu, order">
<a href="#link" class="dropbutton, opt">
Store
</a>
<div class="dropcont">
T-Shirts<br>
Jackets<br>
Posters<br>
Accessories<br>
Side Projects<br>
Kids<br>
</div>
</li>
<li class="order">Forum</li>
</ul>
</div>
<br/>
<br/>
<br/>
<div class="sales">Sales</div>
<div class="thumbnails">
<div id="tshirts">
<img src="loja/thumbnails/tshirts.jpg" class="contrast">
<div class="textimgcentro">
T-Shirts
</div>
</div>
<div id="casacos">
<img src="loja/thumbnails/casacos.jpg" class="contrast">
<div class="textimgcentro">
Jackets
</div>
</div>
<div id="posters">
<img src="loja/thumbnails/posters.jpg" class="contrast">
<div class="textimgcentro">
Posters
</div>
</div>
<div id="acessorios">
<img src="loja/thumbnails/acessorio.jpg" class="contrast">
<div class="textimgcentro">
Accessories
</div>
</div>
<div id="projects">
<img src="loja/thumbnails/project.jpg" class="contrast">
<div class="textimgcentro">
Side Projects
</div>
</div>
<div id="kids">
<img src="loja/thumbnails/kids.jpg" class="contrast">
<div class="textimgcentro">
Kids
</div>
</div>
</div>
</div>
<br/>
<br/>
<br/>
<div class="bestsell">
<div id="top">
<h1>Top Products</h1>
</div>
</div>
<hr id="cont"> Contactos Oficiais: <br /><br />
<img src="loja/Contactos/facebook.png" ; height="50" ; width="50" ; title="Facebook" ; alt="Link para Facebook">
<img src="loja/Contactos/insta.png" ; height="50" ; width="50" ; title="Instagram" ; alt="Link para Instagram">
<img src="loja/Contactos/twitter.png" ; height="50" ; width="50" ; title="Twitter" ; alt="Link para Twitter">
</body>
</html>
How can I fix this?
Also, how do I make it so that, while hovering the dropdown menu, "Store" remains with a white background and black text?
Thank you!

Scrolling website code using JS, HTML and CSS

I've been trying to get my menubar to stick to the top of my page as I scroll into it. It isnt initially on the top but as I scroll into it, it sticks to the top. I can't get it working.
<html>
<head>
<! Links /!>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css.css">
<script type="text/javascript">
$(document).ready(function() {
$(window).scroll(function () {
//if you hard code, then use console
//.log to determine when you want the
//nav bar to stick.
console.log($(window).scrollTop())
if ($(window).scrollTop() > 280) {
$('#nav_bar').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 281) {
$('#nav_bar').removeClass('navbar-fixed');
}
});
});
</script>
<! Top Image /!>
<div class="cd-fixed-bg cd-bg-1">
</div>
<! MenuBar /!>
<div class="cd-scrolling-bg cd-color-2">
<div id="nav_bar" class="nav_bar">
<ul>
<li>Home</li>
<li>Examples</li>
<li>Contact</li>
</ul>
</div>
</head>
<! Body /!>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br>
</body>
</div>
css:
/*Menubar*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #2c3e50;
color: #2c3e50;
}
li {
color: #ecf0f1;
display:inline-block;
}
li a:hover {
background-color: #2980b9;
color: #ecf0f1;
}
li a {
display: block;
color:#ecf0f1;
padding: 14px 16px;
text-decoration: none;
}
#nav_bar {
border: 0;
background-color: #202020;
border-radius: 0px;
margin-bottom: 0;
height: 30px;
margin-top: 0;
top: 0;
z-index: 10000;
border-radius: 0 0 0.5em 0.5em;
position: relative;
width:100%;
font-family: 'Roboto', sans-serif;
-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.31);
-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.31);
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.31);
}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}
There is heaps of css that i didnt post cause it was nothing to do with the scrolling (it was parallax scrolling)
Check this example, it starts as a normal element and with the event on scroll, it fixes it if needed:
<html>
<head>
<script>
function Menu(){
if(document.body.scrollTop>200){
menu=document.getElementById('menu');
menu.style.position='fixed';
menu.style.top='0px';
}else{
menu.style.position='absolute';
menu.style.top='200px';
}
}
</script>
<style>
body{
height:300%;
margin:0;
}
#menu{
background-color:gray;
height:10%;
position:absolute;
top:200px;
width:100%;
}
</style>
</head>
<body onscroll="Menu()">
<div id="menu">
</div>
</body>
</html>
try using position fixed on your header div
[css]
body {
height: 1000px;
margin: 0;
padding: 0
}
.header {
width: 100%;
border: solid 1px #fff;
position: fixed;
top: 0;
}
ul {
border: solid 1px #f00;
list-style-type: none;
overflow: hidden;
}
li {
width: 25%;
float: left;
}
[html]
<div class="header">
<ul>
<li>Menu1</li>
<li>Menu1</li>
<li>Menu1</li>
<li>Menu1</li>
</ul>
</div>
https://jsfiddle.net/p9gs54cL/4/

How to Change Navigation Bar Background with Scroll?

I'm new to web-developing. For one of my projects, I want to change the navigation bar's background when the user scrolls.
I want it to look like exactly this:
https://www.nlogic.co/understanding-vlan-hopping-attacks/
Here's my code:
nav .row {
margin-right: 0px;
}
nav {
border: 2px ridge #999;
position: fixed;
}
nav li {
float: left;
list-style: none;
padding: 20px 30px;
}
nav a {
color: white;
font-size: 20px;
}
.btn button {
background-color: transparent;
color: white;
margin: 10px 30px;
padding: 10px 25px;
border: 2px solid #999;
border-radius: 5px;
}
.btn button:hover {
border: 2px solid white;
border-radius: 10px;
}
<nav class="col-md-12">
<div class="row">
<ul class="col-md-8">
<li>About
</li>
<li>Contact
</li>
<div class="clearfix"></div>
</ul>
<div class="btn col-md-4">
<button>Sign Up</button>
<button>Sign In</button>
</div>
</div>
</nav>
I am not good at jQuery. In fact, I only know the basics of Javascript. I will be Very Very Grateful if someone can help me here.
Try this :
$(document).ready(function(){
$(window).on("scroll",function(){
if($(document).scrollTop() > 150)
$(".col-md-12").css({backgroundColor:"gray",position:"fixed"});
else
$(".col-md-12").css({backgroundColor:"transparent",position:"absolute"});
})
})
Final code :
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
height: 1500px;
}
nav .row{
margin-right: 0px;
}
nav{
border: 2px ridge #999;
position:absolute;
}
nav li{
float: left;
list-style: none;
padding: 20px 30px;
}
nav a{
color:white;
font-size: 20px;
}
.btn button{
background-color: transparent;
color: white;
margin: 10px 30px;
padding: 10px 25px;
border: 2px solid #999;
border-radius: 5px;
}
.btn button:hover{
border: 2px solid white;
border-radius: 10px;
}
</style>
</head>
<body>
<nav class="col-md-12">
<div class="row">
<ul class="col-md-8">
<li>About</li>
<li>Contact</li>
<div class="clearfix"></div>
</ul>
<div class="btn col-md-4">
<button>Sign Up</button>
<button>Sign In</button>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).on("scroll",function(){
if($(document).scrollTop() > 150)
$(".col-md-12").css({backgroundColor:"gray",position:"fixed"});
else
$(".col-md-12").css({backgroundColor:"transparent",position:"absolute"});
})
})
</script>
</body>
</html>
try this. change the sizes as your need. refer this example and implement it for your project.try below working demo.
<html>
<head></head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
body{
height: 1000px;
margin: 0;
padding: 0;
}
div.navbar{
width: 100%;
height: 100px;
background-color: black;
position: fixed;
}
</style>
<body>
<div class="navbar"></div>
</body>
<script type="text/javascript">
$(window).scroll(function(){
var thescroll = $('body').scrollTop();
//alert(thescroll);
//in here, get the scroll position, if it is greater than you navbar height then change the color or whatever.
if (thescroll > 80)
{
$("div.navbar").css({"background-color":"pink"});
}
else
{
$("div.navbar").css({"background-color":"black"});
}
});
</script>
</html>

Adding a button element changes the position of the div it is in?

I have a basic layout with 6 dynamically sized panels for content, arranged in two rows and three columns.
The panels are <div>'s and are set to a width of 26% with 2% margins, and display:inline-block;.
They are all evenly spaced and look correct, but as soon as I add a <button> element, the box in the 1st row, and 2nd column shifts up about 20 pixels.
Any ideas?
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Client</title>
<link rel='stylesheet' type='text/css' href='CSS/Main.css' />
<script src="JavaScript/Main.js">
</script>
</head>
<body onload="Main.onLoad();">
<div class="panel">
<h3>content</h3>
<div class="innerContainer" id="">
</div>
</div>
<div class="panel">
<h3>content</h3>
<div class="innerContainer" id="">
</div>
</div>
<div class="panel">
<h3>content</h3>
<div class="innerContainer" id="">
</div>
</div>
<div class="panel">
<h3>content</h3>
<div class="innerContainer" id="">
</div>
</div>
<div class="panel">
<h3>content</h3>
<div class="innerContainer" id="">
</div>
</div>
<div class="panel">
<h3>concent</h3>
<div class="innerContainer" id="">
</div>
</div>
</body>
</html>
CSS:
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
margin: 0;
padding: 0;
height: 100%;
}
body {
margin: 0;
padding: 0;
background-color: rgb(227, 111, 30);
height: 100%;
}
.innerContainer {
margin:0;
padding:0;
width:100%;
}
.panel {
display: inline-block;
clear:none;
width: 26%;
height: 41%;
margin: 2%;
padding: 30px;
border: 2px solid black;
box-shadow: 10px 10px 5px #888888;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
border-radius: 40px; /* future proofing */
-khtml-border-radius: 40px; /* for old Konqueror browsers */
background-color: white;
}
.panel h3 {
text-align: center;
text-transform: uppercase;
padding:0;
margin:0;
clear:both;
}
.panel button {
}
Try using vertical-align:top. See this fiddle with a working example: http://jsfiddle.net/dxGsN/1/
So your css would be:
.panel {
display: inline-block;
clear:none;
width: 26%;
height: 41%;
margin: 2%;
padding: 30px;
border: 2px solid black;
box-shadow: 10px 10px 5px #888888;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
border-radius: 40px; /* future proofing */
-khtml-border-radius: 40px; /* for old Konqueror browsers */
background-color: white;
/*ADD THIS LINE*/
vertical-align:top;
}
Or alternatively, you could use float:left instead of display:inline-block. See this fiddle: http://jsfiddle.net/dxGsN/2/
display: block;
float: left;

Categories