I need to make text reziable

Question

Anish_3 0 Newbie Poster

8 Years Ago

I am doing a project on greeting card designing interface(html).
I have written code to make text draggable and resizeable but it it not resizing. please help

html:

<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/canvas2image/0.1/base64.js"></script> <script src="https://cdn.jsdelivr.net/canvas2image/0.1/canvas2image.js"></script> <script src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script> <link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <link href="style.css" rel="stylesheet" /> <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script> <head> <body> <div id="parent"> <div id="text"> <input id="sample-input"></input> <button type="button" id="text-change">Submit</button> <button type="button" id="print-canvas">Print</button> </div> <div id="canvas"><span id="textname">Your name here></span> </div> <div id="containerA"> <div id="one"></div> <div id="two"></div> <div id="three"></div> <div id="four"></div> <div id="five"></div> <div id="six"></div> <div id="seven"></div> <div id="eight"></div> <div id="nine"></div> <div id="ten"></div> <div id="eleven"></div> <div id="twelve"></div> <div id="thirteen"></div> <div id="fourteen"></div> <div id="fifteen"></div> <div id="sixteen"></div> <div id="seventeen"></div> <div id="eighteen"></div> <div id="nineteen"></div> <div id="twenty"></div> </div> <div id="containerB"> <div id="one1"><img src="http://www.freevector.com/site_media/preview_images/FreeVector-Fairytale.jpg" width="100" height="100" alt="image1" /></div> <div id="two2"><img src="http://www.freevector.com/site_media/preview_images/FreeVector-Fairytale-Castle.jpg" width="100" height="100" alt="image1" /></div> <div id="three3"><img src="http://orig09.deviantart.net/aa99/f/2008/350/8/9/free_pink_snowy_background_by_yuninaoki.jpg" width="100" height="100" alt="image1" /></div> <div id="four4"><img src="http://www.katasharya.com/wp-content/uploads/2013/02/snowandswans.jpg" width="100" height="100" alt="image1" /></div> <div id="five5"></div> <div id="six6"></div> <div id="seven7"></div> <div id="eight8"></div> <div id="nine9"></div> <div id="ten10"></div> <div id="eleven11"></div> <div id="twelve12"></div> <div id="thirteen13"></div> <div id="fourteen14"></div> <div id="fifteen15"></div> <div id="sixteen16"></div> <div id="seventeen17"></div> <div id="eighteen18"></div> <div id="nineteen19"></div> <div id="twenty20"></div> </div> </div> <script>
    $('#canvas').droppable({
    drop: function (event, ui) {
        $(this).append(ui.draggable);
        ui.draggable.css('top', ui.position.top);
        ui.draggable.css('left', ui.position.left);
        ui.draggable.css('margin-left', "0px");
        ui.draggable.css('margin-top', "0px");
        ui.draggable.css('position', 'absolute');
        ui.draggable.draggable('destroy').draggable();
    }
});

$('#containerA').droppable({
    drop: function (event, ui) {
        $(this).append(ui.draggable);
        ui.draggable.css('display', 'inline-block');
        ui.draggable.css('top', '0');
        ui.draggable.css('left', '0');
        ui.draggable.css('margin-left', "25px");
        ui.draggable.css('margin-top', "40px");
        ui.draggable.css('position', 'relative');
        ui.draggable.draggable('destroy').draggable();
    }
});

//$('#textname').droppable({
  //  drop: function (event, ui) {
    //    $(this).append(ui.draggable);
       // ui.draggable.css('display', 'inline-block');
        //ui.draggable.css('top', '0');
       // ui.draggable.css('left', '0');
        //ui.draggable.css('margin-left', "25px");
        //ui.draggable.css('margin-top', "40px");
       // ui.draggable.css('position', 'relative');
       // ui.draggable.draggable('destroy').draggable();
   // }
//});

$('#textname').click(

function ($e) {
    $(this).resizable();
    $(this).draggable({
        revert: 'false',
        helper: 'clone',
        scroll: 'false',
        containment: 'window',
        stop: function (event, ui) {
            $(this).removeClass("ui-resizable");
        }
    });
});


$('div#containerB img').click(

function ($e) {
    //$(this).draggable({
    //  helper: 'clone',
    //appendTo: 'body'
    //});
    var img = $(this).attr('src');
    $('div#canvas').css('background-color', "");
    $('div#canvas').css('background-image', 'url(' + img + ')');
});


$('div#containerA div').click(

function ($e) {
    $(this).resizable();
    $(this).draggable({
        revert: 'false',
        helper: 'clone',
        scroll: 'false',
        containment: 'window',
        stop: function (event, ui) {
            $(this).removeClass("ui-resizable");
        }
    });
});

