We Keep Coding

Transparent/Opaque Navigation Bar is Behind "div" with Class "transbox"

I started off with some text over a background image for the home page on my website. I wanted to make the letters more legible so I added an opaque box using the class "transbox" and setting it's opacity. I'm not too concerned about the text being transparent, but now the navigation bar that I have set up sits behind the "transbox" and will not let me click the links when I scroll over the "transbox" since it is sitting over the navigation bar.
I have already tried setting the z-index appropriately and even went through changing the classes and css code to make it simply a transparent container with some text, however the problem persists and new issues arise regarding container/text placement.
All I want is the navbar to be over everything so it is not covered and unusable in any situation as the user scrolls through the page. I'm curious if this is a bug with opacity, if I am using the wrong type of class, or if it is something entirely different.
$(window).on('scroll', function(){
if($(window).scrollTop()){
$('nav').addClass('black');
$('header').addClass('black');
$('header .logo img').addClass('black');
$('header ul').addClass('black');
$('header a').addClass('black');
}
else
{
$('nav').removeClass('black');
$('header').removeClass('black');
$('header .logo img').removeClass('black');
$('header ul').removeClass('black');
$('header a').removeClass('black');
}
})
header{
background: #35424a;
color: #ffffff;
z-index: 999;
}
header.black{
z-index: 999;
}
header a{
color: #5ff5a3;
text-decoration: none;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
text-transform: uppercase;
padding: 5px 20px;
font-size: 16px;
transition: .5s;
}
header a.black{
color: #ffffff;
font-size: 14px;
}
header ul{
float: right;
padding: 68px 50px 0 10px;
display: flex;
transition: .5s;
}
header ul.black{
padding: 40px 10px 0 10px;
}
header li{
float: left;
display: inline-block;
box-sizing: border-box;
padding: 1px;
transition: .5s;
}
header nav{
position: fixed;
top: 0;
left: 0;
width: 100%;
transition: .5s;
}
header nav.black{
background: rgba(0,0,0,.8);
color: #000000;
}
header .current a, header a:hover{
color: #ffffff;
background: #000000;
font-weight: bold;
border: 1px solid #ffffff;
transition: .5s;
}
header .logo img
{
width: 500px;
padding: 0px 50px;
height: auto;
float: left;
transition: .5s;
}
header .logo img.black
{
width: 300px;
padding: 0px 20px;
}
#showcase{
min-height: 1000px;
background: url(../img/showcaseimg.jpg) no-repeat 0 -200px;
background-size: cover;
background-position: center;
text-align: center;
color: #ffffff;
}
#showcase h1{
font-size: 55px;
color: #ffffff;
padding: 0px 20px;
}
#showcase p{
font-size: 20px;
color: #ffffff;
padding: 0px 20px 20px;
}
#showcase .transbox{
margin-top: 700px;
margin-bottom: 10px;
background-color: #000000;
opacity: 0.6;
z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div class="container">
<nav>
<div class="logo">
<img src="./img/creativecs_logo.png">
</div>
<ul>
<li class="current">HOME</li>
<li>SERVICES</li>
<li>PRODUCTS</li>
<li>ABOUT</li>
<li>CONTACT</li>
<li>NEWS</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<div class="transbox">
<h1>Custom PC solutions for anyone and everyone.</h1>
<p>Designed by engineers. Tested by enthusiasts. Check out what CreativeCS has to offer you.</p>
</div>
</div>
</section>

It work fine for me.
That being said, for z-index to work you need your elements with z-index to be positionned (MDN).
header {
position:relative;
z-index: 999;}
#showcase {
position:relative;
z-index: 1;
}
You might need to read about the stacking context.
Here header and #showcase exist in the stacking context of the root element (html) so it will work fine. Other times you might want to create a stacking context that is not as high as the root element.

Everything seams to be fine, anchors do fire as expected, you can add this script to see wich element is selected..
var x = document.getElementsByTagName("*")
for(var i = 0; i< x.length; i++){
x[i].addEventListener("click", function(e){
alert(e.target.tagName)
})
}

Create Selectable li items as buttons

