We Keep Coding

while drag and drop the job box, how to automatically resize or cover the timetable blocks based on the data-column value in job box in jquery?

After I drop the job box in to the time table, I want the job box to cover the timetable boxes according to the data-column value on the job box. Example: if the job-A box has 4 in data-column attribute, then this should cover 4 boxes in timetable, meaning this job needs 4 hours to complete.Thank you in advance.
$(function() {
$('.job').draggable({
revert: true
});
$('.container').droppable({
hoverClass: 'active',
drop: function(e, ui) {
$(this).html(ui.draggable.remove().html());
$(this).droppable('destroy');
$(this).addClass("dropped");
},
over: function(e, ui) {
$(this).addClass("dropped");
},
out: function(e, ui) {
$(this).removeClass("dropped");
}
});
});
.job {
width: 50px;
height: 15px;
padding: 2px;
margin: 0px 5px 10px 0;
border: 1px solid red;
background-color: #B9CD6D;
}
.dropJob {
display: grid;
grid-template-columns: 12vh repeat(9, 1fr);
}
.dropJob div {
border: 2px solid #1974a8;
border-right: none;
border-bottom: none;
padding: 3px 4px;
background: #a5d5ff;
line-height: 25px;
}
.dropJob div:nth-of-type(10n) {
border-right: 2px solid #1974a8;
}
.dropJob div:nth-last-child(-n + 10) {
border-bottom: 2px solid #1974a8;
}
.dropJob div:nth-child(10n + 1) {
background: #32a4e5;
font-size: 12px;
text-shadow: 1px 1px 2px #103143;
color: #e3f5ff;
}
.dropped {
background: green !important;
}
.timing {
display: grid;
grid-template-columns: 12vh repeat(9, 1fr);
}
.timing div {
text-align: center;
align-items: center;
text-shadow: 1px 1px 2px #103143;
color: #e3f5ff;
font-size: 15px;
background: #1974a8;
}
.scheduleContain {
width: 100%;
margin: 0 auto;
}
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div class="job" data-column="4">Job-A</div>
<div class="job" data-column="1">Job-B</div>
<div class="job" data-column="2">Job-C</div>
<div class="job" data-column="7">Job-D</div>
<div class="scheduleContain">
<div class="timing">
<div>Name</div>
<div>9am</div>
<div>10am</div>
<div>11am</div>
<div>12am</div>
<div>1pm</div>
<div>2pm</div>
<div>3pm</div>
<div>4pm</div>
<div>5pm</div>
</div>
<div class="dropJob">
<div>John Smith</div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
</div>
</div>

