How to Change Navigation Bar Background with Scroll? - javascript

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>

Related

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!

I can't get iframe to get data from textarea

I am trying to make an iframe which shows text putted in the textarea.
How can I do that? Am I missing something here?
<html>
<head>
<title>Code Player</title>
<script type="text/javascript" src="jquery.min.js"></script>
<!--i am using the latest jquery-->
<style type="text/css">
body{
font-family: sans-serif;
margin: 0;
padding: 0;
}
#header{
width: 100%;
background-color: #EEEEEE;
padding: 5px;
height: 30px;
}
#logo{
float: left;
font-weight: bold;
font-size: 120%;
padding: 3px 5px;
}
#buttonContainer{
width: 240px;
margin: 0 auto;
}
.toggleButton{
float: left;
border: 1px solid gray;
padding: 6px;
border-right: none;
font-size: 90%;
}
#html{
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#output{
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-right: 1px solid gray;
}
.active{
background-color: #E8F2FF;
}
.highlightedButton{
background-color: gray;
}
textarea{
resize: none;
border-top: none;
border-color: gray;
}
.panel{
float: left;
width: 49%;
border-left: none;
}
iframe{
border: none;
}
</style>
</head>
<body>
<div id="header">
<div id="logo">
CodePlayer
</div>
<div id="buttonContainer">
<div class="toggleButton active" id="html">HTML</div>
<div class="toggleButton" id="css">CSS</div>
<div class="toggleButton" id="javascript">JavaScript</div>
<div class="toggleButton active" id="output">Output</div>
</div>
</div>
<div id="bodyContainer">
<!--I want to get iframe data from the textarea section-->
<textarea id="htmlPanel" class="panel">Hello World!</textarea>
<iframe id="outputPanel" class="panel"></iframe>
</div>
<script type="text/javascript">
$(".toggleButton").hover(function () {
$(this).addClass("highlightedButton");
}, function () {
$(this).removeClass("highlightedButton");
});
$(".toggleButton").click(function () {
$(this).toggleClass("active");
$(this).removeClass("highlightedButton");
});
$(".panel").height($(window).height() - $("#header").height() - 15);
$(".panel").width($((window).width() / 2));
$("iframe").contents().find("html").html($("#htmlPanel").val());
$("textarea").on('change keyup paste', function() {
$("iframe").contents().find("html").html($("#htmlPanel").val());
});
</script>
</body>
</html>
Everything in this code works expect the iframe. I can't get the data from textarea.
You have a syntax error, otherwise it works fine. Demo
$(".panel").width($((window).width() / 2));
should be
$(".panel").width($(window).width() / 2);

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/

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

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>

Two divs is going through eachother when resizing

My problem is when i resize the window(smaller) One of my divs just go through and on top of my navigation bar... Which is annoying, but i believe there is a easy way to fix it. I can give you the code, but should test it in your editor program - and then resize, youll see what i mean.
HTML CODE HERE:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="WorkFieldStartpage.css"/>
</head>
<body>
<div id="upperblock">
</div>
<div class="topbar"></div>
<div id="pageContainer">
<div id="pageContainer2">
<div>
<div id="leftnavigation">
<ul>
<li> <h4> Navigation </h4> </li>
<li>Test text</li>
<li>Test text</li>
<li>Test text</li>
</ul>
</div>
<div id="mainContainer">
<div id="newsfeed"></div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
body {
color: #333;
line-height: 1.28;
text-align: left;
direction: ltr;
}
div {
display: block;
}
.topbar {
font-family: sans-serif;
font-size:12px;
font-weight: bold;
background-color: #11BD83;
height: px;
width: 100%;
position:fixed;
left: 0px;
top: 0px;
}
#pageContainer {
margin: 0 auto;
position: relative;
zoom: 1;
min-height: 600px;
}
#pageContainer2 {
margin: 0;
outline: none;
padding: 0;
width: auto;
}
ul {
list-style-type: none;
}
h4 {
text-decoration:underline;
}
#mainContainer {
display: block;
width: 620px;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
min-height: 800px;
margin-left: auto ;
margin-right: auto ;
margin-top: 58px;
}
#leftnavigation {
float: left;
height: 300px;
width: 120.5px;
text-align: left;
font-family: sans-serif;
font-size: 15px;
padding-right: 30px;
display:block;
}
#newsfeed {
}
make #leftnavigation AND #mainContainer div float:left
Set to the maincontainer div an overflow:auto; property. This will disable to overlap on floated elements.

Categories