$('div#canvas div').click(

function ($e) {
    $(this).resizable();
    $(this).draggable({
        revert: 'false',
        helper: 'clone',
        scroll: 'false',
        containment: 'window',
        stop: function (event, ui) {
            $(this).removeClass("ui-resizable");
        }
    });
});


$('#text-change').click(

function ($e) {
    var text = $('#sample-input').val();
    $("#textname").text(text);
});
$("#print-canvas").click(function () {
    html2canvas($("#canvas"), {
        onrendered: function (canvas) {
            theCanvas = canvas;
            document.body.appendChild(canvas);
            Canvas2Image.saveAsPNG(canvas);
            $("#canvas-img").append(canvas);
            // Clean up 
            document.body.removeChild(canvas);
        }
    });
});
</script> <body> </html>


jquery::




$('#canvas').droppable({
    drop: function (event, ui) {
        $(this).append(ui.draggable);
        ui.draggable.css('top', ui.position.top);
        ui.draggable.css('left', ui.position.left);
        ui.draggable.css('margin-left', "0px");
        ui.draggable.css('margin-top', "0px");
        ui.draggable.css('position', 'absolute');
        ui.draggable.draggable('destroy').draggable();
    }
});

$('#containerA').droppable({
    drop: function (event, ui) {
        $(this).append(ui.draggable);
        ui.draggable.css('display', 'inline-block');
        ui.draggable.css('top', '0');
        ui.draggable.css('left', '0');
        ui.draggable.css('margin-left', "25px");
        ui.draggable.css('margin-top', "40px");
        ui.draggable.css('position', 'relative');
        ui.draggable.draggable('destroy').draggable();
    }
});

$('div#containerB img').click(

function ($e) {
    //$(this).draggable({
    //  helper: 'clone',
    //appendTo: 'body'
    //});
    var img = $(this).attr('src');
    $('div#canvas').css('background-color', "");
    $('div#canvas').css('background-image', 'url(' + img + ')');
});


$('div#containerA div').click(

function ($e) {
    $(this).resizable();
    $(this).draggable({
        revert: 'false',
        helper: 'clone',
        scroll: 'false',
        containment: 'window',
        stop: function (event, ui) {
            $(this).removeClass("ui-resizable");
        }
    });
});

$('div#canvas div').click(

function ($e) {
    $(this).resizable();
    $(this).draggable({
        revert: 'false',
        helper: 'clone',
        scroll: 'false',
        containment: 'window',
        stop: function (event, ui) {
            $(this).removeClass("ui-resizable");
        }
    });
});

$('#text-change').click(

function ($e) {
    var text = $('#sample-input').val();
    $("#textname").text(text);
});
$("#textname").draggable();
$("#print-canvas").click(function () {
    html2canvas($("#canvas"), {
        onrendered: function (canvas) {
            theCanvas = canvas;
            document.body.appendChild(canvas);
            Canvas2Image.saveAsPNG(canvas);
            $("#canvas-img").append(canvas);
            // Clean up 
            document.body.removeChild(canvas);
        }
    });
});

css:

body{
    background-color:#43cf4d;
}
#textname {
    cursor:pointer;
}
#image {
    height:100px;
    width:100px;
}
#parent {
    overflow: visible;
    width: 100%;
    height:100%;
}
#canvas {
    float:left;
    height:600px;
    width:600px;
    border:1px solid black;
    z-index: -1;
    background-size:100% 100%;
    background-repeat: no-repeat;
}
#containerA {
    display:inline-block;
    overflow-y: scroll;
    overflow-x: hidden;
    float:right;
    height:600px;
    width:200px;
    border: 1px solid red;
}

1 Contributor
1 Reply
246 Views
52 Seconds Discussion Span
Latest Post 8 Years Ago Latest Post by Anish_3

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Anish_3 0 Newbie Poster · Answer 1 · 2015-08-27T10:37:19+00:00

