Why don't my :active' or :checked selectors work? - html

I have a hidden sidebar menu on my website, if I open my website on my desktop, my hidden sidebar has 100px width (not full), so to reveal it all you must do is hover over it. If I open my website on a mobile device, my hidden sidebar has no width, and I must click the button to reveal the sidebar.
HTML:
<div id="mySidenav" class="sidenav sidenav-wrapper">
<img class="logo1" src="../img/logo1.png"><br><br>
Home
About
Contact
</div>
<div id="contoh" class="content-section-b">
<div class="mobiletoggle">
<label class="fa fa-bars" for="showblock"></label>
<input type="checkbox" id="showblock" />
</div>
</div>
In the code above I use checkbox to change 'click', because I just want to use CSS.
CSS:
.sidenav {
height: 100%;
width: 100px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
transition: 0.8s;
}
.logo1 {
height: 10%;
width: auto;
padding-left: 20px;
transition: 0.8s;
}
.sidenav:hover {
width: 250px;
transition: 0.8s;
}
.sidenav:hover ~ #contoh {
background-color: rgba(0,0,0,0.4);
filter: grayscale(100%);
}
.sidenav:hover .logo1 {
height: auto;
width: 95%;
padding-left: 10px;
transition: 0.8s;
}
.sidenav a {
float:left;
width:100%;
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
opacity: 0;
transition: opacity 1300ms
}
.sidenav a:hover, .offcanvas a:focus {
color: #f1f1f1;
background-color:#5fa2db;
font-size: 30px;
}
#showblock {
display: none;
}
#media screen and (min-width:768px) {
.mobiletoggle {
display:none;
}
}
#media screen and (max-width:767px) {
.sidenav {
width:0px;
}
#showblock:checked + .sidenav {
width: 250px;
transition: 0.8s;
}
}
In the code above I used :checked, it's just a little bit different if I use :active. The problem is why my :checked/:active did not work? I looked into this jsFiddle, and it works fine, so why can't I use it? Any suggestions?

As per your CSS, modify your HTML to:
<input type="checkbox" id="showblock">
<div id="mySidenav" class="sidenav sidenav-wrapper">
<img class="logo1" src="../img/logo1.png"><br><br>
Home
About
Contact
</div>
<div id ="contoh" class="content-section-b">
<div class="mobiletoggle">
<label class="fa fa-bars" for="showblock"></label>
</div>
</div>
The input #showblock should be above the div #mySidenav in order for your CSS to work.
#showblock:checked + .sidenav {
width: 250px;
transition: 0.8s;
}

Related

Why is there a link under the navbar element? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I am just trying to remove the underline that is on the navbar sub categories (courses, about me). I think it is because there is a href, but I don't know what code to use to get rid of it. I tried using text-decoration: none but that didn't work. Also feel free to give me more suggestions on how I can make this website better!
body {
margin: 0;
}
/*Headings*/
/*Navbar*/
.navbar {
background-color: #005070;
overflow: hidden;
}
.navbar a {
font-family: 'Montserrat Alternates', sans-serif;
float: right;
color: white;
margin: 23px 20px 0px 0px;
animation: fadeIn 2s;
text-decoration: none;
}
.navtext::after {
content: '';
display: block;
width: 0;
height: 2px;
background: #fff;
transition: width .3s;
}
.navtext:hover::after {
width: 100%;
transition: width .3s;
}
.navimg {
width: 175px;
height: auto;
margin: 5px 0px 5px 20px;
animation: fadeIn 2s;
}
.navlogin {
width: 75px;
height: auto;
float: right;
margin: 15px 20px 0px 0px;
animation: fadeIn 4s;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
animation-name: fadeIn;
}
<div class="navbar">
<img class="navimg" src="Assets/Logo White.png">
<img class="navlogin" src="Assets/Login.png">
<a class="navtext" href="Pages/Courses/index.html">Courses</a>
<a class="navtext" href="Pages/About Me/index.html">About Me</a>
</div>
<div class="head1">
<h1>Placeholder text</h1>
</div>
<div class="head2">
<h1>Placeholder text</h1>
</div>
If you mean the underline on mouse over the link, try removing this code from your CSS:
.navtext::after {
content: '';
display: block;
width: 0;
height: 2px;
background: #fff;
transition: width .3s;
}
.navtext:hover::after {
width: 100%;
transition: width .3s;
}
If you don't have the link in that URL then use below property to that selector
text-decoration:none;
here is the example:
<a style="text-decoration:none" href="http://google.Com">Google</a>
this is an example for your code:
.navtext {
text-decoration: none;
}
<div class="navbar">
<img class="navimg" src="Assets/Logo White.png">
<img class="navlogin" src="Assets/Login.png">
<a class="navtext" href="Pages/Courses/index.html">Courses</a>
<a class="navtext" href="Pages/About Me/index.html">About Me</a>
</div>

