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)
})
}

How can I set different background images for different li with same class

I currently have a Joomla 3 site that I am building and I am trying to add social icons using the module SP Tabs so that you can click on 3 different tabs to give you information such as latest news, twitter and other news within the same area.
I have managed to change the look from the tabs to social icon images but the problem I have is that I have only been able to change 2 of the images and the third one is reusing the 2nd image already displayed.
The following is a snapshot (HTML + CSS) from Firebug as my site is currently on my localhost.
HTML
<div id="sptab121" class="sptab_red">
<div class="tabs_buttons">
<div class="tabs_mask">
<ul class="tabs_container">
<li class="tab first-tab active></li>
<li class="tab"></li>
<li class="tab"></li>
</ul>
</div>
</div>
CSS
#sptab121 .tabs_mask, #sptab121 ul.tabs_container li span {
height: 105px;
line-height: 0px;
}
#sptab121 .tabs_mask {
border-bottom: 1px solid #DDD;
padding: 100px 0px 5px;
}
#sptab121 .tabs_mask {
line-height: 0px !important;
}
#sptab121 ul.tabs_container {
list-style: outside none none;
margin: 0px !important;
padding: 0px !important;
}
#sptab121 .first-tab {
background: transparent url("/images/twitter.png") no-repeat scroll 0% 0% / 50px 55px !important;
float: left;
line-height: 13px;
cursor: pointer;
padding: 55px 0px 0px;
margin: 0px 23px 0px 0px;
width: 50px;
font-weight: bold;
text-align: center;
}
#sptab121 ul.tabs_container li.tab {
background: transparent url("/images/local.png") no-repeat scroll 0% 0% / 50px 55px;
float: left;
line-height: 13px;
cursor: pointer;
padding: 55px 0px 0px;
margin: 0px 23px 0px 0px;
width: 50px;
font-weight: bold;
text-align: center;
}
The problem is that the class the 2nd and 3rd li use is the same one "tab". I have managed to override the first class by adding a class for the first tab but I am not sure how I can use a different image for the 2nd and 3rd link.
The other problem is that its not as easy as adding "second tab" next to the li class as the module has been coded in JavaScript and I have not been able to find the code where this is implemented.
Any advice on how I could change this will be really appreciated.
The link for the Joomla Module: "extensions.joomla.org/extension/sp-tab"

Use pseudo class
#sptab121 ul.tabs_container li.tab {
background: transparent no-repeat scroll 0% 0% / 50px 55px;
float: left;
line-height: 13px;
cursor: pointer;
padding: 55px 0px 0px;
margin: 0px 23px 0px 0px;
width: 50px;
font-weight: bold;
text-align: center;
}
#sptab121 ul.tabs_container li.tab:nth-child(2){
background-image: url("https://cdn1.iconfinder.com/data/icons/simple-icons/4096/instagram-4096-black.png") ;
}
#sptab121 ul.tabs_container li.tab:nth-child(3){
background-image: url("https://cdn3.iconfinder.com/data/icons/picons-social/57/80-google-plus-512.png") ;
}
Demo

css: cut corner of box

So I have created a box in css like this:
#box
{
background-color: #5d5d5d;
border-radius: 2px 2px 2px 2px;
box-shadow: 5px 5px 2px #767676;
height: 200px;
width: 1100px;
}
with the result of
What I want to do without overlaying a smaller whitebox, and without messing up the shadow effect is something like this:
Is this possible, or am I going to have to just add a smaller whitebox over the top and play with the layering and shadow effects until they're about right?
Or maybe there is a way using JavaScript or something like that?
NB: What I don't want to do is just create the box in photoshop as this will slow overall load time of the page

option:1 boxshadow
body{padding:40px}
#box
{
background-color: white;
border-radius: 2px 2px 2px 2px;
box-shadow: 14px -88px 0px white,5px 5px 2px #767676,inset 199px -88px 0 #5d5d5d;
height: 200px;
width: 510px;
}
<div id=box />
option:2 pseudo element see #Fahad Hasan

You can use the :before pseudo-element to achieve what you're trying to do like this: DEMO. This is the CSS which I've added:
div#box:before {
content:'';
background: white;
width: 700px;
display: block;
height: 100px;
float: right;
}

You can create an ::after pseudo-element with a white background, float it right and offset it to move over the shadow:
#box::after{
content:'';
width:500px;
height:100px;
position:relative;
float:right;
top:0px;
right:-7px;
background-color:#fff;
}

You should try with pseudo elements, this is an example:
HTML:
<div id="mydiv"></div>
CSS:
div#mydiv{
width:300px;
height:300px;
background-color:red;
}
div#mydiv::after {
content: ' ';
display: block;
background-color: blue;
width: 270px;
height: 100px;
float: right;
}
Here is a demo

Remove right and bottom margin on infowindows

