This question already has answers here:
Click outside div to hide div in pure JavaScript
(10 answers)
Closed 1 year ago.
I'm a noobie at programing. I'm currently making a simple shop website for a project in class. I'm currently struggling with how to make it work.
This is my complete style sheet
<style>
.open{
cursor: pointer;
background-color: black;
text-align: center;
padding: 5px;
font-size: 40px;
}
.open i {
color: white;
height: 50px;
width: 50px;
}
#Sidenav {
height: 100%;
width: 0px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: black;
overflow-x: hidden;
transition: 0.5s;
}
.logo {
margin: 20px 0 0 0; /* top right down left */
width: 75%;
padding-bottom: 10px;
border-bottom: 1px solid white;
}
.logo img {
margin: 0;
height: 100px;
width: 100px;
}
.sidenav ul {
margin: 0 0 0 12.5%;/* top right down left */
padding: 0;
width: 75%;
list-style: none;
}
.sidenav ul li a {
text-decoration: none;
color: black;
position: relative;
}
.sidenav ul li{
margin: 10px 0 10px 0; /* top right down left */
background-color: white;
border-radius: 20px;
text-align: center;
line-height: 30px;
font-size: 20px;
}
</style>
All of HTML codes are working fine
<body>
<span class="open" onclick="OpenNav()"><i class="fas fa-bars"></i></span>/* My button */
<nav id="Sidenav" class="sidenav">
<center>
<div class="logo">
<<img src="#" alt="logo"/>
<div>
</center>
<ul>
<li>All Items</li>
<li>Smartphones</li>
<li>Appliances</li>
<li>PC Components</li>
<li>Software</li>
<li>My Cart</li>
<li>Account</li>
<li>Shop Inventory</li>
<li>Login</li>
</ul>
</nav>
<h1>Content
<div id="main">
</div>
The function OpenNav() work fine as well, but when I put the Closenav function I can't click on anything else.
<script>
function OpenNav() {
document.getElementById("Sidenav").style.width = "250px";
}
document.onclick = function(Closenav){
if(Closenav.target.id !== 'Sidenav'){
document.getElementById("Sidenav").style.width = "0px";
};
};
</script>
</body>
the idea is to wrap up your sidebar or the content of it in a div with a fixed position and width / height 100% and then you will listen to this wrapper's click.
This way is similar of how Bootstrap handles modals, and also it will help you if you want to add a blurry effect to the page when the sidebar is open.
The Nav dropdown menu works fine in Chrome, but in Safari the rest of the menu is covered by the image.
Why is this happening only in Safari? It displays just fine in Chrome.
Things I have attempted to no avail :
meddled with Z-index
tried using position:relative for the dropdown menu
added on -webkit-transform
;(function(){function t(){}function e(t){return null==t?t===l?d:y:I&&I in Object(t)?n(t):r(t)}function n(t){var e=$.call(t,I),n=t[I];try{t[I]=l;var r=true}catch(t){}var o=_.call(t);return r&&(e?t[I]=n:delete t[I]),o}function r(t){return _.call(t)}function o(t,e,n){function r(e){var n=d,r=g;return d=g=l,x=e,v=t.apply(r,n)}function o(t){return x=t,O=setTimeout(c,e),T?r(t):v}function i(t){var n=t-h,r=t-x,o=e-n;return w?k(o,j-r):o}function f(t){var n=t-h,r=t-x;return h===l||n>=e||n<0||w&&r>=j}function c(){
var t=D();return f(t)?p(t):(O=setTimeout(c,i(t)),l)}function p(t){return O=l,S&&d?r(t):(d=g=l,v)}function s(){O!==l&&clearTimeout(O),x=0,d=h=g=O=l}function y(){return O===l?v:p(D())}function m(){var t=D(),n=f(t);if(d=arguments,g=this,h=t,n){if(O===l)return o(h);if(w)return O=setTimeout(c,e),r(h)}return O===l&&(O=setTimeout(c,e)),v}var d,g,j,v,O,h,x=0,T=false,w=false,S=true;if(typeof t!="function")throw new TypeError(b);return e=a(e)||0,u(n)&&(T=!!n.leading,w="maxWait"in n,j=w?M(a(n.maxWait)||0,e):j,S="trailing"in n?!!n.trailing:S),
m.cancel=s,m.flush=y,m}function i(t,e,n){var r=true,i=true;if(typeof t!="function")throw new TypeError(b);return u(n)&&(r="leading"in n?!!n.leading:r,i="trailing"in n?!!n.trailing:i),o(t,e,{leading:r,maxWait:e,trailing:i})}function u(t){var e=typeof t;return null!=t&&("object"==e||"function"==e)}function f(t){return null!=t&&typeof t=="object"}function c(t){return typeof t=="symbol"||f(t)&&e(t)==m}function a(t){if(typeof t=="number")return t;if(c(t))return s;if(u(t)){var e=typeof t.valueOf=="function"?t.valueOf():t;
t=u(e)?e+"":e}if(typeof t!="string")return 0===t?t:+t;t=t.replace(g,"");var n=v.test(t);return n||O.test(t)?h(t.slice(2),n?2:8):j.test(t)?s:+t}var l,p="4.17.5",b="Expected a function",s=NaN,y="[object Null]",m="[object Symbol]",d="[object Undefined]",g=/^\s+|\s+$/g,j=/^[-+]0x[0-9a-f]+$/i,v=/^0b[01]+$/i,O=/^0o[0-7]+$/i,h=parseInt,x=typeof global=="object"&&global&&global.Object===Object&&global,T=typeof self=="object"&&self&&self.Object===Object&&self,w=x||T||Function("return this")(),S=typeof exports=="object"&&exports&&!exports.nodeType&&exports,N=S&&typeof module=="object"&&module&&!module.nodeType&&module,E=Object.prototype,$=E.hasOwnProperty,_=E.toString,W=w.Symbol,I=W?W.toStringTag:l,M=Math.max,k=Math.min,D=function(){
return w.Date.now()};t.debounce=o,t.throttle=i,t.isObject=u,t.isObjectLike=f,t.isSymbol=c,t.now=D,t.toNumber=a,t.VERSION=p,typeof define=="function"&&typeof define.amd=="object"&&define.amd?(w._=t, define(function(){return t})):N?((N.exports=t)._=t,S._=t):w._=t}).call(this);
// This function will run a throttled script every 300 ms
var checkHeader = _.throttle(() => {
console.log('checkHeader');
// Detect scroll position
let scrollPosition = Math.round(window.scrollY);
// If we've scrolled 130px, add "sticky" class to the header
if (scrollPosition > 130){
document.querySelector('header').classList.add('sticky');
}
// If not, remove "sticky" class from header
else {
document.querySelector('header').classList.remove('sticky');
}
}, 300);
// Run the checkHeader function every time you scroll
window.addEventListener('scroll', checkHeader);
header{
padding: 0px;
overflow: hidden;
position: fixed;
top: 0px;
width: 100%;
height: 120px;
background-image: linear-gradient(to right, rgba(9, 9, 22, 0.6), rgba(9, 9, 22, 1.0));
}
main{
margin-top: 120px;
}
header.sticky {
background-color: black;
height: 90px;
}
header.sticky nav{
top: 30px;
}
header.sticky #logo{
font-size: 3em;
padding: 10px 0px 10px 10px;
}
header #logo{
font-size: 5em;
float: left;
}
.phi{
color: rgb(141, 180, 105);
}
.hilo{
color: white;
}
nav{
float: right;
position: fixed;
top: 50px;
left: 280px;
}
nav > a, .dropmenu{
padding-left: 0.5em;
padding-right: 0.5em;
}
nav a, .dropdown{
color: rgb(240, 137, 52);
font-size: 20px;
}
a{
text-decoration: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ddd;
min-width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
border-radius: 21px 21px 21px 21px;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: rgb(247, 185, 71);
border-radius: 21px 21px 21px 21px;
}
.dropdown:hover .dropdown-content {display: block;}
.dropmenu:hover {
cursor: pointer;
}
.universe {
background-image: url("../assets/img/universe.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
padding: 0px;
width: 100%;
height: 25em;
display: inline-block;
z-index: -999;
}
blockquote{
color: white;
font-size: 4em;
text-align: center;
margin: 2em auto;
}
.bgbutton, .bottominfo{
background-color: white;
}
.button{
display: inline-block;
border-radius: 4px;
background-color: rgb(240, 137, 52);
border: none;
color: #FFFFFF;
text-align: center;
font-size: 40px;
padding: 20px;
transition: all 0.5s ease;
cursor: pointer;
margin: 50px 180px;
}
.button span{
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s ease;
}
.button span:after{
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s ease;
}
.button:hover span{
padding-right: 25px;
}
.button:hover span:after{
opacity: 1;
right: 0;
}
<div class="wrapper">
<header>
<a href="index.html">
<div id="logo">
<span class="phi">Φ</span><span class="hilo">hilo</span>
</div>
</a>
<nav>
HOME
<div class="dropdown">
<a class="dropmenu">INTERIOR DESIGN</a>
<div class="dropdown-content">
OUR PHILOSOPHY
OUR INNOVATION
TESTIMONIALS
</div>
</div>
FENG SHUI
<div class="dropdown">
<a class="dropmenu">SERVICES</a>
<div class="dropdown-content">
SPACE PLANNING
FENG SHUI CONSULTATION
DESIGN & CARPENTRY
</div>
</div>
<div class="dropdown">
<a class="dropmenu">OUR MASTERPIECE</a>
<div class="dropdown-content">
RESIDENTIAL
RETAIL
CORPORATE & OFFICE
</div>
</div>
<div class="dropdown">
<a class="dropmenu">ABOUT</a>
<div class="dropdown-content">
CHIEF DESIGNER
MASTER PEK
OUR SUBSIDIARIES
FAQ
</div>
</div>
BLOG
</nav>
</header>
<main>
<div class="universe">
<section>
<blockquote>Where Feng Shui Meets Design</blockquote>
</section>
</div>
I have finally found the problem and came to a solution.
The problem was hidden at the header section.
After changing header - overflow: visible (from hidden), the dropdown menu in navbar is displaying properly now in Safari.
The reason Safari renders this so differently from Chrome is unfathomable.
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>
I'm making a single page style website and after scrolling 1 px has been scrolled (i.e. the homepage has been passed) I want the navigation bar to appear and stay fixed at the top.
I've tried the .scroll() jQuery and I'm having no luck.
HTML:
<div id="navbar">
<div id="nav-container">
<img id="logonavbar" src="#">
<a id="ABTUS" href="#">ABOUT US</a>
<a id="SRVCS" href="#">SERVICES</a>
<a id="PRTFLO" href="#">PORTFOLIO</a>
<a id="CNTCT" href="#">CONTACT</a>
</div>
</div>
CSS:
#navbar {
width: 100%;
background-color: white;
overflow: auto;
position: fixed;
left: 0px;
top: 0px;
border-bottom: solid;
border-width: 1px;
border-color: #afafaf;
overflow: hidden;
z-index: 10;
display: none;
}
#nav-container {
max-width: 1200px;
min-width: 700px;
margin: 0 auto;
}
#logonavbar {
float: left;
margin: 0 auto;
width: 125px;
padding: 10px 0 0 0;
}
#nav-container a {
float: right;
display: block;
padding: 25px 15px;
text-decoration: none;
color: black;
font-family: "calibri light", calibri,sans-serif;
font-size: 20px;
transition: background-color 0.5s ease;
}
#nav-container a:hover {
background-color: #f4f4f4;
transition: background-color 0.5s ease;
}
#nav-container a:active {
background-color: #bfbfbf;
}
#nav-container h1:hover {
color: #aaaaaa;
transition: color 0.3s ease;
}
jQuery:
$(document).scroll(function() {
if ($document.scrollTop() >= 50) {
$('#nav-container').css('display': 'inline', 'position': 'fixed');
}
});
Here I have made a simple example of a element that sticks to the top of the page after you scroll over it. Maybe it can help you as well!
http://corexsystems.net/2017/09/08/simple-sticky-menu-in-jquery-css3/
Here is the source of this example!
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js">
<script>
$(function(){
var pos = $("#topMenuX").offset().top,
win = $(window);
win.on("scroll", function() {
win.scrollTop() >= pos ? $("#topMenuX").addClass("fixed") : $("#topMenuX").removeClass("fixed");
});
});
</script>
<style>
body {
padding:0;
margin:0px;
}
#topMenuX {
background: #666;
padding: 20px;
height:45px;
color: #fff;
}
#topMenuX .insideMenu li {
float:left;
list-style:none;
}
</style>
</head>
<body>
<div id="topMenuX">
<ul class="insideMenu">
<li>CoreXDesigns</li>
<li>Simple Sticky Menu Example</li>
</ul>
</div>
</body>
</html>
Hey so I'm working on this website and I learned how to do this thing with the Navbar so the color fades in, I can't get any of the links to work after it starts to work. From what I understand it has to do with e.preventDefault(), but I'm not sure how to fix this.
here is my code
$(window).scroll(function() {
// 100 = The point you would like to fade the nav in.
if ($(window).scrollTop() > 100 ){
$('.bg').stop().animate({
opacity : 0.5
}, 10 );
} else {
$('.bg').stop().animate({
opacity : 0.0
}, 200 );
};
});
$('.scroll').on('click', function(e){
e.preventDefault()
$('html, body,').animate({
scrollTop : $(this.hash).offset().top
}, 1500);
});
/****NAV*****/
body{
background-color: #000;
font-family: 'Trebuchet Ms';
}
.container {
width: 100%;
height: 2000px;
position: relative;
/* font-family: 'Trebuchet Ms';*/
}
.bg {
background: #777;
width: 100%;
height: 100px;
opacity: 1;
}
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1;
}
ul {
height: 100px;
margin: -70px auto 0 auto;
width: 500px;
}
li {
float: left;
list-style: none;
margin: 10px 20px;
text-transform: uppercase;
/* letter-spacing: 0px;*/
color: wheat;
}
li a {
/* height: 100px;*/
text-transform: uppercase;
color: wheat;
font-family: 'Trebuchet Ms';
font-size:
}
/*
a {
text-align: center;
font-size: 50px;
color: #bdbdbd;
font-weight: bold;
text-decoration: none;
letter-spacing: 5px;
text-shadow: 1px 1px 1px #949494;
position: relative;
z-index: 1;
margin: 0 auto;
display: block;
}
a:hover {
color: #a6a6a6;
text-shadow: 1px 1px 1px #C9C9C9;
}
*/
a {
border-style: none;
}
a:link {
text-decoration: none;
}
a:hover {
color:wheat;
}
a:active {
color: #2c9d91;
text-decoration: inherit;
}
.down {
top: 150px;
}
.up {
top: 1800px;
}
/*******OVERLAY*******/
#writingoverlay {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
opacity: .5;
/* background: radial-gradient( coral, gray, darkslategray);*/
/* background: radial-gradien( coral,darkslategray, gray);*/
/* background: radial-gradient(darkslategray 35%, dimgray, gray);*/
background: radial-gradient(lightgray, gray, dimgray);
color: crimson
}
/*
#video-overlay {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
background: linear-gradient(to bottom left, crimson, coral);
opacity: 0.2;
}
*/
/*****VIDEO FULL SCREEN*****/
video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
}
/*****FOOTER******/
footer {
color: wheat;
text-align: center;
font-size: 20px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<div id="top" class="container">
<div class="fixed">
<div class="bg"></div>
<ul class="navBar">
<li>home
</li>
<li>photography
</li>
<li>film
</li>
<li>contact
</li>
</ul>
</div>
</div>
<footer>Contact info.</footer>
<div id="writingoverlay"></div>
<!-- <div id="video-overlay"></div> -->
<div class="vidOverlay">
<video id="video" autoplay controls loop muted>
<source src="/Img/8.mp4" type="video/mp4">
<source src="/Img/8.webm" type="video/webm">
</video>
</div>
</body>
</html>
This is actually not related to your e.preventDefault, it's related to your opacity animation. Basically, you are bringing an opacity tag to the div which is covering your link. If you want to test this, you can run your entire code and just use a different animation instead of opacity, such as
height: '150px'
You can also see this effect if you just edit the css style tag to remove opacity in the developer console.
I think if you change this logic to use navbar instead of bg, you will get it to work. I believe the problem is that you have a div covering another div, so you can't click the div underneath.
This works for me, but obviously you'll have to change your css to match what you need:
if ($(window).scrollTop() > 100 ){
$('.navBar').stop().animate({
opacity : 0.5
}, 10);
} else {
$('.navBar').stop().animate({
opacity : 0.0
}, 200 );
};
i think your missed a /, try to put /index.html , the / is for your to redirect your path.
<ul class="navBar">
<li>home
</li>
<li>photography
</li>
<li>film
</li>
<li>contact
</li>
</ul>
</div>