Flyout search box with css

I want to implement search box that appears on button click and hides on click somewhere outside. I'm trying to implement this with css.
I have next html:
<div tabindex="0" class="search">
<div id="mobileSearch" class="search-by-name form-group ember-view">
<div tabindex="0" role="button" id="ember415" class="ember-power-select-trigger ember-power-select-typeahead-trigger ember-basic-dropdown-trigger ember-view">
<input type="search" id="ember-power-select-typeahead-input-ember410" class="ember-power-select-typeahead-input ember-power-select-search-input">
</div>
<div id="ember-basic-dropdown-content-ember410" style="display: none;" class="ember-basic-dropdown-content-placeholder"></div>
</div>
<div type="button" class="btn mobile-search-button"></div>
</div>
And scss:
.navbar {
> .container-fluid {
> .navbar-header {
> .search {
> #mobileSearch {
width: 42px;
height: 42px;
display: inline;
> div {
margin-top: 15px;
display: inline;
height: 42px;
position: absolute;
min-width: 0;
max-width: 0;
margin-left: 42px;
padding: 0;
border: none;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
}
}
> .search:focus {
outline: none;
}
.search > #mobileSearch > div:focus,
> .search:focus > #mobileSearch > div {
min-width: 220px;
max-width: 220px;
padding: 2px 16px 2px 8px;
margin-left: -178px;
border: 1px solid #ccc;
}
.mobile-search-button {
width: 42px;
height: 42px;
margin-top: 15px;
background-color: transparent;
background-image: url('/assets/search-128.png');
background-size: cover;
}
}
}
}
When user clicks on button search box appears, and when he clicks outside it hides. This part works OK. But when user move focus to input field search box also hides. I understand that issue was related to search box structure (div with div with div with input) but I can't change last layers (div with input) because it is plugin's component.
I would prefer a solution without Javascript.
try
.search:focus-within
it will work with .search and all child elements

Uncheck checkboxes in html and css only?

