After clicking a div i want to change it's color and disable the hover. When clicked again i want it to switch to it's previous color and enable the hover again.
So i have this div:
<div class="leftTeam"></div>
Which have this hover:
.leftTeam {
border: 1px solid #d9d9d9;
margin-auto;
float: left;
border-radius: 4px;
background-color: #fff;
width: 200px;
height: 30px;
}
.leftTeam:hover {
border: 1px solid #adadad;
background-color: #e6e6e6;
transition: 1s;
}
This images shows the desired behaviour. Doesn't matter if it will be pure CSS code or javascript included. Thanks!
[]
Try this:
function switchClass(ele){
if(ele.className == "leftTeam"){
ele.className+=" clicked";
}
else{
ele.className = "leftTeam";
}
}
.leftTeam {
border: 1px solid #d9d9d9;
margin-auto;
float: left;
border-radius: 4px;
background-color: #fff;
width: 200px;
height: 30px;
}
.clicked:hover {
border: 1px solid #adadad;
background-color: #e6e6e6;
transition: 1s;
}
<div class="leftTeam" onclick="switchClass(this)">Click to change the class!</div>
Toggle style (hover, color) after click event on element:
function toggleStyle(el){
if(el.className == "initial"){
el.className="clicked";
}
else{
el.className = "initial";
}
}
div { border: 1px solid black; border-collapse: collapse}
.initial{ background-color: #efefef; }
.initial:hover { background-color: #B4FDAB; }
.clicked { background-color: red; }
p.css3{background-color: #efefef;}
p.css3:hover{ background-color: #B4FDAB; }
p.css3:focus{background-color: #B6C2EF; }
p.css3:active{background-color: #B6C2EF; }
<div class="initial" onclick="toggleStyle(this)">Click to change the class!</div>
<div class="initial" onclick="toggleStyle(this)">Click to change the class!</div>
<h3>Testing css 3 focus or active </h3>
<p class="css3">css 3 focus or active seem to be insufficient</p>
Testing a css 3 only solution
It seems that using active or focus are not sufficient, since the hover state is not replaced
p.css3{background-color: #efefef;}
p.css3:hover{ background-color: #B4FDAB; }
p.css3:focus{background-color: #B6C2EF; }
p.css3:active{background-color: #B6C2EF; }
<p class="css3">css 3 focus or active</p>
Related
function myFunction() {
var element = document.getElementById("one1");
element.classList.toggle("one2");
var element = document.getElementById("two1");
element.classList.toggle("two2");
}
<style>
#section{margin-left:50px;
margin-right:50px
}
#monbouton{float:right;
font-size:25px;
width:50px;
height:50px;
background-color:#F1F1F1;
border:1px solid ##F1F1F1
}
#one1{
float:left;
width:40%;
height:100px;
border:1px solid blue
}
.one2{
width:10% !important;
height:200px;
border:1px solid red !important;
}
.one2 #afairedisparaitre{display:none
}
#two1{float:right;
width:59%;
height:100px;
border:1px solid green
}
.two2{width:89% !important
}
</style>
<!DOCTYPE html>
<html>
<body>
<div id="section">
<div id="one1">
<button id="monbouton" onclick="myFunction()">↔</button>
<div id="afairedisparaitre">This is DIV #one1<br />
Button toggle to CLASS .one2<br />
and reverse</div>
</div>
<div id="two1">This is DIV #two1<br />
Button toggle to CLASS .two2<br />
and reverse</div>
</div>
</body>
</html>
I am trying to make the leftside of my website shrink, so that the users can have a wider rightside if they find it more confortable.
What I am missing is a way that would keep the choice all over the site, when an other page is loaded, until the user clicks again. Maybe the solution would be a few more lines in js with "localStorage" ? I would really appreciate any help.
Made your CSS a bit better. Now we need to toggle only one class .with_toggle for #section.
It can sow errors here, in Snippet, but will fork fine on Codepan, see please. Try to switch it and reload the page on Codepan.
// checking if our storage is not empty
if (localStorage.toggled != '') {
// set class to #section form storage value
document.getElementById("section").classList.toggle(localStorage.toggled);
}
function myFunction() {
if (localStorage.toggled != "with_toggle") {
document.getElementById("section").classList.add("with_toggle");
localStorage.toggled = "with_toggle";
} else {
document.getElementById("section").classList.remove("with_toggle");
localStorage.toggled = "";
}
}
#section {
margin-left: 50px;
margin-right: 50px;
}
#monbouton {
float: right;
font-size: 25px;
width: 50px;
height: 50px;
background-color: #F1F1F1;
border: 1px solid #F1F1F1;
}
#one1 {
float: left;
width: 40%;
height: 100px;
border: 1px solid blue;
}
.with_toggle #one1 {
width: 10%;
border: 1px solid red;
}
.with_toggle #one1 #afairedisparaitre {
display: none;
}
#two1 {
float: right;
width: 59%;
height: 100px;
border: 1px solid green;
}
.with_toggle #two1 {
width: 89%;
}
<div id="section">
<div id="one1">
<button id="monbouton" onclick="myFunction()">↔</button>
<div id="afairedisparaitre">This is DIV #one1<br /> Button toggle to CLASS .one2<br /> and reverse</div>
</div>
<div id="two1">This is DIV #two1<br /> Button toggle to CLASS .two2<br /> and reverse</div>
</div>
Sure. Just create a localStorage variable that keeps track of whether the shrink should be active and use that to apply your styles on page load or something similar.
function shrinkActive() {
var shrink;
if (!(shrink = localStorage.getItem("shrink"))) {
localStorage.setItem("shrink", "false");
return false;
}
return JSON.parse(shrink);
}
function setShrink(active) {
var element1 = document.getElementById("one1");
var element2 = document.getElementById("two1");
if (active) {
element1.classList.add("one2");
element2.classList.add("two2");
} else {
element1.classList.remove("one2");
element2.classList.remove("two2");
}
localStorage.setItem("shrink", active.toString());
}
function myFunction() {
setShrink(!shrinkActive());
}
window.onload = function() {
setShrink(shrinkActive());
}
Link to working Codepen. https://codepen.io/bugcatcher9000/pen/pogZbrz?editors=1111
This question already has answers here:
Prevent onmouseout when hovering child element of the parent absolute div WITHOUT jQuery
(23 answers)
Closed 6 years ago.
So, basically I have box on top of some text, and when you hover over it, it will go down, and hide the text:
<div id="box" onmouseover="tran1()" onmouseout="tran2()">
<p id="par"><b>Hover Me.</b></p>
</div>
<p id="movealong">I will hide!</p>
Here's the script:
function tran1() {
document.getElementById("par").innerHTML = "<b>Where'd he go?</b>";
}
function tran2() {
document.getElementById("par").innerHTML = "<b>Hover Me.</b>";
}
And finally the CSS to make it go down:
#box {
width:100px;
height:95px;
border:3px solid #000;
border-radius: 8px;
background-color:#06F;
text-align:center;
}
#box:hover {
width:100px;
height:150px;
border:3px solid #000;
border-radius: 8px;
background-color:#066;
}
However, when I hover over the text, the text changes back to "Hover me". How do I call both box and par? Is it the CSS that's the problem or is it the JS?
Not sure if you're interested in a JQuery solution, but this is how simple your problem is solved with it:
var $par = $('#par');
$('#box').hover(function() {
// On mousein
$par.html("Where'd he go?");
}, function() {
// On mouseout
$par.html('Hover Me.');
});
#box {
width: 100px;
height: 95px;
border: 3px solid #000;
border-radius: 8px;
background-color: #06F;
text-align: center;
}
#box:hover {
width: 100px;
height: 150px;
border: 3px solid #000;
border-radius: 8px;
background-color: #066;
}
<div id="box">
<p id="par"><b>Hover Me.</b></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Why using JS for the text change instead of anextra class?
function showHidden(el) {
el.className += " showHidden";
}
function hideHidden(el) {
el.className = "";
}
.hidden {
display: none;
}
div.showHidden p {
display: none;
}
div.showHidden p.hidden {
display: block;
}
<div onmouseover="showHidden(this)" onmouseout="hideHidden(this)"><p>Hover me</p><p class="hidden">Hide me</p></div>
Use #box:hover + P#movealong{ to hide the element
function tran1() {
document.getElementById("par").innerHTML = "<b>Where'd he go?</b>";
}
function tran2() {
document.getElementById("par").innerHTML = "<b>Hover Me.</b>";
}
#box {
width:100px;
height:95px;
border:3px solid #000;
border-radius: 8px;
background-color:#06F;
text-align:center;
}
#box:hover {
width:100px;
height:150px;
border:3px solid #000;
border-radius: 8px;
background-color:#066;
}
#box:hover + P#movealong{
display:none;
}
<div id="box" onmouseover="tran1()" onmouseout="tran2()">
<p id="par"><b>Hover Me.</b></p>
</div>
<p id="movealong">I will hide!</p>
Any help will be appreciated.
I have 3 divs, the parent div(red), 2 child divs at the top(blue) and another on the bottom(green). Here is what I want to achieve:
When the top div(blue) resizes/increases its size by clicking the "Expand Blue Div" button, the bottom div(green) will shrink/decreases its size but remain in its position, meaning, it should still remain on its x-Axis even though it change its height. In short, regardless of the height of the bottom div(green), it should still remain on its position.
I want it also to revert back all of their original sizes when click on "Shrink Blue Div" button. Both Green and blue sizes will be on their original sizes.
I prefer a full jquery/javascript solution on this one. Thank you all
PLEASE NOTE
The javascript code should NOT use constant numbers for computation of size/height of "GREEN" div. For example, "greendiv.height = 100 - 5px" <<, we should avoid using constants for this one.
$("#expandDiv").click(function(){
$("#blueDiv").css("height","150px");
});
.parent_container {
border: 5px solid red;
height: 400px;
}
.blue_box {
height: 50px;
border: 5px solid blue;
}
.green_table {
overflow-y: auto;
border: 5px solid green;
position:relative;
height:250px;
}
.btn_actions {
padding: 10px;
}
<div class="parent_container">
<div class="btn_actions">
<button class="btn" id="expandDiv">Expand Blue Div</button>
<button class="btn" id="shrinkDiv">Shrink Blue Div</button>
</div>
<div class="blue_box" id="blueDiv">
</div>
<div class="btn_actions">
<button class="btn">Download Data</button>
<button class="btn">Sort Data</button>
</div>
<div class="green_table">
</div>
</div>
Here is my JSFiddle: https://jsfiddle.net/koykoys/0zLpgzsn/1/
Try this code:
$("#expandDiv").click(function(){
var $blueDiv = $("#blueDiv"), $greenDiv = $(".green_table");
var blueDivHeight = $blueDiv.height(), greenDivHeight = $greenDiv.height();
var updatedblueDivHeight = 150;
var incrementedblueDivHeight = updatedblueDivHeight - blueDivHeight;
$blueDiv.height(updatedblueDivHeight);
$greenDiv.height(greenDivHeight - incrementedblueDivHeight);
});
See demo at https://jsfiddle.net/0zLpgzsn/2/
If you want CSS only solution, than take a look at this:
.parent-container {
height: 300px;
border: 1px solid red;
padding: 2px;
display: flex;
flex-direction: column;
}
label[for=toggle-blue]::before {
content: 'Expand';
}
.blue-container {
border: 1px solid blue;
flex-grow: 5;
}
#toggle-blue {
display: none;
}
#toggle-blue:checked + label::before {
content: 'Shrink';
}
#toggle-blue:checked + label + div {
flex-grow: 20;
}
.green-container {
border: 1px solid green;
flex-grow: 10;
}
<div class="parent-container">
<input id="toggle-blue" type="checkbox" />
<label for="toggle-blue"></label>
<div class="blue-container">
</div>
<div class="green-menu">
<button>
Button 1
</button>
<button>
Button 2
</button>
</div>
<div class="green-container">
</div>
</div>
It uses CSS Flexible Boxes and Adjacent sibling selectors, as well as ::before Pseudo Element.
Jquery Code:
$("#expandDiv").click(function(event){
$('#shrinkDiv').removeClass('shrinked');
if(!$(this).hasClass('expanded')) {
$("#blueDiv").animate({
height: "+=150"
});
$(".green_table").animate({
height: "-=150"
});
$(this).addClass('expanded');
}
});
$("#shrinkDiv").click(function(event){
if( (!$(this).hasClass('shrinked')) && ($('#expandDiv').hasClass('expanded')) ) {
$("#blueDiv").animate({
height: "-=150"
});
$(".green_table").animate({
height: "+=150"
});
$(this).addClass('shrinked');
}
$('#expandDiv').removeClass('expanded');
});
Here is the working fiddle
https://jsfiddle.net/0zLpgzsn/4/
/*CSS*/
<style type="text/css">
.parent_container {
border: 5px solid red;
height: auto;
position:relative;
}
.blue_box {
height: 50px;
border: 5px solid blue;
}
.green_table {
overflow-y: auto;
border: 5px solid green;
position:relative;
height:50px;
}
.open{
height:150px;
}
.closed{
height:35px;
}
.btn_actions {
padding: 10px;
}
</style>
// jQuery
$(document).ready(function(){
$("#expandDiv").on("click", function(){
if(!$("#blueDiv").hasClass("open")){
$("#blueDiv").addClass("open");
}
if(!$(".green_table").hasClass("closed")){
$(".green_table").addClass("closed");
}
})
$("#shrinkDiv").on("click", function(){
if($("#blueDiv").hasClass("open")){
$("#blueDiv").removeClass("open");
}
if($(".green_table").hasClass("closed")){
$(".green_table").removeClass("closed");
}
})
})
This is based on your solution and requitrements :)
Plus link to fiddle Fiddle
Here is a resizable textarea:
var KeyDown;
$(".TxtArea > div").mousedown(function(){
$(this).parent().addClass("Resize");
$("body").addClass("UnSelectable");
KeyDown = 1;
$("textarea").css("opacity","0.3");
$("textarea").focus(function() { $(this).css("border-color","#ccc") });
});
$(document).mouseup(function(){
$(".TxtArea").removeClass("Resize");
$("body").removeClass("UnSelectable");
KeyDown = 0;
$("textarea").css("opacity","1");
$("textarea").focus(function() { $(this).css("border-color","#07c") });
});
$(document).mousemove(function(Event){
if (KeyDown == 1 && $(".TxtArea").hasClass("Resize")) {
var Height = Event.pageY - $(".TxtArea").children("textarea").offset().top;
$("textarea").height(Height);
}
});
textarea {
border: 1px solid #ccc;
outline:none;
}
textarea:focus{
border: 1px solid #07c;
}
.TxtArea {
width: 300px;
}
.TxtArea > textarea {
width: 100%;
display: block;
resize: none;
box-sizing: border-box;
}
.TxtArea > div {
height: 10px;
background: #eee;
border: 1px solid #ddd;
box-sizing: border-box;
text-align: center;
line-height: 0px;
}
.TxtArea > div:hover {
cursor: n-resize;
}
.UnSelectable {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="TxtArea">
<textarea></textarea>
<div>.....</div>
</div>
Please follow these steps:
run the above fiddle
write something on that textarea
click on x-scroll bar on the bottom of textarea and keep it
move your mouse and resize that textarea (Now border color is #ccc and opacity is 0.3)
after resizing, leave your finger from click (Now opacity will be 1 but border doesn't change)
Why border doesn't change? and how can I return it to #07c after unclicking. How can I do that? (I want something exactly like SO)
Note: I want to set #07c just only focus state of that textarea after unclicking (Not a permanent border)
So I'm not sure exactly why your focus code wasn't working, but in general, this is just better practice. Typically you want the css to handle all of the styling and the javascript just toggles it. It just keeps things cleaner and more organized.
So you can do this: https://jsfiddle.net/psp12a0n/
The main thing that was changed was this part in the javascript:
$(".TxtArea > div").mousedown(function(){
$(this).parent().addClass("Resize");
$("body").addClass("UnSelectable");
KeyDown = 1;
$("textarea").addClass('inactive');
});
$(document).mouseup(function(){
$(".TxtArea").removeClass("Resize");
$("body").removeClass("UnSelectable");
KeyDown = 0;
$("textarea").removeClass('inactive');
});
And this in the css:
textarea:focus,
textarea:active {
border: 1px solid #07c;
}
textarea.inactive {
opacity: .3;
border-color: #ccc;
}
Hope this works for you!
I want to hide black arrow while clicking green arrow.. without using jquery
My fiddle:
http://jsfiddle.net/t5Nf8/195/
html:
<div class="arrow-down"></div>
<div class="arrow-up"></div>
css:
.arrow-down {
position: absolute;
/*display: none;*/
left: 1.5px;
top: 6px;
z-index: 1;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #0ef2c4;
cursor: pointer;
}
.arrow-up {
border-color: transparent transparent black;
border-style: dashed dashed solid;
border-width: 0px 8.5px 8.5px;
position: absolute;
left: 1.5px;
top: 14px;
z-index: 1;
height: 0px;
width: 0px;
}
js:
$('.arrow-up').click(function {
$('.arrow-down').hide();
});
Please anyone help
$('.arrow-down').click(function(){
$('.arrow-up').toggle();
});
$('.arrow-up').click(function(){
$('.arrow-down').toggle();
});
You had a syntax error in your Code after function you should have
() which you missed in your Code
I Have used toggle so that it shows and hides but you can use hide alone if you want.
DEMO
According to #JoeFitter's answer, you can toggle the "upArrow" to show and hide by clicking the "downArrow" using JavaScript
var downArrow = document.getElementsByClassName('arrow-down')[0];
var upArrow = document.getElementsByClassName('arrow-up')[0];
downArrow.addEventListener('click', function() {
if(upArrow.style.display == 'none'){
upArrow.style.display = 'block';
}
else{
upArrow.style.display = 'none';
}
});
Live Demo
var downArrow = document.getElementsByClassName('arrow-down')[0];
var upArrow = document.getElementsByClassName('arrow-up')[0];
downArrow.addEventListener('click', function() {
upArrow.style.display = upArrow.style.display !== 'none' ? 'none' : 'block';
});
http://jsfiddle.net/t5Nf8/197/
Use getComputedStyle(el).getPropertyValue("display"); to get the value of dispaly, after, you just do a test to show or hide your arrow!
Note: it's a pure Javascript, no library:
var display = getComputedStyle(up).getPropertyValue("display");
if ( display !== "block" ) {
up.style.display = 'block';
} else {
up.style.display = 'none';
}
Want to watch it in action? See demo: http://jsfiddle.net/g4g9doj0/
I don't think it is a simple task JUST using CSS, using Jquery should look like:
I don't know but I see useless CSS instructions, I think it could be reduce to:
.arrow-down {
border-color: transparent transparent black;
border-style: dashed dashed solid;
border-width: 0px 8.5px 8.5px;
height: 0px;
width: 0px;
}
.arrow-up{
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #0ef2c4;
cursor: pointer;
}
Jquery would look like:
$(document).ready(function(){
$(".arrow-up").click(function(){
$(".arrow-down").hide();
});
});
http://jsfiddle.net/t5Nf8/209/