The problem is that I cannot use a blurred element inside another blurred element. I have a blurred header backdrop-filter: blur(3px); that has a div with a more blurry background backdrop-filter: blur(50px);, but its now work. Both are blurred by 3px.
I need to save the structure and apply the effect, please tell me how this can be done?
https://jsfiddle.net/q1aymg02/42/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style>
body {
background-image: url(https://image.freepik.com/free-vector/space-game-background-with-landscape-planet_107791-1700.jpg);
}
.header {
backdrop-filter: blur(3px);
padding: 15px;
border: 1px solid #FFF;
}
.header ul a li {
display: inline-block;
padding: 15px 40px;
background: #ffffffb5;
backdrop-filter: blur(50px);
}
</style>
<div class="header">
<ul>
<li>Dont Blured</li>
<li>By 50px</li>
<li>Only 3px</li>
</ul>
</div>
</body>
</html>
The backdrop-filter property in CSS is used to apply filter effects, and this behavior is inherited by all of its children. You might be interested in this approach.
body {
background-image: url(https://image.freepik.com/free-vector/space-game-background-with-landscape-planet_107791-1700.jpg);
}
.header {
backdrop-filter: blur(3px);
padding: 15px;
border: 1px solid #FFF;
}
.header ul a li {
display: inline-block;
padding: 15px 40px;
background: #ffffffb5;
backdrop-filter: blur(50px);
}
.header ul a li::before {
content: "";
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
backdrop-filter: blur(50px);
}
.header ul a li.blured::before {
content: "Dont Blured";
}
.header ul a li.by--50px::before {
content: "By 50px";
}
.header ul a li.only--3px::before {
content: "Only 3px";
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="header">
<ul>
<li class="blured">Dont Blured</li>
<li class="by--50px">By 50px</li>
<li class="only--3px">Only 3px</li>
</ul>
</div>
</body>
</html>
I am not sure if this is the result you are looking for, but use can use this approach to blur the li elements
.header ul a li {
filter: blur(1px);
display: inline-block;
padding: 15px 40px;
background: #ffffffb5;
}
It will blur everything, including the text.
Related
I'm struggling to hide the navbar on scroll down. I know how to do it, but just because of some silly mistake I'm unable to do so, and can't figure out what the issue is.
Here's the html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div id="navbar">
<div id="logo">
<a href="#">
<h1>My logo</h1>
</a>
</div>
<ul id="menu">
<li><a class="link-button" href="#">HOME</a></li>
<li><a class="link-button" href="#">ARTICLES</a></li>
<li><a class="link-button" href="#">PROJECTS</a></li>
<li><a class="link-button" href="#">AUTHOR</a></li>
<li><a class="link-button" href="#">CONTACT</a></li>
</ul>
</div>
<div id="welcome">
<h1 id="welcome-text">My Portfolio</h1>
</div>
<div class="container">
</div>
<!-- Here script for hidding navbar on scroll down -->
<script>
window.addEventListener("scroll", function(){
let Navbar = document.getElementById('navbar');
if(window.pageYOffset > 0){
Navbar.classList.add("navbar-scroll");
}else{
Navbar.classList.remove("navbar-scroll");
}
});
</script>
</body>
</html>
And here's the full css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
height: 100vh;
perspective: 1px;
transform-style: preserve-3d;
overflow-x: hidden;
overflow-y: auto;
}
html{
overflow: hidden;
}
#navbar{
position: sticky;
width: 100%;
top: 0;
transition: background 0.5s;
background-color: transparent;
z-index: 2;
}
#navbar #logo{
float: left;
margin: 10px;
}
#navbar #logo a{
font-size: 155%;
color: #ffffff;
text-decoration: none;
}
#navbar ul{
float: right;
justify-content: space-around;
list-style: none;
align-items: center;
padding: 20px;
}
#navbar ul li{
display: inline-block;
}
/* === Here I'm changing the display property of the navbar to none to make it disappear. === */
#navbar.navbar-scroll{
display: none;
}
.link-button{
display: block;
text-align: center;
margin: 0 15px;
font-size: 89%;
color: #ffffff;
text-decoration: none;
}
.link-button::after{
content: '';
display: block;
width: 0;
height: 2px;
margin-top: 2px;
background: #ffffff;
transition: width .3s;
}
.link-button:hover::after{
width: 100%;
transition: width .3s;
}
#welcome{
height: 100vh;
width: 100vw;
box-sizing: border-box;
}
#welcome::before{
content: "";
height: 100vh;
width: 100vw;
top: 0;
left: 0;
background: linear-gradient(#0000008e, #0000008e), url('static/bc22.jpg');
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute;
z-index: -1;
transform: translateZ(-2px) scale(3);
}
#welcome-text{
color: #ffffff;
position: absolute;
top: 50%;
left: 26%;
transform: translate(-50%, -50%);
/* text-align: center; */
font-size: 600%;
}
.container{
background-color: #1f1f1f;
height: 1000px;
}
In the CSS I've also tried changing the background colour of the navbar on scroll (in the #navbar.navbar-scroll), but it ain't working as well. So most probably the error is in the javascript I think.
If there's a better way of hiding the navbar on scroll then that's welcomed as well.
Thanks for your time.
Actually the problem lies under your HTML overflow: hidden;. So when you set your HTML overflow to hidden, the window.addEventListener("scroll", function () {}) will never invoke, because window will never scroll at all. So to fix this you should either remove html{overflow: hidden;} from your styles or add your event listener to listen to your body element instead, which is not recommended.
From your CSS, it seems your goal is to have the body as the scroll container and not <HTML> itself.
Something like this should work as your JavaScript:
document.body.addEventListener("scroll", function(){
let Navbar = document.getElementById('navbar');
if(document.body.scrollTop > 0){
Navbar.classList.add("navbar-scroll");
}else{
Navbar.classList.remove("navbar-scroll");
}
});
Pretty much every tag which can have children can be scrollable if you define it in your CSS. That means you will have to listen to the right element in JS too.
Basically, My subtopics element is hiding, i want subtopics element show once we clicked at Topics element and hide subtopics element again once we clicked at Topics. Just like hide and show elements
I'm trying to use classList with addEventListener when i run code it shows up there is an error which didn't works for me.
I also found out that most of people are using jquery because it's very easy, but for me i want to practice in javascript first.
I'm still looking forward to the situation that works for me. If anyone know how to code with this function please give me some solution thank you very much.
Here is my code please take a look.
var togglemenu = (function () {
var togSubtopics = document.getElementById("subtopics");
togSubtopics.addEventListener("click", function () {
togSubtopics.classList.toggle("show");
});
return {
togglemenu: togglemenu()
};
})();
body {
margin: 0;
}
li, a{
text-decoration: none;
list-style-type: none;
text-decoration-line: none;
color: black;
}
/*main-menu*/
#mainmenu {
position: relative;
}
#mainmenu ul {
margin: 0;
padding: 0;
}
#mainmenu li {
display: inline-block;
}
#mainmenu a {
display: block;
width: 100px;
padding: 10px;
border: 1px solid;
text-align: center;
}
/*subtopics*/
#subtopics {
position: absolute;
display: none;
margin-top: 10px;
width: 100%;
left: 0;
}
.show {
display: block;
}
#subtopics ul {
margin: 0;
padding: 0;
}
#subtopics li {
display: block;
}
#subTopics a {
text-align: left;
}
/*columns*/
#column1, #column2, #column3 {
position: relative;
float: left;
left: 125px;
margin: 0px 5px 0px 0px;
}
/*hover underline*/
#mainmenu li:hover {
text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="index2.css" />
</head>
<body>
<div id="mainmenu">
<ul>
<li>Logo</li>
<li>Home</li>
<li>Topics
<div id="subtopics">
<div id="column1" class="columns">
<ul>
<li>example1</li>
<li>example2</li>
<li>example3</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<script src="index2.js"></script>
</body>
</html>
One possible way to do that:
just onclick - toggle that element's class (add or remove class show)
And in CSS add rules that give display: block to .submenu that is under .show
UPD Before show subitems of any item - make sure that you have hidden other opened submenus
(function () {
var menuElems = document.querySelectorAll("#mainmenu ul > li")
menuElems.forEach(function(elem){
elem.addEventListener("click", function(){
//hide all open submenus
menuElems.forEach(function(e){
e.classList.remove("show");
})
//show the one that is clicked right now
elem.classList.add("show");
}, false)
});
})();
body {
margin: 0;
}
li, a{
text-decoration: none;
list-style-type: none;
text-decoration-line: none;
color: black;
}
/*main-menu*/
#mainmenu {
position: relative;
}
#mainmenu ul {
margin: 0;
padding: 0;
}
#mainmenu li {
display: inline-block;
}
#mainmenu a {
display: block;
width: 100px;
padding: 10px;
border: 1px solid;
text-align: center;
}
/*subtopics*/
.subtopics {
position: absolute;
display: none;
margin-top: 10px;
width: 100%;
left: 0;
}
.show .subtopics{
display: block;
}
.subtopics ul {
margin: 0;
padding: 0;
}
.subtopics li {
display: block;
}
.subTopics a {
text-align: left;
}
/*columns*/
#column1, #column2, #column3 {
position: relative;
float: left;
left: 125px;
margin: 0px 5px 0px 0px;
}
/*hover underline*/
#mainmenu li:hover {
text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="index2.css" />
</head>
<body>
<div id="mainmenu">
<ul>
<li>Logo</li>
<li>Home
<div class="subtopics">
<div id="column1" class="columns">
<ul>
<li>Home_example1</li>
<li>Home_example2</li>
<li>Home_example3</li>
</ul>
</div>
</div>
</li>
<li>Topics
<div class="subtopics">
<div id="column1" class="columns">
<ul>
<li>Topic_example1</li>
<li>Topic_example2</li>
<li>Topic_example3</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<script src="index2.js"></script>
</body>
</html>
UPD
Code that removes show class from menuElems onclick to subtopic
var subtopicElems = document.querySelectorAll(".subtopics ul > li a")
subtopicElems.forEach(function(item){
item.addEventListener("click", function(event){
menuElems.forEach(function(menuElem){
menuElem.classList.remove("show")
})
event.stopPropagation(); //gotta stop bubbling
}, false)
})
about Bubbling and Capturing
I have some text and a YouTube video on my website (aka: http://redstonegaming.com), and it won't let me start the video. Any help would be greatly appreciated. Also, when I set the content div to z-index: 99, it works but my dropdown menu goes under the content. Vice versa.
var rick = false;
var audio = new Audio('rick_roll.mp3');
var kkeys = [],
konami = "38,38,40,40,37,39,37,39,66,65,13";
$(document).keydown(function(e) {
kkeys.push(e.keyCode);
if (kkeys.toString().indexOf(konami) >= 0) {
kkeys = []; // <-- Change here
if (rick == false) {
rick = true;
audio.play();
} else if (rick == true) {
rick = false;
audio.pause(); // <-- another issue
}
}
});
/*Some Fonts Here:*/
#font-face { font-family: Rusty; src: url('BrushScriptStd.otf');}
* {
font-family: Rusty;
font-weight: Lighter;
}
.background
{
background-image: url(0.jpg);
background-attachment: fixed;
background-size: 100% auto;
background-color: f7f7f7;
background-repeat: no-repeat;
background-position:absolute;
}
.menubar {
height: 2.8vw;
opacity: 0.85;
background-color: #CCCCCC;
}
.clearfix:after {
display: block;
clear: both;
}
.menu-wrap {
width: 50%;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
background: #3e3436;
}
.menu {
width: 100%;
margin: 0px auto;
text-align: center;
}
.menu li {
margin: 0px;
list-style: none;
font-family: 'Ek Mukta';
}
.menu a {
transition: all linear 0.15s;
color: #919191;
}
.menu li:hover > a,
.menu .current-item > a {
text-decoration: none;
color: rgba(189, 34, 34, 1);
}
.menu .arrow {
font-size: 0.95vw;
line-height: 0%;
}
.menu > ul > li {
float: middle;
display: inline-block;
position: relative;
font-size: 1.2vw;
}
.menu > ul > li > a {
padding: 0.7vw 5vh;
display: inline-block;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
}
.menu > ul > li:hover > a,
.menu > ul > .current-item > a {
background: #2e2728;
}
.menu li:hover .sub-menu {
display: block;
z-index: 99;
}
.sub-menu {
width: 100%;
padding: 0px 0px;
position: absolute;
top: 100%;
left: 0px;
display: none;
transition: opacity linear 5.8s;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
background: #2e2728;
}
.sub-menu li {
display: block;
font-size: 1.2vw;
}
.sub-menu li a {
padding: 10px 10px;
display: block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
background: #3e3436;
}
.Rusty
{
font-family: "Rusty";
color: rgba(189, 34, 34, 1);
}
.content
{
opacity: .85;
position: relative;
margin: auto;
width: 80%;
z-index: -1;
background-color: #CCCCCC;
padding: 10px;
height: 100%;
}
.menu > ul > .login
{
position: absolute;
top: 0;
right: 0;
}
.video-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
width: 100%;
}
.video-container iframe, .video-container object, .video-container embed {
position:absolute;
top:15;
left:15%;
right:15%;
width: 25vw;
height:25vh;
}
.title
{
text-align: center;
font-size: 7vh;
text-decoration: underline;
-moz-text-decoration-color: inherit;
text-decoration-color: inherit;
}
.feed-column
{
width: 50%;
}
.text-center
{
text-align: center;
}
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://s.ytimg.com/yts/cssbin/www-subscribe-widget-webp-vflj9zwo0.css"
name="www-subscribe-widget" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="script.js"></script>
<link rel="shortcut icon" href="favicon.ico" />
<title>RG - Home</title>
</head>
<body class="background">
<div class="menubar">
<nav class="menu">
<ul class="clearfix">
<li>
<a href="aboutme.html">About Me
<span class="arrow">▼</span></a>
<ul class="sub-menu">
<li>
Gaming
</li>
<li>
Programming
</li>
<li>
YouTube
</li>
<li>
Other
</li>
</ul>
</li>
<li>
Schedule
</li>
<li class="current-item">
<a href="#">
<p class="rusty">RedstoneGaming</p>
</a>
</li>
<li>
Equipment
</li>
<li>
Contact Me
</li>
<li class="login">
Login/Sign Up
</li>
</ul>
</nav>
</div>
<div class="content">
<h1 class="rusty title">ThatRedstoneGuy's Feed</h1>
<div class="feed-column">
<h1 style="font-size: 3vh;" class="rusty text-center">Colortone | Am I colorblind?! | W/Voiceless</h1>
<div class="video-container">
<iframe src="https://www.youtube.com/embed/-egJP-2ShRk?controls=2%20align="></iframe>
</div>
</div>
<div class="feed-column">
</div>
</div>
</body>
</html>
Your <body class="background"> is covering the .content div because you have z-index: -1; on the content class in your css file. You should be safe to just remove it, if not then change it to 1 and add z-index: 2; to your .menubar class.
You can see this in either Firefox or Chrome by using developer tools Inspect Element to see the layout of the page as it is rendered in the browser.
Firefox Inspect Element
Chrome Inspect Element
EDIT:
After playing around for a while I found a solution. The z-index has some relation that I don't completely understand with whether the position is static or relative/absolute. So after experimentation I was able to get the menu to work properly by adding position: relative; to the .menubar class.
Your class specified here:
<div class="content">
is giving you this problem, maybe will conflict with an other same class name defined else where.
If I change this class name then your video works (just for testing purpose I have renamed to contents:
<div class="contents">
Check the diddle here:
https://jsfiddle.net/te8sxvgq/
I need help creating a hamburger menu in javascript. What's the most efficient way to create this without using jquery? The javascript code that I have at the bottom should work but I'm missing something else.
<html>
<head>
<style>
.hamburger {
position: relative;
display: inline-block;
width: 1.25em;
height: 0.75em;
border-top: 0.18em solid #000;
border-bottom: 0.18em solid #000;
}
.hamburger:before {
content: "";
position: absolute;
top: 0.3em;
left: 0px;
width: 100%;
border-top: 0.18em solid #000;
}
</style>
</head>
<body>
<span class="hamburger"></span>
<li>Development</li>
<li>Illustrations</li>
<script type="text/javascript">
var myEl = document.getElementById('hamburger');
myEl.addEventListener('click', function() {
this.classList.toggle('activated');
}, false);
</script>
</body>
</html>
The question was
What's the most efficient way to create this without using jquery?
So pure CSS would be OK, I presume?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Hamburger Menu</title>
<style>
ul {
list-style-type: none;
position: relative;
top: -200px;
transition: all .5s ease;
margin-right: 10px;
}
.nav {
display: none;
}
#nav:checked ~ ul {
top: 0;
}
#nav {
display: none;
}
.navmenu {
position: relative;
display: block;
margin: -1ex 10px -2ex 10px;
padding: 5px 20px;
background: linear-gradient(to right, #445566, #888);
color: #fff;
z-index: 999;
/* The UX expert said so */
cursor: pointer;
}
li {
background: linear-gradient(to right, #445566, #888);
color: white;
padding-left: 5em;
padding-top: 1ex;
margin-left: -30px;
}
</style>
</head>
<body>
<div class="navigation">
<input type="checkbox" id="nav">
<label for="nav" class="navmenu">☰</label>
<ul>
<li>First entry</li>
<li>Second entry</li>
<li>Third entry</li>
<li>Fourth of July entry</li>
</ul>
</div>
</body>
</html>
The positioning is a bit ugly, admitted, but you can finetune yourself.
The navigation-list is over the top first and rolls down when you check the checkbox. The "burger" is in the label element for the checkbox and checking/unchecking the checkbox changes the value of the attribute top of the ul element.
You are right. It should be getElementsByClassName:
var myEl = document.getElementsByClassName('hamburger')[0];
I'm using JQuery to load the contents of a text file into a div however when the content goes beyond the div no scroll bar appears.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<title></title>
<link rel="stylesheet" type="text/css" href="CSS/common.css">
<script src="JS/common.js"></script>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
</head>
<body>
<nav>
<ul id="tabs">
<li>Home</li>
<li>History</li>
<li>The Circuit</li>
<li>Gallery</li>
<li>Further Reading</li>
</ul>
</nav>
<div id="content">
<div id="tabContent1"></div>
<div id="tabContent2"></div>
<div id="tabContent3"></div>
<div id="tabContent4"></div>
<div id="tabContent5"></div>
</div>
</body>
</html>
CSS:
body {
background-color: #EEEEEE;
font-family: Arial,Helvetica;
font-size: small;
height: 100%;
margin: 100px auto 0;
width: 100%;
}
#tabs {
list-style: none outside none;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
top: -98px;
width: 100%;
}
#tabs li {
float: left;
margin: 0 -15px 0 0;
}
#tabs a {
border-bottom: 30px solid #3D3D3D;
border-right: 30px solid transparent;
color: #FFFFFF;
float: left;
height: 0;
line-height: 30px;
opacity: 0.3;
padding: 0 40px;
position: relative;
text-decoration: none;
text-transform: uppercase;
}
#tabs a:hover {
border-bottom-color: #2AC7E1;
opacity: 1;
}
#content {
background: none repeat scroll 0 0 #FFFFFF;
border-top: 2px solid #3D3D3D;
height: 100%;
padding: 2em;
position: fixed;
top: 30px;
width: 98%;
overflow: auto;
}
.activeTab {
border-bottom-color: #3D3D3D !important;
opacity: 1 !important;
}
.img {
}
JQuery:
$('a[name="#tabContent2"]').click(function () {
$("#tab1").removeClass('activeTab');
$("#tab3").removeClass('activeTab');
$("#tab4").removeClass('activeTab');
$("#tab5").removeClass('activeTab');
$(this).addClass('activeTab');
$("#tabContent2").load("external/test2.txt");
$("#tabContent2").show();
$("#tabContent1").hide();
$("#tabContent3").hide();
$("#tabContent4").hide();
$("#tabContent5").hide();
});
How can I get the scroll bar to appear?
#tabs {
overflow: scroll;
}
overflow controls how content is hidden. If set to hidden it will be hidden with no scroll bars. You want scroll to add the appropriate scroll bar.
Overflow is visible but just it overflowed by padding:
#content {
background: none repeat scroll 0 0 #FFFFFF;
border-top: 2px solid #3D3D3D;
height: 100%;
padding: 2em 0 0 2em; /*<--change to this*/
position: fixed;
top: 30px;
width: 98%;
overflow: auto;
}
Try to use the famous micro clearfix instead of overflow: auto;
/*The famous micro clearfix*/
.group:before,
.group:after,
.group:before,
.group:after {
content: " ";
display: table;
}
.group:after,
.group:after {
clear: both;
}
.group,
.group {
*zoom: 1;
}
And for your jQuery, that can be a lot shorter and, arguable, more readable like this:
$('a[name="#tabContent2"]').click(function () {
$(this).parent().parent().find("a").removeClass("activeTab");
$(this).addClass('activeTab');
$("#content > div").hide();
$("#tabContent2").load("external/test2.txt");
$("#tabContent2").show();
});