I've been trying to create something similar to google images (when you click on an image it 'opens' a larger version with information and links and when you click again it closes).
My task (school) is to realise this with only pure html(5) and css(3), so no javascript or JQuery or any other programming language.
I already tried using checkboxes and radio. When I use checkboxes, it will expand an 'informationbox' which will not close when I open the next one. There only needs to be one open at a time.
Therefore I also tried using radio. The problem here is that I'm not able to deselect them.
Is it possible to realise this with only html and css?
Is there anyone who can help me?
Thanks in advance!
.folder {
width: 100%;
visibility: hidden;
}
.fold {
visibility: hidden;
background-color: #8b0000;
width: 60%;
height: 0px;
color: transparent;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
position: absolute;
}
.toggle { display: none; }
.toggle-label {
display: inline-block;
cursor: pointer;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #fff;
font-size: 11px;
color: #999;
background-color: #8b0000;
padding: 5px;
}
.toggle-label:hover {
background-color: #400000;
}
.toggle:checked ~ .fold {
height: 80px;
visibility: visible;
color: #fff;
}
.content{
width: 100%;
min-height: 0;
position: static;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.toggle:checked ~ .content {
min-height: 80px;
}
<label for="toggle1" class="toggle-label">FOLD/UNFOLD</label>
<label for="toggle2" class="toggle-label">FOLD/UNFOLD</label>
<label for="toggle3" class="toggle-label">CLOSE</label>
<div class="content">
<aside class="folder">
<input type="checkbox" name="xinfo" class="toggle" id="toggle1"/>
<div class="fold">Element 1</div>
</aside>
<aside class="folder">
<input type="checkbox" name="xinfo" class="toggle" id="toggle2"/>
<div class="fold">Element 2</div>
</aside>
<aside class="folder">
<input type="checkbox" name="xinfo" class="toggle" id="toggle3"/>
</aside>
</div>
The best solution I found till now is to use radio. You need to use 1 extra input that has no content, so it will not show when you select it. This way the other ones will close.
<aside class="folder">
<input type="radio" name="xinfo" class="toggle" id="toggle3"/>
</aside>
JSFiddle example:
https://jsfiddle.net/zv1pd6wn/
The only problem now is that the close button will be visible till the end of the animation, I already tried to solve it, but no luck, help is appreciated.
Is this you want. kindly try below code.
<label for="toggle1" class="toggle-label">FOLD/UNFOLD</label>
<label for="toggle2" class="toggle-label">FOLD/UNFOLD</label>
<label for="toggle3" class="toggle-label">CLOSE</label>
<input type="radio" name="xinfo" class="toggle" id="toggle3"/>
<div class="content">
<aside class="folder">
<input type="radio" name="xinfo" class="toggle" id="toggle1"/>
<div class="fold">Element 1</div>
</aside>
<aside class="folder">
<input type="radio" name="xinfo" class="toggle" id="toggle2"/>
<div class="fold">Element 2</div>
</aside>
</div>
--css---
.folder {
width: 100%;
visibility: hidden;
}
.fold {
visibility: hidden;
background-color: #8b0000;
width: 60%;
height: 0px;
color: transparent;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
position: absolute;
}
.toggle { display: none; }
.toggle-label {
display: inline-block;
cursor: pointer;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #fff;
font-size: 11px;
color: #999;
background-color: #8b0000;
padding: 5px;
}
.toggle-label:hover {
background-color: #400000;
}
.toggle:checked ~ .fold {
height: 80px;
visibility: visible;
color: #fff;
}
.content{
width: 100%;
min-height: 0;
position: static;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.toggle:checked ~ .content {
min-height: 80px;
}
#toggle3:checked + .content .fold
{
visibility: hidden;
}

(HTML: data-filter attribute) How to set default attribute section instead of showing all record.on page load

I need that default filter value should be set, instead of showing all elements.
Once Page is loaded, By default all values are getting displayed and on click of anchor specific filter values are getting displayed (like blue color in this example).
For Given Example:
After page load, instead of showing all color, Blue color elements needs to be shown. By default all values are getting displayed, but I need a specific color data value.
CSS:
section {
display: block;
float: left;
border: 2px solid green;
min-height: 300px;
width: 100%;
border-radius: 4px;
}
a {
display: block;
float: left;
width: 25%;
text-decoration: none;
text-align: center;
padding: 5px 0;
color: white;
background: #1271C7;
}
div {
display: block;
float: left;
height: 40px;
width: 40px;
border: 1px solid black;
margin: 10px;
-webkit-transition: all .8s linear;
-moz-transition: all .8s linear;
-o-transition: all .8s linear;
-ms-transition: all .8s linear;
transition: all .8s linear;
margin-top: 20px;
}
div[data-filter="red"] {
background: red;
}
div[data-filter="green"] {
background: green;
}
div[data-filter="blue"] {
background: blue;
}
a:focus[data-filter] {
opacity: .8;
outline: none;
}
a[data-filter="red"]:focus ~ div:not([data-filter="red"]) {
height: 0px;
width: 0px;
border: none;
margin: 0;
}
a[data-filter="green"]:focus ~ div:not([data-filter="green"]) {
height: 0px;
width: 0px;
border: none;
margin: 0;
}
a[data-filter="blue"]:focus ~ div:not([data-filter="blue"]) {
height: 0px;
width: 0px;
border: none;
margin: 0;
}
HTML:
<section>
<a id="tab2" href="#" data-filter="red" tabindex="-1">RED</a>
<a id="tab3" href="#" data-filter="green" tabindex="-1">GREEN</a>
<a id="tab4" href="#" data-filter="blue" tabindex="-1">BLUE</a>
<div data-filter="red"/>
<div data-filter="blue"/>
<div data-filter="red"/>
<div data-filter="blue"/>
<div data-filter="green"/>
<div data-filter="red"/>
<div data-filter="red"/>
<div data-filter="red"/>
<div data-filter="blue"/>
<div data-filter="green"/>
<div data-filter="blue"/>
<div data-filter="green"/>
<div data-filter="green"/>
</section>
You can use jQuery to customize your app. Using css alone you can't do this. here is the solution using jquery.
$(document).ready(function(){
$('div[data-filter="red"').show(0); // only red column on page load
$("a").click(function(e){
e.preventDefault();
var x=$(this).attr("data-filter"); //returns data-filter value of a tag
if(x=="all"){
$('div[data-filter').show(0);
}
else{
$("div[ data-filter]").hide(0);
$('div[data-filter="' + x +'"]').show(0);
}
})
})

How to make clickable area for html input larger

So I'm working on making a website's navbar responsive: http://codepen.io/anon/pen/VvmpKx
The navbar has a simple (currently nonfunctional) search input field.
<nav>
...
<form class="search">
<input type="text" size="15" placeholder="Search..." />
</form>
</nav>
At about 750 px, I reduce the font size and increase the height of the nav bar, to make it easier to click the navbar links. This works great, except for the search bar.
Is there a way to make the area above and below the search input clickable, as if the user had clicked on the input itself, as it is for the category links?
I'd prefer solutions using only css, but javascript or jquery is also acceptable.
Sure! You can add a label around the input, then style the label to have 100% height:
/* New style */
nav form.search label {
height: 100%;
display: block;
}
/* Untouched styles */
nav {
font-family: "Merriweather Sans", "Tahoma", "Trebuchet MS", sans-serif;
background-color: #333;
margin: 0 0 1em 0;
height: 2em;
padding: 0 0.3em;
}
nav a {
color: #FFF;
text-decoration: none;
padding: 0 0.5em;
margin: 0 0.1em;
display: inline-block;
height: 100%;
vertical-align: middle;
line-height: 2em;
transition: background-color .2s ease-in-out;
}
nav a.news:hover {
background-color: #0581C1;
}
nav a.comm:hover {
background-color: #228B22;
}
nav a.variety:hover {
background-color: #9966CC;
}
nav a.sports:hover {
background-color: #DAA520;
}
nav a.satire:hover {
background-color: #B31B1B;
}
nav a:active {
background: #777;
}
nav form.search {
float: right;
display: inline;
vertical-align: middle;
line-height: 2em;
padding: 0 0.5em;
}
nav form.search input {
border-radius: 5px;
width: 5em;
height: 1em;
transition: width .3s ease-in-out, height .3s ease-in-out, margin-right .3s ease-in-out;
}
nav form.search input:focus {
width: 10em;
height: 1.2em;
margin-right: -0.2em;
}
#media (max-width: 750px) {
nav {
font-size: 0.8em;
height: 5em;
}
nav a,
nav form.search {
line-height: 5em;
}
}
<nav>
<span>Site title</span>
<a class="news" href="#"><span>Category</span></a>
<a class="comm" href="#"><span>Category</span></a>
<a class="variety" href="#"><span>Category</span></a>
<form class="search">
<label>
<input type="text" size="15" placeholder="Search..." />
</label>
</form>
</nav>
Put an event listener on the encapsulating form:
var backgroundForm = document.getElementById('background');
var search = document.getElementById('search');
backgroundForm.addEventListener('click', function(){
search.focus();
});
Updated example
You can add some Jquery for that.
Some thing like this will do the trick.
$(window).ready(function(){
$("form.search").click(function(){
$(this).find("input").focus();
});
});
You can make it with CSS pseudo classes. It's especially suitable for inputs with small targets - checkboxes/radios. Unfortunately, this does not work on IE:
input[type="checkbox"] {
position: relative;
}
input:before {
content: '';
cursor: pointer;
display: block;
position: absolute;
top: -10px;
right: -10px;
bottom: -10px;
left: -10px;
}
http://jsfiddle.net/gkaraliunas/0r0ag1ad/?utm_source=website&utm_medium=embed&utm_campaign=0r0ag1ad