JQuery/Javascript for Div resizing, expand and collapse - javascript

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

Related

Toggle change 2 DIV width at a time + localStorage

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

How do I change background-color of 2 divs when I press 1 other div?

How do I make 2 divs (header and sub-header) change color when div (change) is pressed?
The sub-header is going to be changed to another color, not the same color as header.
<div class="change">
Click this to change the background-color of the 2 headers.
</div>
<div class="header>
Header
</div>
<div class="sub-header">
sub-header
</div>
You could approach it like this...
Create a new class for each new background color you'd like:
.header {
background: grey;
}
.header-alt {
background: lightblue;
}
.sub-header {
background: lightblue;
}
.sub-header-alt {
background: grey;
}
Then use jQuery toggleClass to add/remove those classes on click of the div change
$(".change").click(function() {
$('.header').toggleClass("header-alt");
$('.sub-header').toggleClass("sub-header-alt");
});
Example
$(".change").click(function() {
$('.header').toggleClass("header-alt");
$('.sub-header').toggleClass("sub-header-alt");
});
body {
width: 600px;
margin: 0 auto;
color: #FFF;
font-family: sans-serif;
font-size: 20px;
}
div {
padding: 20px;
}
.change {
background: black;
cursor: pointer;
}
.header {
background: grey;
}
.header-alt {
background: lightblue;
}
.sub-header {
background: lightblue;
}
.sub-header-alt {
background: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="change">
Click this to change the background-color of the 2 headers
</div>
<div class="header">
Header
</div>
<div class="sub-header">
sub-header
</div>
Codepen if you prefer...
Onclick of div.change assign background-color to other divs $('.header').css("background-color","red");
$('.change').on('click',function(){
$('.header').css("background-color","red");
$('.sub-header').css("background-color","red");
})
Demo : https://jsfiddle.net/y5tLzbsc/
you give both of them the class 'active'
and on your css
.header.active{
background:blue;
}
.sub-header.active{
background:red;
}
and on your js:
document.querySelector('.change').onclick = function(){
document.querySelector('.header').className += " active";
document.querySelector('.sub-header').className += " active";
}
Here is a code snippet that does exactly what you described. This solution is using jquery. Look at the code below and feel free to ask if something is not clear :)
var colorChanged = false;
$('.change').click(function() {
if(!colorChanged){
$('.header').css('background-color','red');
$('.sub-header').css('background-color','blue');
colorChanged = true;
} else {
$('.header').css('background-color','transparent');
$('.sub-header').css('background-color','transparent');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="change">
Click this to change the background-color of the 2 headers.
</div>
<div class="header">
Header
</div>
<div class="sub-header">
sub-header
</div>
Just add an event listener. See demo:
document.addEventListener('click', function(e) {
if (e.target.className.indexOf('change') > -1) {
var headerEl = document.querySelector(".header");
var subHeaderEl = document.querySelector(".sub-header");
// This will toggle the color change on or off after each click
if (headerEl.className.indexOf('color') > -1) {
headerEl.className = headerEl.className.replace(" color", "");
subHeaderEl.className = subHeaderEl.className.replace(" color", "");
} else {
headerEl.className += " color";
subHeaderEl.className += " color";
}
}
})
.header.color {
background-color: red;
}
.sub-header.color {
background-color: blue;
}
<div class="change">
Click this to change the background-color of the 2 headers.
</div>
<div class="header">
Header
</div>
<div class="sub-header">
sub-header
</div>
This can be done with HTML and CSS. There is no need to use anything advanced or exotic.
The checkbox becomes the click input and it is hidden off screen. Since a connected label acts as the checkbox it becomes your input button. The label is the replacement for your original top DIV.
body {
margin: 0;
padding: 0;
}
#hidden_checkbox {
display: block;
position: absolute;
top: -50px;
right: 0;
}
#visible_label {
display: block;
height: 200px;
cursor: pointer;
background-color: rgb(200, 200, 200);
}
#hidden_checkbox:checked ~ div:nth-of-type(1) {
background-color: rgb(0, 50, 0);
}
#hidden_checkbox:checked ~ div:nth-of-type(2) {
background-color: rgb(0, 0, 50);
}
.header {
height: 200px;
background-color: rgb(0, 128, 128);
}
.sub-header {
height: 200px;
background-color: rgb(128, 0, 128);
}
<input id="hidden_checkbox" type="checkbox">
<label id="visible_label" for="hidden_checkbox">Click this to change the background-color of the 2 headers.</label>
<div class="header">Header</div>
<div class="sub-header">Sub-header</div>

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>

