Toggle change 2 DIV width at a time + localStorage - javascript

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

Related

Fixed navigation add class depend of section

I need to add class to header depend of section its by. here is my code
.navigation {
position: fixed;
background: white;
width: 400px;
height:15px;
border: 1px solid #000;
color: orange;
}
section {
display: block;
width: 100%;
height:200px;
}
.first-section {
background-color: black;
}
.second-section {
background-color: white;
}
<div id="nav" class="navigation">menu</div>
<section class="first-section" id="a"></section>
<section class="second-section" id="b"></section>
<section class="third-section" id="c"></section>
I guess I need some jQuery code to add class to .navigation when its bring to .second-section JSFiddle link
I played a little with your code and finally came to this:
function style_in_section(elementId, styleClassName, sectionClassName) {
var pos = window.pageYOffset;
var element = document.getElementById(elementId);
var section = document.getElementsByClassName(sectionClassName)[0];
if ((pos >= section.offsetTop) && (pos < section.offsetTop + section.offsetHeight)) {
element.classList.add(styleClassName);
} else {
element.classList.remove(styleClassName);
}
}
window.onscroll = function() {
style_in_section("nav", "nav-black", "second-section");
style_in_section("nav", "nav-gray", "third-section");
};
.navigation {
position: fixed;
width: 400px;
height: 15px;
border: 1px solid #000;
background: white;
color: orange;
}
/* I added styles here */
.nav-black {
background: black;
}
.nav-gray {
background: gray;
}
section {
display: block;
width: 100%;
height: 600px;
}
.first-section {
background-color: black;
}
.second-section {
background-color: white;
}
.third-section {
background-color: yellow;
}
<div id="nav" class="navigation">menu</div>
<section class="first-section" id="a"></section>
<section class="second-section" id="b"></section>
<section class="third-section" id="c"></section>
Is that the kind of things you want to achieve?
Note that I used vanilla JavaScript.
I hope it helps.
Please see this
This adds the selected class to your nav when the user scrolls into second-section.
JS:
var target = $(".second-section").offset().top;
var interval = setInterval(function() {
if ($(window).scrollTop() >= target) {
$('#nav').addClass('selected');
}
}, 0);
CSS:
.selected {
background-color:blue;
}
Get the latest version of jQuery from here - the fiddle uses jQuery version 3.3.1
EDIT:
Add this to your footer.php file in your Wordpress theme.
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script type="text/javascript">
var target = $(".second-section").offset().top;
var interval = setInterval(function() {
if ($(window).scrollTop() >= target) {
$('#nav').addClass('selected');
}
}, 0);
</script>

How to apply a CSS style to div AND the div nested in the div [duplicate]

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>

JQuery/Javascript for Div resizing, expand and collapse

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

Toggle hover from div onlick (remove hover, add it back)

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>

How can I disable a <div>

