The Problem:
I have a set of "tabs" for navigation that I want to add a "mask" class to the tab that is active..My goal is to reveal the BODY's background color and/or background image of the page, but only with this "active" tab. Since the body's background page is dynamic and always changing, I can't simply add a background color to the "active tab" and call it a day. I have to use a different technique (javascript is last resort, I want to do this w/ CSS only).
Requirments:
I can't use an image for the mask because the "tab"
widths are css displayed w/ flexbox and stretch across the page.
I have to use a solution that masks ELEMENTS only... In this case:
<div class="mask"></div>
I can't rearrange the HTML structure below.. I have to work w/
this layout.
Is this possible w/ the css mask or is there a better way to achieve this with a different css technique?
Fiddle: https://jsfiddle.net/oneeezy/7mj8voL8/
CODE:
* { margin: 0; padding: 0; box-sizing: border-box; }
/* Body */
body { background-color: rgb(0, 121, 191); }
/* Header */
h1 { color: white; }
header { background-color: rgba(0,0,0, .15); padding: 20px 20px 0; }
header nav { display: flex; }
header nav div { flex: 1; color: white; background: rgba(0,0,0, .1); margin: 10px 10px 0; padding: 10px; border-radius: 10px 10px 0 0; }
/* Mask (without image?) */
header nav div.mask { background: rgba(0,0,0, .1); } /* Can mask reveal background color? */
/* Main */
main { padding: 20px 20px 0; }
h2 { color: rgba(0,0,0, .54); }
<header>
<h1>Logo</h1>
<nav>
<div class="mask">Link (mask)</div>
<div class="">Link</div>
<div class="">Link</div>
</nav>
</header>
<main>
<h2>CSS Masking</h2>
<p>Possible to css mask without an image? Hmmmmmm.......</p>
<p>I want to reveal the color of the BODY's background on the DIV that has the class "mask"</p>
</main>
If there is always an active element , and only one active element, you can set a shadow on it that gets the desired effect (instead of the background on the header)
* { margin: 0; padding: 0; box-sizing: border-box; }
/* Body */
body { background: repeating-linear-gradient(90deg, lightblue 0px, lightgreen 100px); }
/* Header */
h1 { color: white; }
header { padding: 20px 20px 0; }
header nav { display: flex; }
header nav div { flex: 1; color: white; background: rgba(0,0,0, .1); margin: 10px 10px 0; padding: 10px; border-radius: 10px 10px 0 0; }
/* create a shdow on the underlying element, reset the default bkg */
header nav div.mask {
box-shadow: 0px -1000px 0px 1000px rgba(0,0,0, .1);
background-color: transparent;
}
/* Main */
main { padding: 20px 20px 0; }
h2 { color: rgba(0,0,0, .54); }
<header>
<h1>Logo</h1>
<nav>
<div class="mask">Link (mask)</div>
<div class="">Link</div>
<div class="">Link</div>
</nav>
</header>
<main>
<h2>CSS Masking</h2>
<p>Possible to css mask without an image? Hmmmmmm.......</p>
<p>I want to reveal the color of the BODY's background on the DIV that has the class "mask"</p>
</main>
Related
I have some content which can have only specific height (no more), and I added some scroll on that content.
This is my CSS:
.value {
max-height: 60px;
overflow-y: auto;
color: black;
font-size: 16px;
}
/* width */
.value::-webkit-scrollbar {
width: 3px;
}
/* Track */
.value::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgb(163, 163, 163);
border-radius: 5px;
}
/* Handle */
.value::-webkit-scrollbar-thumb {
background: linear-gradient(60deg, #b95aca, #8c15ad);
border-radius: 5px;
}
And This is my Subtitle content:
<div
class="value"
*ngIf="courseData.sub_title"
> {{courseData.sub_title}}
</div>
This is the image:
So, when I want to scroll down or up using mouse wheel it's scrolling too much and user can not be able read full text (part of text was going up or down with scrolling).
How can I change scroll step?
Trying to make my tooltips show and hide on click. I managed to do it with the first tooltip but this doesn´t work for the others.
I know that the problem might be with the code document.getElementById but I don´t know with which code I have to replace that, so that every tooltip gets triggered one after the other when clicked.
How can I manage that all the tooltips are shown and hidden as the first one?
Thanks for your support! ;)
//Showing the tooltip on click
document.getElementById("website-tooltip-container").addEventListener("click", function() {
var element = document.getElementById("test");
element.classList.add("website-tooltiptext-visible");
});
//Removing tooltip when clicked outside tooltip container or outside tooltip itself
document.addEventListener('mouseup', function(e) {
var container = document.getElementById('test');
if (!container.contains(e.target)) {
container.classList.remove("website-tooltiptext-visible");
}
});
/* Tooltip Container */
.website-tooltip {
position: relative;
display: flex;
justify-content: center;
cursor: pointer;
font-family: Roboto;
font-size: 18px;
font-weight: 400;
color: #666;
}
/* Tooltip text */
.website-tooltip .website-tooltiptext {
visibility: hidden;
max-width: 350px;
font-family: open sans;
font-size: 13px;
line-height: 22px;
background-color: #FFFFFF;
color: #666;
text-align: left;
padding: 11px 15px 11px 15px !important;
border-radius: 3px;
box-shadow: 0px 5px 10px -2px rgba(0, 0, 0, 0.5);
/* Position the tooltip text */
position: absolute;
z-index: 1;
top: 100%;
margin: 0px 0px 0px 0px;
}
/* Show the tooltip text when you mouse over the tooltip container */
.website-tooltip:hover .website-tooltiptext {
visibility: visible;
}
/* Hide when hovering over tooltip div */
div.website-tooltiptext:hover {
display: none;
}
/* Toggle this class to show Tooltip on click via Javascript */
.website-tooltiptext-visible {
visibility: visible !important;
display: block !important;
}
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 1</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 2</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 3</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 4</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
Thanks for your help!
This question got answered in a similar question I made.
Here the link to the question also in stackoverflow
There you will find deeper insights and possible solutions for tooltips via JavaScript or :hover pseudo class.
I have a working scrollbar using Bootstrap scrollspy but can't figure out how to change the color of the bar (thumb?).
HTML:
<body>
<div class="container, scrollbar" id="myScrollspy">
<div class="panel-group" id="accordion">
...
CSS:
.scrollbar::-webkit-scrollbar-track
{
border-radius: 10px;
background-color: #F5F5F5;
}
.scrollbar::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
.scrollbar::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-color: #D62929;
}
This isn't changing the color of the bar in the scrollbar. Is there something different in the way bootstrap styles a scrollbar?
If you need to change the color of scrollbar thumb this will be helpful.Be more specific with a sample code or a screenshot.
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
I built a navbar in HTML and also some Divs which are populated with a bunch of content that pertains to each nav element.
What I want to do is show the div which pertains to the selected nav element when it is clicked and hide the other divs that pertain to the other nav elements.
Basically what needs to happen is when a user clicks on a Nav Item, the class for that nav item needs to be set to 'navItem active on' in the html. Not sure if this is something that happens automatically or not.
After that, the display property defined in the CSS for the content panel of that nav item needs to be changed to 'block' and all other content panels should then have their 'display' property changed to 'none' so that they are not displayed in the page.
In the example given, I only have two content panels defined in the CSS and HTML (Capabilities and Tutorials), but each navItem will receive it's own content panel which should be toggled on when it is clicked.
I really have no idea where to begin with this. I'm pretty sure this requires JavaScript but this is literally my first attempt at building a web page and it took me 2 days even after copying a lot from another website I used for inspiration. Any help, guidance or insight is greatly appreciated.
CSS + HTML:
var links = document.getElementsByClassName("navItem");
for (i = 0; i < links.length; i++) {
var link = links[i];
link.addEventListener('click',function(sender, event) {
event.preventDefault();
/* hide all panels */
var panels = document.getElementsByClassName("panel");
for (j = 0; j < panels.length; j++) {
panels[j].style.display = 'none';
}
/* Show the selected panel */
var panel_id = sender.target.getAttribute("panel-id");
document.getElementById(panel_id).style.display = 'block';
}
}
/* FONT ASSIGNMENTS
--------------------------- */
/* General Use */
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
p,
small {
font-family: 'Avenir LT W01 35 Light', Arial, Helvetica, sans-serif;
}
p.large-text {
font-size: 18px !important;
}
hr {
background-color: #e0e0e0;
color: #e0e0e0;
}
.center-content {
text-align: center !important;
}
/* Special Use */
h1,
h2,
h1 a,
h2 a,
h3,
h3 a,
infoBar,
.gisFont1,
.gisFont1 a {
font-weight: normal !important;
font-style: normal;
line-height: normal;
font-variant: normal;
font-family: 'Avenir LT W01 35 Light', Arial, Helvetica, sans-serif;
}
/*-- END FONT ASSIGNMENTS --*/
/* INFOBAR - The Infobar is the navigation element at the top
used to navigate the subpages of the document and change the content
panel's content depending on the selected infoBar navigation element
--------------------------- */
/* infoBar Bottom Border */
#infoBar {
background: #FFF;
/*border-top: 1px solid #e5e5e5;*/
border-bottom: 1px solid #e5e5e5;
max-width: 940px;
text-align: center;
/*display: table;*/
margin: 0 auto;
}
/* infoBar Bottom Border onHover or Active element*/
#infoBar a:hover,
#infoBar a.active {
border-bottom: 4px solid #2889DE;
text-decoration: none;
}
/* infoBar Link Text */
#infoBar a {
background: transparent;
color: #000;
display: inline-block;
font-size: 16px;
font-family: 'Avenir LT W01 35 Light', Arial, Helvetica, sans-serif;
padding: 1.4em;
text-decoration: none;
}
/* infoBar Link Text onHover */
#infoBar a:Hover {
background: transparent;
color: #2889DE;
display: inline-block;
font-size: 16px;
font-family: 'Avenir LT W01 35 Light', Arial, Helvetica, sans-serif;
padding: 1.4em;
text-decoration: none;
}
/* infoBar Active element */
#infoBar a.active {
font-family: 'Avenir LT W01 65 Medium', Arial, Helvetica, sans-serif;
}
/* Media Queries */
#media screen and (max-width: 960px) {
#infoBar a {
font-size: 14px;
}
}
#media screen and (max-width: 830px) {
#infoBar a {
padding: 1em 0.6em;
}
}
#media screen and (max-width: 760px) {
#infoBar {
display: none;
}
}
/*-- END INFOBAR --*/
/* PAGE SECTIONS
--------------------------- */
/* Page Section Styling */
.page-section {
background-position: center top;
color: #4d4d4d;
min-height: 200px;
padding: 60px 0;
text-align: center;
width: 940px;
margin: auto;
}
/* Page Section - Header2 Styling */
.page-section h2 {
font-size: 24px;
margin-bottom: 20px;
}
/* Page Section Paragraph Styling */
.page-section p {
color: #333;
font-size: 18px;
line-height: 1.5;
/*margin: 10px 0 45px 0;*/
}
/* Foreword-Section-Top Styling */
.foreword-section-top {
padding: 0;
min-height: 160px;
}
/* Foreword-Section-Top Header1 Styling*/
.foreword-section-top h1 {
color: #222;
font-size: 36px;
}
/* Foreword-Section-Top Paragraph Styling */
.foreword-section-top p {
color: #4d4d4d;
margin-bottom: 10px;
}
.grid-100 {
width: 100%;
margin: auto;
}
/* CONTENT PANELS
----------------------------- */
/* Capabilties Panel*/
#capabilities-panel {
max-width: 980px;
margin: 0 auto;
display:block;
}
/*Tutorials Panel */
#tutorials-panel {
max-width: 980px;
margin: 0 auto;
display:none;
}
.product-row {
margin-bottom: 50px;
/*width: 100%; */
max-width: 940px;
margin: 0 auto;
display: inline-block;
}
.product-box {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
float: left;
overflow: hidden;
margin: 0.5%;
position: relative;
text-align: center;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
width: 24%;
}
#media screen and (max-width: 960px) {
.product-box {
width: 48%;
}
}
#media screen and (max-width: 480px) {
.product-box {
display: block;
float: none;
margin: 10px auto;
width: 95%;
}
}
.product-box a {
color: #FFF;
display: block;
font-weight: bold;
}
.product-box a:hover .inner-box-padding {
position: relative;
width: 100%;
-ms-transform: scale(1.1);
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.product-box .inner-box-padding {
background-color: #007ac2;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
-ms-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
width: 100%;
}
.product-box .inner-box-padding:before {
content: "";
display: block;
padding-top: 87%;
}
.product-box h3 {
font-size: 22px;
color: #FFF;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
.product-box.dark-text h3 {
color: #333;
}
.product-box .capability-one {
background-image: url('http://i64.tinypic.com/2mi16l1.png');
}
.product-box .capability-two {
background-image: url('http://i68.tinypic.com/10gwm75.png');
}
.product-box .capability-three {
background-image: url('http://i65.tinypic.com/5djxwh.png');
}
.product-box .capability-four {
background-image: url('http://i67.tinypic.com/15e7hu8.png');
}
.product-box .tutorial-one {
background-image: url('http://i68.tinypic.com/efhvfc.png');
}
.product-box .tutorial-two {
background-image: url('http://i66.tinypic.com/50199u.png');
}
.product-box .tutorial-three {
background-image: url('http://i63.tinypic.com/wvwcif.png');
}
.product-box .tutorial-four {
background-image: url('http://i67.tinypic.com/1zp1or8.png');
}
/* END PRODUCT BOXES */
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- include jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<!-- INFO BAR -->
<div id="infoBar">
Capabilities
Tutorials
Use Cases
Services
Security
What's New
Request Access
</div>
<!-- END GIS INFO BAR -->
<!-- FOREWORD -->
<div class="page-section foreword-section-top">
<h1>Some Cool Tagline</h1>
<p>blah blah blah. We're so awesome. Now give us money.</p>
</div>
<!-- CAPABILITIES PANEL -->
<div id="capabilities-panel" class="panel">
<!-- Capability One -->
<div class="product-box">
<a href="/capabilities/capability-one">
<div class="inner-box-padding capability-one"></div>
<h3>Capability 1</h3>
</a>
</div>
<!-- Capability Two box -->
<div class="product-box dark-text">
<a href="/capabilities/capability-two">
<div class="inner-box-padding capability-two"></div>
<h3>Capability 2</h3>
</a>
</div>
<!-- Capability Three box -->
<div class="product-box">
<a href="/capabilities/capability-three">
<div class="inner-box-padding capability-three"></div>
<h3>Capability 3</h3>
</a>
</div>
<!-- Capability Four box -->
<div class="product-box">
<a href="/capabilities/capability-four">
<div class="inner-box-padding capability-four"></div>
<h3>Capability 4</h3>
</a>
</div>
</div>
<!-- END CAPABILITIES PANEL -->
<!-- TUTORIALS PANEL -->
<div id="tutorials-panel" class="panel">
<!-- Tutorial One box -->
<div class="product-box">
<a href="/tutorials/tutorial-one">
<div class="inner-box-padding tutorial-one"></div>
<h3>Tutorial 1</h3>
</a>
</div>
<!-- Tutorial Two box -->
<div class="product-box dark-text">
<a href="/tutorials/tutorial-two">
<div class="inner-box-padding tutorial-two"></div>
<h3>Tutorial 2</h3>
</a>
</div>
<!-- Tutorial Three box -->
<div class="product-box">
<a href="/tutorials/tutorial-three">
<div class="inner-box-padding tutorial-three"></div>
<h3>Tutorial 3</h3>
</a>
</div>
<!-- Tutorial Four box -->
<div class="product-box">
<a href="/tutorials/tutorial-four">
<div class="inner-box-padding tutorial-four"></div>
<h3>Tutorial 3</h3>
</a>
</div>
</div>
<!-- END TUTORIALS PANEL -->
Pretty sure that this might do something like you'd want.
There are more elegant pieces of code (not to mention that there should be loads of plugins) for this though, this is just out of the top of my head (dont use $.attr to find the corresponding panel etc).
$(document).ready(function(){
$(".navItem").click(function(event) {
event.preventDefault();
$('.navItem').removeClass("active").removeClass("on");
$(this).addClass("active").addClass("on");
var panel = $(this).attr('panel-id');
$(".panel").hide();
$("#"+panel).show();
});
});
In order to use this script you need to import jQuery into your page though, which literally putting 1 line in your page (just google that).
You need to give every panel the class panel (i.e. instead of just the 'id' attribute. This will allow for the $(".panel") to find all html that is in a
The var panel = $(this).attr('panel-id'); line finds the panel belonging to the anchor the user clicked, as long as you add an attribute to each anchor containing the id of the corresponding panel as the value (e.g. <a (..) panel-id="capabilities-panel">)
=======
Updated answer so OP can use vanilla javascript per his request.
(function () {
alert('hello');
var links = document.getElementsByClassName("navItem");
for (i = 0; i < links.length; i++) {
var link = links[i];
link.addEventListener('click',function(event) {
event.preventDefault();
for(int k = 0; k < links; k++) {
links[k].className = "navItem";
}
event.target.className += " active on";
var panels = document.getElementsByClassName("panel");
for (j = 0; j < panels.length; j++) {
panels[j].style.display = 'none';
}
var panel_id = event.target.getAttribute("panel-id");
document.getElementById(panel_id).style.display = 'block';
});
}
})();
I haven't tested this so there's probably some syntactic errors here and there, and Im not too sure how one gets the sender element from a click event in vanilla javascript (though this shouldn't be too hard to google).
You need to put scripts in between <script></script> tags in order for your browser to recognize javascript.
Note how the number of lines and readability decreased by abandoning jQuery.
Hope this helps you!
Also, if this is just not working for you I recommend checking out the link the other guy posted under your question.
I'm trying to have my header change opacity when you scroll down say aproximatly 500px down. I'm making a single page with a header infront of a bxslider so when I scroll down the opacity should increase for the header because the text still needs to be readable.
http://ironsummitmedia.github.io/startbootstrap-scrolling-nav/
I'd like something like this but I find it very hard to edit
I already tried to look for answers here but only thing close to this is: Header changes as you scroll down (jQuery) or Fade opacity when scrolling but the one doesn't work for me and the other is to hard to understand and change
<header class="main-header">
<img src="images/logo.png"/>
<nav>
<a id="active" href="#Platenbeurs">Platenbeurs</a>
Voorstelling
Planning
Grondplan
Praktische Info
Bestel
</nav>
</header>
EDIT
Here is the css code to see that the header is actualy not opacity 1.
.main-header{ position: fixed; max-width: 1024px; width: 100%; height: 100px; padding: 1%; text-align: right; background: rgba(255,255,255,0.2); border-top: 5px solid black; border-bottom: 5px solid black; }
.main-header nav a{ color: white; text-decoration: none; opacity: 1; }
If fixed it myself...
HTML
<header class="main-header clearfix">
<img src="images/logo.svg"/>
<nav>
Platenbeurs
Voorstelling
Artiesten
Planning
Grondplan
Praktische Info
Bestel
</nav>
</header>
CSS
.main-header{
position: fixed;
width: 100%;
z-index: 101;
padding: 15px;
text-align: right;
background-color: rgba(0,0,0,0.2);
border-top: 5px solid black;
}
.main-header nav a{
color: white;
text-decoration: none;
opacity: 1;
}
Javascript
$(window).scroll(function(event){
if($(document).scrollTop() > 300){
if(header.data('opacity') == 'start'){
header.data('opacity','scrolled');
header.css("background", "rgba(0,0,0,1)");
}
}else{
if(header.data('opacity') == 'scrolled'){
header.data('opacity','start');
header.css("background", "rgba(0,0,0,0.2)");
}
}
});
The opacity off the header is already 1. You can't increase the opacity, instead you can set the background color for header on scroll. Please refer the following snippet: http://jsfiddle.net/uy25hw21/