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

 

 

This javascript code snippet does the following:

Clicking on an HTML Image element surrounds it with a div element.

The first step is to create a div element

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

 

Then the existing image is moved into the div container by attaching the div HTML element to the img.parent and then moving the img element into the div continer.

//< move img into div >

//*jquery wrap

this.parentNode.append(div);

div.appendChild(this);

//</ move img into div >

 

 

The function is then like here.

    function add_Sizeable_Div() {

         //------< modify_Image() >------

       

        //< adapt image >

        var img = this;

        img.style.width = "100%";

        //</ adapt image >

 

        //< create div >

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

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

        div.style.resize = "both";

        div.style.overflow = "auto";

        div.style.width = "200px";

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

        //</ create div >

 

        //< move img into div >

        //*jquery wrap

        this.parentNode.append(div);

        div.appendChild(this);

        //</ move img into div >

 

        this.removeEventListener("click", add_Sizeable_Div);

        //------</ modify_Image() >------

    }

 

 

 

This function is also available in jQuery as a .wrap.

 

 

In jQuery: wrap

 

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

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

<script>

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

    function add_Events_in_Editor() {

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

    }

   

 

    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);

            //</ attach event >

        }

        //</ loop: children >

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

    }

 

    function add_Sizeable_Div() {

         //------< modify_Image() >------

       

        //< adapt image >

        var img = this;

        img.style.width = "100%";

        //</ adapt image >

 

        //< create div >

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

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

        div.style.resize = "both";

        div.style.overflow = "auto";

        div.style.width = "200px";

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

        //</ create div >

 

        //< move img into div >

        //*jquery wrap

        this.parentNode.append(div);

        div.appendChild(this);

        //</ move img into div >

 

        this.removeEventListener("click", add_Sizeable_Div);

        //------</ modify_Image() >------

    }

 

    function remove_Sizeable_Div() {

        //------< modify_Image() >------

        //< adapt image >

        var div = this;

        div.style.border = "10px";

        //</ adapt image >

        //------</ modify_Image() >------

    }

</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