I have a user interface with buttons made of list items. I want to be able to have them be individually selectable, where they will control the color of another div. Right now I have them laid out and they have a css transition where they grow in scale when hovered over but I want then to stay fully scaled when selected. How would I do this?
I tried using the focus pseudo-class but that only works on input elements. I also tried active pseudo class but I think I am missing something with using those.
Lastly, what would I do if I want them to change the background color of another div to the color of the button?
I haven't built the elements that will be effected yet, I was just going to use some divs shaped like squares with a background color to test, but I am stuck at this point with giving the list items active states. There is probably some JS aspect to this that I am missing.
Here is my code:
HTML:
<div id="colorSelection">
<div class="base_color selector">
<p class="sectionHeader">Base Color</p>
<ul class="swatchSelector">
<hr class="crossbar" width="90%">
<li class="swatch one"></li>
<li class="swatch two"></li>
<li class="swatch three"></li>
<li class="swatch four"></li>
<li class="swatch five"></li>
<li class="swatch six"></li>
<li class="swatch seven"></li>
<li class="swatch eight"></li>
</ul>
</div>
</div>
CSS:
/*reset*/
html, body, ul, li, p, a, img, hr{
margin: 0px;
padding: 0px;
border: 0px;
list-style-type: none;
text-decoration: none;
}
#colorSelection {
width: 320px;
height: 720px;
background-color:#d4d4d4;
display: inline-block;
}
.selector{
margin-bottom: 20px;
padding: 10px;
margin-left: 4px;
}
.sectionHeader {
font-family: helvetica,arial,sans-serif;
font-size: 20px;
color:black;
margin-bottom: 7px;
}
.swatch {
width: 17px;
height: 17px;
border: 2px solid;
border-radius: 50%;
display: inline-block;
margin-left: 12px;
text-align: center;
position: relative;
transition: transform:2s ease-in-out;
box-shadow: 0px 1px 5px rgba(0,0,0,0.5);
cursor: pointer;
}
.swatch:hover{
transform: scale(1.3);
}
.crossbar{
border:1px white solid;
position: relative;
right: 0px;
top: 12px;
box-shadow: 0px 1px 5px rgba(0,0,0,0.25);
}
.one{
margin-left: 0px;
background-color:#ffdc01;
border-color:white;
transition: border .01s;
}
.one:hover, .one:active {
border-color:#ffdc01;
}
.two{
background-color:#f27245;
border-color:white;
transition: border .01s;
}
.two:hover, .two:active {
border-color:#f27245;
}
.three {
background-color:#db3844;
border-color:white;
transition: border .01s;
}
.three:hover, .three:active {
border-color:#db3844;
}
.four {
background-color:#754c90;
border-color:white;
transition: border .01s;
}
.four:hover, .four:active {
border-color:#754c90;
}
.five{
background-color:#005c9f;
border-color:white;
transition: border .01s;
}
.five:hover, .five:active {
border-color:#005c9f;
}
.six{
background-color:#343333;
border-color:white;
transition: border .01s;
}
.six:hover, .six:active {
border-color:#343333;
}
.seven {
background-color:#6a6c70;
border-color:white;
transition: border .01s;
}
.seven:hover, .seven:active {
border-color:#6a6c70;
}
.eight {
background-color:#e9eae8;
border-color:white;
transition: border .01s;
}
.eight:hover, .eight:active {
border-color:#e9eae8;
}
https://jsfiddle.net/cf2zxf88/2/