I am trying to build a simple traffic light with HTML, CSS and Javascript. Clicking on the light should change the color of the light (if I click when it is Green, it changes to Yellow and so on).
HTML:
<div id="outer_box" onclick = "change()">
<div id ="red"></div>
<div id ="yellow"></div>
<div id ="green"></div>
</div>
CSS:
#outer_box{
width: 70px;
height:150px;
background:black;
}
#red{
width: 50px;
height:50px;
margin: auto;
border-radius: 50%;
background: red;
}
#yellow{
width: 50px;
height:50px;
margin: auto;
border-radius: 50%;
background: yellow;
}
JavaScript:
var state;
state = "green"
function change(){
if (state=="green"){
state = "yellow";
}
else if (state== "yellow"){
state = "red";
//state_def();
}
else{
state = "green";
//state_def();
}
console.log(state);
state_def();
}
function state_def(){
console.log("inside state def")
console.log(state);
if (state == "green"){
document.getElementById("yellow").disabled = true;
//$("#yellow").prop('disabled',true);
//$("#red").prop('disabled',true);
}
else if (state == "yellow"){
$("#green").prop('disabled',true);
$("#red").prop('disabled',true);
}
else{
$("#yellow").prop('disabled',true);
$("#green").prop('disabled',true);
}
}
Here is the jsFiddle link: https://jsfiddle.net/taniachanda86/mx7r0hrL/
Please help me understand what is that I am doing wrong?
Following way you can do using JQuery. Add and remove active class.
First display one light. On click it will change.
var items = $('div.light');
var currentItem = items.filter('.active');
$('#outer_box').on('click', function() {
var nextItem = currentItem.next();
currentItem.removeClass('active');
if ( nextItem.length ) {
currentItem = nextItem.addClass('active');
} else {
currentItem = items.first().addClass('active');
}
});
#outer_box{
width: 70px;
height:150px;
background:black;
}
#red{
width: 50px;
height:50px;
margin: auto;
border-radius: 50%;
background: red;
display:none;
}
#yellow{
width: 50px;
height:50px;
margin: auto;
border-radius: 50%;
background: yellow;
display:none;
}
#green{
width: 50px;
height:50px;
margin: auto;
border-radius: 50%;
background: green;
display:none;
}
.active{
display:block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer_box">
<div id ="red" class="light active"></div>
<div id ="yellow" class="light"></div>
<div id ="green" class="light"></div>
</div>
The solution is quite simple.
$("#green").attr('disabled', true);
will show that your div is actually being disabled while you inspect element. However, it will not quite get you to point of having the css color affected by it.
Instead defining the opacity attribute will help you achieve your need.
Here is the plunker: https://plnkr.co/edit/mdlAS68gpFBm64jfiCCu?p=preview. I hope this is what you are asking for.
var colors = ["red", "yellow", "green"];
var state = 1;//because red already visible
//addEventListener method to add onclick handler
document.getElementById('outer_box').addEventListener('click', function(){
if (state==3){//if state reaches to 3, reset to 0
state = 0;
}
var allLights = document.querySelectorAll('.light');
for(var i = 0; i < allLights.length; i++) {//remove active class from all light
allLights[i].className = "light";
}
document.getElementById(colors[state]).className = "light active"; //add active class on the next light;
state++;//increment state
}, false);
I have updated your fiddle. check here
Open your javascript console and see the failure:
Uncaught ReferenceError: change is not defined
change is not in scope of the onclick of the <div>.
This is because the Javascript part of jsfiddle is executed in the onload function. See https://stackoverflow.com/a/5468370/189058
I guess you wanted a traffic light which on click will glow the clicked light.If so, can be achieved by the below code.
$( document ).ready(function() {
$('#red').css("background-color", "red");
$('#yellow').css("background-color", "white");
$('#green').css("background-color", "white");
$('.trafficlight').click(function(){
var selected_id=$(this).attr("id");
if(selected_id=='green')
{
$('#green').css("background-color", "green");
$('#red').css("background-color", "white");
$('#yellow').css("background-color", "white");
}
else if(selected_id=='yellow')
{
$('#yellow').css("background-color", "yellow");
$('#red').css("background-color", "white");
$('#green').css("background-color", "white");
}
else
{
$('#red').css("background-color", "red");
$('#yellow').css("background-color", "white");
$('#green').css("background-color", "white");
}
});
});
#outer_box{
width: 70px;
height:150px;
background:black;
}
#red{
width: 50px;
height:50px;
margin: auto;
border-radius: 50%;
background:red;
}
#yellow{
width: 50px;
height:50px;
margin: auto;
border-radius: 50%;
background: yellow;
}
#green{
width: 50px;
height:50px;
margin: auto;
border-radius: 50%;
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="outer_box" >
<div id ="red" class="trafficlight"></div>
<div id ="yellow" class="trafficlight"></div>
<div id ="green" class="trafficlight"></div>
</div>

Categories