Free Code Snippets in C#, Net Framework, Office 365, ASP.Net,WPF, Visual Studio, SQL Server, Antivirus free
#

 

This code example adds a changeable frame to an HTML image when the mouse clicks.

When dragging the frame in the lower right corner then changes the displayed image size.

If you leave the editor (div element), all resize frames are automatically removed and the image sizes are retained.

 

As soon as you click into a picture, a red frame appears, which you can change in size.

 

When you exit the editor div area, the red resize frames are removed

 

 

Javascript code,

HTML, javascript

<div contenteditable="true" id="ctlEditor_HTML" style="resize:vertical" >

</div>

 

 

<button type="button" title="optimize" onclick="add_Events_in_Editor();">Test</button>

@*------------< script: Image-Tools >------------*@

<script>

    //----< events >----

    function add_Events_in_Editor() {

        //------< add_Events_in_Editor() >------

        //< add >

        //*add when click on image

        set_Event_on_Children("ctlEditor_HTML", "img", "click");

        //</ add >

 

        //< remove >

        //*remove all divResize when leaving

        var divEditorHTML = document.getElementById("ctlEditor_HTML");

        divEditorHTML.addEventListener("mouseleave", remove_all_ImageResize_Divs);

        //</ remove >

        //------</ add_Events_in_Editor() >------

    }

 

 

    function set_Event_on_Children(sElementID, sChildren_Tagname, sEventname) {

        //----< set_Event_on_Children() >----

        //*sets an event to all children with match type

 

        var div = document.getElementById(sElementID);

        var elements = div.getElementsByTagName(sChildren_Tagname);

 

        //< loop: children >

        for (var i = 0; i < elements.length; i++) {

            //< attach event >

            elements[i].addEventListener(sEventname, add_Sizeable_Div, { once: true });

            //</ attach event >

        }

        //</ loop: children >

        //----</ set_Event_on_Children() >----

    }

 

    function add_Sizeable_Div() {

        //------< add_Sizeable_Div() >------

        //*adds a sizable div-around the image

 

        //< adapt image >

        var img = this;

        var intWidth = img.width;

        img.style.width = "100%";

        //</ adapt image >

 

        //< create div >

        var div = document.createElement("div");

        div.setAttribute("contenteditable", "true");

        div.setAttribute("class", "divResizeImage");

        div.style.resize = "both";

        div.style.overflow = "auto";

        div.style.width = intWidth + "px";

        div.style.paddingRight = "6px";

        div.style.paddingBottom = "6px";

        div.style.border = "1px solid red";

        //</ create div >

 

        //< move img into div >

        //*jquery wrap

        this.parentNode.append(div);

        div.appendChild(this);

        //</ move img into div >

 

        //------</ add_Sizeable_Div() >------

    }

 

    function remove_all_ImageResize_Divs() {

        //----< remove_all_ImageResize_Divs() >----

        //*removes all resize-Divs

        //< get divResize >

        var divContainer = document.getElementById("ctlEditor_HTML");

        var divElements = divContainer.getElementsByClassName("divResizeImage");

        //</ get divResize >

 

        //< loop: children >

        var i = 0;

        while (divElements.length > 0) {

            //< check: loop >

            i++;

            if (i > 100) break;

            //</ check: loop >

 

            //< attach event >

            var divResizeImage = divElements[0]

 

            //< get image >

            var img = divResizeImage.firstChild;

            img.style.width = divResizeImage.style.width;

            //</ get image >

 

            divResizeImage.parentNode.append(img);

            divResizeImage.parentNode.removeChild(divResizeImage);

            //</ attach event >

        }

        //</ loop: children >

 

        //< reactivate click >

        set_Event_on_Children("ctlEditor_HTML", "img", "click");

        //</ reactivate click >

        //----</ remove_all_ImageResize_Divs() >----

    }

 

 

   

</script>

@*------------</ script: Image-Tools >------------*@

 

 

 

Mobile
»
Javascript Code: Resize Border to add and remove an image
»
Javascript: frame HTML element with another element
»
Javascript: remove comments
»
Remove Class, Remove Class Css in HTML
»
Javascript: onScroll event on window body HTML
»
HTML, Javascript: Newline in output Element
»
Javascript: debug script in Visual Studio Debugger
»
HTML, Javascript: Embed a small script between HTML fields

.

Contact for Jobs, Project Requests: raimund.popp@microsoft-programmierer.de