Develop Reference

Can I undo or delete some javascript code after running it

I am 3th year at college and for web design class we are manually drawing canvas elements. Which is very boring for me so I tried to make some 2D paint where I can do it by mouse where on the other end it writes code by itself.
I managed to do this much even tho is not "much" but now I am wondering is there a way to undo some script to remove it from the code? One way would be to append new canvas and do moves by one less but is there something to delete existing ones but not to recreate new ones over and over again?
In this example down below (try by full screen), when I add new lines I add new moves to the array and when I finish at the starting point I can draw new element. But every time I add new line I re create or draw lines over existing ones and new lines so it shows as one element where I could fill style and so on.
By doing that you will see that the adding lines over existing ones create a little darker bolder line, and because of that I would like to know if there is some way to delete or undo those lines and add whole new ones without puting em over existing ones.
$(document).ready(function(){
var mainCanvas = $('#mainCanvas')[0].getContext('2d');
var coordsCanvas = $('#coordsCanvas')[0].getContext('2d');
var moves = [];
$('#newCoords').click(function(){
var mainCanvasWidth = $('#mainCanvas').width();
$(this).parent().prepend('<input class="input-class" id="x-n0" placeholder="X number of blocks"><input class="input-class" id="y-n0" placeholder="Y number of blocks"> <span class="notes">Note: canvas full width is: '+Math.floor(mainCanvasWidth)+'px. </span><button id="saveCoords">Save</button>')
$(this).remove();
});
$(document).on('click','#saveCoords',function(){
var x = $(this).siblings('input#x-n0').val(),
y = $(this).siblings('input#y-n0').val(),
mainCanvasWidth = $('#mainCanvas').width(),
mainCanvasHeight = $('#mainCanvas').height(),
xWidthPx = Math.floor(mainCanvasWidth/x),
yHeightPx = Math.floor(mainCanvasHeight/y);
$('#coordsCanvas, #mainCanvas').attr('width', Math.floor(xWidthPx*x));
$('#coordsCanvas, #mainCanvas').attr('height', Math.floor(yHeightPx*y));
var marginLeftRight = 'calc(50% - '+Math.floor(xWidthPx*x)/2+'px)';
$('#coordsCanvas, #mainCanvas').css({'width':Math.floor(xWidthPx*x)+'px','height':Math.floor(yHeightPx*y)+'px','left': marginLeftRight, 'top':'10vh'});
for(var i=0; i<x-1; i++){
coordsCanvas.beginPath();
coordsCanvas.moveTo(Math.floor(xWidthPx+(xWidthPx*i)), 0);
coordsCanvas.lineTo(Math.floor(xWidthPx+(xWidthPx*i)), Math.floor(yHeightPx*y));
coordsCanvas.stroke();
coordsCanvas.closePath();
}
for(var i=0; i<y-1; i++){
coordsCanvas.beginPath();
coordsCanvas.moveTo(0 ,Math.floor(yHeightPx+(yHeightPx*i))+1);
coordsCanvas.lineTo(Math.floor(xWidthPx*x), Math.floor(yHeightPx+(yHeightPx*i))+1);
coordsCanvas.stroke();
coordsCanvas.closePath();
}
$(this).parent().html('<label for="#mouse-position"><input type="checkbox" id="mouse-position">Show mouse position</label><span class="notes">X = '+Math.floor(xWidthPx)+'px; Y = '+Math.floor(yHeightPx)+'px;</span><div class="tools"><button id="line">Lines</button></div>');
});
$(document).on( "change", "#mouse-position", function() {
if($('input[id="mouse-position"]:checked').length === 1){
$('#mouse-coords').css('display','block');
}else{
$('#mouse-coords').css('display','none');
}
});
$(document).on( "click", "#line", function() {
$(this).css('background','silver');
$('#mainCanvas').css({'cursor':'url(./pen.png) 0 24, auto'});
});
$(document).on( "click", "#mainCanvas", function(e) {
var cursor = $('#mainCanvas').css('cursor');
var strokeStyle = $('#strokestyle').val();
if(~cursor.indexOf('pen.png')){
var posX = $(this).position().left,
posY = $(this).position().top;
if(moves[0]==='beginPath'){
if(Object.keys(moves[1])[0]==='moveTo'){
var len = moves.length-1,
nowpos = Math.floor((e.pageX - posX)) + ',' + Math.floor((e.pageY - posY)),
renderDrawing = [];
renderDrawing.push({'func': 'beginPath', init: function(){ mainCanvas.beginPath(); }});
if(moves[len]!=="stroke" || moves[len]!=="closePath"){
for(var ee=1; ee<moves.length; ee++){
if(Object.keys(moves[ee])[0]==="moveTo"){
var mtp = moves[ee]['moveTo'],
pos = mtp.split(',');
renderDrawing.push({func: 'moveTo', val: pos, init: function(){
mainCanvas.moveTo(this.val[0], this.val[1]);
}});
}else if(Object.keys(moves[ee])[0]==="lineTo"){
var mtp = moves[ee]['lineTo'],
pos = mtp.split(',');
renderDrawing.push({func: 'lineTo', val: pos, init: function(){
mainCanvas.lineTo(this.val[0], this.val[1]);
}});
}
}
var nowX = Math.floor((e.pageX - posX));
var nowY = Math.floor((e.pageY - posY));
var nowXY = nowX + ',' + nowY;
moves.push({'lineTo':nowXY});
renderDrawing.push(
{func: 'lineTo', val: nowXY, init: function(){
mainCanvas.lineTo(this.val.split(',')[0], this.val.split(',')[1]);
}},
{func: 'stroke', init: function(){ mainCanvas.stroke(); }},
{func: 'closePath', init: function(){ mainCanvas.closePath(); }});
for(var q=0; q<renderDrawing.length; q++){
if(renderDrawing[q]['func']!=="beginPath" && renderDrawing[q]['func']!=="closePath" && renderDrawing[q]['func']!=="stroke"){
renderDrawing[q].init();
}else renderDrawing[q].init();
}
console.log(moves);
if(Object.keys(moves[len])[0]==="lineTo" && nowpos===moves[1]['moveTo']){
moves = [];
}
}
}
}else{
mainCanvas.beginPath();
mainCanvas.moveTo(Math.floor(e.pageX - posX) , Math.floor(e.pageY - posY));
moves.push('beginPath',{'moveTo':Math.floor((e.pageX - posX)) + ',' + Math.floor((e.pageY - posY))});
console.log(moves);
}
}
});
$(document).on('mousemove', "#mainCanvas", function(e){
var parentOffset = $('#mainCanvas').offset();
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
$('#mouse-coords').css({
left: e.pageX + 20,
top: e.pageY
}).text( "X: " + Math.floor(relX) + ", Y: " + Math.floor(relY) );
});
});
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
box-sizing: border-box;
}
body {
overflow: hidden;
font-size: 100%;
}
.container {
width: 100vw;
height: 100vh;
padding-right: 5vw;
padding-left: 5vw;
padding-top: 10vh;
padding-bottom: 5vh;
overflow: hidden;
position: relative;
}
canvas {
width: 90vw;
height: 85vh;
border: 1px solid #000;
float: left;
}
.toolsBar {
width: calc(100% - 10vw);
position: absolute;
top: 5px;
left: 5vw;
border: 1px solid #000;
height: calc(10vh - 10px);
overflow: hidden;
overflow-y: auto;
}
button {
color: #fff;
background: skyblue;
border: 0;
border-radius: 5px;
margin: 5px;
padding: 15px;
cursor: pointer;
float: left;
}
.input-class {
border-radius: 5px;
margin: 5px;
padding: 15px;
float: left;
border: 1px solid #e0e0e0;
outline: none;
}
.notes {
display: inline-block;
height: 60px;
text-align: center;
float: left;
color: red;
line-height: 60px;
}
#mouse-coords {
position: absolute;
display: none;
background: #000;
padding: 2px;
color: #fff;
}
label[for="#mouse-position"] {
display: inline-block;
height: 60px;
text-align: center;
line-height: 60px;
font-size: 1.2rem;
float: left;
padding: 5px;
}
label>input {
height: 1.2rem;
width: 1.2rem;
}
.coordsCanvas {
position: absolute;
z-index: 100;
}
#mainCanvas {
background: rgba(255,255,255,.5);
position: absolute;
z-index: 200;
}
.tools {
width: auto;
overflow: hidden;
overflow-y: auto;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="toolsBar">
<button id="newCoords">X & Y</button>
</div>
<div id="mouse-coords"></div>
<canvas class="coordsCanvas" id="coordsCanvas"></canvas>
<canvas id="mainCanvas"></canvas>
</div>

JQuery-UI draggable elements appear on top of others when they are dropped

I'm using JQuery-UI to be able to drag items from one div to another, but when I drop the element in another div, it appears on top of other dropped elements. What am I doing wrong?
//These are my draggable elements
$('#interface li').draggable({
helper: 'clone',
revert: 'invalid'
});
//This function makes dropped elements draggable again.
function foo(){
$('.foo').each(function() {
$(this).draggable({
containment: $(this).parent(),
stack: '.foo'
});
});
}
//This function forms table around dropped item
var fooCount = $('.foo').length;
$('#mainDiv').droppable({
drop: function(event, ui) {
if (!ui.draggable.hasClass('foo')) {
var Class = ui.draggable.attr("class");
var title = ui.draggable.text().trim();
var item = $('<table class="foo elementTable ' + Class + '" name="' + title + '" id="'+(fooCount+1)+'"><tr class="tableHeader"><th class="thClass"><button class="settings">set</button>' + title + '<span class="close">x</span></th></tr><tr><td class="add"><span class="addList">Add new link</span></td></tr></table>');
$(this).append(item);
fooCount += 1;
foo();
}
}
});
This is my CSS code for styling newly created tables:
.foo {
min-width: 250px;
max-width: 300px;
text-align: center;
min-height: 50px;
border: 1px solid white;
border-radius: 10px;
position: absolute;
padding: 0;
}
But the dropped elements appear like this:
I want them to appear like this:
EDIT: Here is a working jsfiffle: https://jsfiddle.net/vaxobasilidze/79kd1uLL/

Just remove position: absolute; from newly created element. It should be
.foo {
min-width: 250px;
max-width: 300px;
text-align: center;
min-height: 50px;
border: 1px solid white;
border-radius: 10px;
/*position: absolute;*/
padding: 0;
}
Check updated fiddle here

Add DragScroll to slider

¡Hello! I have a slider of 3 sections, which works automatic and onlick, everything is fine but i want to add a dragscroll for mobile, but i don't have a clue of where to start, heres the code
//almacenar slider en una variable
var slider = $('#slider');
//almacenar botones
var siguiente = $('#btn-next');
var anterior = $('#btn-prev');
//mover ultima imagen al primer lugar
$('#slider section:last').insertBefore('#slider section:first');
//mostrar la primera imagen con margen de -100%
slider.css('margin-left', '-'+100+'%');
function moverD() {
slider.animate({marginLeft:'-'+200+'%'}, 700, function(){
$('#slider section:first').insertAfter('#slider section:last');
slider.css('margin-left', '-'+100+'%');
});
}
function moverI() {
slider.animate({marginLeft:0}, 700, function(){
$('#slider section:last').insertBefore('#slider section:first');
slider.css('margin-left', '-'+100+'%');
});
}
function autoplay() {
interval = setInterval(function(){
moverD();
}, 5000);
}
siguiente.on('click',function() {
moverD();
clearInterval(interval);
autoplay();
});
anterior.on('click',function() {
moverI();
clearInterval(interval);
autoplay();
});
autoplay();
#principal{
position: relative;
height: 300px;
width: 300px;
overflow: hidden;
border-bottom: 6px solid #80d443;
border-top: 6px solid #80d443;
}
#btn-prev, #btn-next{
position: absolute;
text-shadow: 2px 2px 1px black;
cursor: pointer;
color: white;
font-size: 30px;
z-index: 80;
top: 50%;
font-weight: bold;
}
#btn-prev{
left: 1%;
}
#btn-next{
right: 1%;
}
#slider{
display: flex;
width: 900px;
height: 300px;
}
section{
position: relative;
margin: 0 auto;
width: 100%;
height: 100%;
}
#diseño{
background: blue;
}
#solucion{
background: red;
}
#entrenamiento{
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="content" id="principal">
<section class="slider" id="slider">
<section id="diseño">
</section>
<section id="solucion">
</section>
<section id="entrenamiento">
</section>
</section>
<div id="btn-prev" class="fa fa-angle-left" aria-hidden="true" data-stellar-ratio="1"><</div>
<div id="btn-next" class="fa fa-angle-right" aria-hidden="true" data-stellar-ratio="1">></div>
</section>
Any example or hint would be useful, Thanks in advance :D
I tried something like this and there i stopped
$(function() {
var slides = $('#slider section').length;
var slideWidth = $('#slider').width();
var min = 0;
var max = -((slides - 1) * slideWidth);
$("#slider").width(slides*slideWidth).draggable({
axis: 'x',
drag: function (event, ui) {
if (ui.position.left > min) ui.position.left = min;
if (ui.position.left < max) ui.position.left = max;
}
});
});
EDIT:
I manage to make it work the drag function, but i'm having a lot of problems, here you can see the DEMO https://jsfiddle.net/visiond/9j3jLann/8/