You can try like this:
$(function() {
$('.job').draggable({
revert: true
});
$('.container').droppable({
hoverClass: 'active',
drop: function(e, ui) {
const job = ui.draggable
let columnSize = job.data('column')
let tempContainer = $(this);
let randomColor = "#" + Math.floor(Math.random()*16777215).toString(16) + " !important";
for (let i = 1; i <= columnSize; i++) {
$(tempContainer).addClass('dropped')
$(tempContainer).css('background-color', randomColor)
if (i > 1 && i <= columnSize) {
$(tempContainer).addClass('dropped-child')
}
$(tempContainer).data('job-id', job.text())
tempContainer = tempContainer.next();
}
$(this).html(ui.draggable.remove().html());
$(this).droppable('destroy');
$(this).addClass("dropped");
},
over: function(e, ui) {
$(this).addClass("dropped");
},
out: function(e, ui) {
$(this).removeClass("dropped");
}
});
});
.job {
width: 50px;
height: 15px;
padding: 2px;
margin: 0px 5px 10px 0;
border: 1px solid red;
background-color: #B9CD6D;
}
.dropJob {
display: grid;
grid-template-columns: 12vh repeat(9, 1fr);
}
.dropJob div {
border: 2px solid #1974a8;
border-right: none;
border-bottom: none;
padding: 3px 4px;
background: #a5d5ff;
line-height: 25px;
}
.dropJob div:nth-of-type(10n) {
border-right: 2px solid #1974a8;
}
.dropJob div:nth-last-child(-n + 10) {
border-bottom: 2px solid #1974a8;
}
.dropJob div:nth-child(10n + 1) {
background: #32a4e5;
font-size: 12px;
text-shadow: 1px 1px 2px #103143;
color: #e3f5ff;
}
.dropped {
background: green;
}
.timing {
display: grid;
grid-template-columns: 12vh repeat(9, 1fr);
}
.timing div {
text-align: center;
align-items: center;
text-shadow: 1px 1px 2px #103143;
color: #e3f5ff;
font-size: 15px;
background: #1974a8;
}
.scheduleContain {
width: 100%;
margin: 0 auto;
}
.dropped-child {
border-left: none !important;
}
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div class="job" data-column="4">Job-A</div>
<div class="job" data-column="1">Job-B</div>
<div class="job" data-column="2">Job-C</div>
<div class="job" data-column="7">Job-D</div>
<div class="scheduleContain">
<div class="timing">
<div>Name</div>
<div>9am</div>
<div>10am</div>
<div>11am</div>
<div>12am</div>
<div>1pm</div>
<div>2pm</div>
<div>3pm</div>
<div>4pm</div>
<div>5pm</div>
</div>
<div class="dropJob">
<div>John Smith</div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
</div>
</div>

conditions for divs in drag and drop

