Develop Reference

How to contain jQuery datepicker within div?

UPDATES: I tried the suggestions below but they did not work.
I want to contain the calendar within the white div with a dark grey border (class = "profileEdit"), and only have its overflow viewable by scrolling. Right now, it's spilling onto profileEdit's parent divs.
SELECTED HTML
<div class="profileEdit">
<div class="profilePic">
</div>
<input type="text" class="form-control" id="usernameEdit" placeholder="Damon">
<form class="habitForm">
<h2>MY EXERCISE HABIT</h2>
<div class="habitFormGroup">
<div class="custom-select">
<select>
<option value="0">Before</option>
<option value="1">After</option>
<option value="2">During</option>
<option value="3">Every time</option>
<option value="4">When</option>
</select>
</div>
<input type="text" class="form-control" id="triggerEdit" placeholder="breakfast">
<p class="punctuation">,</p>
</div>
<p class="helperText">trigger</p>
<div class="habitFormGroup lockedLesson">
<p>I will</p>
<div class="exerciseEdit"></div>
<p class="punctuation">.</p>
</div>
<p class="helperText lockedLesson" id="exerciseHelper">exercise</p>
<div class="habitFormGroup lockedLesson">
<div class="exerciseEdit"></div>
<p>is my reward.</p>
</div>
<p class="helperText lockedLesson">reward</p>
</form>
<div class="reminderSwitch">
<p>Remind me to perform habit</p>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div>
<form class="reminderControls">
<label for="startDate">Start:</label>
<!-- CALENDAR -->
<div class="dateParent">
<input type="text" id="datepicker" value="">
</div>
</form>
</div>
Save</button>
</div>
DATEPICKER JQUERY
$(function () {
$("#datepicker").datepicker();
});
DATEPICKER CSS
.profileEdit {
text-align: center;
padding: 1.5rem;
margin: 3rem 1.5rem;
border: grey solid;
border-radius: 3px;
overflow-y: scroll;
position: relative;
}
#ui-datepicker-div {
position: absolute;
width: 280px;
font-family: frutigerLight;
}
.ui-widget-header.ui-widget-header {
background: none;
background-color: white;
border: none;
}
UPDATE: Solution works, but messes up spacing: The space between the "Starts" toggles on and off as well.

You can use an inline datepicker and control its visibility with JavaScript:
$(function() {
$('.dateParent').datepicker({ inline: true, altField: '#datepicker' });
$('#datepicker').focus(function(event) {
event.preventDefault();
$('.ui-datepicker').addClass('shown');
return false;
});
$(document).click(function(event) {
if(!$(event.target).is('.dateParent *'))
$('.ui-datepicker').removeClass('shown');;
});
});
.profileEdit {
text-align: center;
padding: 1.5rem;
margin: 3rem 1.5rem;
border: grey solid;
border-radius: 3px;
position: relative;
}
.ui-datepicker {
visibility: hidden;
height: 0;
margin: 1rem auto;
}
.ui-datepicker.shown {
visibility: visible;
height: initial;
}
.ui-widget-header.ui-widget-header {
background: none;
background-color: white;
border: none;
}
<script src="https://code.jquery.com/jquery-3.6.0.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js" type="text/javascript"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css" type="text/css">
<div class="profileEdit">
<div class="profilePic">
</div>
<input type="text" class="form-control" id="usernameEdit" placeholder="Damon">
<form class="habitForm">
<h2>MY EXERCISE HABIT</h2>
<div class="habitFormGroup">
<div class="custom-select">
<select>
<option value="0">Before</option>
<option value="1">After</option>
<option value="2">During</option>
<option value="3">Every time</option>
<option value="4">When</option>
</select>
</div>
<input type="text" class="form-control" id="triggerEdit" placeholder="breakfast">
<p class="punctuation">,</p>
</div>
<p class="helperText">trigger</p>
<div class="habitFormGroup lockedLesson">
<p>I will</p>
<div class="exerciseEdit"></div>
<p class="punctuation">.</p>
</div>
<p class="helperText lockedLesson" id="exerciseHelper">exercise</p>
<div class="habitFormGroup lockedLesson">
<div class="exerciseEdit"></div>
<p>is my reward.</p>
</div>
<p class="helperText lockedLesson">reward</p>
</form>
<div class="reminderSwitch">
<p>Remind me to perform habit</p>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div>
<form class="reminderControls">
<label for="startDate">Start:</label>
<!-- CALENDAR -->
<div class="dateParent">
<input type="text" id="datepicker" value="">
</div>
</form>
</div>
Save</button>
</div>

