We Keep Coding

How to get the default size back for a div by toggle in JQuery?

I have two divs in my application that seperates the screen with the content and sidemenu.
<div class="splitter-left ">
<div class="close-left-btn">
<button class="btn btn-primary" id="toggle-menu">Click me</button>
</div>
<div class="container-fluid content-close">
<div class="row">
<div class="col-4">
<p>Home</p>
</div>
<div class="col-4">
<p>About</p>
</div>
<div class="col-4">
<p>Contact</p>
</div>
</div>
</div>
</div>
<div class="splitter-right">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<strong>Header options</strong>
</div>
</div>
</div>
</div>
And this is my styling for splitter-left and splitter-right
.splitter-left {
display: inline-block;
width: 25%;
max-width: 300px;
min-width: 250px;
background-color: #fff;
margin-top: 10px;
margin-left: -35px;
vertical-align: top;
}
.splitter-right {
display: inline-block;
width: 85%;
margin-top: 10px;
position: relative;
left: 50px;
min-height: 400px;
}
I also made a JQuery function to activate the button to hide and show the splitter-left
This is my function in JQuery
$("#toggle-menu").click(function () {
if ($(".content-close").toggle()) {
$(".splitter-left").toggleClass('sidemenu-close')
$(".splitter-right").css({ width: '100%' });
else {
$(".splitter-right").css({ width: '75%' });
}
});
And this is the styling for the method toggleClass for sidemenu-close
.sidemenu-close {
width: 0% !important;
min-width: 0% !important;
}
When I click on the button Click me the splitter-right class gets a width of 100% (this is working). When I click on the button again the splitter-right doesn't go back to the default size of 75%.
How can I get the default size back when I click on the button?

I have fixed it with the following solution:
$("#toggle-menu").click(function() {
$(".content-close").toggle();
if ($(".splitter-left").hasClass('sidemenu-close')) {
$(".splitter-left").removeClass('sidemenu-close')
$(".splitter-left").css({
width: '25%'
});
$(".splitter-right").css({
width: '85%'
});
} else {
$(".splitter-left").addClass('sidemenu-close');
$(".splitter-right").css({
width: '100%'
});
}
});

Multiple div's onhover same functionality

Here I have six different div on hover blue color div should appear and by default hidden. I have written code for this but it works only for the first div I merge all div's in a single variable. Can anyone suggest to me what I'm missing here
var tcpTooltip = $('.tp-cont-tech, tp-cont-b, tp-cont-m, tp-cont-t, tp-cont-i, tp-cont-e');
var tcpTooltipDiv = $('.tpc-tooltip-tech, tpc-tooltip-b, tpc-tooltip-m, tpc-tooltip-t, tpc-tooltip-i, tpc-tooltip-e');
tcpTooltipDiv.hide();
$(tcpTooltip).each(function() {
$(tcpTooltip).hover(function() {
$(tcpTooltipDiv).show();
}, function() {
$(tcpTooltipDiv).hide();
});
});
/* Tooltip */
.tp-cont-tech,
.tp-cont-e,
.tp-cont-t,
.tp-cont-m,
.tp-cont-i,
.tp-cont-b {
position: relative;
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 20px;
}
.tpc-tooltip-tech,
.tpc-tooltip-e,
.tpc-tooltip-t,
.tpc-tooltip-m,
.tpc-tooltip-i,
.tpc-tooltip-b {
position: absolute;
top: 2%;
left: 5%;
z-index: 10;
width: 100px;
height: 100px;
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="tpc-info">
<div class="tp-cont-tech">
<div class="tpc-tooltip-tech"></div>
</div>
<div class="tp-cont-b">
<div class="tpc-tooltip-b"></div>
</div>
<div class="tp-cont-m">
<div class="tpc-tooltip-m"></div>
</div>
<div class="tp-cont-t">
<div class="tpc-tooltip-t"></div>
</div>
<div class="tp-cont-e">
<div class="tpc-tooltip-e"></div>
</div>
</div>

As suggested already, I'd go by using pure CSS and the :hover pseudo.
If you really want jQuery for some reason this would be a remake of your code.
Basically (beside adding common classes to your elements [see code below]) you need the $(this) reference of the currently hovered element:
var $tpCont = $('.tp-cont');
var $tcpTooltip = $('.tcp-tooltip');
$tcpTooltip.hide();
$tpCont.hover(function() {
$(this).find($tcpTooltip).toggle();
});
.tp-cont {
position: relative;
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 20px;
}
.tcp-tooltip {
position: absolute;
top: 2%;
left: 5%;
z-index: 10;
width: 100px;
height: 100px;
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="tpc-info">
<div class="tp-cont tp-cont-tech">
<div class="tcp-tooltip tpc-tooltip-tech"></div>
</div>
<div class="tp-cont tp-cont-b">
<div class="tcp-tooltip tpc-tooltip-b"></div>
</div>
<div class="tp-cont tp-cont-m">
<div class="tcp-tooltip tpc-tooltip-m"></div>
</div>
<div class="tp-cont tp-cont-t">
<div class="tcp-tooltip tpc-tooltip-t"></div>
</div>
<div class="tp-cont tp-cont-e">
<div class="tcp-tooltip tpc-tooltip-e"></div>
</div>
</div>

You can achieve this far more effectively with CSS. If you add some common classes to the tp-cont-X and tpc-tooltip-X elements, then you can use the :hover pseudo-selector, like this:
.tp-cont {
position: relative;
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 20px;
}
.tpc-tooltip {
position: absolute;
top: 2%;
left: 5%;
z-index: 10;
width: 100px;
height: 100px;
background-color: blue;
display: none;
}
.tp-cont:hover .tpc-tooltip {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="tpc-info">
<div class="tp-cont tp-cont-tech">
<div class="tpc-tooltip tpc-tooltip-tech"></div>
</div>
<div class="tp-cont tp-cont-b">
<div class="tpc-tooltip tpc-tooltip-b"></div>
</div>
<div class="tp-cont tp-cont-m">
<div class="tpc-tooltip tpc-tooltip-m"></div>
</div>
<div class="tp-cont tp-cont-t">
<div class="tpc-tooltip tpc-tooltip-t"></div>
</div>
<div class="tp-cont tp-cont-e">
<div class="tpc-tooltip tpc-tooltip-e"></div>
</div>
</div>

Try using index inside hover.
var tcpTooltip = $('.tp-cont-tech, .tp-cont-b, .tp-cont-m, .tp-cont-t, .tp-cont-i, .tp-cont-e');
var tcpTooltipDiv = $('.tpc-tooltip-tech, .tpc-tooltip-b, .tpc-tooltip-m, .tpc-tooltip-t, .tpc-tooltip-i, .tpc-tooltip-e');
tcpTooltipDiv.hide();
$(tcpTooltip).each(function() {
$(tcpTooltip).hover(function(index, item) {
$(tcpTooltipDiv).eq($(this).index()).show();
}, function() {
$(tcpTooltipDiv).hide();
});
});
/* Tooltip */
.tp-cont-tech,
.tp-cont-e,
.tp-cont-t,
.tp-cont-m,
.tp-cont-i,
.tp-cont-b {
position: relative;
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 20px;
}
.tpc-tooltip-tech,
.tpc-tooltip-e,
.tpc-tooltip-t,
.tpc-tooltip-m,
.tpc-tooltip-i,
.tpc-tooltip-b {
position: absolute;
top: 2%;
left: 5%;
z-index: 10;
width: 100px;
height: 100px;
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="tpc-info">
<div class="tp-cont-tech">
<div class="tpc-tooltip-tech"></div>
</div>
<div class="tp-cont-b">
<div class="tpc-tooltip-b"></div>
</div>
<div class="tp-cont-m">
<div class="tpc-tooltip-m"></div>
</div>
<div class="tp-cont-t">
<div class="tpc-tooltip-t"></div>
</div>
<div class="tp-cont-e">
<div class="tpc-tooltip-e"></div>
</div>
</div>

A bizarre glitch when animating a flex box-based progress bar

I am trying to learn flexbox by implementing a progress bar.
Everything works fine until i try to animate the thing with jquery...
Animate does not seem to work well for the right half after the width is set to at least 75%.
Also it's like the green bar is set to a very big width since it actually takes about a second to come back from 100%+.
I'm not sure if the cause is me not knowing flexbox very well or jQuery freaking out for some reason...
Is this a known issue? Did I do something wrong? Here is my page's code.
This is my code:
button {
height: 50px;
margin: 10px;
width: 50px;
}
.b9k-progress {
border: solid black 2px;
flex-direction: row;
display: flex;
height: 50px;
margin: 10px;
padding: 5px;
}
.b9k-left,
.b9k-right {
height: inherit;
padding: 0;
margin: 0;
}
.b9k-left {
background-color: green;
opacity: 1;
}
.b9k-right {
background: orangered;
flex-grow: 1;
}
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<div style="width: 80%;margin: 20px 10% ;">
<button onclick='$("#the-progress-bar>.b9k-left").animate({"width": "0"},2000);'>ZERO</button>
<button onclick='$("#the-progress-bar>.b9k-left").animate({"width": "20%"},2000);'>25%
</button>
<button onclick='$("#the-progress-bar>.b9k-left").animate({"width": "50%"},2000);'>50%
</button>
<button onclick='$("#the-progress-bar>.b9k-left").animate({"width": "75%"},2000);'>75%
</button>
<button onclick='$("#the-progress-bar>.b9k-left").animate({"width": "100%"},2000);'>100%
</button>
</div>
<div id="the-progress-bar" class="b9k-progress">
<div class="b9k-left"></div>
<div class="b9k-right"></div>
</div>
Is this a known issue? did I do something wrong?

That is because when you are using CSS flexbox in conjunction with percentage based widths, you are forcing the browser to make multiple passes when trying to determine the final width of the element. This causes the bar to initially overshoot its width to >100%, before jQuery properly animates it to the target value.
Solution 1: Use CSS transitions
You don't even need to use jQuery's animate function at all. It can be cumbersome to work with and has catch-alls that people don't know (such as using .stop(true, true) to clear the queue, which you are not using). What you're trying to achieve can be done purely using CSS transitions alone:
$(function() {
$('.button').on('click', function() {
$('#the-progress-bar > .b9k-left').width($(this).data('target-width'));
});
});
button {
height: 50px;
margin: 10px;
width: 50px;
}
.b9k-progress {
border: solid black 2px;
flex-direction: row;
display: flex;
height: 50px;
margin: 10px;
padding: 5px;
}
.b9k-left,
.b9k-right {
height: inherit;
padding: 0;
margin: 0;
/* Enable transition of width */
transition: width 2s ease-in-out;
}
.b9k-left {
background-color: green;
opacity: 1;
/* Give the width a starting value */
width: 0;
}
.b9k-right {
background: orangered;
flex-grow: 1;
}
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<div style="width: 80%;margin: 20px 10% ;">
<button class="button" data-target-width="0">ZERO</button>
<button class="button" data-target-width="25%">25%
</button>
<button class="button" data-target-width="50%">50%
</button>
<button class="button" data-target-width="75%">75%
</button>
<button class="button" data-target-width="100%">100%
</button>
</div>
<div id="the-progress-bar" class="b9k-progress">
<div class="b9k-left"></div>
<div class="b9k-right"></div>
</div>
Solution 2: Don't use flexbox
A way around this is to actually just remove the use of CSS flexbox, and instead assign the orange background to the parent element instead:
button {
height: 50px;
margin: 10px;
width: 50px;
}
.b9k-progress {
background-color: orangered;
border: solid black 2px;
box-shadow: inset 0 0 0 5px white;
height: 50px;
margin: 10px;
padding: 5px;
}
.b9k-left {
height: inherit;
padding: 0;
margin: 0;
}
.b9k-left {
background-color: green;
opacity: 1;
}
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<div style="width: 80%;margin: 20px 10% ;">
<button onclick='$("#the-progress-bar>.b9k-left").animate({"width": "0"},2000);'>ZERO</button>
<button onclick='$("#the-progress-bar>.b9k-left").animate({"width": "20%"},2000);'>25%
</button>
<button onclick='$("#the-progress-bar>.b9k-left").animate({"width": "50%"},2000);'>50%
</button>
<button onclick='$("#the-progress-bar>.b9k-left").animate({"width": "75%"},2000);'>75%
</button>
<button onclick='$("#the-progress-bar>.b9k-left").animate({"width": "100%"},2000);'>100%
</button>
</div>
<div id="the-progress-bar" class="b9k-progress">
<div class="b9k-left"></div>
</div>

You can try this with CSS animations, by just switching the classes on the element:
<div id="the-progress-bar" class="b9k-progress">
<div class="the-progress-bar-progress"></div>
</div>
.the-progress-bar {
background-color: orangered;
}
.the-progress-bar-progress {
position: relative;
width: 100%; height: 100%;
background-color: green;
transition: transform 2s;
transform: scaleX(0);
transform-origin: 0 0;
}
.the-progress-bar-progress--25perc { transform: scaleX(.25); }
.the-progress-bar-progress--50perc { transform: scaleX(.5); }
.the-progress-bar-progress--75perc { transform: scaleX(.75); }
.the-progress-bar-progress--100perc { transform: scaleX(1); }
And you can use this example function to simply change the class applied to the progress:
function changeProgress(e) {
var progressBar = document.getElementById('the-progress-bar');
progressBar.classList = 'b9k-progress';
var targetClass = e.target.getAttribute('data-progressClass');
if(targetClass && targetClass != '') {
progressBar.classList.add(targetClass);
};
};
<button onclick='changeProgres();' data-progressClass="">ZERO</button>
<button onclick='changeProgres();' data-progressClass="the-progress-bar-progress--25perc">25%</button>
<button onclick='changeProgres();' data-progressClass="the-progress-bar-progress--50perc">50%</button>
or
function changeProgress(progressClass__string) {
var targetClass = progressClass__string || '';
document.getElementById('the-progress-bar').classList = 'b9k-progress ' + progressClass__string;
};
<button onclick="changeProgres();">ZERO</button>
<button onclick="changeProgres('the-progress-bar-progress--25perc');">25%</button>
<button onclick="changeProgres('the-progress-bar-progress--50perc');">50%</button>

Dynamically added element function call not working

I have a problem with function call, when element is dynamically added.
Here is the link to code pen example. Function call - onclick - is from this button:
<button id="btnFocus" class="btnFocus" onclick="focusToDIV($(this))">Focus to DIV</button>
Function focusToDIV:
var focusToDIV = function(btnReference){
btnReference.parent().find("#div3").focus();
}
First element which contains this button is statically added. All the other elements can be added with button 'Add new'. With statically added element function focusToDIV gets called and div3 receives focus.
With dynamically added elements btnReference is not defined, that is why this error is thrown:
Uncaught TypeError: Cannot read property 'parent' of undefined
How to make this function work (put focus on div3 with click on btnFocus) with dynamically added elements? Why is btnReference not defined, if element is added dynamically to DOM?
var focusToDIV = function(btnReference){
btnReference.parent().find("#div3").focus();
}
var addNew = function(){
$("#divMain").append("<div class='divContainer' class='divContainer'> <div id='divInner' class='divInner'>" +
"<div id='div2' class='div2'> <div id='div3' class='div3' contentEditable='true'></div>" +
"</div></div> <button id='btnFocus' class='btnFocus' onclick='focusToDIV($(this))'>Focus to DIV</button> </div>");
}
.divMain{
height: 100vh;
width: 100vw;
}
.divContainer{
position: relative;
display: inline-block;
left: 20%;
top: 10%;
}
.divInner{
width: 300px;
height: 300px;
border: 1px solid black;
}
.div2{
position: relative;
left: 20px;
top: 20px;
width: 200px;
height: 100px;
border: 1px solid blue;
}
.btnFocus{
position: absolute;
top: 305px;
}
.div3{
position: relative;
left: 10%;
top: 10%;
width: 150px;
height: 80px;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divMain" class="divMain">
<button id="btnAdd" onclick="addNew()">Add new</button>
<div class="divContainer" class="divContainer">
<div id="divInner" class="divInner" >
<div id="div2" class="div2">
<div id="div3" class="div3" contentEditable="true"></div>
</div>
</div>
<button id="btnFocus" class="btnFocus" onclick="focusToDIV($(this))">Focus to DIV</button>
</div><!-- divContainer -->
</div><!-- divMain -->

You need to change the onclick method from focusToDIV() to focusToDIV($(this)).
As the element wasn't passed btnReference is undefined and you were calling a method on that undefined variable.
var addNew = function(){
$("#divMain").append("<div class='divContainer' class='divContainer'> <div id='divInner' class='divInner'>" +
"<div id='div2' class='div2'> <div id='div3' class='div3' contentEditable='true'></div>" +
"</div></div> <button id='btnFocus' class='btnFocus' onclick='focusToDIV($(this))'>Focus to DIV</button> </div>");
}

New to javascript trying to figure this out

So I'm trying to make multiple lights activate on button clicks and I'm not sure what I'm doing wrong here.
I thought I could make this into a function and then pass it the id name but it looks like it's not acting the way I want.
html
<div class="lights">
<div id="red"></div>
<div id="yellow"></div>
<div id="green"></div>
</div>
<div class="button">
<button id="red_button"> Red Button </button>
<button id="yellow_button">Yellow Button </button>
<button id="green_button">Green Button </button>
</div>
css
.lights{
height: 600px;
width: 200px;
background-color: black;
padding-top: 15px;
}
.button{
padding-top: 20px;
}
#red,
#yellow,
#green {
margin: 0 auto;
background-color: black;
border-radius: 50%;
width: 180px;
height: 180px;
margin-top: 10px;
}
#red.active {
background-color: red;
}
#yellow.active {
background-color: yellow;
}
#green.active {
background-color: green;
}
jquery
function click(e) {
$('#red,#yellow,#green').removeClass('active');
$('e').addClass('active');
}
$('#red_button').click(click('#red'));
$('#yellow_button').click(click('#yellow'));
$('#green_button').click(click('#green'));
http://jsfiddle.net/0m9wos1r/1/

A few things. I wouldn't recommend naming your function after an event, although it should still work. The issue with your code is that you're immediately calling the function, and in the function you quoted the parameter. Use this instead:
function click(e) {
$('#red,#yellow,#green').removeClass('active');
$(e).addClass('active');
}
$('#red_button').click(function () {
click('#red')
});
$('#yellow_button').click(function () {
click('#yellow')
});
$('#green_button').click(function () {
click('#green')
});
.lights {
height: 600px;
width: 200px;
background-color: black;
padding-top: 15px;
}
.button {
padding-top: 20px;
}
#red, #yellow, #green {
margin: 0 auto;
background-color: black;
border-radius: 50%;
width: 180px;
height: 180px;
margin-top: 10px;
}
#red.active {
background-color: red;
}
#yellow.active {
background-color: yellow;
}
#green.active {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="lights">
<div id="red"></div>
<div id="yellow"></div>
<div id="green"></div>
</div>
<div class="button">
<button id="red_button">Red Button</button>
<button id="yellow_button">Yellow Button</button>
<button id="green_button">Green Button</button>
</div>

Fixed: http://jsfiddle.net/0m9wos1r/4/
2 issues you need to fix:
The function call within the click call. Like so, using an anonymous function:
$('#red_button').click(function(){click('#red')});
The selector within the click function. Like so:
$(e).addClass('active');