We Keep Coding

Jquery accordion content height doesn't auto fit

I populate my accordion dynamically through API query, for some reason it doesn't auto-size itself based on my content height. I've already set height style: "content", and it still doesn't work. How can I set the height to auto-fit my content and remove the overflow?
Here's my code :
HTML :
<div id="job_accordion" class=""></div>
Javascript :
$(document).ready(function () {
$.get("https://api/open/jobs/?page_size=1000")
.done(function (data) {
let jobs_list = data.results.sort((a, b) => (a.organization_name > b.organization_name) ? 1 : -1)
let department_name = "";
$.each(jobs_list, function (index, job) {
let department_id = job.organization_name.toLowerCase();
if (department_name != job.organization_name) {
$('#job_accordion').append(`
<!--${job.organization_name}-->
<button class="accordion">${job.organization_name}</button>
<div class="panel">
<ol id="${department_id}_list">
</ol>
</div>`
);
department_name = job.organization_name;
}
$(`#${department_id}_list`).append(`<li>
<button type="button" class="btn-job" data-toggle="modal" data-target="#job_modal" onClick="displayJobModal(${job.id})">
${job.position_name}
</button>
</li>`);
});
$("#job_accordion").accordion({
event: 'click',
collapsible: true,
active: false,
// autoHeight: false,
fillSpace: true,
clearStyle: true,
heightStyle: "content",
animate: 200,
icons: false
}).children('li').on('mouseenter', function () {
$(this).find('h3').trigger('click');
});
})
.fail(function (request, error) {
console.log(error);
})
.always(function () {
});
});
CSS:
<style>
#job_accordion .ui-accordion-header a {
color: #fff;
line-height: 42px;
display: block;
font-size: 12pt;
width: 100%;
text-indent: 10px;
}
#job_accordion .panel {
border: 0;
color: #fff;
background: #000;
/*padding: 0 0 5em 0; */
border-top: 0;
/*overflow: hidden;*/
/*height: 1000px;*/
}
</style>

Found it, set max-height to fit-content.
#job_accordion .panel {
border: 0;
color: #fff;
background: #000;
padding: 0 0 0 0;
border-top: 0;
max-height: fit-content;
}

connecting two divs using jsplumb

I am using jsplumb to my project. I mentioned my sample below. when I drag and drop divs, divs should appear with anchor points. anchors points can be connecting each other. in my sample I did drag and drop part. but I am unable to complete the rest of the work. please check my sample and get an idea.
I am using jsplumb to my project. I mentioned my sample below. when I drag and drop divs, divs should appear with anchor points. anchors points can be connecting each other. in my sample I did drag and drop part. but I am unable to complete rest of the work. please check my sample and get the idea.
jsPlumb.ready(function() {
jsPlumb.Defaults.Container=$("#dropArea");
jsPlumb.Defaults.PaintStyle = { strokeStyle:"palevioletred", lineWidth:2,
dashstyle: '3 3'};
jsPlumb.Defaults.EndpointStyle = { radius:7, fillStyle:"palevioletred" };
jsPlumb.importDefaults({Connector : [ "Bezier", { curviness:50 } ]});
jsPlumb.connect({
connector: ["Straight"],
source:"element",
target:"element",
anchor: ["Left", "Right"],
endpoint:"Dot"
});
jsPlumb.setContainer($('#dropArea'));
var i = 1;
$(".element").draggable ({
helper : 'clone',
cursor : 'pointer',
tolerance : 'fit',
revert : true
});
$("#dropArea").droppable ({
accept: '.element',
containment: 'dropArea',
drop: function (e, ui) {
droppedElement = ui.helper.clone();
ui.helper.remove();
$(droppedElement).removeAttr("class");
jsPlumb.repaint(ui.helper);
var newAgent = $('<div>').attr('id', 'pro' + i).addClass('pro');
newAgent.text('Element ' + i);
$(droppedElement).draggable({containment: "dropArea"});
$('#dropArea').append(newAgent);
jsPlumb.draggable(newAgent, {
containment: 'parent' });
i++;
}
});
$("#dropArea").on('click', '.pro', function (e) {
i++;
var newState = $('<div>').attr('id', 'state' + i).addClass('section').
text('Section '+ (i-1));
var title = $('<div>').addClass('title');
var connect = $('<div>').addClass('connector').
text('Click here to drag');
newState.css({
'top': e.pageY,
'left': e.pageX });
newState.append(title);
newState.append(connector);
$(this).append(newState);
jsPlumb.makeTarget(newState, {
anchor: 'Continuous' });
jsPlumb.makeSource(connector, {
anchor: 'Continuous' });
newState.dblclick(function (e) {
jsPlumb.detachAllConnections($(this));
$(this).remove();
e.stopPropagation();
});
});
});
#import url(http://fonts.googleapis.com/css?family=Montserrat);
* {
font-family: 'Montserrat', sans-serif;
}
#dropArea {
position: relative;
resize: both;
margin-left: 180px;
border: 1px solid #aaaaaa;
width: 800px;
height: 650px;
overflow-x: scroll;
overflow-y: scroll;
}
.title {
padding: 10px;
cursor: move;
}
.connector {
font-size:10px;
text-align: center;
width: 100%;
height: 20px;
background-color: #ffffff;
cursor: pointer;
}
.element {
border: 1px solid gray;
text-align: center;
width: 170px;
height: 75px;
background-color: lightpink;
position: absolute;
}
.pro {
border: 1px solid gray;
text-align: center;
width: 170px;
height: 75px;
background-color: lightpink;
position: absolute;
}
.section {
font-size: 12px;
text-align: center;
font-weight: 200;
border: 1px solid black;
background-color: #ddddff;
}
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.7.13/js/jsplumb.js"></script>
</head>
<body>
<div class="element" id="cId">
</div>
<div id="dropArea">
</div>
</body>
</html>