I'm playing around with the google InfoWindow.
And almost everything is perfect. I'm Just missing something on the windows.
I always have a right and bottom white space.
I don't mind that much for the bottom one but I'd like to get rid of the right one.
Any idea how to do that ?
EDIT, here is the code:
<div class="gm-style-iw" style="position: absolute; left: 12px; top: 9px; overflow: auto; width: 352px; height: 290px;">
<div class="" style="overflow: auto;">
<div class="infoBox">
<div style="max-width: 352px; padding: 0px;">
<div id="info-map-element">
<div class="street">
<img src="http://maps.googleapis.com/maps/api/streetview?size=360x190&location=37.7831059,-122.4446528&fov=90&heading=235&pitch=10&sensor=false" alt="">
<div class="shadow"></div>
<div class="title"> Customer History<br> 123 Foo Av, San Francisco, CA 12345</div>
</div>
<div class="wrap clearfix">
<div class="item clearfix">
<small>2013-09-11</small>
<p>This is the a test of customer history purchases.</p>
<div class="row clearfix">
<div class="col-lg-5"> Cost Estimate <span>$11000</span></div>
<div class="col-lg-7"> Purchase No. <span>123456789</span></div>
</div>
<div class="row clearfix">
<div class="col-lg-12"> Sell by My Online seller dot com</div>
</div>
</div>
<div class="row clearfix"></div>
</div>
</div>
</div>
</div>
</div>
#map_newsfeed .gm-style-iw {
width: 352px!important;
height: auto!important;
left: 0!important;
font-size: 15px!important;
font-weight: normal!important;
top: 0!important;
overflow: hidden!important;
border-radius: 3px;
}
#map_newsfeed .gm-style-iw > div {
overflow: hidden!important;
}.gm-style .gm-style-iw, .gm-style .gm-style-iw a, .gm-style .gm-style-iw span, .gm-style .gm-style-iw label, .gm-style .gm-style-iw div {
font-size: 13px;
font-weight: normal;
}#info-map-element .row > div {
font-size: inherit;
font-weight: inherit;
}
#info-map-element .shadow {
width: 100%;
height: 100%;
bottom: 0;
-webkit-box-shadow: 0 -35px 75px rgba(0,0,0,0.95) inset;
box-shadow: 0 -35px 75px rgba(0,0,0,0.95) inset;
position: absolute;
font-style: normal;
font-weight: normal;
z-index: 1;
}
#map .gm-style {
font-family: inherit;
}#info-map-element .pagination {
margin: 10px 0 0;
}
.infoBox > img {
position: absolute;
top: 0px;
right: 25px;
display: block;
z-index: 3;
}
#info-map-element .pointer {
width:23px;
height:19px;
top: 99%;
left: 41%;
position:absolute;
display:block;
background: transparent url('http://d3flf7kkefqaeh.cloudfront.net/_assets/3/pointer_down.png');
}#info-map-element .wrap {
padding: 0;
}
#info-map-element .wrap .item:nth-child(even) {
background: #ececec;
}
#info-map-element .wrap .item {
padding: 10px;
}#legend strong {
float: left;
margin: 0 10px 0 0;
display: block;
}
EDTI #2:
So I can change the dom the way I want it with Jquery. Those 3 lines work"
$(".gm-style-iw").next("div").css("right", '52px');
$(".gm-style-iw").prev("div").children().last().css("width", '351px');
$($(".gm-style-iw").prev("div").children()[1]).css("width", '351px');
But for some reason only the first line get executed.

The padding is caused by the scroll applied to the .gm-style-iw-d div, this would remove it but be careful and make sure all your content fits inside the max width and height of the info window cause otherwise it will be hidden.
.gm-style-iw-d {
overflow: hidden !important;
}

You need to first remove the infowindow background & shadow, then apply your own css.
JS part
/*
* The google.maps.event.addListener() event waits for
* the creation of the infowindow HTML structure 'domready'
* and before the opening of the infowindow defined styles
* are applied.
*/
google.maps.event.addListener(infowindow, 'domready', function() {
// Reference to the DIV which receives the contents of the infowindow using jQuery
var iwOuter = $('.gm-style-iw');
/* The DIV we want to change is above the .gm-style-iw DIV.
* So, we use jQuery and create a iwBackground variable,
* and took advantage of the existing reference to .gm-style-iw for the previous DIV with .prev().
*/
var iwBackground = iwOuter.prev();
// Remove the background shadow DIV
iwBackground.children(':nth-child(2)').css({'display' : 'none'});
// Remove the white background DIV
iwBackground.children(':nth-child(4)').css({'display' : 'none'});
});
CSS part (example)
.gm-style-iw {
width: 350px !important;
top: 0 !important;
left: 0 !important;
background-color: #fff;
box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6);
border: 1px solid rgba(72, 181, 233, 0.6);
border-radius: 2px 2px 0 0;
}
Source

