Category Archives: Demo

You can find here the various examples and demo on the HTML5 and jQuery.

Drag and drop rows within ui grid in Angular js

Ui Grid is the popular grid system specially for Angular 1.x(Currently ui-grid doesn’t support angular 2 and above version). Ui-grid has no dependency rather than angular which makes it light weight. It has very rich feature set such as sorting, filtering, grouping and pagination and also has server side support for data-binding and pagination. Continue reading Drag and drop rows within ui grid in Angular js

Rotate object or shape in HTML5 Canvas

HTML5 canvas provides rotate(angle) method which is used to rotate the canvas around the current origin clockwise. The parameter ‘angle’ should be radians not in degrees. You can use degree * Math.PI/180 formula to convert the degree in radians, suppose if you want to rotate canvas 45 degree you can use 45*Math.PI/180 for the angle. Continue reading Rotate object or shape in HTML5 Canvas

Starting with geolocation api in HTML 5

Geolocation is the HTML 5 API that is used to get the location of the user. You can get the latitude and longitude of the user’s location.

Importance
But the question is why this service is so useful? I will try to explain let’s suppose you are travelling a city and you have not adequate information about the routes, public transport system and other places. Continue reading Starting with geolocation api in HTML 5

Change the caption of the button on click in JavaScript and jQuery

The following code samples demonstrate how can you change the text of the existing controls at client side. The example change the text of a button ‘show image’ to ‘hide image’ after showing the image on the click event. You can see in the below demo: Continue reading Change the caption of the button on click in JavaScript and jQuery

HTML input tag that accepts only numeric values using JavaScript

I need to restrict certain number of input field to takes only numbers values. Basically my form is not a submit form so that i can not put the simple validation on the form submission. I want the user to be unable to enter the any other characters than numeric values. Continue reading HTML input tag that accepts only numeric values using JavaScript

drag and drop only text of the li into textarea in jQuery

I have written various code snippets for drag and drop element from one to another including drag an element and convert it into another element and then drop with the help of jQuery.

This time I will show you how can you drag text or value of the one element and append or insert this text into textarea html element. The code can be useful to create email and newsletter template at run time. The following code will work on all major browser including IE9.

Demo – Create E-mail Template(using drag and drop)

Click on any item from ‘Available Fields’ panel with your left mouse button, then, without releasing the button, drag it to the desired order on right panel and release the mouse button to drop it.

Available Fields

  • Name
  • Address
  • Phone
  • Sender Name
  • Sender Address
  • Sender Phone
  • Sender Email
  • Other1
  • Other2
  • Other3
  • Other4
  • Other5
Subject:
Read HTML5 Canvas Tutorial

Code

To add drag-and-drop functionality, you need to include both the jQuery library and the jQuery UI library plugin.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
     type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.8.20/jquery-ui.min.js"
     type="text/javascript"></script>
    <script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js"
        type="text/javascript"></script>
    <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js"
        type="text/javascript"></script>
    <style>
        .textarea{background: #fff;}
        .dragitems{width: 20%; float: left; background: #f1f1f1;}
        .dropitems{width: 70%;float: left;background: #f1f1f1;
                   margin-left: 20px;padding:5px 5px 5px 5px;}
        .dragitems ul{list-style-type: none;padding-left: 5px;
                   display: block;}
        #content{height: 400px;width: 650px;}
    </style>
    <script language="javascript" type="text/javascript">
        $(function() {
            $("#allfields li").draggable({
                appendTo: "body",
                helper: "clone",
                cursor: "select",
                revert: "invalid"
            });
            initDroppable($("#TextArea1"));
            function initDroppable($elements) {
                $elements.droppable({
                    hoverClass: "textarea",
                    accept: ":not(.ui-sortable-helper)",
                    drop: function(event, ui) {
                        var $this = $(this);
 
                        var tempid = ui.draggable.text();
                        var dropText;
                        dropText = " {" + tempid + "} ";
                        var droparea = document.getElementById('TextArea1');
                        var range1 = droparea.selectionStart;
                        var range2 = droparea.selectionEnd;
                        var val = droparea.value;
                        var str1 = val.substring(0, range1);
                        var str3 = val.substring(range1, val.length);
                        droparea.value = str1 + dropText + str3;
                    }
                });
            }
        });
    </script>
 
</head>
<body>
    <form id="form1" runat="server">
    <div id="content">
        <h2 id="hpermittext" style="line-height: 120%;">
            Demo - Create E-mail Template(using drag and drop)</h2>
        <div class="dragitems">
            <h3>
                <span>Available Fields</span></h3>
            <ul id="allfields" runat="server">
                <li id="node1">Name</li>
                <li id="node2">Address</li>
                <li id="node3">Phone</li>
                <li id="node4">Sender Name</li>
                <li id="node5">Sender Address</li>
                <li id="node6">Sender Phone</li>
                <li id="node7">Sender Email</li>
                <li id="node8">Other1</li>
                <li id="node9">Other2</li>
                <li id="node10">Other3</li>
                <li id="node11">Other4</li>
                <li id="node12">Other5</li>
            </ul>
        </div>
        <div class="dropitems">
            <span>Subject: </span>
            <input id="txtSubject" runat="server" maxlength="250" 
            style="width: 200px" type="text" /><a href=""> Read HTML5 Canvas Tutorial</a>
            <textarea id="TextArea1" cols="50" name="S1" 
            rows="20">Hello HTMl5 canvas Tutorials on Authorcode </textarea>
        </div>
    </div>
    </form>
</body>
</html>