I am adding a second answer in case either option suits the OP better or those in the future.
This is using jquery and slick.js
HTML
<section class="slider">
<div><img src="http://placeholder.of.today/300x300/12ec14/1844d"></div>
<div ><img src="http://placeholder.of.today/300x300/ff0000/1844d"></div>
<div ><img src="http://placeholder.of.today/300x300/0095ff/1844d"></div>
</section>
CSS
.slider {
max-width: 300px;
margin: 0 auto;
}
.slick-slide {
color: white;
padding: 0;
margin: 0;
text-align: center;
img { display: inline-block; }
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-prev, .slick-next {
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 20px;
height: 20px;
z-index: 3;
}
.slick-next {
right: 5px;
}
.slick-prev {
left: 5px;
}
JS
$(".slider").slick({
autoplay: true,
dots: true,
customPaging : function(slider, i) {
},
responsive: [{
breakpoint: 500,
settings: {
dots: false,
arrows: false,
infinite: false,
slidesToShow: 1,
slidesToScroll: 1
}
}]
});
DEMO on Codepen.
https://codepen.io/norcaljohnny/pen/NbpPvL

You are very close.
$(function() {
var slides = $('#slider ul').children().length;
var slideWidth = $('#slider').width();
var min = 0;
var max = -((slides - 1) * slideWidth);
$("#slider ul").width(slides*slideWidth).draggable({
axis: 'x',
drag: function (event, ui) {
if (ui.position.left > min) ui.position.left = min;
if (ui.position.left < max) ui.position.left = max;
}
});
});
DEMO http://jsfiddle.net/norcaljohnny/k71jugLk/

jquery draggable event changing the css of child element

Hi please see this code
$('.new-div').draggable({
containment: "#bord",
create: function() {
$(".new-div").css("width", 'auto');
},
drag: function() {
$(".new-div").css("width", 'auto');
},
start: function() {
$(".new-div").css("width", 'auto');
},
stop: function() {
$(".new-div").css("width", 'auto');
}
});
$(document).on("click", ".closeButton", function() {
$(this).closest('div').remove();
});
$(".span1").on("click", function(e) {
var mycontent1 = $(this).text();
e.preventDefault();
$(".span1").focus();
$('.new-div').removeClass('active');
$(this).closest('.new-div').addClass('active');
if (mycontent1.trim() === "message") {
$(".span1").text('');
$(this).css("width", "100px");
$(this).css("height", "6%");
$('.new-div').css("width", "100px");
$('.new-div').css("height", "6%");
}
});
$("#font-size").on("change", function() {
var v = $(this).val();
$('.new-div').css('font-size', v + 'px');
});
$('.resizeButton').draggable({
containment: '#bord',
drag: function() {
$('.new-div').height($('.resizeButton').position().top + 17);
$('.new-div').width($('.resizeButton').position().left + 17);
$('.new-div').width($('.resizeButton').position().left + 17);
$('.new-div').css({
'font-size': ($('.new-div').height() / 2.3)
});
}
});
.new-div {
z-index: 1;
position: absolute;
width: auto;
word-break: break-all;
text-align: center;
left: 30%;
top: 15px;
border: 2px solid black;
}
.parent-div {
max-width: 236px;
width: 236px;
position: relative;
overflow: hidden;
}
.closeButton {
display: block;
position: absolute;
top: -10px;
left: -10px;
width: 27px;
height: 27px;
background: url('http://cdn-sg1.pgimgs.com/images/pg/close-button.png') no-repeat center center;
}
.resizeButton {
display: block;
position: absolute;
bottom: -10px;
right: -10px;
width: 27px;
height: 27px;
background: url('http://img.freepik.com/free-icon/resize-button_318-99883.jpg') no-repeat center center;
background-size: contain;
cursor: resize;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<div class="col-sm-12">
<div class="parent-div">
<div class="new-div" contenteditable="true">
<span data-scale-ratio="1" class="span1" data-scale-reference=".new-div">
message
</span>
<a class="closeButton"></a>
<a class="resizeButton"></a>
</div>
<div class="bord" style="z-index: -1;">
<img src="https://s-media-cache-ak0.pinimg.com/236x/8b/8a/00/8b8a007ae01adf400e12b26f3b93fb3a.jpg">
</div>
https://jsfiddle.net/felixtm/jaboLc3u/34/
In this when i type message on text box , and resize that time this is working correctly . But after resize the text and drag the text that time resize box is going far from the div . Why this hapen ?

If you want the text box to keep its size when it is dragged, you can remove the following calls in the draggable component event handlers:
$(".new-div").css("width", 'auto');
The resulting code would be:
$(".new-div").draggable({
containment: "#bord"
});
In the code snippet below, I also made changes to the click event handler of the span element, to keep the text box centered when the user types new text. In order to get that behavior, I had to put a non-breaking space in the box. Since that character is selected after clicking on message, the new content typed by the user will overwrite it.
Finally, a focus rectangle was visible in Chrome. This CSS attribute can be used to hide it:
.new-div:focus {
outline: none;
}
Credit: The code for range selection was inspired by this answer given by Tim Down.
$(".new-div").draggable({
containment: "#bord"
});
$(document).on("click", ".closeButton", function () {
$(this).closest("div").remove();
});
$(".span1").on("click", function (e) {
e.preventDefault();
$(".new-div").removeClass("active");
$(this).closest(".new-div").addClass("active");
if ($(this).text().trim() === "message") {
$(this).html(" ");
var range = document.createRange();
range.setStart(this, 0);
range.setEnd(this, 1);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
$(".new-div").focus();
}
});
$("#font-size").on("change", function () {
var v = $(this).val();
$(".new-div").css("font-size", v + "px");
});
$(".resizeButton").draggable({
containment: "#bord",
drag: function () {
$(".new-div").height($(".resizeButton").position().top + 17);
$(".new-div").width($(".resizeButton").position().left + 17);
$(".new-div").width($(".resizeButton").position().left + 17);
$(".new-div").css({ "font-size": ($(".new-div").height() / 2.3) });
}
});
.new-div {
z-index: 1;
position: absolute;
width: auto;
word-break: break-all;
text-align: center;
left: 30%;
top: 15px;
border: 2px solid black;
}
.new-div:focus {
outline: none;
}
.parent-div {
max-width: 236px;
width: 236px;
position: relative;
overflow: hidden;
}
.closeButton {
display: block;
position: absolute;
top: -10px;
left: -10px;
width: 27px;
height: 27px;
background: url('http://cdn-sg1.pgimgs.com/images/pg/close-button.png') no-repeat center center;
}
.resizeButton {
display: block;
position: absolute;
bottom: -10px;
right: -10px;
width: 27px;
height: 27px;
background: url('http://img.freepik.com/free-icon/resize-button_318-99883.jpg') no-repeat center center;
background-size: contain;
cursor: resize;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<div class="col-sm-12">
<div class="parent-div">
<div class="new-div" contenteditable="true">
<span data-scale-ratio="1" class="span1" data-scale-reference=".new-div">
message
</span>
<a class="closeButton"></a>
<a class="resizeButton"></a>
</div>
<div class="bord" style="z-index: -1;">
<img src="https://s-media-cache-ak0.pinimg.com/236x/8b/8a/00/8b8a007ae01adf400e12b26f3b93fb3a.jpg">
</div>

I think that main problem is that you type in .closebutton no inside the div ;)
I am not that advanced to repair it fully but...
$( '.new-div').draggable({
containment: "#bord",
create: function() {
$(".new-div").css("width",'auto');
} ,
drag: function() {
$(".new-div").css("width",'auto');
} ,
start: function() {
$(".new-div").css("width",'auto');
} ,
stop: function() {
$(".new-div").css("width",'auto');
}
});
$(document).on("click",".closeButton",function(){
$(".new-div").remove();
});
$(".span1").on("click", function(e){
var mycontent1= $(".span").text();
e.preventDefault();
$(".span1").focus();
$('.new-div').removeClass('active');
$(this).closest('.new-div').addClass('active');
if(mycontent1.trim()==="message"){
$(".span1").text('');
$(this).css("width","100px");
$(this).css("height","6%");
$('.new-div').css("width","100px");
$('.new-div').css("height","6%");
}
});
$("#font-size").on("change",function(){
var v=$(this).val();
$('.new-div').css('font-size', v + 'px');
});
$('.resizeButton').draggable({
containment: '#bord',
drag: function() {
$('.new-div').height($('.resizeButton').position().top + 17);
$('.new-div').width($('.resizeButton').position().left + 17);
$('.new-div').width($('.resizeButton').position().left + 17);
$('.new-div').css({ 'font-size': ($('.new-div').height() / 2.3)});
}
});
.new-div {
z-index: 1; position: absolute; width: auto; word-break: break-all; text-align: center; left: 30%;top: 15px; border:2px solid black;}
.parent-div {
max-width: 236px; width: 236px; position: relative; overflow: hidden; }
.closeButton
{
display:block;
position:absolute;
top:-10px;
left:-10px;
width:27px;
height:27px;
background:url('http://cdn-sg1.pgimgs.com/images/pg/close-button.png') no-repeat center center;
}
.resizeButton
{
display:block;
position:absolute;
bottom:-10px;
right:-10px;
width:27px;
height:27px;
background:url('http://img.freepik.com/free-icon/resize-button_318-99883.jpg') no-repeat center center;
background-size: contain;
cursor: resize;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<div class="col-sm-12">
<div class="parent-div">
<div class="new-div" contenteditable="true" >
<span data-scale-ratio="1" class="span1" data-scale-reference=".new-div">
message
</span>
<a class="closeButton"></a>
<a class="resizeButton"></a>
</div>
<div class="bord" style="z-index: -1;">
<img src="https://s-media-cache-ak0.pinimg.com/236x/8b/8a/00/8b8a007ae01adf400e12b26f3b93fb3a.jpg">
</div>
</div>
</div>

Move your contenteditable="true" attribute from
div.new-div (<div class="new-div" contenteditable="true" >)
to
span.span1 (<span data-scale-ratio="1" class="span1" data-scale-reference=".new-div">)
So that your code looks something like this...
$('.new-div').draggable({
containment: "#bord",
create: function() {
$(".new-div").css("width", 'auto');
},
drag: function() {
$(".new-div").css("width", 'auto');
},
start: function() {
$(".new-div").css("width", 'auto');
},
stop: function() {
$(".new-div").css("width", 'auto');
}
});
$(document).on("click", ".closeButton", function() {
$(this).closest('div').remove();
});
$(".span1").on("click", function(e) {
var mycontent1 = $(this).text();
e.preventDefault();
$(".span1").focus();
$('.new-div').removeClass('active');
$(this).closest('.new-div').addClass('active');
if (mycontent1.trim() === "message") {
$(".span1").text('');
$(this).css("width", "100px");
$(this).css("height", "6%");
$('.new-div').css("width", "100px");
$('.new-div').css("height", "6%");
}
});
$("#font-size").on("change", function() {
var v = $(this).val();
$('.new-div').css('font-size', v + 'px');
});
$('.resizeButton').draggable({
containment: '#bord',
drag: function() {
$('.new-div').height($('.resizeButton').position().top + 17);
$('.new-div').width($('.resizeButton').position().left + 17);
$('.new-div').width($('.resizeButton').position().left + 17);
$('.new-div').css({
'font-size': ($('.new-div').height() / 2.3)
});
}
});
.new-div {
z-index: 1;
position: absolute;
width: auto;
word-break: break-all;
text-align: center;
left: 30%;
top: 15px;
border: 2px solid black;
}
.parent-div {
max-width: 236px;
width: 236px;
position: relative;
overflow: hidden;
}
.closeButton {
display: block;
position: absolute;
top: -10px;
left: -10px;
width: 27px;
height: 27px;
background: url('http://cdn-sg1.pgimgs.com/images/pg/close-button.png') no-repeat center center;
}
.resizeButton {
display: block;
position: absolute;
bottom: -10px;
right: -10px;
width: 27px;
height: 27px;
background: url('http://img.freepik.com/free-icon/resize-button_318-99883.jpg') no-repeat center center;
background-size: contain;
cursor: resize;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<div class="col-sm-12">
<div class="parent-div">
<div class="new-div">
<span contenteditable="true" data-scale-ratio="1" class="span1" data-scale-reference=".new-div">
message
</span>
<a class="closeButton"></a>
<a class="resizeButton"></a>
</div>
<div class="bord" style="z-index: -1;">
<img src="https://s-media-cache-ak0.pinimg.com/236x/8b/8a/00/8b8a007ae01adf400e12b26f3b93fb3a.jpg">
</div>
It should solve the issue for you ;)

It's about textbox position, it started right justified.

Resize on droppable is not working in Mozilla

I am trying to make one div droppable and resizable, it works great in Chrome, but not in Firefox.
Here is my jsFiddle please open this in the Firefox:
MY DEMO
My code:
// main drop function for work area
$('#img-drop-container').droppable({
accept: '.img-drop',
drop: function(event, ui) {
var $clone = ui.helper.clone();
if (!$clone.is('.inside-drop-zone')) {
$(this).append($clone.addClass('inside-drop-zone').draggable({
containment: '#img-drop-container',
stack: '.inside-drop-zone',
zIndex: 100,
cursor: 'pointer'
}));
$clone.removeClass('img-drop');
// resize image
// $('.inside-drop-zone').resizable({
// aspectRatio: true,
// handles: 'ne, se, sw, nw'
// });
}
}
});
//clone the draggable items
$('li .img-drop').draggable({
helper: 'clone',
cursor: 'pointer',
});
ul {
list-style:none;
}
#img-drop-container {
background-color:#d8d8d8;
border: 1px solid #9C9898;
height:557px;
width:99.9%;
}
.img-drop {
height: 120px;
width: auto;
}
#trash {
float:left;
margin-left:20px;
margin-top:20px;
}
#trash {
width:140px;
height:140px;
background-repeat: no-repeat;
background-position:center center;
z-index:2;
}
img {
width:auto;
height:auto;
}
.store-thumb {
height: 50px;
width: 50px;
}
#imgbg {
float: right;
left: -2%;
position: relative;
top: 4%;
}
.column {
margin-top: -21%;
margin-left:55%;
}
.resizable {
width: 100px;
border: 1px solid #bb0000;
}
.resizable img {
width: 100%;
}
.ui-resizable-handle {
background: #f5dc58;
border: 1px solid #FFF;
width: 9px;
height: 9px;
z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<ul id="carousel" class="elastislide-list">
<li>
<div class="img-drop">
<div style='resize: horizontal; height:20px; width: 100px; overflow: auto; border: solid gray 1px;float:left; background-color: green;'></div>
</div>
</li>
</ul>
<div id="img-drop-container"></div>

Fiddle: http://jsfiddle.net/c38WX/40/
HTML:
only one div in li
<div class="img-drop" style='height:20px; width: 100px; overflow: hidden; border: solid gray 1px;float:left; background-color: green;'></div>
JQ:
add resizible widget
$('li .img-drop').draggable({
helper: 'clone',
cursor: 'pointer',
}).resizable({
handles: "e" ,
autoHide: true
});

Here's a working Fiddle, perhaps not perfectly as I'm not exactly sure what the functionality should be.
JSFiddle
Instead of using resize:horizontal, I'm using jQuery UI's resize (as it looks like you also tried) to hande the resize functionality. handles: 'e, w' is what restricts the resize to horizontal only.
// resize image
$('.resize_box').resizable({
handles: 'e, w'
});