I have 2 droppable divs called drop1 and drop2, and 2 draggable elements called ans1 and ans2. I want to make an alert when ans1 is inside drop1 and ans2 is inside drop2. Both conditions have to be fulfilled (not caring about which is fulfilled first) in order for the alert to come out.
$("#ans1, #ans2").draggable({
revert: "valid",
cursor: "move"
});
$("#drop1, #drop2").droppable({
drop: function (event, ui) {
if ($("#ans1", $("#drop1")) && $("#ans2", $(".drop2"))) {
alert("correct");
}
});
<div id="drop1" class="b1" style="background-color: white; border: solid; height: 6vw; width: 13vw; border-radius: 7px">
</div>
<div id="drop2" class="b1" style="background-color: white; border: solid; height: 6vw; width: 13vw; border-radius: 7px">
</div>
<div id="ans2" style="background-color: white; border: solid; cursor: move; height: 6vw; width: 13vw; border-radius: 7px">
a change
</div>
<br/>
<div id="ans1" style="background-color: white; border: solid; cursor: move; height: 6vw; width: 13vw; border-radius: 7px">
chemical reaction system
</div>

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1, #div2 {
float: left;
width: 100px;
height: 35px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="https://www.google.co.in/logos/doodles/2018/sergei-eisensteins-120th-birthday-5380775741489152.2-s.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>

Try to use accept option and ui.draggable.text() of the droppable() function
Stack Snippet
$(".drag-div>div").draggable({
revert: "invalid",
cursor: "move"
})
$(".drop-div>div").droppable({
accept: ".drag-div>div",
drop: function(event, ui) {
$(this).text(ui.draggable.text());
if ($("#drop1").text() == $("#ans1").text() && $("#drop2").text() == $("#ans2").text()) {
alert("correct");
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="drop-div">
<div id="drop1" class="b1" style="background-color: white; border: solid; height: 6vw; width: 13vw; border-radius: 7px">
</div>
<br/>
<div id="drop2" class="b1" style="background-color: white; border: solid; height: 6vw; width: 13vw; border-radius: 7px">
</div>
</div>
<br/>
<div class="drag-div">
<div id="ans2" style="background-color: white; border: solid; cursor: move; height: 6vw; width: 13vw; border-radius: 7px">
a change
</div>
<br/>
<div id="ans1" style="background-color: white; border: solid; cursor: move; height: 6vw; width: 13vw; border-radius: 7px">
chemical
</div>
</div>

I can't get iframe to get data from textarea

I am trying to make an iframe which shows text putted in the textarea.
How can I do that? Am I missing something here?
<html>
<head>
<title>Code Player</title>
<script type="text/javascript" src="jquery.min.js"></script>
<!--i am using the latest jquery-->
<style type="text/css">
body{
font-family: sans-serif;
margin: 0;
padding: 0;
}
#header{
width: 100%;
background-color: #EEEEEE;
padding: 5px;
height: 30px;
}
#logo{
float: left;
font-weight: bold;
font-size: 120%;
padding: 3px 5px;
}
#buttonContainer{
width: 240px;
margin: 0 auto;
}
.toggleButton{
float: left;
border: 1px solid gray;
padding: 6px;
border-right: none;
font-size: 90%;
}
#html{
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#output{
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-right: 1px solid gray;
}
.active{
background-color: #E8F2FF;
}
.highlightedButton{
background-color: gray;
}
textarea{
resize: none;
border-top: none;
border-color: gray;
}
.panel{
float: left;
width: 49%;
border-left: none;
}
iframe{
border: none;
}
</style>
</head>
<body>
<div id="header">
<div id="logo">
CodePlayer
</div>
<div id="buttonContainer">
<div class="toggleButton active" id="html">HTML</div>
<div class="toggleButton" id="css">CSS</div>
<div class="toggleButton" id="javascript">JavaScript</div>
<div class="toggleButton active" id="output">Output</div>
</div>
</div>
<div id="bodyContainer">
<!--I want to get iframe data from the textarea section-->
<textarea id="htmlPanel" class="panel">Hello World!</textarea>
<iframe id="outputPanel" class="panel"></iframe>
</div>
<script type="text/javascript">
$(".toggleButton").hover(function () {
$(this).addClass("highlightedButton");
}, function () {
$(this).removeClass("highlightedButton");
});
$(".toggleButton").click(function () {
$(this).toggleClass("active");
$(this).removeClass("highlightedButton");
});
$(".panel").height($(window).height() - $("#header").height() - 15);
$(".panel").width($((window).width() / 2));
$("iframe").contents().find("html").html($("#htmlPanel").val());
$("textarea").on('change keyup paste', function() {
$("iframe").contents().find("html").html($("#htmlPanel").val());
});
</script>
</body>
</html>
Everything in this code works expect the iframe. I can't get the data from textarea.

You have a syntax error, otherwise it works fine. Demo
$(".panel").width($((window).width() / 2));
should be
$(".panel").width($(window).width() / 2);

Combining borders after showing data

I am attempting to combine a border for a title and description. The title shows upon page load, but once the title is clicked its description appears below it in its own border. I want those borders to combine when the description is showing.
I created a snipet to show what I have so far.
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
// Hide all other descriptions
$('.service_description').not(thisDescription).hide();
// Toggle (show or hide) this description
thisDescription.toggle(500);
});
.service_list {
margin-left: 20%;
}
.service_title {
border: 1px solid black;
padding: 8px;
width: 20%;
margin: 15px 0;
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
border: 1px solid black;
padding: 8px;
width: 20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title">Floors</div>
<div class="service_description">The best floors!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Roofs</div>
<div class="service_description">Your roof will be perfect!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Siding</div>
<div class="service_description">mmmm siding.</div>
</div>
<div class="service_wrapper">
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Kitchen Remodels</div>
<div class="service_description">Pretty kitchen.</div>
</div>
</div>
I am trying to make it do something like this:
http://royalwoodfloor.com/services/
Does anyone know what I should do?
Image

Just change your css like this
.service_title {
border: 1px solid black;
padding: 8px;
width: 20%;
margin: 15px 0 0 0;/* update the margin */
}
here is the example link the example link
Updated the code snipet

Try something like this. Slightly changed your HTML structure and css.
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title"><span>Floors</span>
<div class="service_description"><span>The best floors!</span></div>
</div>
</div>
</div>
CSS
.service_list {
margin-left: 20%;
}
.service_title {
border: 1px solid black;
width: 30%;
}
.service_title span{
padding:8px 8px 8px 8px;
display:inline-block;
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
border-top: 1px solid black;
}
.service_description span{
padding:10px
}

Separate from the animation transition not being the same as the example, this fixes the margin issue:
.service_description {
display: none;
border: 1px solid black;
padding: 8px;
width: 20%;
margin-top: -16px;
}
See it working here

Problems with drop an item to card

When I add a Card in in-box list via button (Add a card), the card is sortable between the different lists. This works fine. The problem comes, when I try to drag an item from member list and drop it to the card. It doesn't work.
Here is the Demo
HTML:
<body>
<div id="wrapper">
<div id="inboxList" class="cellContainer">
<p style="display: inline;">Inbox</p>
<button id="AddCardBtn">
Add A Card...
</button>
<div id="userAddedDiv"></div>
</div>
<!--Member list-->
<div id="members" class="cellContainer">
<br style="line-height: 23px" />
<p>Members</p>
<div class="draggable">1</div>
<div class="draggable">2</div>
<div class="draggable">3</div>
</div>
<div id="onHoldList" class="cellContainer">
<p>On Hold</p>
</div>
<div id="Done" class="cellContainer">
<p>On Hold</p>
</div>
</div>
</body>
Jquery:
$(function () {
$('.cellContainer').sortable({
items: '.sortable-div',
containment: 'document',
cursor: 'crosshair',
opacity: '0.70',
connectWith: '.cellContainer',
hoverClass: '.border'
});
});
$(".draggable").draggable({ revert: "invalid", snap: "true", snapMode: "inner", helper: 'clone' });
$(".sortable-div").droppable({
accept: '.draggable',
drop: function (event, ui) {
ui.helper.css('top', '');
ui.helper.css('left', '');
$(this).find('.bottom').prepend(ui.helper);
}
});
CSS:
#members, #onHoldList, #Done {
width: 275px;
height: 230px;
background-color: #f0f0f0;
border: 1px solid black;
margin-left: 1%;
margin-top: 0.4%;
border-radius: 10px;
box-shadow: 7px 7px 7px #828282;
overflow: auto;
}
#inboxList {
width: 275px;
height: 230px;
background-color: #f0f0f0;
border: 1px solid black;
margin-left: 0.5%;
margin-top: 0.4%;
border-radius: 10px;
box-shadow: 7px 7px 7px #828282;
overflow: auto;
}
.cellContainer .sortable-div {
background: red;
width: 260px;
height: 150px;
margin-left: 2.3%;
border-radius: 10px;
border: 2px solid black;
box-shadow: 0px 7px 7px #828282;
margin-bottom: 1%;
}
.draggable {
display:inline-block;
border:1px solid blue;
height: 50px;
width: 50px;
margin-right: 1px;
text-align: center;
vertical-align: center;
}
.bottom {
position: absolute;
bottom: 0;
height:25px;
width:150px;
}

The problem is because your are creating items dynamically and they have not automatically the droppable enabled. To do so attach the droppable when you create the new element.
To handle the sortable feature of the board when you drop, clone the element anche change its position to relative.
Code:
$('#AddCardBtn').click(function () {
var numberOfDiv = [100];
with(document) {
var $newDiv = $('<div />').addClass('sortable-div');
$('#userAddedDiv').append($newDiv)
$newDiv.droppable({
accept: '.draggable',
drop: function (event, ui) {
$(this).append($(ui.helper).clone().css({position: 'relative', top: '0', left:'0'}));
}
});
for (var i = 0; i < numberOfDiv; i++) {
numberOfDiv[i] = $newDiv;
}
}
});
Demo: http://jsfiddle.net/IrvinDominin/zjBP2/