I want that clicking on parent one children div class will toggle.
in html
<div class="A">
<div class="B C">
<p>check your card</p>
</div>
</div>
in css
.A{display:block;}
in js
$(".A").click(function() {
$(".B").toggleClass("C");
});
In you css there is no C class you need to add it.
$(".A").click(function () {
$(".B").toggleClass("C");
});
.A {
display:block;
}
.C {
font-size: 120%;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="A">
<div class="B C">
<p>check your card</p>
</div>
</div>
I placed it in a fiddle. Seems that the code is working right (inspect element).
You might need to wrap it between
$(document).ready(function() {
// Your code here
});
Or add a .C class in your css
In your question There is no rule defined for class B and class C.so you didn't felt it.But your code was running properly.
$(".A").click(function() {
$(".B").toggleClass("C");
});
.A{display:block; border:1px solid;}
.B{
background-color: red;
color: white;
}
.C{
background-color: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="A">
<div class="B C">
<p>check your card</p>
</div>
</div>
Your code was working fine. Just adding the css for class ".C" is reflecting it in the browser. Just add this to your css:
.B {color:000;font-size:12px;}
.C {color:red; font-size:20px;}
Below is the working example...
http://jsfiddle.net/opdzvo3f/2/
Related
Say I have 2 divs, positioned side by side (with some intermediate elements between them): A (left) and B(right). When hovering over B, I wish to have another div(C) appear over the left one (A).
I know how to toggle the display none/block properties but I don't know how to write the condition so the div C can appear on another div, not the one that we're hovering over.
Can this be done?
<div className="A">
<h2>About me</h2>
</div>
<div className="B">
<div>
<Link className="link1-to-project" to="/project1">
<h2>Project 1</h2>
<div className="C"></div>
</div>
codeply demo here
Html
<div id="a">
Div A
<div id="c">Div C</div>
</div>
<div id="b">Div B</b>
css
#a, #b{
float:left;
height:100px;
width:100px;
color:#fff;
background-color:#ffcc66;
margin:10px;
text-align:center;
}
#c{
background-color:#000;
margin:10px;
visibility:hidden;
}
Javascript
document.getElementById("b").addEventListener("mouseover", mouseOver);
document.getElementById("b").addEventListener("mouseout", mouseOut);
function mouseOver() {
document.getElementById("c").style.visibility = "visible";
}
function mouseOut() {
document.getElementById("c").style.visibility = "hidden";
}
UPDATE:
https://jsfiddle.net/mq5bza81/1/
https://jsfiddle.net/mq5bza81/
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<style>
.wrapper {
position: relative;
}
.b:hover+.c {
display: block;
}
.c {
display: none;
position: absolute;
top: 0;
}
</style>
<div class="wrapper">
<div class="a">AAA</div>
<div class="b">BBB</div>
<div class="c">CCC</div>
</div>
</body>
</html>
This is my requirement:
I have "Ttile" and "Description" .
On page Load, "outerElementsContainer"(DIV ID) div background should
be WHITE
"Title" & "Border" Color should be GREEN, "Description color should
be to BLACK.
On mouse hover of "outerElementsContainer"(DIV ID) div, DIV
background should change to GREEN
"Title" Color should change to WHITE, "Description" color should
change to WHITE.
On mouse out of "outerElementsContainer"(DIV ID) div, DIV background
should change to WHITE
"Title" & "Border" Color should change to GREEN, "Description" color
should change to BLACK.
I am stuck at "Description" color. It is not changing on mouse hover.
Below is my HTML code:
<div id="outerElementsContainer">
<div id="123456" name="123456" onMouseOut="this.style.background='WHITE';this.style.color='GREEN';"
onmouseover="this.style.background='GREEN';this.style.color='WHITE';"
style="float:left; margin-right:2em;cursor: pointer; color:'GREEN';width:18em;height:12em;
border-color:'GREEN'; border-width:1px;margin-top: 1em; border-style:solid;">
<div id="InnerDiv1"
style="background-color:'GREEN';height:0.5em;margin-bottom: 10px;">
</div>
<div id="InnerDiv2"
style="height: 3.5em; overflow: hidden;margin-left: 0.5em;font-size: larger;font-weight: bold;">
<p id="title">Title</p>
</div>
<div id="InnerDiv3"
style="height: 5em;overflow: hidden;margin: 0.5em;color:black;">
<p id="Description">Description</p>
</div>
</div>
</div>
How to solve this??
You can do this with css only:
body{color:black;}
#outerElementsContainer > div {
float: left;
margin-right: 2em;
cursor: pointer;
color: 'GREEN';
width: 18em;
height: 12em;
border: solid 1px green;
}
#InnerDiv2 {
height: 3.5em;
overflow: hidden;
margin-left: 0.5em;
font-size: larger;
font-weight: bold;
}
#InnerDiv2 p{color:green;}
#InnerDiv3{
height: 5em;overflow: hidden;margin: 0.5em;
}
#outerElementsContainer:hover > div {
background:green;
border:green 1px green;
color:white;
}
#outerElementsContainer:hover p{
color:white;
}
<div id="outerElementsContainer">
<div id="123456" name="123456">
<div id="InnerDiv1">
</div>
<div id="InnerDiv2">
<p id="title">Title</p>
</div>
<div id="InnerDiv3">
<p id="Description">Description</p>
</div>
</div>
</div>
see in Description in InnerDiv3 div you are applied inine css color:black and inline css has more priority thats why color is not changing.
i have written you a simplified solution below using jquery with your requirement
$(document).ready(function(e) {
$("#123456").mouseover(function(e) {
$(".greenColor").css("background-color", "green");
$(".blackColor").css("color", "black");
$(".whiteColor").css("color", "white");
});
$("#123456").mouseleave(function(e) {
$(".greenColor").css("background-color", "white");
$(".blackColor").css("color", "green");
$(".whiteColor").css("color", "black");
});
});
.greenColor {} .blackColor {}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outerElementsContainer">
<div id="123456" name="123456" class="greenColor" style="float:left; margin-right:2em;cursor: pointer; color:'GREEN';width:18em;height:12em;
border-color:GREEN; border-width:1px;margin-top: 1em;border-style:solid;">
<div id="InnerDiv1" style="height:0.5em;margin-bottom: 10px;">
</div>
<div id="InnerDiv2" style="height: 3.5em; overflow: hidden;margin-left: 0.5em;font-size: larger;font-weight: bold;color:Green" class="blackColor">
<p id="title">Title</p>
</div>
<div id="InnerDiv3" style="height: 5em;overflow: hidden;margin: 0.5em;color:black;">
<p id="Description" class="whiteColor">Description</p>
</div>
</div>
</div>
hope so this will help you lot
try this.I think this is what you want.if this is not the case tell me.I wrote a full code for you.just copy,paste and try it.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<style type="text/css">
div.outerelement{
width:500px;
height: 500px;
background-color: white;
border:1px solid green;
text-align: center;
}
h1.ttl{
color: green;
}
h1.des{
color: black;
}
.classOne{
background-color: green;
}
.classTwo{
color:white;
}
</style>
<body>
<div class="outerelement">
<h1 class="ttl">Title</h1>
<br/><br/><br/>
<h1 class="des">Description</h1>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".outerelement").mouseenter(function(){
$(this).css({"background-color":"green"},1000);
$(".ttl").css({"color":"white"},1000);
$(".des").css({"color":"white"},1000);
});
$(".outerelement").mouseleave(function(){
$(this).css({"background-color":"white"},1000);
$(".ttl").css({"color":"green"},1000);
$(".des").css({"color":"black"},1000);
});
});
</script>
</body>
</html>
You can also remove the css property color:black :
<div id="InnerDiv3" style="height: 5em;overflow: hidden;margin: 0.5em;color:black;">
<p id="Description">Description</p>
</div>
to
<div id="InnerDiv3" style="height: 5em;overflow: hidden;margin: 0.5em;">
<p id="Description">Description</p>
</div>
use css:
#description:hover{
background-color: green;
color: black;
}
this will turn the background color green when your mouse is over the div with an id of 123456, when your mouse isn't over the div the background will return to white.
see - http://www.w3schools.com/cssref/sel_hover.asp
to use CSS, either make a .css file and include it in the <head> section of your html page like so - <link rel="stylesheet" type="text/css" href="myCSSFile.css"> <- is better practice, see - http://www.w3schools.com/css/css_howto.asp
if you want to you could also include the CSS styling in your html file, like so in the <head> section -
<style>
#description:hover{
background-color: green;
color:black;
}
</style>
which isn't as good as making a file for the CSS itself.
I want to do that after a button is clicked a new div will be generated and inserted over the other elements on the page. I'm write the following markup:
<div id="parent">
<div id="d1">
</div>
<div id="d2">
</div>
<div id="d3">
</div>
<input type="button" id="but"/>
</div>
styles:
#d1{
width:200px;
height:200px;
background-color: black;
}
#d2{
width:200px;
height:200px;
background-color: aqua;
}
#d3{
width:200px;
height:200px;
background-color: blue;
}
and script:
var but=document.getElementById("but");
var d3=document.getElementById("d3");
var p=document.createElement("div");
p.setAttribute("style", "position:absolute; top:400, background-color: grey;width:10px; height:10px;");
var parent= document.getElementById("parent");
but.onclick=function(){
parent.insertBefore(p,d3);
}
But after I'm click a button the div insert under the other div. This is a jsFiddle example. How to fix it?
In your code you used a comma instead of a semicolon after top:400 :
position:absolute; top:400, background-color: grey;
The corect code is:
position:absolute; top:400; background-color: grey;
Demo: http://fiddle.jshell.net/9MtQN/2/
You could also try using JQuery's append(); to add extra layers of colors over the ones you have already set.
$('button').click(function () {
$('#over').append('<div id="dt"></div>');
});
See this Fiddle:
http://jsfiddle.net/jLCuD/
I have used following code from http://w3schools.com. But in this I can use only once. I want to use it more than one times because I want to create FAQ panel in HTML
but it is from ID and I can use it only once.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
</body>
</html>
demo
script:
$(function(){
$('a.toggle').click(function(){
$('.myContent').stop().slideToggle(500);
return false;
});
});
HTML
CLICK
<div>
<div class="myContent" style="background-color: #99CCFF; padding: 5px 10px;">Optimized the javascript so that all code is based on jQuery.
</div>
<div class="myContent" style="background-color: #CCCCFF; padding: 5px 10px;">Optimized the javascript so that all code is based on jQuery.
</div>
</div>
change the id to class and then use class selectors in css and jQuery
<div class="flip">Click to slide the panel down or up</div>
<div class="panel">Hello world!</div>
<div class="flip">Click to slide the panel down or up</div>
<div class="panel">Hello world!</div>
<div class="flip">Click to slide the panel down or up</div>
<div class="panel">Hello world!</div>
CSS
.panel, .flip {
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
.panel {
padding:50px;
display:none;
}
then
$(document).ready(function () {
$(".flip").click(function () {
$(this).next('.panel').slideToggle("slow");
});
});
Demo: Fiddle
I want a basic full width layout with a 250px sidebar on the right. Here's roughly what I want:
<-------Content-------><--250px sidebar-->
<---------------100% width--------------->
Is this possible without Javascript or tables?
Yes, of course:
see http://jsfiddle.net/whTwg/4/
HTML:
<div id="wrapper">
<div id="sidebar-wrapper">
<div id="sidebar">Sidebar</div>
</div>
<div id="main-wrapper">
<div id="main">Main</div>
</div>
</div>
CSS:
#wrapper{
overflow:hidden;
}
#main-wrapper{
overflow:hidden;
}
#sidebar-wrapper{
float:right;
width:250px;
max-width:50%;/* You should set a max-width */
}
/*Here you can add borders, paddings and margins */
#main{
background:#aaf;
border:10px solid blue;
}
#sidebar{
background:#faa;
border:10px solid red;
}
Note: instead of #wrapper{overflow:hidden} (or something different than visible), you could add <div style="clear:both"></div> after main-wrapper.
Edit:
You are right, I forgot to add #main-wrapper{overflow:hidden;}. I have fixed the link and the code.
<div style="float: left">
..... content ......
<div>
<div style="float: right; width: 250px;">
..... sidebar .....
</div>
<div class="clear"></div>
... other content
This is the CSS for the class="clear":
div.clear {
clear:both;
}
You can set the first div width when you see how much space you have.
Is this helpful?