I created a check box into a div and I created a label.I want that when Ill click to check box(#check_box) that time it (#pop_hidden)will be hidden{display: none}. no problem if I use javascript. I just need a solution
#check_box[type=checkbox]:checked : #pop_hidden {
display: none;
}
<div>
<input type="checkbox" id="check_box">
</div>
<div>
<label id="pop_hidden">CSS is Awesome</label>
</div>
Its Working if I use
<!DOCTYPE html>
<html>
<head>
<style>
#checkbox[type=checkbox]:checked + #pop_hidden {
display:none;
}
</style>
</head>
<body>
<input type="checkbox" id="checkbox" name="ossm">
<label id="pop_hidden">CSS is Awesome</label>
</body>
</html>
but I want to use it into the div like the first example
I supppose you are looking for that...
const
checkBox = document.querySelector('#check_box')
, popHiden = document.querySelector('#pop_hidden')
;
checkBox.oninput = e =>
{
popHiden.classList.toggle('noDisplay', checkBox.checked)
}
.noDisplay {
display: none;
}
<div>
<input type="checkbox" id="check_box">
</div>
<div>
<label id="pop_hidden">CSS is Awesome</label>
<br>
other content in div
</div>
Related
I want to remove text off the screen when a checkbox is selected using CSS. I want to know if there's a way of doing this through CSS. Here's some code
<form>
<input id="check" type="checkbox">
</form>
<p> sample text </p>
How do I remove the sample text when the checkbox is selected. I want to achieve this by using CSS.
UPDATE
It's not possible to do it through CSS, so can you tell me if there's a way to do this through JS.
If you can change the HTML to
<form>
<input id="check" type="checkbox">
<p>sample text</p>
</form>
You could use adjacent sibling selector and the checked pseudo class.
/* Remove entire p */
input:checked + p { display:none; }
/* Resize the font to zero */
input:checked + p { font-size: 0; }
/* Indent the text so it is offscreen */
input:checked + p { text-indent: -9999px; }
You can actually achieve this result if you are able to change your structure a bit. You will need to put input and p tag together in the same div so we can target them with CSS.
html:
<form>
<input id="check" type="checkbox">
<p class="hello"> sample text </p>
</form>
css:
input[type="checkbox"]:checked + p {
display:none
}
Here's a solution with JavaScript:
func = () => {
if(document.querySelector("input").checked) {
document.querySelector("p").style.display = "none";
} else {
document.querySelector("p").style.display = "block";
}
}
<form>
<input id="check" type="checkbox" onchange="func()">
</form>
<p>Some Text</p>
Make a little change in your HTML:
<form>
<input id="check" type="checkbox">
<p id="home"> sample text </p> <!-- added an id to the p tag -->
</form>
Create a JavaScript file, lets say 'main.js', inside write the code:
function change() {
var decider = document.getElementById('check');
if(decider.checked){
document.getElementById('home').innerHTML = "";
}
}
Add a script tag to link your JS file to the HTML:
<script type="text/javascript" src="main.js"></script>
I have looked over several different questions helping me get to this point however I can't figure out the selector that allows me to get to an outside DIV.
If I remove the two containing DIVs the code works perfectly, However with formatting I need the divs to be able to control the look. Any help would work I know the ~ is the child selector which is why it works without the DIVs.
How do I select any DIV?
Code:
.reveal-if-active {
color: #ccc;
font-style: italic;
opacity: 0;
transform: scale(0.8);
max-height: 0px;
transition: 0.5s;
}
input#photo1:checked ~ div#portraits,
input#photo2:checked ~ div#wedding,
input#photo3:checked ~ div#other {
color: #f00;
font-style: normal;
transform: scale(1);
opacity: 1;
max-height: 150px;
}
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<form>
<div class="eight columns" data-scroll-reveal="enter bottom move 100px over 0.6s after 0.2s">
<label for="photo">
<span class="error" id="err-phone">Please Select What you are looking for?</span>
</label>
<input class="radio_activator_portraits" name="photo" id="photo1" type="radio" value="portraits">
<label for="photo1">Portraits</label>
<input class="radio_activator_weddings" name="photo" id="photo2" type="radio" value="wedding">
<label for="photo2">Wedding</label>
<input class="radio_activator_other" name="photo" id="photo3" type="radio" value="other">
<label for="photo3">other</label>
</div>
<div class="eight columns reveal-if-active" id="portraits" name="portraits">Portraits</div>
<div class="eight columns reveal-if-active" id="wedding" name="wedding">Wedding</div>
<div class="eight columns reveal-if-active" id="other" name="other">Other</div>
</form>
</body>
</html>
I think you can't yet style a parent based on descendants with CSS only, you might consider using Javascript or jQuery maybe. Look at this links:
Parent Selectors in CSS, Is there a CSS parent selector?
Try this HTML structure:
<body>
<form>
<div class="eight columns" data-scroll-reveal="enter bottom move 100px over 0.6s after 0.2s">
<label for="photo">
<span class="error" id="err-phone">Please Select What you are looking for?</span>
</label>
<input class="radio_activator_portraits" name="photo" id="photo1" type="radio" value="portraits">
<label for="photo1">Portraits</label>
<input class="radio_activator_weddings" name="photo" id="photo2" type="radio" value="wedding">
<label for="photo2">Wedding</label>
<input class="radio_activator_other" name="photo" id="photo3" type="radio" value="other">
<label for="photo3">other</label>
<div class="eight columns reveal-if-active" id="portraits" name="portraits">Portraits</div>
<div class="eight columns reveal-if-active" id="wedding" name="wedding">Wedding</div>
<div class="eight columns reveal-if-active" id="other" name="other">Other</div>
</div>
</form>
</body>
In order to get this working, you'll need to have the items that have the reveal-if-active class in the same div container with the option. Check this article.
To position them outside of the parent <div> use positioning on .reveal-if-active class:
position:absolute;
top: 40px;
See Example.
cchacholiades is correct -- you will need javascript to do what you want. +1
On a CSS hover event, can I change another div's styling?
However, the javascript for what you desire is quite simple -- it would look something like this:
$(document).ready(function(){
$('input[name="photo"]').click(function(){
var phot = $(this).val();
$('#'+phot).show().css({'background':'yellow','opacity':'1'});
});
});
jsFiddle Demo
Notes:
(1) Because you already have the ID of the desired DIV stored as the value of the clicked radio button, it is simple to capture that value: $(this).val() -- $(this) refers to the element that was clicked on
(2) I demonstrated using both .show() -- which is the same as css display:block, and actually using css statements themselves.
Frankly, I think it will be faster for you just to use jQuery to do this. The only caveat is you must load the jQuery library, usually in the <head> tags like this:
<head>
<!-- other stuff in head -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
If you want some fast lessons on jQuery, find free video tuts here:
https://www.thenewboston.com/videos.php?cat=32
or at
http://phpacademy.org
I have some problem when i try to change the color of a div using input tags. If the div is in the same section of the inputs it works perfect. But if i try to put the div in the footer, for example, stop working.
HTML:
<section>
<input id="select1" name="test" type="radio" checked />
<label for="select1">Red</label>
<input id="select2" name="test" type="radio" />
<label for="select2">Green</label>
<input id="select3" name="test" type="radio" />
<label for="select3">Blue</label>
</section>
<footer>
<div class="colorDiv"></div>
</footer>
CSS:
.colorDiv{
width:50px;
height:50px;
background-color:red;
}
#select2:checked ~ .colorDiv{
background-color:green;
}
#select3:checked ~ .colorDiv{
background-color:blue;
}
Here is an example: http://jsfiddle.net/cqscc48g
There is any way to achieve that?
Thanks
Css is a cascading renderer. So it follows the DOM element's structure. Therefore, you can only relate elements that are descendants or, at least following siblings.
You have two options:
1 - Adjust your HTML:
You don't even need to put the div inside the input's section. But at least, you'd have to let the inputs out of the section, to make a "nephew" selector. (of course this denomination does not exists ;) )
JsFiddle - Changin HTML
<input id="select1" name="test" type="radio" checked />
<label for="select1">Red</label>
<input id="select2" name="test" type="radio" />
<label for="select2">Green</label>
<input id="select3" name="test" type="radio" />
<label for="select3">Blue</label>
<footer>
<div class="colorDiv"></div>
</footer>
And then you can select:
#select2:checked ~ footer .colorDiv{
background-color:green;
}
#select3:checked ~ footer .colorDiv{
background-color:blue;
}
2 - Use a Javascript approach:
If you love your HTML structure so much, then you must go Javascript. You can make it a lot sharper, but just an example:
JsFiddle - Using Javascript
function ChangeColor(color) {
var clrDiv = document.getElementsByClassName("colorDiv")[0];
clrDiv.style.backgroundColor = color;
}
document.getElementById("select1").onclick = function() { ChangeColor(""); }
document.getElementById("select2").onclick = function() { ChangeColor("green"); }
document.getElementById("select3").onclick = function() { ChangeColor("blue"); }
Change your markup and go through comments in code,
.colorDiv {
width: 50px;
height: 50px;
background-color: red;
}
#select2:checked~.colorDiv {
background-color: green;
}
#select3:checked~.colorDiv {
background-color: blue;
}
<section>
<input id="select1" name="test" type="radio" checked />
<label for="select1">Red</label>
<input id="select2" name="test" type="radio" />
<label for="select2">Green</label>
<input id="select3" name="test" type="radio" />
<label for="select3">Blue</label>
<div class="colorDiv"></div>
<!-- this should be adjacent as per your css selectors -->
</section>
Fiddle
If you want click inside somewhere div and hover any of body div than set input at the top outside..
<style>
input[type=checkbox] {
display:none;
}
input[type=checkbox]:checked ~ div.content{
display:none;
}
</style>
<input type="checkbox" id="toogle-content"/>
<div>
<label for="toogle-content" id="toogle-content">CLICK ME!</label>
</div>
<div class="content">
I can toggle now ;)
</div>
Use .change() for every input. On change check id from clicked input and then change color of that div
Check the first image.
I have set the div just displays in images.
![enter image description here][1]
[1]: http://i.stack.imgur.com/2ZVbu.png
the html is :
<div id="div_pro_qty_condi_168">
<label>Loyalty Cards :</label>
<input type="text" name="pro_qty_condi[168]" class="text_box_medium">
</div>
<div id="div_pro_qty_condi_1">
<label>Premium Business Cards :</label>
<input type="text" name="pro_qty_condi[1]" class="text_box_medium">
</div>
.
.
.
.
<div id="div_pro_qty_condi_135">
<label>Fearless Drawstring Bag :</label>
<input type="text" name="pro_qty_condi[135]" class="text_box_medium">
</div>
How can I set label to maximum size related to other biggest div like if I use table instead of div it auto set the <td> width as label text, but how can I set it with div?
Try this code:
Fiddle
label{
display:inline-block;
width:35%;
}
There maybe better ways but off the top of my head you could do sometime like this.
HTML:
<div>
<div id="div_pro_qty_condi_168">
<div>
<label>Loyalty Cards :</label>
</div>
<input type="text" name="pro_qty_condi[168]" class="text_box_medium" />
</div>
<div id="div_pro_qty_condi_1">
<div>
<label>Premium Business Cards :</label>
</div>
<input type="text" name="pro_qty_condi[1]" class="text_box_medium" />
</div>
<div id="div_pro_qty_condi_135">
<div>
<label>Fearless Drawstring Bag :</label>
</div>
<input type="text" name="pro_qty_condi[135]" class="text_box_medium" />
</div>
</div>
CSS:
div {
display: table;
}
div div {
display: table-row;
}
div div div {
display: table-cell;
}
DEMO HERE
Try this code:
$(function(){
var _nLen = $('label').length;
var _nMax = $("label:eq(0)").width();
for(var i=0; i<_nLen;i++) {
var _nTemp=0;
_nTemp = $("label:eq("+i+")").width();
if(_nTemp>=_nMax) {
_nMax = _nTemp;
}
}
for(var i=0; i<_nLen;i++) {
$("label:eq("+i+")").css('display','inline-block');
$("label:eq("+i+")").css('width',(_nMax+'px'));
}
});
This tutorial teaches how to create modal windows in CSS3. It works perfectly on Chrome and Firefox. However, Internet Explorer doesn't load any of the links containing hashtags.
Tutorial
Demo
The first link has the source code but I'll post a copy below for future reference.
HTML
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>CSS3 Modal Popups | Script Tutorials</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/modal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<h2>CSS3 Modal Popups</h2>
Back to original tutorial on <span>Script Tutorials</span>
</header>
<!-- panel with buttons -->
<div class="main">
<div class="panel">
Log In
Sign Up
</div>
</div>
<!-- popup form #1 -->
<div class="popup">
<h2>Welcome Guest!</h2>
<p>Please enter your login and password here</p>
<div>
<label for="login">Login</label>
<input type="text" id="login" value="" />
</div>
<div>
<label for="password">Password</label>
<input type="password" id="password" value="" />
</div>
<input type="button" value="Log In" />
<a class="close" href="#close"></a>
</div>
<!-- popup form #2 -->
<div class="popup">
<h2>Sign Up</h2>
<p>Please enter your details here</p>
<div>
<label for="email">Login (Email)</label>
<input type="text" id="email" value="" />
</div>
<div>
<label for="pass">Password</label>
<input type="password" id="pass" value="" />
</div>
<div>
<label for="firstname">First name</label>
<input type="text" id="firstname" value="" />
</div>
<div>
<label for="lastname">Last name</label>
<input type="text" id="lastname" value="" />
</div>
<input type="button" value="Sign Up" /> or Log In
<a class="close" href="#close"></a>
</div>
</body>
</html>
CSS
.main {
background: #aaa url(../images/bg.jpg) no-repeat;
width: 800px;
height: 600px;
margin: 50px auto;
}
.panel {
background-color: #444;
height: 34px;
padding: 10px;
}
.panel a#login_pop, .panel a#join_pop {
border: 2px solid #aaa;
color: #fff;
display: block;
float: right;
margin-right: 10px;
padding: 5px 10px;
text-decoration: none;
text-shadow: 1px 1px #000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
a#login_pop:hover, a#join_pop:hover {
border-color: #eee;
}
.overlay {
background-color: rgba(0, 0, 0, 0.6);
bottom: 0;
cursor: default;
left: 0;
opacity: 0;
position: fixed;
right: 0;
top: 0;
visibility: hidden;
z-index: 1;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-ms-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
background-color: #fff;
border: 3px solid #fff;
display: inline-block;
left: 50%;
opacity: 0;
padding: 15px;
position: fixed;
text-align: justify;
top: 40%;
visibility: hidden;
z-index: 10;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-webkit-transition: opacity .5s, top .5s;
-moz-transition: opacity .5s, top .5s;
-ms-transition: opacity .5s, top .5s;
-o-transition: opacity .5s, top .5s;
transition: opacity .5s, top .5s;
}
.overlay:target+.popup {
top: 50%;
opacity: 1;
visibility: visible;
}
.close {
background-color: rgba(0, 0, 0, 0.8);
height: 30px;
line-height: 30px;
position: absolute;
right: 0;
text-align: center;
text-decoration: none;
top: -15px;
width: 30px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
}
.close:before {
color: rgba(255, 255, 255, 0.9);
content: "X";
font-size: 24px;
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}
.close:hover {
background-color: rgba(64, 128, 128, 0.8);
}
.popup p, .popup div {
margin-bottom: 10px;
}
.popup label {
display: inline-block;
text-align: left;
width: 120px;
}
.popup input[type="text"], .popup input[type="password"] {
border: 1px solid;
border-color: #999 #ccc #ccc;
margin: 0;
padding: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
}
.popup input[type="text"]:hover, .popup input[type="password"]:hover {
border-color: #555 #888 #888;
}
I've run into this problem before with hashchange events in internet explorer, so I wrote this code (Guaranteed by me down to IE7):
Add class hash-modifier to every element that you have that modifies
the url hash.
JavaScript:
$(function () {
var hashchangeHandler = function () {
switch (location.hash.replace(/^.*#/, '')) {
case 'sign-up':
alert('signing up/opening sign-up modal');
break;
case 'login':
alert('logging in/showing login modal');
break;
default:
// do default something
}
}
BindHashChangeEventListener(hashchangeHandler);
// Run the initial hashHandler function on document ready
hashchangeHandler();
});
function BindHashChangeEventListener(hashHandler) {
if (("onhashchange" in window) && !($.browser.msie)) {
// Use built-in jQuery hashchange event
$(window).bind('hashchange', hashHandler);
} else {
//IE and browsers that don't support hashchange
$('.hash-modifier').on('click', function () {
setTimeout(hashHandler, 50);
});
}
}
HTML:
sign up
login