Stop element moving on mouse scroll using rotatable class

I am currently working on a drag-drop web application whereupon users can plan a marquee layout.
Part of the functionality is that users can rotate certain items of furniture on the canvas. However, it seems that scrolling whilst your mouse pointer is over a rotatable element will also rotate that element, which causes problems, especially if the user has got their layout perfect and then scrolls down the page to fill in a form - potentially messing up the layout.
The app uses the rotatable class from jQuery, and implements the draggable and droppable classes.
This is my javascript:
$(function() {
//Make every clone image unique.
var counts = [0];
var resizeOpts = {
handles: "all",
autoHide: true
};
var nw = $("<div>", {
class: "ui-rotatable-handle"
});
var ne = nw.clone();
var se = nw.clone();
$('.box div.ui-rotatable-handle').addClass("ui-rotatable-handle-sw");
nw.addClass("ui-rotatable-handle-nw");
ne.addClass("ui-rotatable-handle-ne");
se.addClass("ui-rotatable-handle-se");
$(".dragImg").draggable({
helper: "clone",
//Create counter
start: function() {
counts[0]++;
}
});
$("#dropHere").droppable({
drop: function(e, ui) {
if (ui.draggable.hasClass("dragImg")) {
$(this).append($(ui.helper).clone());
//Pointing to the dragImg class in dropHere and add new class.
$("#dropHere .dragImg").addClass("item-" + counts[0]);
$("#dropHere .img").addClass("imgSize-" + counts[0]);
//Remove the current class (ui-draggable and dragImg)
$("#dropHere .item-" + counts[0]).removeClass("dragImg ui-draggable ui-draggable-dragging").addClass('rotatable');
$('.rotatable').resizable().rotatable();
//$(".rotatable").append(nw, ne, se);
$(".small-table div[class*='ui-rotatable-handle-']").bind("mousedown", function(e) {
$('.rotatable').resizable().rotatable();
$('.rotatable').rotatable("instance").startRotate(e);
});
$(".item-" + counts[0]).dblclick(function() {
$(this).remove();
});
make_draggable($(".item-" + counts[0]));
$(".imgSize-" + counts[0]).resizable(resizeOpts);
}
}
});
var zIndex = 0;
function make_draggable(elements) {
elements.draggable({
containment: 'parent',
start: function(e, ui) {
ui.helper.css('z-index', ++zIndex);
},
stop: function(e, ui) {}
});
}
});
As you can see, each item that is dragged is cloned once it's dropped on the dropzone (#dropHere div) and then remains on there unless it's double clicked. I want to know, is there any way to stop the element rotating if the user scrolls their mouse over it?
EDIT: Here is a FIDDLE of the app:

Note that you just can configure you rotatable by passing parameters as and object , one of those parameters is the wheelRotate whihch set to true by default , so you've just to create an object contating this param with false value : var rotateParams = {wheelRotate:false}; and then passe the object in the rotatable() fanction as below :
$('.rotatable').resizable().rotatable(rotateParams);
Please see bellow working snippet :
//adds are commented
$(function() {
//Make every clone image unique.
var counts = [0];
var resizeOpts = {
handles: "all",
autoHide: true
};
var nw = $("<div>", {
class: "ui-rotatable-handle"
});
var ne = nw.clone();
var se = nw.clone();
$('.box div.ui-rotatable-handle').addClass("ui-rotatable-handle-sw");
nw.addClass("ui-rotatable-handle-nw");
ne.addClass("ui-rotatable-handle-ne");
se.addClass("ui-rotatable-handle-se");
$(".dragImg").draggable({
helper: "clone",
//Create counter
start: function() {
counts[0]++;
}
});
/****** adding config param ******/
var rotateParams = {
wheelRotate: false
};
/**/
$("#dropHere").droppable({
drop: function(e, ui) {
if (ui.draggable.hasClass("dragImg")) {
$(this).append($(ui.helper).clone());
//Pointing to the dragImg class in dropHere and add new class.
$("#dropHere .dragImg").addClass("item-" + counts[0]);
$("#dropHere .img").addClass("imgSize-" + counts[0]);
//Remove the current class (ui-draggable and dragImg)
$("#dropHere .item-" + counts[0]).removeClass("dragImg ui-draggable ui-draggable-dragging").addClass('rotatable');
/****** applying the config param ******/
$('.rotatable').resizable().rotatable(rotateParams);
//$(".rotatable").append(nw, ne, se);
$(".small-table div[class*='ui-rotatable-handle-']").bind("mousedown", function(e) {
/****** applying the config param ******/
$('.rotatable').resizable().rotatable(rotateParams);
$('.rotatable').rotatable("instance").startRotate(e);
});
$(".item-" + counts[0]).dblclick(function() {
$(this).remove();
});
make_draggable($(".item-" + counts[0]));
$(".imgSize-" + counts[0]).resizable(resizeOpts);
}
}
});
var zIndex = 0;
function make_draggable(elements) {
elements.draggable({
containment: 'parent',
start: function(e, ui) {
ui.helper.css('z-index', ++zIndex);
},
stop: function(e, ui) {}
});
}
});
#outer-dropzone {
height: 140px;
}
#inner-dropzone {
height: 80px;
}
.dropzone {
background-color: #ccc;
border: dashed 4px transparent;
border-radius: 4px;
margin: 10px auto 30px;
padding: 10px;
width: 80%;
transition: background-color 0.3s;
}
.drop-active {
border-color: #aaa;
}
.drop-target {
background-color: #29e;
border-color: #fff;
border-style: solid;
}
.drag-drop {
display: inline-block;
min-width: 40px;
color: #fff;
background-color: transparent;
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
transition: background-color 0.3s;
}
.drag-drop.can-drop {}
.dragImg {
width: 50px;
height: 50px;
cursor: move;
}
.small-table {
width: 50px;
height: 50px;
cursor: move;
}
#dropHere {
width: 400px;
height: 400px;
border: dotted 1px black;
float: left;
}
.box {
border: 2px solid black;
width: 100px;
height: 100px;
background-color: green;
margin: 27px;
position: relative;
}
.ui-rotatable-handle {
background: url("https://image.ibb.co/knL4iF/1497037929_rotate_right.png");
background-repeat: no-repeat;
background-size: 100% 100%;
height: 25px;
width: 25px;
position: absolute;
top: -10px;
left: -10px;
}
.ui-rotatable-handle-sw {
bottom: -27px;
left: -27px;
}
.ui-rotatable-handle-nw {
top: -27px;
left: -27px;
}
.ui-rotatable-handle-se {
bottom: -27px;
right: -27px;
}
.ui-rotatable-handle-ne {
top: -27px;
right: -27px;
}
.small-table {
background-image: url('https://image.ibb.co/gXCjiF/small_table.png');
background-size: contain;
}
.dance-floor {
background-image: url('https://image.ibb.co/gjHjiF/dance_floor.png');
background-size: contain;
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.ui.rotatable/1.1/jquery.ui.rotatable.min.js"></script>
<div class="container">
<div class="dragImg small-table"></div>
<div class="dragImg dance-floor"></div>
<div id="dropHere"></div>
</div>

Mini/maximize effect on "dialogs"

Im trying to get a FB messaging system now i can append the dialogs next to eachother but how can i position the minimized dialog on bottom of the div ?
On the demo open 2 or more dialogs by clicking create button than click on titlebar it will minimize/maximize the dialog. What i want is a FB messaging effect $(this) titlebar must go down
Private = {
count: 0,
windowsOpen: [],
closeDialog: function(evt){
evt.parent().parent().remove()
Private.removeFromArray(evt.parent().text())
},
createDialog: function(nickname) {
var dialog = $("#private-dialog"),
dialogCloseButton = $("<span />", {
class: "ct icon-cancel close-private-dialog"
}),
dialogHeader = $("<div />", {
class: "private-section"
}),
dialogInit = $("<div />", {
class: "private-init",
html: "Here will come the messages"
}),
dialogTitle = $("<div />", {
class: "private-title",
html: nickname
});
dialogTitle.append(dialogCloseButton)
dialogHeader.append(dialogTitle, dialogInit)
dialog.append(dialogHeader)
},
dialogChecker: function(nickname){
if(Private.windowsOpen.indexOf(nickname) === -1){
Private.windowsOpen.push(nickname)
Private.createDialog(nickname)
} else {
console.log("this dialog is already open")
}
},
dialogHandler: function(nickname){
Private.dialogChecker(nickname)
},
dialogSize: function(evt){
evt.next().toggle()
},
events: function() {
$("#create").on("click", function(){
Private.openDialog()
})
$(document).on("click", ".close-private-dialog", function(){
Private.closeDialog($(this))
})
$(document).on("click", ".private-title", function(){
Private.dialogSize($(this))
})
},
init: function() {
Private.events()
},
openDialog: function(){
var nick = "test" + Private.count;
Private.dialogChecker(nick)
Private.count++;
},
removeFromArray: function(nickname){
if(Private.windowsOpen.indexOf(nickname) !== -1){
var index = Private.windowsOpen.indexOf(nickname);
Private.windowsOpen.splice(index, 1)
}
}
}
Private.init()
#main-container {
position: absolute;
border: 1px solid red;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#private-dialog {
position: absolute;
bottom: 0;
right: 0;
}
.private-section {
float: right;
width: 7em;
margin-left: 2px;
}
.private-title {
background-color: #e01859;
color: #FFF;
padding: .5rem;
border-radius: .3rem .3rem 0 0;
box-shadow: 0px -2px 1px rgba(16, 13, 14, 0.39);
cursor: pointer;
}
.private-init {
background-color: #FFF;
height: 5em;
padding: 1em;
}
.private-section > .icon-cancel:before {
float: right;
margin-top: 2px;
}
.close-private-dialog {
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
Click couple times on "create" button
<button id="create">
create
</button>
<div id="private-dialog">
</div>
</div>

Replace float: right with display: inline-block in .private-section and use prepend() rather than append() if you want to keep the same order when adding new popups.
There's a area at the bottom that still needs handling when all of them are collapsed, but that's the basic idea.
Private = {
count: 0,
windowsOpen: [],
closeDialog: function(evt){
evt.parent().parent().remove()
Private.removeFromArray(evt.parent().text())
},
createDialog: function(nickname) {
var dialog = $("#private-dialog"),
dialogCloseButton = $("<span />", {
class: "ct icon-cancel close-private-dialog"
}),
dialogHeader = $("<div />", {
class: "private-section"
}),
dialogInit = $("<div />", {
class: "private-init",
html: "Here will come the messages"
}),
dialogTitle = $("<div />", {
class: "private-title",
html: nickname
});
dialogTitle.append(dialogCloseButton)
dialogHeader.append(dialogTitle, dialogInit)
dialog.prepend(dialogHeader)
},
dialogChecker: function(nickname){
if(Private.windowsOpen.indexOf(nickname) === -1){
Private.windowsOpen.push(nickname)
Private.createDialog(nickname)
} else {
console.log("this dialog is already open")
}
},
dialogHandler: function(nickname){
Private.dialogChecker(nickname)
},
dialogSize: function(evt){
evt.next().toggle()
},
events: function() {
$("#create").on("click", function(){
Private.openDialog()
})
$(document).on("click", ".close-private-dialog", function(){
Private.closeDialog($(this))
})
$(document).on("click", ".private-title", function(){
Private.dialogSize($(this))
})
},
init: function() {
Private.events()
},
openDialog: function(){
var nick = "test" + Private.count;
Private.dialogChecker(nick)
Private.count++;
},
removeFromArray: function(nickname){
if(Private.windowsOpen.indexOf(nickname) !== -1){
var index = Private.windowsOpen.indexOf(nickname);
Private.windowsOpen.splice(index, 1)
}
}
}
Private.init()
#main-container {
position: absolute;
border: 1px solid red;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#private-dialog {
position: absolute;
bottom: 0;
right: 0;
}
.private-section {
display: inline-block;
width: 7em;
margin-left: 2px;
}
.private-title {
background-color: #e01859;
color: #FFF;
padding: .5rem;
border-radius: .3rem .3rem 0 0;
box-shadow: 0px -2px 1px rgba(16, 13, 14, 0.39);
cursor: pointer;
}
.private-init {
background-color: #FFF;
height: 5em;
padding: 1em;
}
.private-section > .icon-cancel:before {
float: right;
margin-top: 2px;
}
.close-private-dialog {
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
Click couple times on "create" button
<button id="create">
create
</button>
<div id="private-dialog">
</div>
</div>

Display the value from a input box inside popover under the DOM element which creates the dialog

I'm a newbie and learning by self and started working on projects. Currently I'm working on drag and drop task for that I'm using jQuery UI to make clone for dragged element. That's all working fine.
But I have a requirement to create a Popover box which contain form inside of it. I want to display the value that entered in the popover dialog box under the corresponding clone element which creating the Popover box. Please check my code below.
var $clone, cloneId;
var wardInfo;
var counter = 1;
$(document).ready(function($) {
$(".drop-zone").droppable({
accept: '.drag',
drop: function(event, ui) {
$clone = ui.helper.clone();
$clone.attr({
'data-toggle': 'popover',
'data-placement': 'bottom',
'data-dismiss': 'close',
'data-original-title': 'Add Title to Dialog'
});
if (!$clone.is('.inside-drop-zone')) {
$(this).append($clone.addClass('inside-drop-zone').draggable({
containment: '.drop-zone',
zIndex: '999'
}));
$clone.resizable({
helper: "ui-resizable-helper",
handles: 'ne, se, sw, nw, n, s, w, e',
aspectRadio: true
});
}
cloneId = $clone.attr("id", "clonedElement" + counter);
wardInfo = '<div class="form-group "><div class="col-md-12 col-lg-12 col-sm-12 col-center"><label class="control-label input"><input type="text" class="form-control" name="addValue" placeholder="Enter Value" id="addValue"/></label></div><div class="col-md-12 col-lg-12 col-sm-12 col-center"><button id="btntest" class="btn btn-primary btn-sm assignedGroup" type="button" data-target-id="addValue">ADD</button></div></div>';
console.log(wardInfo);
$("#clonedElement" + counter).popover({
html: true,
content: wardInfo
});
$(document).on('click', '#btntest', function() {
var resDataVal;
var contentValue = $('#addValue').val();
alert('Contenet Value: ' + contentValue);
if (!contentValue == "" || !contentValue == undefined || !contentValue == null) {
var dataVal = $clone.attr('data-contentValue', contentValue);
//$("#clonedElement1").popover('hide');
var resPara = $('<p id="elVal"></p>').insertAfter(this).append(contentvalue);
$(resPara).append(contentValue);
$("#clonedElement" + counter).popover('hide');
resDataVal = $clone.data('contentValue');
console.log(resDataVal);
} else {
alert("Pls enter the data..");
}
});
++counter;
}
});
$(".drag").draggable({
helper: 'clone'
});
});
.dragLayout {
position: relative;
width: 100%;
height: 100%;
padding: 10px;
}
.drop-zone {
border: 1px solid #9C9898;
height: 350px;
width: 400px;
margin: 0 auto;
}
.clear {
clear: both;
}
.drag {
background-color: green;
width: 100px;
height: 100px;
margin-left: 10px;
}
.left {
float: left;
width: 30%;
height: 100%;
}
.right {
float: right;
width: 70%;
height: 100%;
}
#dialog {
position: element(#target);
padding-top: 20px;
overflow: hidden;
}
.ui-dialog .ui-dialog-titlebar {
background: #3a9893;
}
.ui-dialog .ui-dialog-buttonpane {
margin: 0;
padding: 0;
position: absolute;
top: 50px;
right: 10px;
}
.ui-dialog .ui-widget .ui-widget-content {
padding: 0;
}
.ui-dialog .ui-dialog-buttonpane {
border: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<div class="dragLayout">
<div class="left">
<div class="drag"></div>
<br />
<div class="drag"></div>
<br />
<div class="drag"></div>
</div>
<div class="right">
<div class="drop-zone"></div>
</div>
</div>
<div id="addDialog"></div>
Please help me to fix this issue.