I want then to stay fully scaled when selected. How would I do this?
With a CSS class .scale { transfrom: scale(1.3) } that can be used by JavaScript with el.classList.add() and el.classList.remove().
Lastly, what would I do if I want them to change the background color
of another div to the color of the button?
Access all list items with document.querySelectorAll()
Add a click event to each list item
Get the background color with Window.getComputedStyle(el, null).getPropertyValue("background-color")
In total
(Added class .scale and <div id="bg"></div>)
var colorButtons = document.querySelectorAll(".swatchSelector > li"),
bg = document.getElementById("bg"),
curr = 0;
for (var i = 0; i < colorButtons.length; i += 1) {
(function(i) {
colorButtons[i].addEventListener("click", function() {
bg.style.backgroundColor = window.getComputedStyle(this, null).getPropertyValue("background-color");
colorButtons[curr].classList.remove("scale");
curr = i;
colorButtons[curr].classList.add("scale");
})
})(i);
}
colorButtons[curr].classList.add("scale");
bg.style.backgroundColor = window.getComputedStyle(colorButtons[curr], null).getPropertyValue("background-color");
/*reset*/
html,
body,
ul,
li,
p,
a,
img,
hr {
margin: 0px;
padding: 0px;
border: 0px;
list-style-type: none;
text-decoration: none;
}
#colorSelection,
#bg {
vertical-align: top;
width: 320px;
height: 720px;
background-color: #d4d4d4;
display: inline-block;
}
.selector {
margin-bottom: 20px;
padding: 10px;
margin-left: 4px;
}
.sectionHeader {
font-family: helvetica, arial, sans-serif;
font-size: 20px;
color: black;
margin-bottom: 7px;
}
.swatch {
width: 17px;
height: 17px;
border: 2px solid;
border-radius: 50%;
display: inline-block;
margin-left: 12px;
text-align: center;
position: relative;
transition: transform:2s ease-in-out;
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5);
cursor: pointer;
}
.swatch:hover,
.scale {
transform: scale(1.3);
}
.crossbar {
border: 1px white solid;
position: relative;
right: 0px;
top: 12px;
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.25);
}
.one {
margin-left: 0px;
background-color: #ffdc01;
border-color: white;
transition: border .01s;
}
.one:hover,
.one:active {
border-color: #ffdc01;
}
.two {
background-color: #f27245;
border-color: white;
transition: border .01s;
}
.two:hover,
.two:active {
border-color: #f27245;
}
.three {
background-color: #db3844;
border-color: white;
transition: border .01s;
}
.three:hover,
.three:active {
border-color: #db3844;
}
.four {
background-color: #754c90;
border-color: white;
transition: border .01s;
}
.four:hover,
.four:active {
border-color: #754c90;
}
.five {
background-color: #005c9f;
border-color: white;
transition: border .01s;
}
.five:hover,
.five:active {
border-color: #005c9f;
}
.six {
background-color: #343333;
border-color: white;
transition: border .01s;
}
.six:hover,
.six:active {
border-color: #343333;
}
.seven {
background-color: #6a6c70;
border-color: white;
transition: border .01s;
}
.seven:hover,
.seven:active {
border-color: #6a6c70;
}
.eight {
background-color: #e9eae8;
border-color: white;
transition: border .01s;
}
.eight:hover,
.eight:active {
border-color: #e9eae8;
}
<div id="colorSelection">
<div class="base_color selector">
<p class="sectionHeader">Base Color</p>
<ul class="swatchSelector">
<hr class="crossbar" width="90%">
<li class="swatch one scale"></li>
<li class="swatch two"></li>
<li class="swatch three"></li>
<li class="swatch four"></li>
<li class="swatch five"></li>
<li class="swatch six"></li>
<li class="swatch seven"></li>
<li class="swatch eight"></li>
</ul>
</div>
</div>
<div id="bg"></div>

Add class to shortest element