<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/canvas2image/0.1/base64.js"></script>
<script src="https://cdn.jsdelivr.net/canvas2image/0.1/canvas2image.js"></script>
<script src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script>
<link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="style.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<head>
<body>
 <div id="parent">
        <div id="text">
            <input id="sample-input"></input>
            <button type="button" id="text-change">Submit</button>
            <button type="button" id="print-canvas">Print</button>
        </div>
        <div id="canvas"><span id="textname">Your name here></span>

        </div>
        <div id="containerA">
            <div id="one"></div>
            <div id="two"></div>
            <div id="three"></div>
            <div id="four"></div>
            <div id="five"></div>
            <div id="six"></div>
            <div id="seven"></div>
            <div id="eight"></div>
            <div id="nine"></div>
            <div id="ten"></div>
            <div id="eleven"></div>
            <div id="twelve"></div>
            <div id="thirteen"></div>
            <div id="fourteen"></div>
            <div id="fifteen"></div>
            <div id="sixteen"></div>
            <div id="seventeen"></div>
            <div id="eighteen"></div>
            <div id="nineteen"></div>
            <div id="twenty"></div>
        </div>
        <div id="containerB">
            <div id="one1"><img src="http://www.freevector.com/site_media/preview_images/FreeVector-Fairytale.jpg" width="100" height="100" alt="image1" /></div>
            <div id="two2"><img src="http://www.freevector.com/site_media/preview_images/FreeVector-Fairytale-Castle.jpg" width="100" height="100" alt="image1" /></div>
            <div id="three3"><img src="http://orig09.deviantart.net/aa99/f/2008/350/8/9/free_pink_snowy_background_by_yuninaoki.jpg" width="100" height="100" alt="image1" /></div>
            <div id="four4"><img src="http://www.katasharya.com/wp-content/uploads/2013/02/snowandswans.jpg" width="100" height="100" alt="image1" /></div>
            <div id="five5"></div>
            <div id="six6"></div>
            <div id="seven7"></div>
            <div id="eight8"></div>
            <div id="nine9"></div>
            <div id="ten10"></div>
            <div id="eleven11"></div>
            <div id="twelve12"></div>
            <div id="thirteen13"></div>
            <div id="fourteen14"></div>
            <div id="fifteen15"></div>
            <div id="sixteen16"></div>
            <div id="seventeen17"></div>
            <div id="eighteen18"></div>
            <div id="nineteen19"></div>
            <div id="twenty20"></div>
        </div>
    </div>
    <script>
    $('#canvas').droppable({
    drop: function (event, ui) {
        $(this).append(ui.draggable);
        ui.draggable.css('top', ui.position.top);
        ui.draggable.css('left', ui.position.left);
        ui.draggable.css('margin-left', "0px");
        ui.draggable.css('margin-top', "0px");
        ui.draggable.css('position', 'absolute');
        ui.draggable.draggable('destroy').draggable();
    }
});

$('#containerA').droppable({
    drop: function (event, ui) {
        $(this).append(ui.draggable);
        ui.draggable.css('display', 'inline-block');
        ui.draggable.css('top', '0');
        ui.draggable.css('left', '0');
        ui.draggable.css('margin-left', "25px");
        ui.draggable.css('margin-top', "40px");
        ui.draggable.css('position', 'relative');
        ui.draggable.draggable('destroy').draggable();
    }
});

//$('#textname').droppable({
  //  drop: function (event, ui) {
    //    $(this).append(ui.draggable);
       // ui.draggable.css('display', 'inline-block');
        //ui.draggable.css('top', '0');
       // ui.draggable.css('left', '0');
        //ui.draggable.css('margin-left', "25px");
        //ui.draggable.css('margin-top', "40px");
       // ui.draggable.css('position', 'relative');
       // ui.draggable.draggable('destroy').draggable();
   // }
//});

$('#textname').click(

function ($e) {
    $(this).resizable();
    $(this).draggable({
        revert: 'false',
        helper: 'clone',
        scroll: 'false',
        containment: 'window',
        stop: function (event, ui) {
            $(this).removeClass("ui-resizable");
        }
    });
});


$('div#containerB img').click(

function ($e) {
    //$(this).draggable({
    //  helper: 'clone',
    //appendTo: 'body'
    //});
    var img = $(this).attr('src');
    $('div#canvas').css('background-color', "");
    $('div#canvas').css('background-image', 'url(' + img + ')');
});


$('div#containerA div').click(

function ($e) {
    $(this).resizable();
    $(this).draggable({
        revert: 'false',
        helper: 'clone',
        scroll: 'false',
        containment: 'window',
        stop: function (event, ui) {
            $(this).removeClass("ui-resizable");
        }
    });
});

$('div#canvas div').click(

function ($e) {
    $(this).resizable();
    $(this).draggable({
        revert: 'false',
        helper: 'clone',
        scroll: 'false',
        containment: 'window',
        stop: function (event, ui) {
            $(this).removeClass("ui-resizable");
        }
    });
});


$('#text-change').click(

function ($e) {
    var text = $('#sample-input').val();
    $("#textname").text(text);
});
$("#print-canvas").click(function () {
    html2canvas($("#canvas"), {
        onrendered: function (canvas) {
            theCanvas = canvas;
            document.body.appendChild(canvas);
            Canvas2Image.saveAsPNG(canvas);
            $("#canvas-img").append(canvas);
            // Clean up 
            document.body.removeChild(canvas);
        }
    });
});
</script>    
<body>
</html>