For those who are still looking for solution. Angular 8, helped the code below to remove the paddings and hide the close button for agm-info-window.
Basically, overflow: scroll in .gm-style-iw-d element creates that space.
/* hide close button in info-window */
::ng-deep button.gm-ui-hover-effect {
visibility: hidden;
}
/* clear the paddings */
::ng-deep .gm-style .gm-style-iw-c {
padding: 0;
}
/* remove the white space */
::ng-deep .gm-style-iw .gm-style-iw-d {
overflow: auto !important;
}

You should stop to try fix height/width and set it auto.
Try to change this line:
<div class="gm-style-iw" style="position: absolute; left: 12px; top: 9px; overflow: auto; width: 352px; height: 290px;">
To this:
<div class="gm-style-iw" style="position: absolute; left: 12px; top: 9px; overflow: auto; width: auto; height: auto;">
In the Css change:
#map_newsfeed .gm-style-iw {
width: 352px!important;
height: auto!important;
left: 0!important;
font-size: 15px!important;
font-weight: normal!important;
top: 0!important;
overflow: hidden!important;
border-radius: 3px;
}
To:
#map_newsfeed .gm-style-iw {
width: auto!important;
height: auto!important;
left: 0!important;
font-size: 15px!important;
font-weight: normal!important;
top: 0!important;
overflow: hidden!important;
border-radius: 3px;
}
It should solve your problem, if not, please show the full code (html/css).

make tooltip display on click and add a modal to it

strangely, I find it difficult to bind jquery's onclick event handler to this fiddle. I don't even know what I'm doing wrong. The html is as follows:-
<ul>
<li><a id="tooltip_1" href="#" class="tooltip" >Trigger1</a><li>
<li><a id="tooltip_2" href="#" class="tooltip" >Trigger2</a><li>
<li><a id="tooltip_3" href="#" class="tooltip" >Trigger3</a><li>
</ul>
<div style="display: none;">
<div id="data_tooltip_1">
data_tooltip_1: You can hover over and interacte with me
</div>
<div id="data_tooltip_2">
data_tooltip_2: You can hover over and interacte with me
</div>
<div id="data_tooltip_3">
data_tooltip_3: You can hover over and interacte with me
</div>
</div>​
styled this way:-
li {
padding: 20px 0px 0px 20px;
}​
with a jquery like this:-
$(document).ready(function() {
$('.tooltip[id^="tooltip_"]').each
(function(){
$(this).qtip({
content: $('#data_' + $(this).attr('id')),
show: {
},
hide: {
fixed: true,
delay: 180
}
});
});
});​
you check out the fiddle page I created:- http://jsfiddle.net/UyZnb/339/.
Again, how do I implement a jquery modal-like appearance to it so the tooltip becomes the focus?

Working Demo: using mouse over and out: http://jsfiddle.net/swxzp/ or using click http://jsfiddle.net/rjGeS/ ( I have written a small JQuery/ Css / Opacity demo)
Update: Working sample with trigger 1, 2 & 3: http://jsfiddle.net/HeJqg/
How it works:
It has 2 divs i.e. background which is used to make rest page become grey-ish like modal and second div large which will act as a placeholder for the toolTip so thta you can close and open it in any event you want even though the background is grey.
Rest feel free to play around with the code, hope it helps the cause :)
Code
$('.tooltip_display').click(function() {
var $this = $(this);
$("#background").css({
"opacity": "0.3"
}).fadeIn("slow");
$("#large").html(function() {
$('.ttip').css({
left: $this.position() + '20px',
top: $this.position() + '50px'
}).show(500)
}).fadeIn("slow");
});
$('.note').on('click', function() {
$('.ttip').hide(500);
$("#background").fadeOut("slow");
$("#large").fadeOut("slow");
});
$("#large").click(function() {
$(this).fadeOut();
});​
CSS
.ttip {
position: absolute;
width: 350px;
height: 100px;
color: #fff;
padding: 20px;
-webkit-box-shadow: 0 1px 2px #303030;
-moz-box-shadow: 0 1px 2px #303030;
box-shadow: 0 1px 2px #303030;
border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
-webkit-border-radius: 8px 8px 8px 8px;
-o-border-radius: 8px 8px 8px 8px;
background-image:-moz-linear-gradient(top, #F45000, #FF8000);
background-image: -webkit-gradient(linear, left top, left bottom, from(#F45000), to(#FF8000));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F45000', endColorstr='#FF8000', GradientType=0);
background-color:#000;
display: none
}
.contents {
font-size: 15px;
font-weight:bold
}
.note {
font-size: 13px;
text-align:center;
display:block;
width: 100%
}
#background{
display: none;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #000000;
z-index: 1;
}
#large {
display: none;
position: absolute;
background: #FFFFFF;
padding: 0px;
z-index: 10;
min-height: 0px;
min-width: 0px;
color: #336699;
}​
HTML
<span class="tooltip_display">Trigger</span>
<div id="large">
<div class="ttip">
<div class="contents">Here goes contents...</div>
<span class="note">(click here to close the box)</span>
</div>
</div>
<div id="background"></div>​
Image of working demo: