I placed a negative z-index property on my image section to prevent it from overlapping the navigation bar, which caused the hyperlinks to not function properly. After I fixed that problem, I realized that my left and right buttons for my slideshow would not work. Any help enabling the buttons to work even with a negative z-index? All the code that I have pasted below is necessary.
HTML
<div id="container">
<header>
<h1><b>Seattle</b>&Metropolitan</h1>
<nav>
<ul>
<li>About</li>
<li>Buildings</li>
<li id="contact">Contact Us</li>
</ul>
</nav>
</header>
</div>
<div class="image-section">
<img src="img/seattleskyline.jpg" alt="Seattle Skyline" id="center-image" />
<div id="caption"><div id="caption-text">A panoramic view of 1201 Third Avenue at night</div></div>
<button id="sliderLeft" onclick="left();"></button>
<button id="sliderRight" onclick="right();"></button>
</div>
<br><br>
<div class="content">
Seattle's history can be traced back to the 1850s, when pioneers and natives started building a great city filled with a diverse culure, beautiful scenery, and a vibrant enviornment. The metropolitan area of Seattle now is a high-tech hub, in which four Fortune 500 companies reside: <b>Amazon.com (#49)</b>, <b>Starbucks (#208)</b>, <b>Nordstrom (#227)</b>, and <b>Expeditors International (#428)</b>.
</div>
CSS
#charset "utf-8";
#container
{
width: 75%;
margin-left: auto;
margin-right: auto;
}
header h1
{
font-size: 38px;
float: left;
font-weight: 100;
}
header nav ul
{
list-style-type: none;
margin: 0;
vertical-align: middle;
line-height: normal;
float: right;
z-index: 999;
}
header nav ul li
{
line-height: 105px;
display: inline;
padding: 45px;
font-size: 22px;
font-weight: 100;
}
header nav ul li a
{
color: black;
text-decoration: none;
}
#center-image
{
width: 100%;
height: 480px;
}
#contact
{
padding-right: 0;
}
.image-section
{
margin-left: auto;
margin-right: auto;
width: 75%;
position: relative;
text-align: center;
}
.image-section #caption
{
position: absolute;
display: none;
bottom: 4px;
width: 100%;
text-align: center;
color: white;
background: #474747;
height: 50px;
line-height: 50px;
opacity: 0.8;
font-size: 20px;
}
.image-section button
{
outline: 0;
}
.image-section #sliderLeft
{
position: absolute;
display: none;
width: 25px;
height: 100px;
top: 50%;
margin-bottom: 50px;
left: 0;
opacity: 0.7;
filter: alpha(opacity=70);
border: 0;
}
.image-section #sliderRight
{
position: absolute;
display: none;
width: 25px;
height: 100px;
top: 50%;
margin-bottom: 50px;
right: 0;
opacity: 0.7;
filter: alpha(opacity=70);
border: 0;
}
JS
var images = ["img/seattleskyline.jpg", "img/spaceneedle.jpg", "img/ferriswheel.jpg"]
var captions = ["A panoramic view of 1201 Third Avenue at night", "The Seattle's landmark Space Needle", "The Iconic Great Wheel"]
var index = 0;
function left() {
index -= 2;
if (index < 0) {
index = images.length;
}
changeImage();
}
function right() {
changeImage();
}
function changeImage() {
index++;
if (index > images.length - 1) {
index = 0;
}
var targetImage = document.getElementById("center-image");
var caption = document.getElementById("caption-text");
$("#center-image").fadeOut(1000, function() {
targetImage.src = images[index];
$("#center-image").fadeIn(1000);
});
$("#caption-text").fadeOut(1000, function() {
caption.innerHTML = captions[index];
$("#caption-text").fadeIn(1000);
});
}
$(document).ready(function() {
$("#sliderRight").fadeIn(1000);
$("#sliderLeft").fadeIn(1000);
$("#caption").fadeIn(1000);
setInterval(changeImage, 7000);
});
z-index take effect when position is relative or absolute so if you want use it with your css
add position: relative; as following so z-indexs take effect
header nav ul
{
position: relative;
z-index: 9999;
}
.image-section
{
position: relative;
}
.image-section #sliderLeft
{
z-index: 999;
}
.image-section #sliderRight
z-index: 999;
}
Correct CodePen
Change your CSS for header nav ul to :
header nav ul
{
list-style-type: none;
margin: 0;
vertical-align: middle;
line-height: normal;
float: right;
z-index: 999;
position: relative; /* add this */
}
Working jSfiddle
Related
Hello I have this smooth scrolling navigation fixed when user's scroll down to the site.. But when the page go up and removes the class nav_fixed the header part jumps through it.. How do I tweak my jquery code that also enables smooth scrolling of the header part when user scrolls up.. As you can see in the sample below the behavior of the header jumps and it's kind of a minor bug.
/* Fixed Header Parallax */
var header_height = $('header').outerHeight(); //number of pixels before modifying styles
$(window).bind('scroll', function () {
if ($(window).scrollTop() > header_height) {
$('header').addClass('nav_fixed');
$('.dummyHeight').addClass('addHeight');
} else {
$('header').removeClass('nav_fixed');
$('.dummyHeight').removeClass('addHeight');
}
});
.main {height:700px;}
.addHeight {
height: 80px;
width: 100%;
display: block;
margin: 0 auto;
position: relative;
}
/* Header */
header {
background: red;
height: 80px;
padding: 10px 40px;
border-bottom: 1px solid #caccd0;
position: relative;
transition: all 0.3s linear;
}
.nav_fixed {
position: fixed;
z-index: 45;
left: 0;
right: 0;
top: 0;
animation-name: fade-in;
animation-duration: 1s;
}
#keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.addHeight {
height: 80px;
width: 100%;
display: block;
margin: 0 auto;
position: relative;
}
nav ul li {
display: inline-block;
position: relative;
vertical-align: top;
}
nav ul li a {
display: block;
color: #232323;
text-transform: uppercase;
font-weight: bold;
font-size: 12px;
padding: 0 10px;
line-height: 67px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
Sample
<div id="nav_area">
<nav>
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</nav>
</div>
</header>
<div class="dummyHeight"></div>
<div class="main">
</div>
May be this what you need? Let me know if you need something else. I have modified script to remove that jump you are telling. I have removed the classes when you reach header scrolling up all the way.
/* Fixed Header Parallax */
var header_height = $('header').outerHeight(); //number of pixels before modifying styles
var offset = $('header').offset();
$(window).bind('scroll', function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > header_height) {
$('header').addClass('nav_fixed');
$('.dummyHeight').addClass('addHeight');
} else if(scrollTop == offset.top) {
$('header').removeClass('nav_fixed');
$('.dummyHeight').removeClass('addHeight');
}
});
body{
margin: 0;
}
.main {height:700px;}
.addHeight {
height: 80px;
width: 100%;
display: block;
margin: 0 auto;
position: relative;
}
/* Header */
header {
background: red;
height: 80px;
padding: 10px 40px;
border-bottom: 1px solid #caccd0;
position: relative;
transition: all 0.3s linear;
}
.nav_fixed {
position: fixed;
z-index: 45;
left: 0;
right: 0;
top: 0;
animation-name: fade-in;
animation-duration: 1s;
}
#keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.addHeight {
height: 80px;
width: 100%;
display: block;
margin: 0 auto;
position: relative;
}
nav ul li {
display: inline-block;
position: relative;
vertical-align: top;
}
nav ul li a {
display: block;
color: #232323;
text-transform: uppercase;
font-weight: bold;
font-size: 12px;
padding: 0 10px;
line-height: 67px;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<header>
Sample
<div id="nav_area">
<nav>
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</nav>
</div>
</header>
<div class="dummyHeight"></div>
<div class="main">
</div>
</body>
</html>
I have a pretty standard navigation bar, with a list containing the links to my sub-sites. I have added a hamburger-menu icon to the website, which should appear on small and mobile screens. Also, I hide the links, by setting their font-size to zero via the css media query. If the menu icon is clicked I fire a javascript function, that will increase/decrease the fontsize of the links accordingly.
All of this works pretty nicely, there is only one issue. As soon as I resize my browser after the font-size of the links has been changed by the script, those values are kept and not updated by the media query for some reason. So, depending on whether the mobile menu was open or closed, the fontsize is either extremely big, or zero. Why aren't these values updated when resizing the browser back to full-screen?
code-snippet containing the necessary code to reproduce:
var open = false;
function openmobilemenu() {
var nav = document.getElementsByTagName("nav");
var links = nav[0].getElementsByTagName("li");
if (!open) {
for (var i = 0; i < links.length; i++) {
links[i].style.transition = "0.5s";
links[i].style.fontSize = "10vw";
}
open = true;
}
else {
for (var i = 0; i < links.length; i++) {
links[i].style.fontSize = "0";
}
open = false;
}
}
header {
position: relative;
width: 100%;
height: 200px;
background-image: url("../img/header.png");
background-repeat: no-repeat;
background-position: right;
background-size: auto 100%;
background-color: #CDCCCA;
}
header img {
position: absolute;
width: 500px;
padding: 0 15%;
bottom: 10px;
}
.mobilemenu {
display: none;
}
nav {
position: relative;
background-color: #61625B;
width: 100%;
height: 100px;
}
nav ul {
position: absolute;
bottom: 0;
width: 70%;
list-style: none;
padding: 0 15%;
display: flex;
margin: 0;
}
nav li {
width: 125px;
text-align: center;
transition: none;
}
.navunderline {
width: 125px;
height: 0;
margin: 5px 0 0 0;
background-color: #DAD9D7;
transition: 500ms;
}
nav a {
color: #DAD9D7;
}
nav a:hover {
text-decoration: none;
}
nav li:hover .navunderline {
height: 5px;
margin: 0;
}
#media screen and (max-width: 800px), (hover:none) {
.mobilemenu {
display: flex;
color: #61625B;
font-size: 100px;
margin: auto 5%;
}
.mobilemenu a, a:hover, a:active {
text-decoration: none;
}
nav {
position: relative;
background-color: #61625B;
width: 100%;
min-height: 10px;
height: auto;
overflow: visible;
padding: 0;
margin: 0;
}
nav ul {
position: relative;
height: auto;
bottom: 0;
width: 100%;
list-style: none;
flex-direction: column;
padding: 0;
}
nav li {
width: 100%;
text-align: center;
margin: 0;
padding: 0;
font-size: 0;
height: auto;
}
nav li:hover {
background-color: #8b131f;
}
.navunderline {
display: none;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<header>
<img src="img/logo.png" alt="some alt" />
<a href="javascript:void(0);" class="mobilemenu" onclick="openmobilemenu()">
<i class="fa fa-bars"></i>
</a>
</header>
<nav>
<ul>
<li>Unternehmen<div class="navunderline"></div></li>
<li>Leistungen<div class="navunderline"></div></li>
<li>Referenzen<div class="navunderline"></div></li>
<li>News<div class="navunderline"></div></li>
<li>Kontakt<div class="navunderline"></div></li>
</ul>
</nav>
This is because your JS is setting inline styles on your elements and inline styles are always more specific than anything in your stylesheet.
There are three ways around this:
Use JS on window resize to remove those styles.
Don't inline styles, but add/remove classes on those elements on resize. Use your stylesheet to control the styles for those elements.
Set the font styles to !important in your stylesheet (the only way around specificity - not recommended)
I am designing a portfolio website and wanted to have my work slide up onto the screen when you clicked portfolio, same way a nav bar would slide over when you click a menu icon. The code I have works for nav bars on the right and left, but for the bottom it still shows the block even with the height of 0
unfortunately using display:none and changing it to display:block with jquery removes the smooth animation of it sliding onto screen.
html
<div id="portfolionav" class="portfolionav">
<a href="javascript:void(0)" class="closebtn"
onclick="closeNav2()">☛</a>
testing
Services
Clients
Contact
</div>
<div id=bottom>
<h1 onclick="openNav2()">PORTFOLIO</h1>
</div>
css
.portfolionav {
height: 0;
width: 100%;
position: fixed;
z-index: 3;
bottom: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
display: block;
}
.portfolionav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.portfolionav a:hover {
color: #f1f1f1;
}
.portfolionav .closebtn {
position: absolute;
bottom: 25px;
right: 75px;
font-size: 36px;
writing-mode: vertical-rl;
}
javascript
function openNav2() {
document.getElementById("portfolionav").style.height = "100vh";
}
function closeNav2() {
document.getElementById("portfolionav").style.height = "0";
}
Use display: none instead of height.
Once the portfolio div is fixed, you can use the top property instead of cotroling the animation by the height. You also have to set the default height as 100vh.
So your portfolionav should be:
.portfolionav {
height: 100vh;
width: 100%;
position: fixed;
z-index: 3;
top: 100vh;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
display: block;
}
And your JavaScript functions:
function openNav2() {
document.getElementById("portfolionav").style.top = "0";
}
function closeNav2() {
document.getElementById("portfolionav").style.top = "100vh";
}
Now, you just have to adjust the hand-button as you wish.
You can combined height and paddingTop for show and hide navigation because of padding it is showing when you set height:0px;
function openNav2() {
debugger;
document.getElementById("portfolionav").style.height = "100vh";
document.getElementById("portfolionav").style.paddingTop = "60px";
}
function closeNav2() {
document.getElementById("portfolionav").style.height = "0";
document.getElementById("portfolionav").style.paddingTop = "0";
}
.portfolionav {
height: 0;
width: 100%;
position: fixed;
z-index: 3;
bottom: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 0px;
display: block;
}
.portfolionav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.portfolionav a:hover {
color: #f1f1f1;
}
.portfolionav .closebtn {
position: absolute;
bottom: 25px;
right: 75px;
font-size: 36px;
writing-mode: vertical-rl;
}
<div id="portfolionav" class="portfolionav">
<a href="javascript:void(0)" class="closebtn"
onclick="closeNav2()">☛</a>
testing
Services
Clients
Contact
</div>
<div id=bottom>
<h1 onclick="openNav2()">PORTFOLIO</h1>
</div>
I am trying to distribute elements with equal spacing in between while keeping the first and last items left- and right-aligned.
I believe flex-based layouts have an easy solution for it but I want to support older browsers, too.
I have already made a JS-based solution which I will be posting but feel free to suggest better solutions & if it's possible via only CSS.
Here is a fiddle.
ul {
position: relative;
margin: 0;
font-size: 0;
padding: 0;
display: table;
width: 100%;
list-style: none;
}
ul:after {
content: '';
display: block;
position: absolute;
top: 50%;
background: #000;
left: 0;
height: 1px;
width: 100%;
z-index: -1;
}
li {
display: table-cell;
text-align: center;
}
li:first-child {
text-align: left;
}
li:last-child {
text-align: right;
}
span {
font-family: sans-serif;
display: inline-block;
font-size: 15px;
line-height: 1em;
color: #fff;
background: #000;
padding: 6px 9.34px;
border-radius: 999px;
}
<ul>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
</ul>
Here's a flex-based solution for people finding this post via search.
See below for browser support data.
ul {
display: flex;
justify-content: space-between;
position: relative;
margin: 0;
font-size: 0;
padding: 0;
list-style: none;
}
ul:after {
content: '';
position: absolute;
width: 100%;
top: 50%;
background-color: #000;
height: 1px;
z-index: -1;
}
span {
font-family: sans-serif;
display: inline-block;
font-size: 15px;
line-height: 1em;
color: #fff;
background: #000;
padding: 6px 9.34px;
border-radius: 50%;
}
<ul>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
</ul>
Browser support: Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.
CSS
div {
width: 500px;
background-color: black;
font-size: 0;
}
span {
color: black;
width: 20px;
height: 20px;
display: inline-block;
background-color: red;
font-size: 15px;
margin: 0 calc( ( 500px - 8 * 20px ) / ( 8 + ( 8 - 2 ) ) ); // 8 -> count of elements
}
span:first-child {
margin-left: 0;
}
span:last-child {
margin-right: 0;
}
HTML
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
</div>
https://codepen.io/N11/pen/MvzeGM
I have used a javascript based solution which does this:
Counts the number of items (5)
Excludes first and last item (5-2=3)
Counts them (3) as double (3*2=6)
Adds the first & last back (6+2=8)
Now gets a percentage division (100/8=12.5%)
Then gives that percentage based amount of total width to first and last element & rest get twice (12.5*2=25%) of that.
[1 = 12.5%] [2 = 25%] [3 = 25%] [4 = 25%] [5 = 12.5%] = 100%
You can view the fiddle here.
<div class="wrap">
<ul class="js-equal-dist">
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
</ul>
</div>
CSS
.wrap{
padding: 0 14px;
}
ul {
position: relative;
margin: 0;
font-size: 0;
padding: 0;
display: table;
width: 100%;
list-style: none;
}
ul:after {
content: '';
display: block;
position: absolute;
top: 50%;
background: #000;
left: 0;
height: 1px;
width: 100%;
z-index: -1;
}
li {
display: table-cell;
text-align: center;
}
li:first-child {
text-align: left;
}
li:last-child {
text-align: right;
}
li:first-child span {
transform: translateX(-50%);
}
li:last-child span {
transform: translateX(50%);
}
span {
font-family: sans-serif;
display: inline-block;
font-size: 15px;
line-height: 1em;
color: #fff;
background: #000;
padding: 6px 9.34px;
border-radius: 999px;
}
JS
// js-equal-dist
var totalWidth = $('.js-equal-dist').outerWidth();
var itemsLength = $('.js-equal-dist li').length;
var percUnit = 100 / (((itemsLength - 2) * 2) + 2);
percUnit = percUnit / 100 * totalWidth;
$('.js-equal-dist li:not(:first-child):not(:last-child)').width(percUnit * 2);
$('.js-equal-dist li:first-child(), .js-equal-dist li:last-Child()').width(percUnit);
Note that I had to add a wrap div with padding that of half of element & translated first and last element to offset 50% in order to truly be center.
I've been working on an overlay menu recently. It'll contain a long list of names (can't be avoided). It behaves perfectly on Chrome, but the list refuses to scroll on Firefox. I've no idea what's causing this but have created a JSFiddle to show what's happening.
Link here
A bit of the HTML:
<div class="full-menu">
<div class="full-menu--middle">
<button class="menu-toggle menu-toggle--close"></button>
<div class="section group menu_items">
<ul>
<li>a bunch of options vvv</li>
</ul>
</div>
</div>
</div>
A bit of the CSS:
html,
body {
height: 100%;
width: 100%;
}
.main_menu {
display: none;
}
.full-menu {
visibility: hidden;
display: table;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0;
}
.full-menu--open {
visibility: visible;
opacity: 1;
}
.full-menu--middle {
display: table-cell;
vertical-align: middle;
}
.menu-toggle {
background-color: transparent;
border: 0;
color: #fff;
position: fixed;
left: 20px;
top: 20px;
}
.menu-toggle:before {
content: '\f0c9';
font-family: 'FontAwesome';
margin: 0 20px 0 0;
}
.menu-toggle--close {
position: fixed;
top: 20px;
left: 20px;
}
.menu-toggle_black {
background-color: transparent;
border: 0;
color: #000;
position: fixed;
left: 20px;
top: 20px;
}
.menu-toggle_black:before {
content: '\f0c9';
font-family: 'FontAwesome';
margin: 0 20px 0 0;
}
.menu_items{
overflow: scroll;
height: 100%;
}
.page_inner_ {
display: table-cell;
vertical-align: middle;
}
.page_container {
display: table;
height: 100%;
width: 100%;
position: relative;
color: #ffffff;
}
Any help would be very much appreciated!
Thanks
Maybe you should give position: absolute; to .full-menu, instead of fixed.
Take display:table; off of .full-menu and take display:table-cell; off of .full-menu--middle then add overflow:scroll; to .full-menu.
How to Fix Overflow Issues in CSS Flex Layouts:
"... add min-height: 0; to the flex child that has our overflow container ..."
https://moduscreate.com/blog/how-to-fix-overflow-issues-in-css-flex-layouts/