I have some JQuery that finds the height of the tallest element and adds that height to elements that are shorter. I need to add the class, main-nav-special-padding to the elements that are shorter using my existing Jquery. I took a stab but it didn't work. Any help is much appreciated. Here's what I have:
HTML
$(document).ready(function() {
var maxHeight = -1;
var element = $('.navbar-nav li a');
element.each(function() {
maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
if (maxHeight < $(this).height()) {
element.addClass('main-nav-special-padding');
}
});
element.each(function() {
$(this).height(maxHeight);
});
});
.main-nav-special-padding {
padding-top: 1rem;
background-color: red;
}
a.nav-button:link {
color: #ffffff;
background: transparent;
padding: .5rem 10px;
border-radius: 4px;
border: 2px solid #ffffff;
margin: 2px 6px;
cursor: pointer;
transform: scale(1);
transition: transform .3s;
outline: none;
text-decoration: none;
display: inline-block;
font-size: 1.1em;
text-align: center;
line-height: 1em;
}
a.nav-button:visited {
color: #ffffff;
background: transparent;
padding: 6px 10px;
border-radius: 4px;
border: 2px solid #ffffff;
margin: 2px 6px;
cursor: pointer;
transform: scale(1);
transition: transform .3s;
outline: none;
display: inline-block;
font-size: 1.1em;
text-align: center;
line-height: 1em;
}
a.nav-button:hover {
color: #2fa4e7;
background: transparent;
padding: 6px 10px;
border-radius: 4px;
border: 2px solid #2fa4e7;
margin: 2px 6px;
cursor: pointer;
transform: scale(1.05);
transition: transform .3s;
outline: none;
display: inline-block;
font-size: 1.1em;
text-align: center;
line-height: 1em;
}
a.nav-button:active {
color: #0f395a;
background: transparent;
padding: 6px 10px;
border-radius: 4px;
border: 2px solid #ffffff;
margin: 2px 6px;
cursor: pointer;
transform: scale(1);
transition: transform .3s;
outline: none;
display: inline-block;
font-size: 1.1em;
text-align: center;
line-height: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navbar-nav ml-auto">
<li><a href='Pending_Applications.aspx' class="nav-button" id="toPendingApps">Pending
Applications</a></li>
<li><a href='Pending_Contracts.aspx' class="nav-button" id="toPendingContracts">Pending
Contracts</a> </li>
<li><a href='Completed_Loans.aspx' class="nav-button-at" id="toCompletedLoans">Completed
Loans</a> </li>
<li>Dealer Listing
</li>
<li><a href='Corporate_Account_Profiles.aspx' class="nav-button" id="toCorporateAccounts">
Corporate
Accounts</a></li>
<li>Activity
</li>
<li>History
</li>
<li><a href='Sales_Staff_Promotions.aspx' class="nav-button" id="toSalesPromotions">
Promotions</a> </li>
<li>My Profile
</li>
</ul>

I copied your code over and got this (after changing the background colour):
I'm not sure what you mean by calculating the height as the height looks the same for every element. In case you mean the width you can add this css:
.navbar-nav{
width: 200px;
}
.nav-button{
width: 100%;
}
.navbar-nav li {
list-style-type: none;
}
Which gives you a 200px wide <ul> and each <li> will fill the width. It also takes of the Bullets on the <li> items. If you want the elements to line up to the left instead of center just do this:
a.nav-button:link,
a.nav-button:visited,
a.nav-button:hover,
a.nav-button:active {
text-align: center;
}
I'm not sure if this is solving your problem or not. I'm just confused by which 'height' you're trying to solve for. #huangism is correct that using flexbox would make much of your CSS unnecessary. But that's a topic for another time. Good luck!

about this :
element.each(function() {
maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
if (maxHeight < $(this).height()) {
element.addClass('main-nav-special-padding');
}
});
maxHeight always >= $(this).height(). so element don't add class .
you can edit same as:
element.each(function() {
maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
});
element.each(function() {
if (maxHeight > $(this).height()) {
element.addClass('main-nav-special-padding');
}
$(this).height(maxHeight);
});
add class to shorter elements.

I'm having trouble with an animation I want to do with JS and CSS in HTML

I'm a beginner to website building, and I wanted to create an animation every time a button is pressed. So I tried doing it on CSS first, but realized it could not be done with that alone, so I incorporated JS into my code which is still not working. The idea is, when I press the button, "Filter", the menu that is in the element, ".filter" comes down, so I tried adding an animation to shift the margin down, which does not work. How can I make this work?
function btnFilter() {
document.getElementByClass(".filter").style.WebkitAnimation = "filter-animation";
document.getElementByClass(".filter").style.animation = "filter-animation";
}
.filter {
display: none;
position: relative;
border-radius: 8px;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
margin-top: -57px;
}
#-webkit-keyframes filter-animation {
from {
margin-top: -57px;
display: none;
}
to {
margin-top: 30px;
display: flex;
}
}
#keyframes filter-animation {
from {
margin-top: -57px;
display: none;
}
to {
margin-top: 30px;
display: flex;
}
}
<button onclick="btnFilter()">Filter</button>
<div class="filter">
<p>filter</p>
<form class="drpdwn-1">
<p>Price range:</p>
<select value="Price Range">
<option>$0 - $50</option>
<option>$50 - $100</option>
<option>> $100</option>
</select>
</form>
</div>

jQuery(JS)may help you
https://jsfiddle.net/moongod101/h8t6347b/
My way to do it is just use the jQuery function addClass,easy and simple