Try to remove height attr from calendar element. If it doesnt work check this jQuery UI inline Datepicker auto-resize to parent container

As a UX designer I'd think that you want to either make the containing DIV larger (personally think a popup like the calendar shouldn't extend outside it's container) or possibly change the direction that the calendar control opens in relative to the mouse position. If your trigger control is at the bottom of it's container you have the calendar pop upwards instead of down.

How to set all flex elements with the same width which adapts to the longest text？

I have two groups of checkboxes, each checkbox with a "ring" when mouse hover (i just simplified this in the code below, the ring shows directly, anyway it's not that much important.)
the thing is I need to keep all the checkbox row with the same width, which the width should adapt to the longest text one as well, so all "ring" looks same. (in this case, all the width of the 4 rings the width should be the same as the checkbox1)
.group {
display: flex;
flex-direction: column;
}
.checkbox {
border: 2px solid red;
border-radius: 6px;
width: fit-content;
}
<div class="group">
<h2>Group 1</h2>
<div class="checkbox"><input type="checkbox" id="checkbox1"><label for="checkbox1">checkbox1 super super long texttexttexttexttexttexttexttexttexttext</label></div>
<div class="checkbox"><input type="checkbox" id="checkbox2"><label for="checkbox2">checkbox2</label></div>
</div>
<div class="group">
<h2>Group 2</h2>
<div class="checkbox"><input type="checkbox" id="checkbox3"><label for="checkbox3">checkbox3 abcdabcdabcd abcdabcdabcdabcd</label></div>
<div class="checkbox"><input type="checkbox" id="checkbox4"><label for="checkbox4">checkbox4 abcdabcdabcd</label></div>
</div>
Is there anyway to implement it? (can't set a fixed value, the text length is dynamic)

You should assign width: fit-content to the parent container, not the children.
Also I changed all the inline styles into external styles for better visualization:
.group {
display: flex;
flex-direction: column;
width: fit-content;
}
.input-group {
border: 2px solid red;
border-radius: 6px;
}
<div class="group">
<h2>Group 1</h2>
<div class="input-group">
<input type="checkbox" id="checkbox1" />
<label for="checkbox1">checkbox1 super super long texttexttexttexttexttexttexttexttexttext</label>
</div>
<div class="input-group">
<input type="checkbox" id="checkbox2" />
<label for="checkbox2">checkbox2</label>
</div>
</div>
<div class="group">
<h2>Group 2</h2>
<div class="input-group">
<input type="checkbox" id="checkbox3" />
<label for="checkbox3">checkbox3 abcdabcdabcd abcdabcdabcdabcd</label>
</div>
<div class="input-group">
<input type="checkbox" id="checkbox4" />
<label for="checkbox4">checkbox4 abcdabcdabcd</label>
</div>
</div>

jQuery and HTML - clicking on current div box id to display sub dvi box content

This is a my jQuery and HTML code.
my goal is when I click on the current box1, box2 or box3 , I want to display current sub box.
For example : when I click on current box1 should be open current sub_box_1, and so. I did some jQuery code but I can't get result.
Thanks!
$(document).ready(function() {
$('.sub_box').hide();
$('.box').click(function() {
$(this).$('#sub_box_1').show();
});
});
.box {
width: 150px;
height: 150px;
float: left;
margin-left: 20px;
border: 1px solid #333;
margin-top: 10px;
}
.sub_box {
width: 150px;
height: 150px;
border: 1px solid #09c;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="wrapp">
<div id="1" class="box">
<b>Box 1</b>
<div id="sub_box_1" class="sub_box">
<input type="text" name="user_name" placeholder='User Name' />
<button>ADD</button>
</div>
<!--sub_box_1-->
</div>
<!--1-->
<div id="2" class="box">
<b>Box 2</b>
<div id="sub_box_2" class="sub_box">
<input type="text" name="user_email" placeholder='User Email' />
<button>ADD</button>
</div>
<!--sub_box_2-->
</div>
<!--2-->
<div id="3" class="box">
<b>Box 3</b>
<div id="sub_box_3" class="sub_box">
<input type="text" name="user_phone" placeholder='User Phone' />
<button>ADD</button>
</div>
<!--sub_box_3-->
</div>
<!--3-->
</div>
<!--wrapp-->
</body>
</html>

Try using this:
$(document).ready(function() {
$('.sub_box').hide();
$('.box').click(function() {
$(this).children('.sub_box').show();
});
});
jsfiddle example: https://jsfiddle.net/d6zf0n1b/

When you are using $(this).$('#sub_box_1'). you are trying to execute the $ function of the return of $(this). There is no $ function of $(this). Hence you are getting an error.
The other problem is that you are trying to access by the "#" accessor which matches the id not the class.
So this is why Andre's answer works. He is starting from the box that was clicked and looking for immediate children that have the class "sub_box".
One thing to keep in mind is that the children method will only search one level down from the parent. If the box could be deeper down, you should use the 'find' method.

You can use the jQuery find method (https://api.jquery.com/find/), which will find elements inside the the element matching the selector you use, try this:
$(document).ready(function() {
$('.sub_box').hide();
$('.box').click(function() {
$(this).find('.sub_box').show();
});
});
.box {
width: 150px;
height: 150px;
float: left;
margin-left: 20px;
border: 1px solid #333;
margin-top: 10px;
}
.sub_box {
width: 150px;
height: 150px;
border: 1px solid #09c;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="wrapp">
<div id="1" class="box">
<b>Box 1</b>
<div id="sub_box_1" class="sub_box">
<input type="text" name="user_name" placeholder='User Name' />
<button>ADD</button>
</div>
<!--sub_box_1-->
</div>
<!--1-->
<div id="2" class="box">
<b>Box 2</b>
<div id="sub_box_2" class="sub_box">
<input type="text" name="user_email" placeholder='User Email' />
<button>ADD</button>
</div>
<!--sub_box_2-->
</div>
<!--2-->
<div id="3" class="box">
<b>Box 3</b>
<div id="sub_box_3" class="sub_box">
<input type="text" name="user_phone" placeholder='User Phone' />
<button>ADD</button>
</div>
<!--sub_box_3-->
</div>
<!--3-->
</div>
<!--wrapp-->
</body>
</html>

How can I add event if multple checkboxes are checked?

https://jsfiddle.net/rsu1cjss/7/
I want show div (only this one)
<div class="two-colors box">You have selected <strong>two colors</strong> so i am here</div>
If red and green is checked
JS
$('input[type="checkbox"]').click(function(){
if($(this).attr("value")=="red"){
$(".red").toggle();
}
if($(this).attr("value")=="green"){
$(".green").toggle();
}
if($(this).attr("value")=="blue"){
$(".blue").toggle();
}
if($(this).attr("value")=="yellow"){
$(".yellow").toggle();
}
});
HTML
<div>
<label><input type="checkbox" name="colorCheckbox" value="red"> red</label>
<label><input type="checkbox" name="colorCheckbox" value="green"> green</label>
<label><input type="checkbox" name="colorCheckbox" value="blue"> blue</label>
<label><input type="checkbox" name="colorCheckbox" value="yellow"> yellow</label>
</div>
<div class="red box">You have selected <strong>red checkbox</strong> so i am here</div>
<div class="green box">You have selected <strong>green checkbox</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue checkbox</strong> so i am here</div>
<div class="yellow box">You have selected <strong>blue checkbox</strong> so i am here</div>
<div class="two-colors box">You have selected <strong>two colors</strong> so i am here</div>
CSS
.box{
padding: 20px;
display: none;
margin-top: 20px;
border: 1px solid #000;
}
.red{ background: #ff0000; }
.green{ background: #00ff00; }
.blue{ background: #0000ff; }
.yellow{ background: yellow; }
.two-colors {background: pink}

In response to the click, check the checked properties on the red and green checkboxes, and only show the div if they're both true:
$('input[type="checkbox"]').click(function(){
var red = $("input[type=checkbox][value=red]")[0];
var green = $("input[type=checkbox][value=green]")[0];
$(".two-colors.box").toggle(red.checked && green.checked);
// ...
});
Note that the single-div conditions in that code are also wrong: The checkbox's value is always going to be "blue", "yellow", etc.; what changes is whether the checkbox is checked. So you can use the value (this.value) to look up the div to show, and the checked property for the argument to toggle:
$("." + this.value).toggle(this.checked);
So:
$('input[type="checkbox"]').click(function(){
// Handle the combined one
var red = $("input[type=checkbox][value=red]")[0];
var green = $("input[type=checkbox][value=green]")[0];
$(".two-colors.box").toggle(red.checked && green.checked);
// Handle the singles:
$("." + this.value).toggle(this.checked);
});
(Note that with input elements, in general $(this).attr("value") is incorrect for checking the value; use $(this).val() or just this.value as there's nothing special we need jQuery for in this case. The value attribute and the value property are not the same thing for input elements.)
Live Example:
$('input[type="checkbox"]').click(function() {
// Handle the combined one
var red = $("input[type=checkbox][value=red]")[0];
var green = $("input[type=checkbox][value=green]")[0];
$(".two-colors.box").toggle(red.checked && green.checked);
// Handle the singles:
$("." + this.value).toggle(this.checked);
});
.box {
padding: 20px;
display: none;
margin-top: 20px;
border: 1px solid #000;
}
.red {
background: #ff0000;
}
.green {
background: #00ff00;
}
.blue {
background: #0000ff;
}
.yellow {
background: yellow;
}
.two-colors {
background: pink
}
<div>
<label>
<input type="checkbox" name="colorCheckbox" value="red">red</label>
<label>
<input type="checkbox" name="colorCheckbox" value="green">green</label>
<label>
<input type="checkbox" name="colorCheckbox" value="blue">blue</label>
<label>
<input type="checkbox" name="colorCheckbox" value="yellow">yellow</label>
</div>
<div class="red box">You have selected <strong>red checkbox</strong> so i am here</div>
<div class="green box">You have selected <strong>green checkbox</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue checkbox</strong> so i am here</div>
<div class="yellow box">You have selected <strong>blue checkbox</strong> so i am here</div>
<div class="two-colors box">You have selected <strong>two colors</strong> so i am here</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Or with more jQuery: ;-)
$('input[type="checkbox"]').click(function(){
// Handle the combined one
var redChecked = $("input[type=checkbox][value=red]").is(":checked");
var greenChecked = $("input[type=checkbox][value=green]").is(":checked");
$(".two-colors.box").toggle(redChecked && greenChecked);
// Handle the singles:
var $this = $(this);
$("." + $this.val()).toggle($this.is(":checked"));
});
$('input[type="checkbox"]').click(function(){
// Handle the combined one
var redChecked = $("input[type=checkbox][value=red]").is(":checked");
var greenChecked = $("input[type=checkbox][value=green]").is(":checked");
$(".two-colors.box").toggle(redChecked && greenChecked);
// Handle the singles:
var $this = $(this);
$("." + $this.val()).toggle($this.is(":checked"));
});
.box {
padding: 20px;
display: none;
margin-top: 20px;
border: 1px solid #000;
}
.red {
background: #ff0000;
}
.green {
background: #00ff00;
}
.blue {
background: #0000ff;
}
.yellow {
background: yellow;
}
.two-colors {
background: pink
}
<div>
<label>
<input type="checkbox" name="colorCheckbox" value="red">red</label>
<label>
<input type="checkbox" name="colorCheckbox" value="green">green</label>
<label>
<input type="checkbox" name="colorCheckbox" value="blue">blue</label>
<label>
<input type="checkbox" name="colorCheckbox" value="yellow">yellow</label>
</div>
<div class="red box">You have selected <strong>red checkbox</strong> so i am here</div>
<div class="green box">You have selected <strong>green checkbox</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue checkbox</strong> so i am here</div>
<div class="yellow box">You have selected <strong>blue checkbox</strong> so i am here</div>
<div class="two-colors box">You have selected <strong>two colors</strong> so i am here</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Note that this assumes the only checkboxes with the values red and green are the ones you care about. If you need to narrow it down further, give them a class or ID.

Events availability from the container to the child element

In the following code, I have a DIV parent container which has a SPAN container and the SPAN container containing the INPUT child elements.
When I click the gray area which is for the DIV, I see the 'I'm clicked!' message. I also see the same message when I click the white area of the SPAN or the input elements.
Shouldn't the SPAN container prevent the DIV container onclick event?
<div onclick="clicked()" style="padding: 20px; background-color: gray">
<span style="padding: 10px; background-color: white">
<label for="us">US</label>
<input type="radio" name="us" />
<label for="canada">Canada</label>
<input type="radio" name="canada" />
<label for="europe">Europe</label>
<input type="radio" name="europe" />
</span>
</div>
<script>
function clicked() {
alert("I'm clicked!");
}
</script>

Try this -
<div id="clickableDiv" style="padding: 20px; background-color: gray">
<span id='spanEle' style="padding: 10px; background-color: white">
<label class="input-area" for="us">US</label>
<input class="input-area" type="radio" name="us" />
<label class="input-area" for="canada">Canada</label>
<input class="input-area" type="radio" name="canada" />
<label class="input-area" for="europe">Europe</label>
<input class="input-area"`enter code here` type="radio" name="europe" />
</span>
</div>
<script>
$(document),ready(function(){
$("#clickableDiv").bind('click', function(e){
if(e.target.id != 'spanEle' && !$('#'+e.target.id).hasClass('input-area')){
alert("I am clicked!");
}
});
});
</script>