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)
})
}
I'm setting up some jQuery to check if a hotspot is visible on the screen to determine if a help message displays on screen or not. If the hotspot is visible it should not display the help message at all.
So far I've got some script to turn off the help message if you hover the hotspot after the help message fades in. However, I'm unsure how to check before the help message fades in if the hotspot has been hovered.
The main reason for this functionality is that both messages are in the same place on the page and at the moment it creates a stacking effect.
Please find my script along with an example of the issue so far below.
If you hover over the hotspot and then refresh the window with the cursor still on the hotspot you should see my problem.
$(document).ready(function() {
$('.ws-hotspot').hover(function(){
console.log("appeared");
$('#ws-hotspot-helper').css('display', 'none');
$(this).find(".ws-hotspot-view-more").animate({opacity: 0.8, marginLeft: "26px"},200);
},function(){
$('#ws-hotspot-helper').css('display', 'none');
$(this).find(".ws-hotspot-view-more").stop().animate({opacity: 0, marginLeft: "22px"},50);
});
function hotspotHelper(){
if(!$('#ws-hotspot-one .ws-hotspot-view-more').css('opacity') == 0.8){
console.log("appeared");
$('#ws-hotspot-helper').css('display', 'none');
}
else {
$('#ws-hotspot-helper').delay(1000).fadeIn(1000).delay(5000).fadeOut(1000);
};
};
$(hotspotHelper);
});
.ws-hotspot{
z-index: 9999;
position:absolute;
background:blue;
width:55px;
height:55px;
}
#ws-hotspot-helper{
background:yellow;
background-repeat: no-repeat;
background-position: 1px -22px;
display: none;
min-width: 130px;
padding: 0.37rem;
padding-left: 1rem;
position: absolute;
top: calc(16% + 9px);
left: calc(58% + 27px);
border-radius: 3px 10px 10px 3px;
border: 1px solid #c5c5c5;
border-width: 1px 1px 1px 0px;
font-size: 0.95rem;
color: #58595b;
}
#ws-hotspot-helper span#ws-hotspot-helper-arrow{
margin-left: 10px;
margin-right: 3px;
font-weight:400;
font-size:1rem;
}
.ws-hotspot .ws-hotspot-view-more{
display: inline-block;
opacity: 0;
background:yellow;
background-repeat:no-repeat;
background-position: 2px -22px;
margin-left: 24px;
margin-top: 9px;
min-width: 80px;
padding: 7px;
padding-left: 25px;
font-size: 0.87rem;
border-radius: 3px 10px 10px 3px;
border:1px solid #c5c5c5;
border-width:1px 1px 1px 0px;
color:#58595b;
text-align:center;
}
.ws-hotspot#ws-hotspot-one{
top: 16%;
left: 58%;
}
#red-box{
position:relative;
background:red;
width:100%;
height:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="red-box">
<span id="ws-hotspot-helper"><span id="ws-hotspot-helper-arrow">◀ </span>find out more</span>
<span class="ws-hotspot" id="ws-hotspot-one"><span class="ws-hotspot-view-more">view more</span></span>
</div>
So I found that the .fadeIn() would still run on the ws-hotspot-helper element after the .delay() despite the if statement setting it to display none. Therefore I switched out the line:
$('#ws-hotspot-helper').css('display', 'none');
For
$('#ws-hotspot-helper').remove();
This solved the problem instantly as it simply takes it out of the page on hover of the "view more" element.
Hope I helped someone out by replying to this.
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
Please take a look at this JSFiddle:
https://jsfiddle.net/a08vkmew/light/
I created a compass with CSS/Html/Javascript that reacts to horizontal mouse movement on the page.
If you move the mouse slowly you will see that the lines change their width slightly which results in a flickering appearance of the compass.
I think this effect occurs when a line does not exactly match up with the according pixels on the screen, so that only half the width of the line can be shown.
In some GUI frameworks we can choose to display the GUI as pixel perfect. Is something like this possible within CSS?
HTML
<div id="compass-container">
<div class="arrow down"></div>
<div class="arrow up"></div>
<div id="viewport">
<div id="compass-scale">
</div>
</div>
</div>
CSS
div#compass-container {
position:relative;
height: 6em;
}
div#viewport{
position:relative;
height:40%;
width:50%;
left:50%;
top:1.2em;
margin-left:-25%;
overflow: hidden;
}
div#compass-scale {
position:relative;
width: auto;
height: 100%;
}
.mini-container {
width:1em;
height:95%;
top:0em;
border: 0px solid black;
float:left;
}
.line {
position: relative;
left:45%;
width:.1em;
background-color:black;
}
.line.small {
height: 15%;
}
.line.medium {
height: 30%;
}
.line.big {
height: 45%;
}
.compass-text {
position:relative;
height:100%;
width:100%;
margin-top:.4em;
text-align: center;
font-family: sans-serif;
color:dodgerblue;
}
.compass-text.small {
font-size: .6em;
}
.compass-text.big {
font-size: .8em;
}
.arrow {
position:absolute;
width: 0;
height: 0;
left:50%;
}
.arrow.up {
margin-left:-1em;
border-left: 1em solid transparent;
border-right: 1em solid transparent;
border-bottom: 2em solid dodgerblue;
bottom: 0em;
}
.arrow.down {
margin-left:-0.5em;
border-left: 0.5em solid transparent;
border-right: 0.5em solid transparent;
border-top: 1em solid dodgerblue;
top: 0em;
}
I need help about resize avatar image into a smaller one in a fixed header navbar. I created this DEMO from codepen.io
When you scroll down on the page then the navbar to be a fixed. But i want to add a avatar in a navbar when scroll down like twitter. Anyone can help me here ?
JQuery
$(document).ready(function() {
$('.globalHeader').scrollToFixed();
$('.footer').scrollToFixed( {
bottom: 0,
limit: $('.footer').offset().top
});
var summaries = $('.summary');
summaries.each(function(i) {
var summary = $(summaries[i]);
var next = summaries[i + 1];
summary.scrollToFixed({
marginTop: $('.globalHeader').outerHeight(true) + 10,
limit: function() {
var limit = 10;
if (next) {
limit = $(next).offset().top - $(this).outerHeight(true) - 10;
} else {
limit = $('.footer').offset().top - $(this).outerHeight(true) - 10;
}
return limit;
},
zIndex: 0
});
});
$('#sponsor').scrollToFixed({
marginTop: $('.globalHeader').outerHeight(true) + 10,
limit: function() {
var limit = $('.footer').offset().top - $('#sponsor').outerHeight(true) - 10;
return limit;
},
minWidth: 1000,
zIndex: 999,
fixed: function() { },
dontCheckForPositionFixedSupport: true
});
$('#sponsor').bind('unfixed.ScrollToFixed', function() {
if (window.console) console.log('sponsor preUnfixed');
});
$('#sponsor').bind('unfixed.ScrollToFixed', function() {
if (window.console) console.log('sponsor unfixed');
$(this).css('color', '');
$('.globalHeader').trigger('unfixed.ScrollToFixed');
});
$('#sponsor').bind('fixed.ScrollToFixed', function() {
if (window.console) console.log('sponsor fixed');
$(this).css('color', 'red');
$('.globalHeader').trigger('fixed.ScrollToFixed');
});
});
CSS
.globalHeader {
z-index: 90;
background-color: #323949;
position: fixed;
width: 100%;
border-bottom: 1px solid #3f4858;
color: #fff;
font-size: 40px;
font-family: arial, sans-serif;
-webkit-box-shadow: 0px 0px 5px #000000;
-moz-box-shadow: 0px 0px 5px #000000;
box-shadow: 0px 0px 5px #000000;
}
.globalHeader_in {
z-index: 99999;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: relative;
min-width: 960px;
width: 100%!important;
max-width: 1580px;
height: 52px;
left: 0;
top: 0;
padding: 0 20px 0 15px;
margin: auto;
}
.profile-kapak-alani {
width:100%;
height:385px;
background-position: center top;
background-size: 100% auto;
background-size:cover;
border-bottom:1px solid #3f4858;
background: #323949 url(icons/genis.png) repeat 0 0;
}
.profil-kapak-profil-resim {
width:900px;
height:385px;
margin:0px auto;
}
.profil-kapak {
width:900px;
height:385px;
overflow:hidden;
}
.profil-kapak img {
width:900px;
}
.profil-ana-etki-alani{
width: 900px;
margin: auto;
padding: 52px 30px 0;
overflow:hidden;
border-radius:3px;
-webkit-border-radius:3px;
-o-border-radius:3px;
-moz-border-radius:3px;
}
.kullanici-profil-fotografi-alani {
float:left;
width:200px;
height:200px;
margin-top:-110px;
margin-left:30px;
position:absolute;
padding:8px;
z-index:5;
background-color: rgba(50, 57, 73, 1);
border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
-moz-border-radius:5px;
box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.2), 0 0 8px rgba(0, 0, 0, 0.5) inset;
}
.kullanici-profil-fotografi-alani span {
display: inline-block;
overflow: hidden;
vertical-align: middle;
-webkit-border-radius:5px;
-o-border-radius:5px;
-moz-border-radius:5px;
}
.profil-fotografini-degistir {
position:absolute;
width:55px;
height:35px;
margin-top:-38px;
margin-left:4px;
}
.link-abonelik-takipci-fotograf-takip {
width:100%;
height:60px;
position:relative;
border-bottom:1px solid #3f4858;
background-color: #323949;
border-top:1px solid #3f4858;
box-shadow: 0 -7px 5px -6px #000000;
-webkit-box-shadow: 0 -7px 5px -6px #000000;
-moz-box-shadow:0 -7px 5px -6px #000000;;
-o-box-shadow:0 -7px 5px -6px #000000;;
}
.la-t-f-t {
width:900px;
height:60px;
margin:0px auto;
}
.ll-p-t{
float:right;
width:630px;
height:60px;
}
.pay-t{
float:left;
width:88px;
height:60px;
padding-left:15px;
padding-right:15px;
}
.pay-t-t {
font-weight:normal;
color:#9aa2ae;
font-family: Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size:11px;
margin-top:10px;
float:left;
width:88px;
text-align:center;
}
.p-t-t-a{
font-weight:bold;
color:#9aa2ae;
font-family: Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size:18px;
text-align:center;
margin-top:8px;
float:left;
width:88px;
}
#navbar {
position: absolute;
width:100%;
height:60px;
}
.main-content{
width:100%;
height:auto;
overflow:hidden;
background-color:red;
}
.content{
margin:0px auto;
width:900px;
height:900px;
}
.footer {
background-color: #eee;
padding: 0px;
clear: both;
}
.footer.scroll-to-fixed-fixed {
color: red;
}
For the large background image, you can simply use $(window).scroll() to slow down the scrolling. You also need to set your content to position: relative so it sits above the overflowing background image (since it will scroll at a much slower rate). But your nav bar has a dynamically added z-index:auto which will then cause it to sit behind your content (probably from the plugin) so you'll have to use !important on your #navbar's z-index:
JS
$(window).scroll(function(){
var scrolled = $(this).scrollTop();
$(".profil-kapak").css({"top":(scrolled*0.7)+"px"});
});
CSS
#navbar {
position: absolute;
width:100%;
height:60px;
z-index: 4 !important; //add, need to override the plugin
}
.main-content{
width:100%;
height:auto;
overflow:hidden;
background-color:red;
position: relative; //add
}
For the mini profile look, you can set up the container in your nav bar set to display: none and do a simple fade in/out with the bigger one when the nav bar get's fixed:
HTML
<div class="mini-profile-wrapper">
<div class="mini-profile-img">
<img src="http://www.designbolts.com/wp-content/uploads/2013/11/Frozen-Movie-poster-payoff-Wallpaper-HD1.jpg">
</div>
<p class="profile-name">John Doe</p>
</div>
CSS
.mini-profile-wrapper{
display: none;
float: left;
}
.mini-profile-img{
display: inline-block;
width: 80px;
padding: 5px 5px 0 0;
overflow: hidden;
vertical-align: middle;
}
.mini-profile-img img{
max-width: 100%;
display: inline-block;
}
.mini-profile-wrapper .profile-name{
display: inline-block;
vertical-align: middle;
font-weight:normal;
color:#FFF;
font-family: Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size:20px;
}
You can Use pre-existing JS function
$('#navbar').bind('unfixed.ScrollToFixed', function() {
...
$(".kullanici-profil-fotografi-alani").fadeIn();
$(".mini-profile-wrapper").fadeOut();
});
$('#navbar').bind('fixed.ScrollToFixed', function() {
...
$(".kullanici-profil-fotografi-alani").fadeOut();
$(".mini-profile-wrapper").fadeIn();
});
CODEPEN
Twitter is doing some interesting things in this case. The container #1 for the small avatar is in the navigation bar all the time in the same place. That avoids messing around with the placement of the avatar and any other outside elements.
The content of this container #1 is container #2 and has a given height and in its not-fixed state a padding-top of the same value. And because of the overflow: hidden, the inner content (avatar, texts) gets cut of.
As soon as the navigation bar gets fixed, the padding-top of container #2 is set from the height to 0, and thanks to a CSS transition, we have a nice animation. In addition, the big avatar get animated away.
Conclusion: Make the smaller version and place in a spot where you want. Keep this position all the time and just change its visibility. Can be the way described above, can also just be a simple visibility: hidden. Be creative. And then, when you fix your navigation, simply show the small avatar, and hide it, when its going to be unfixed.