function btnFilter() {
document.getElementsByClassName(".filter").style.WebkitAnimation = "filter-animation";
document.getElementsByClassName(".filter").style.animation = "filter-animation";
}
use getElementsByClassName('.className')...

You can use just CSS but you need to toggle a css class for animating the button every time.
Here is an example:
var el = document.querySelector(".button");
el.addEventListener('click', function() {
if(!el.classList.contains("animate")) {
el.classList.add("animate");
} else {
el.classList.remove("animate");
}
});
.button {
font-weight: bold;
font-size: 1.2em;
color: white;
background-color: #777;
padding: 0.7em 2em;
border: 0;
margin: 1em auto 0;
border-radius: 3px;
box-shadow: 0 3px 0 #444;
display: block;
cursor: pointer;
appearance: none;
transition: transform 1.5s ease;
}
.animate {
transform: translateY(50px);
}
<button class="button">Click me</button>

OnMouseOver - add CSS to different tags than the hovered tag

I have a menu bar and around it a <div>, I have an <a> in the <div>, and when I hover the mouse on the <a> I want the left border color to change in the <div>. How can i do that?
I want to add a CSS-style to the <div> when I hover on the <a> link.
Html:
<div id="meny" class="meny">
Home
</div>
Css:
a.linksM{
color: black;
display: inline-block;
padding: 10px;
margin: 0px;
font-size: 13pt;
font-family: "vandetta", "arial", sans-seriff;
font-weight: bold;
}
div.meny{
border: solid 4px;
border-color: #82b919;
background-color: #82b919;
border-radius: 5px;
border-bottom-color: #006600;
border-top-color: #006600;
border-top: 0px;
}
#home:hover{
border-left-color: #006600;
}

The best way to do this is via CSS. In particular, you can use the pseudoclass hover
div a:hover {
border-left: 1px solid blue;
}
It's also possible to do this in native JavaScript
var myLink = document.querySelector("div a");
myLink.addEventListener("mouseover", function() {
this.parentNode.classList.add("new-border");
});
myLink.addEventListener("mouseout", function() {
this.parentNode.classList.remove('new-border');
});
And in jQuery as well
$("div a").on("mouseover", function() {
$(this).parent().addClass("new-border");
})
.on("mouseout"), function() {
$(this).parent().removeClass("new-border");
});

If you want to do it using jQuery then following code will help you.
$(document).ready(function(){
$("div a").mouseover(function(){
$("div").addClass("classname");
});
$("div a").mouseout(function(){
$("div").removeClass("classname");
});
});

You can use jQuery .parent() to target the div containing your link.
$('a').hover(function() {
$(this).parent().toggleClass('green-border');
});
Here is an example : http://jsfiddle.net/lddz/5kdo4bcm/1/

I would recommend against using javascript to achieve this.
This can be achieved using CSS in several different ways.
Here is a jsFiddle
If you use a HTML strucure for a basic menu:
<nav>
<ul>
<li>
<a href='#'>Link 1</a>
</li>
<li>
<a href='#'>Link 2</a>
</li>
<li>
<a href='#'>Link 3</a>
</li>
</ul>
</nav>
Then you can add CSS like this:
nav a {
text-decoration: none;
display: block;
padding: 6px 10px;
border-left: 2px solid transparent;
}
nav a:hover {
border-left: 2px solid red;
}

give the div 2 classes
HTML code
<div id="link-container" class="normal">
Link Name
</div>
CSS code
div.normal {
position: relative;
margin: 0 0 0 3px;
padding: 5px 20px;
width: 100px;
height: 50px;
background: none;
color: rgba(0, 0, 0, 1);
border: 2px groove rgba(0, 0, 0, 1);
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
div.hover {
border-left: 5px solid purple;
margin: 0;
}
#link {
color: black;
font-family: "Courier New";
font-weight: 400;
line-height: 50px;
text-decoration: none;
text-align: center;
width: 100%;
height: 100%;
}
#link:hover {
font-weight: 900;
text-decoration: underline;
}
Javascript/jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#link-container').removeClass('hover'); //prevents on load accidental hover and glitching
$('#link').on('mouseover', function(){
$('#link-container').addClass('hover')}).on('mouseout', function() {
$('#link-container').removeClass('hover')
});
});
</script>