Re-sizing a div should re-size other div's proportionately

I have pasted my JS code, CSS and HTML respectively below.
var hgt=0,newhgt=0,bsh=0,diff=0;
$('#footS').resizable({
alsoResize:"#footC",
handles:"n",
start: function(event,ui){
oldhgt = ui.size.height;
bsh = $('#bodyS').height();
}, resize:function(event,ui){
diff = oldhgt - ui.size.height;
if(diff<0)
newhgt = bsh - Math.abs(diff);
else
newhgt = bsh + diff;
$('#bodyS').height(newhgt);
}, stop:function(event,ui){
newhgt = bsh - Math.abs(oldhgt - ui.size.height);
$('#bodyS').css("height",newhgt+"px");
$('#bodyC').css("height",newhgt+"px");
$('#footS').css("height",ui.size.height+"px");
}
});
#vscale,#canvas {
height: auto;
width: auto;
/* border: 1px solid gray; */
margin-left: 5px;
float: left;
position:absolute;
}
#canvas{
margin-left:100px;
}
.scale {
height:150px;
width:50px;
border: 1px dotted gray;
}
#headS,#headC{border-color: red;min-height:50px;}
#bodyS,#bodyC{border-color: blue;min-height:50px;}
#footS,#footC{border-color: green; min-height:50px;}
.ui-resizable-helper {
border: 1px dotted #999;
}
.fscale{top:0.0px;position:relative;}
.cont{
border: 1px dotted gray;
height:150px;
width:auto;
}
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="vscale" style="top:75px;">
<div id="headS" class="scale">HScale</div>
<div id="bodyS" class="scale">BScale</div>
<div id="footS" class="scale fscale">FScale</div>
</div>
<div id="canvas" style="width:300px;top:75px;">
<div id="headC" class="cont">HeadContainer</div>
<div id="bodyC" class="cont">BodyContainer</div>
<div id="footC" class="cont">FootContainer</div>
</div>
The problem is when I re-size the north handle of the #footS div I am unable to change the height of #bodyS div and #bodyC div while re-sizing and also when re-size stops. I also need to decrease the top of the #footC div as I am re-sizing the #footS div dynamically. Any sort of help would be helpful.
Below is the logic i wrote to get the re-size working for #bodyC and #bodyS accordingly.
var oldFSH=0,newBSH,oldBSH=0,diff;
$('#footS').resizable({
ghost:true,
handles:"n",
start: function(event,ui){
oldFSH = $('#footS').height();
oldBSH = $('#bodyS').height();
newBSH=diff=0;
}, resize:function(event,ui){
var newFSH = ui.size.height;
diff = oldFSH > newFSH?oldFSH - newFSH:newFSH - oldFSH;
newBSH = oldFSH > newFSH?oldBSH+diff:oldBSH-diff;
$('#bodyS,#bodyC').height(newBSH);
}, stop:function(event,ui){
var newFSH = ui.size.height;
$('#bodyS,#bodyC').css("height",newBSH+"px");
$('#footC').css("height",newFSH + "px");
$("#footS").css("top","0px");
}
});
#vscale,#canvas {
height: auto;
width: auto;
/* border: 1px solid gray; */
margin-left: 5px;
float: left; /*Here you can also use display: inline-block instead of float:left*/
position:absolute;
}
#canvas{
margin-left:100px;
}
.scalecont {
height:144px;
border: 1px dotted gray;
}
.bodycss{
height:200px;
border: 1px dotted blue;
}
#footS{top:0px;position:relative;}
#headC,#bodyC,#footC{width:auto;}
.ui-resizable-helper {
border: 1px dotted #999;
}
<div id="vscale" style="top:100px;">
<div id="headS" class="scalecont">HScale</div>
<div id="bodyS" class="bodycss">BScale</div>
<div id="footS" class="scalecont">FScale</div>
</div>
<div id="canvas" style="width:300px;top:100px;">
<div id="headC" class="scalecont">HeadContainer</div>
<div id="bodyC" class="bodycss">BodyContainer</div>
<div id="footC" class="scalecont">FootContainer</div>
</div>
And, also I added an option called "ghost:true" to the jquery resizable widget.

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>

Categories