J Query for UI Developer: March 2013

Drag and drop Clone Coding

Drag and drop reset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>edndType4</title>

$(document).ready(function(){

$('.adrag').ednd({

drag:true,

revert:"invalid",

containment:'.eContainer4',

});

$('.adrop').ednd({

drop:true,

type:'type4',

});

function revertDraggable($selector) {

$selector.each(function() {

var $this = $(this),

position = $this.data("originalPosition");

if (position) {

$this.animate({

left: position.left,

top: position.top

}, 500, function() {

$this.data("originalPosition", null);

});

}

});

}

$("#undo").click(function() {

alert('in undo click');

revertDraggable($(".adrag"));

});

</script>

</head>

<body>

<div class="adrag ui-widget-content" id="adg2" edragid="2"> India</div>

<div class="adrag ui-widget-content" id="adg3" edragid="3"> Australia </div>

</div>

<div class="dp_con"> Sydney<div class="adrop ui-widget-header" id="adp2" edropid="3"> </div><span class="feed_img"> </span></div>

<div class="dp_con"> London<div class="adrop ui-widget-header" id="adp3" edropid="4"> </div><span class="feed_img"> </span></div>

<div class="dp_con"> Washington DC<div class="adrop ui-widget-header" id="adp4" edropid="1"> </div><span class="feed_img"> </span></div>

</div>

</div>

</body>

</html>

var uagent = navigator.userAgent.toLowerCase();

var platformAgent = navigator.platform.toLowerCase();

(function($){

$.fn.ednd = function(dnd){

var dnd = $.extend(eobjects,dnd);

var eobjects = {

drag:true,

drop:true,

revert:true,

containment:'cid',

type:'type'

};

var ed = dnd;

if(ed.drag){

if(is_touch_device()){

var a=0;

$(this).each(function(){

var b=$(this).attr("id");

//alert(b);

var c=document.getElementById(b);

a++;

c.addEventListener("touchstart",touchHandler,true);

c.addEventListener("touchmove",function(e){e.preventDefault();},true);

c.addEventListener("touchmove",touchHandler,true);

c.addEventListener("touchend",touchHandler,true);

c.addEventListener("touchcancel",touchHandler,true);

});

}

$(this).css({'cursor':'pointer'});

$(this).each(function(){

$(this).draggable({revert:ed.revert,containment:ed.containment, });

});

}

if(ed.drop){

if(ed.type == 'type4'){

$(this).next('.feed_img').hide();

var that = $(this);

var ec = 0;

$(this).each(function(){

$(".dp_con").droppable({

drop: function(event, ui) {alert('in drop')

if (!ui.draggable.data("originalPosition")) {

ui.draggable.data("originalPosition",

ui.draggable.data("draggable").originalPosition);

}

});

}

function is_touch_device() {

if (navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod' || (uagent.search('android') > -1) || (uagent.search('android') > -1)|| (platformAgent.search('android')>-1) || (platformAgent.search('linux')>-1)){

return true;

}else{

return false;

}

function touchHandler(a){

var b=a.changedTouches,c=b[0],d="";

switch(a.type){

case"touchstart":

d="mousedown";

break;

case"touchmove":

d="mousemove";

break;

case"touchend":

d="mouseup";

break;

default:

return

}

var e=document.createEvent("MouseEvent");

e.initMouseEvent(d,true,true,window,1,c.screenX,c.screenY,c.clientX,c.clientY,false,false,false,false,0,null);

c.target.dispatchEvent(e);

}

return this;

};

})(jQuery);

CSS

/* ednd */

margin:0;

padding:0;

}

.eContainer1,.eContainer2,.eContainer3,.eContainer4,.eContainer5{

border:2px solid #e4e4e4;

height:480px;

width:640px;

float:left;

margin:20px;

padding:10px;

}

.drag{

background:orange;

height:20px;

width:90px;

border:1px dotted #e4e4e4;

margin:5px;

border-radius:5px;

-moz-border-radius:5px;

-webkit-border-radius:5px;

}

.drop{

border:1px solid red;

height:20px;

width:90px;

margin:5px;

}

.vdrop{

border:1px solid red;

height:20px;

width:90px;

margin:5px;

text-align:center;

}

.dragArea{

float:left;

border:1px solid;

}

.dropArea{

float:right;

}

.vdrag{

background:blue;

height:20px;

width:90px;

border:1px dotted #e4e4e4;

margin:5px;

border-radius:5px;

-moz-border-radius:5px;

-webkit-border-radius:5px;

color:white;

text-align:center;

}

.vdrop{

border:1px solid maroon;

height:20px;

width:90px;

margin:5px;

}

.adrag{

background:#A41730;

height:20px;

width:90px;

border:1px dotted #e4e4e4;

margin:5px;

border-radius:5px;

-moz-border-radius:5px;

-webkit-border-radius:5px;

color:white;

text-align:center;

}

.adrop{

border:1px solid maroon;

height:20px;

width:90px;

margin:5px;

text-align:center;

float:left;

}

.eSubmit{

background:url(../images/submit_old.png)no-repeat;

height:55px;

width:128px;

margin:230px 0 0 240px;

cursor:default;

opacity:0.4;

}

.dp_con{

height:50px;

width:300px;

border:1px solid;

}

.feed_pop{

float:left;

height:126px;

width:300px;

background:url(../images/popup.png)no-repeat;

position:absolute;

margin:295px 0 0 35px;

display:none;

text-align:center;

line-height:120px;

}

.eclose{

float:right;

cursor:pointer;

display:none;

}

.feed_correct{

float:left;

height:35px;

width:32px;

background:url(../images/feed_r.png) no-repeat;

}

.feed_wrong{

float:left;

height:35px;

width:32px;

background:url(../images/feed_w.png) no-repeat;

}

canvas Undo Redo Examples

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<button onclick="javascript:drawImage();return false;">Clear Area</button>

Line width : <select id="selWidth">

</select>

Color : <select id="selColor">

<option value="black">black</option>

<option value="green">green</option>

<option value="yellow">yellow</option>

</select>      

</div>

</body>

</html>

JS CODE

// by Chtiwi Malek ===> CODICODE.COM

var mousePressed = false;

var lastX, lastY;

var ctx;

function InitThis() {

ctx = document.getElementById('myCanvas').getContext("2d");

$('#myCanvas').mousedown(function (e) {

mousePressed = true;

Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);

});

$('#myCanvas').mousemove(function (e) {

if (mousePressed) {

Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);

}

});

$('#myCanvas').mouseup(function (e) {

if (mousePressed) {

mousePressed = false;

cPush();

}

});

$('#myCanvas').mouseleave(function (e) {

if (mousePressed) {

mousePressed = false;

cPush();

}

});

drawImage();

}

function drawImage() {

var image = new Image();

image.src = 'trace.png';

$(image).load(function () {

ctx.drawImage(image, 0, 0, 500, 200);

cPush();

});

}

function Draw(x, y, isDown) {

if (isDown) {

ctx.beginPath();

ctx.strokeStyle = $('#selColor').val();

ctx.lineWidth = $('#selWidth').val();

ctx.lineJoin = "round";

ctx.moveTo(lastX, lastY);

ctx.lineTo(x, y);

ctx.closePath();

ctx.stroke();

}

lastX = x;

lastY = y;

}

var cPushArray = new Array();

var cStep = -1;

function cPush() {

cStep++;

if (cStep < cPushArray.length) { cPushArray.length = cStep; }

cPushArray.push(document.getElementById('myCanvas').toDataURL());

document.title = cStep + ":" + cPushArray.length;

}

function cUndo() {

if (cStep > 0) {

cStep--;

var canvasPic = new Image();

canvasPic.src = cPushArray[cStep];

canvasPic.onload = function () { ctx.drawImage(canvasPic, 0, 0); }

document.title = cStep + ":" + cPushArray.length;

}

function cRedo() {

if (cStep < cPushArray.length-1) {

cStep++;

var canvasPic = new Image();

canvasPic.src = cPushArray[cStep];

canvasPic.onload = function () { ctx.drawImage(canvasPic, 0, 0); }

document.title = cStep + ":" + cPushArray.length;

}

Jquery for XML load with Next prev

// common variable
var pageTab = 0;
var nav = 0;
var page;
var tab;
var xmldoc;
var testChance = 0;
var active = true;
var box;
// define
var submitActive = false;
var optIndex;
var $this;
var temp = "";
var audNav = 0;
var audScroll = 0;
var audName = [];
var audNext = true;
var audPrev = true;
var nextAnim;
var nextAnimflag = 0;
var footerTxt = "Introduction";
var nxt = 1;

var nextAnim = 0;

var storeAns;
var ansRight = 0;
// init
var ansWrong = 0;
// init
var solutionNav = 1;
var eventdata;
var uagent = navigator.userAgent.toLowerCase();
var platformAgent = navigator.platform.toLowerCase();
var timer;

var prev_ena = false;
var next_ena = true;
var audio_ena = true;

var audioFlag = false;
var nextAnim = 0;

var t1;
var t2;
var t3;
var t4;
var t5;
var t6;
var t7;
var t8;

var gameAud = document.getElementById('gameAud');

$(document).ready(function() {

    if (navigator.platform == 'iPad' || uagent.search('android') > -1) {
        eventdata = 'touchstart';
    } else {
        eventdata = 'click';
    }
    $("#page").show();
    // page shown
    //xmlLoad();// load xml document;
    if (navigator.platform == 'iPad') {
        //loadAud();
    }

    $('#header_bg ul li').live(eventdata, function() {
        pageTab = $("#header_bg ul li").index(this);
        updateHeaderAndFootBg(pageTab);
        page = tab[pageTab].getElementsByTagName("section");
        nav = 0;
        loadContent(pageTab);
    });

    $("#prev").live(eventdata, function() {
        if (prev_ena) {
            prevPage();
            updateContent();
            prevupdatenav1();
            prevupdatenav();
            //pagenavtabUpdate();
            if (pageTab == 0) {
                $('#pagination li:eq(0)').show();
            }
            $('.topStrip1,.main_page').hide();
            $('#topic').hide();
        }
    });

    $("#next,.nextAnim").live(eventdata, function() {
        if (next_ena) {
            enablePrev();
            nextPage();
            updateContent();
            nextupdatenav();
            $('#topic').hide();
        }

    });

    $("#pagination li").live(eventdata, function() {
        nav = $("#pagination li").index(this);
        pageContent(nav);
        prevupdatenav();
        prevupdatenav1();
        nextupdatenav();

    });

    var gpLength = $('#pagination li').length;
    //alert(gpLength);
    if (gpLength > 10) {
        $('#pagination li:gt(9)').hide();
    }

    $('#pageText,.topStrip').live(eventdata, function() {
        $('#topic').hide();
    })
});

function nextupdatenav() {
    if (nav > 9) {
        $('#pagination li:gt(19)').hide();
    }
    if (nav > 19) {
        $('#pagination li:lt(20)').hide();
        $('#pagination li:gt(19)').show();
    }
}

function prevupdatenav() {
    if (nav < 20 && nav > 10) {
        $('#pagination li:lt(9)').hide();
        $('#pagination li:gt(9)').show();
        $('#pagination li:gt(19)').hide();
    }

}

function prevupdatenav1() {
    if (nav < 10) {
        $('#pagination li:gt(9)').hide();
        $('#pagination li:gt(19)').hide();
        $('#pagination li:lt(9)').show();
    }
}

$('#footlist').live('click', function() {
    $('#topic,#cont').show();
});

function updateContent() {
    displayState();
    updateNav(nav);
    pageContent(nav);
}

function updateNav(state) {
    nxt = state;
    //spanText.innerHTML = state;
    footerTxt = $('#topic li').eq(nxt - 1).html();
    //updateFooter(footerTxt);
    displayState();
}

function updateFooter(txt) {
    $('#footlist').html(txt);
}

$('#topic li').live('click', function() {
    pageTab = $("#topic li").index(this);
    page = tab[pageTab].getElementsByTagName("section");
    nav = 0;
    loadContent(pageTab);
    for ( i = 0; i <= page.length - 1; i++) {
        var count = $(".tcount").html(page.length);
    }
    $('.topStrip1,.main_page').hide();
    $('#topic').hide();
});

function updateHeaderAndFootBg(pageTab) {
    for (var i = 0; i <= $('#header_bg ul li').length - 1; i++) {
        var inactive_menu = 'menu_bg_' + i;
        var inactive_menu_normal = 'menu_normal_' + i;
        var inactive_foot = 'foot_bg_' + i;
        $('.' + inactive_menu).hide();
        $('.' + inactive_menu_normal).show();
        $('.' + inactive_foot).hide();
    };
    var menuBg = 'menu_bg_' + pageTab;
    var menu_normal = 'menu_normal_' + pageTab;
    var foot_bg = 'foot_bg_' + pageTab;
    $('.' + menuBg).show();
    $('.' + foot_bg).show();
    $('.' + menu_normal).hide();
}

function xmlLoad() {
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject(Microsoft.XMLHTTP);
    }

    xmlhttp.open('GET', 'main.xml', false);
    xmlhttp.send();
    xmldoc = xmlhttp.responseXML;
    tab = xmldoc.getElementsByTagName("tab");
    loadContent(tab);
}

function loadContent() {

    page = tab[pageTab].getElementsByTagName('section');

    $("#pagination li").remove();
    for ( i = 0; i <= page.length - 1; i++) {
        $("#pagination").append("<li>" + eval(i + 1) + "</li>");
        var count = $(".tcount").html(page.length);
    }
    updateHeaderAndFootBg(pageTab);
    pageContent(nav);
}
alert(page);
function prevPage() {// previous
    if (nav <= 0 && pageTab <= 0) {// section first
        nav = 0;
    } else {
        if (nav <= 0) {
            pageTab--;
            page = tab[pageTab].getElementsByTagName("section");
            nav = page.length - 1;
            // start from end
            audNav = 0;
            $(".count").html(nav + 1);
            loadContent();
        } else {
            nav--;
            if (nav < 10) {
                $('#pagination li:lt(10)').show();
                $('#pagination li:gt(9)').hide();
            }
            pageContent(nav);
        }
    }
}

function nextPage() {// next
    if (nav >= page.length - 1 && pageTab >= tab.length - 1) {// section end
        nav = page.length - 1;
    } else {
        if (nav >= page.length - 1) {
            nav = 0;
            // start from begining
            //disablePrev();
            pageTab++;
            loadContent();
        } else {
            nav++;
            if (nav > 9) {
                $('#pagination li:lt(10)').hide();
                $('#pagination li:gt(9)').show();
            }

            $(".count").html(nav + 1);

            pageContent(nav);
        }
    }
}

function displayState() {
    enablePrev();
    enableNext();
    if (pageTab == 4 && nav == 19) {
        disableNext();
    }

}

function showEndText() {
    $('#pageText,#pagination').hide();
    $("#feedback, #hidebg").hide();
    $("#finished").show();
    disableButtons();
}

function disableButtons() {
    disablePrev();
    disableNext();
    disableAudio();
}

function enableButtons() {
    enablePrev();
    enableNext();
    enableAudio();
}

function disablePrev() {
    $('#prev').removeClass('prev_ena').addClass('prev_dis');
    prev_ena = false;
}

function enablePrev() {
    $('#prev').removeClass('prev_dis').addClass('prev_ena');
    prev_ena = true;
}

function disableNext() {
    $('#next').removeClass('next_ena').addClass('next_dis');
    next_ena = false;
}

function enableNext() {
    $('#next').removeClass('next_dis').addClass('next_ena');
    next_ena = true;
}

function disableAudio() {
    $('#play').css({
        'opacity' : '0.4',
        'cursor' : 'default'
    });
    audio_ena = false;
}

function enableAudio() {
    $('#play').css({
        'opacity' : '1',
        'cursor' : 'pointer'
    });
    audio_ena = true;
}

function pageContent(nav) {
    $(".count").html(nav + 1);
    // Content
    $("#pagination li").css({
        'background' : 'url("images/pageing_bg.png") no-repeat scroll 0 -1px transparent',
        'width' : '20px',
        'height' : '20px',
        'color' : '#000'
    });
    $("#pagination li:eq(" + nav + ")").css({
        'background' : 'url("images/pageing_bg.png") no-repeat scroll 0 -21px transparent',
        'width' : '20px',
        'height' : '20px',
        'color' : '#fff'
    });
    $("#feedback,#hidebg").empty().hide();
    $('#pageText,#pagination').show();
    enableButtons();
    displayState();
    $("#pageText").empty();
    // clear the container;
    stopNextAnimation();
    clearInterval(nextAnim);
    if (pageTab == 0 && nav == 0) {
        disablePrev();

    }
    prevupdatenav();
    prevupdatenav1();
    nextupdatenav();

    testChance = 0;
    audNav = 0;
    // audio play init
    clearTimeout(timer);
    flagInput = 0;

    active = true;
    submitActive = false;
    // deactivate submit button loads
    isDragDropTried5 = 0;
    audioFlag = true;
    // 03/05/12
    contentEmbed();

    if (page[nav].hasAttributeNS('', "interaction")) {// check for the interaction
        $(".test li").prepend("<input type='radio' name='r1'/>");
    }
    var audPath = page[nav].getElementsByTagName('audio')[0].getAttribute('path');
    // store audio path
    if (audPath == 'noAudio') {
        gameAudioStop();
        disableAudio();
    } else {
        enableAudio();
        audioPlay(uagent);
    }
}

function contentEmbed() {
    contentArray = page[nav].getElementsByTagName('details')[0].childNodes;
    for ( i = 0; i <= contentArray.length - 1; i++) {
        if (contentArray[i].nodeType == 1) {
            serializerText(contentArray[i], box = "#pageText");
        }
    }
}

function serializerText(serialStr, box) {// Embed the relative Content
    pageStr = (new XMLSerializer()).serializeToString(serialStr);
    $(box).append(pageStr);
}

function checkAns(index, nav, $this) {// Activity
    if (submitActive) {
        storeAns = page[nav].getAttribute('answer');

        if (page[nav].getAttribute('chance') == 'yes') {
            testChance++;
            switch (testChance) {// single choice chance
                case 1:
                    if (index + 1 == storeAns) {
                        $(".test li").eq(index).attr('class', 'right');
                        embedFeed( xmlFeedTag = 'postive_feedback');
                        $("#done").hide();
                        testChance = 0;
                        nextAnimation();
                    } else {
                        embedFeed( xmlFeedTag = 'negative_feedback');
                    }
                    break;
                case 2:
                    if (index + 1 == storeAns) {
                        $(".test li").eq(index).attr('class', 'right');
                        embedFeed( xmlFeedTag = 'postive_feedback');

                    } else {
                        $(".test li").eq(storeAns - 1).attr('class', 'right');
                        // Right Answer
                        embedFeed( xmlFeedTag = 'postive_comments');
                    }
                    testChance = 0;
                    $("#done").hide();
                    nextAnimation();
                    break;
            }
        } else {
            /*True or false Script*/
        }
    }
}

function embedFeed(xmlFeedTag) {// feedback content embed
    $("#feedback,#hidebg").empty().hide();

    feedArray = page[nav].getElementsByTagName(xmlFeedTag)[0].childNodes;
    for ( i = 0; i <= feedArray.length - 1; i++) {
        if (feedArray[i].nodeType == 1) {
            serializerText(feedArray[i], box = "#feedback");
        }
    }

    timer = setTimeout(function() {
        $("#feedback,#hidebg").show();
        clearTimeout(timer);
    }, 500);
}

function audioPlay(uagent) {
    audPath = page[nav].getElementsByTagName('audio')[0].getAttribute('path');
    // store audio path

    if (audPath.indexOf(",") > 0) {
        var audPathStr = audPath.split(',');
        // store audio path in voiceText wise
        audFile = audPathStr[audNav];
    } else {
        audFile = audPath;
    }

    if (navigator.platform == 'iPad') {
        $('#gameAud').attr({
            src : 'audio/' + audFile + '.mp3',
            type : 'audio/mpeg'
        });
        loadAud();
    } else if (uagent.search('android') > -1 || uagent.search('android') > -1 || platformAgent.search('android') > -1 || platformAgent.search('linux') > -1) {
        if ($.browser.version > 534) {
            $('#gameAud').attr({
                src : 'audio/' + audFile + '.mp3',
                type : 'audio/mp3'
            });
            loadAudAndroid();
            // playAud();
        } else {
            var audioNamePath = 'audio/' + audFile + '.mp3';
            var audioElement = document.getElementById('gameAud');
            audioElement.setAttribute('src', audioNamePath);
            audioElement.load();
            audioElement.addEventListener("load", function() {
                audioElement.play();
                audStarted();
            }, true);
        }
    } else if (uagent.search('firefox') > -1) {
        $('#gameAud').attr({
            src : 'audio/' + audFile + '.ogg',
            type : 'audio/ogg'
        });
        loadAud();
    } else {
        $('#gameAud').attr({
            src : 'audio/' + audFile + '.mp3',
            type : 'audio/mpeg'
        });
        loadAud();
    }
    $("#audStop").attr({
        src : 'images/pause_01.png'
    });
}

function loadAud() {

    gameAud.load();
    gameAud.play();
    audStarted();
}

function playAud() {
    gameAud.play();
    audStarted();
}

function loadAudAndroid() {
    gameAud.load();
    t = setTimeout(function() {
        audStarted();
    }, 1000);
}

// audio stop
$("#audStop").toggle(function() {
    if (audio_ena) {
        $(this).attr({
            src : 'images/play_01.png'
        });
        gameAudioStop();
    }
}, function() {
    if (audio_ena) {
        $(this).attr({
            src : 'images/pause_01.png'
        });
        playAud();
    }
});

function gameAudioStop() {
    gameAud.pause();
}

window.onload = function() {
    gameAud.addEventListener('ended', audEnded, false);
    // bind audio ended
    gameAud.addEventListener('playing', audStarted, false);
}
setInterval(function() {
    if (gameAud.ended == true) {
        audEnded();
    }
}, 500);

function audioNext() {
    enableAudio();
    var audPathStr = audPath.split(',');
    if (audPath.indexOf(",") > 0 && audPathStr.length > 1) {
        if (audNav < audPathStr.length - 1) {
            audNav++;
            audioPlay(uagent);
        }
    }
}

function clearTimer() {
    clearTimeout(t1);
    clearTimeout(t2);
    clearTimeout(t3);
    clearTimeout(t4);
    clearTimeout(t5);
    clearTimeout(t6);
    clearTimeout(t7);
    clearTimeout(t8);
}

function nextAnimation() {
    $('.nextAnim').show();
}

function stopNextAnimation() {
    $('.nextAnim').hide();
}

canvas Examples

Canvas Example Code

var noClick;

var arcMoves = 0;

var intervalId;

var startingAngle;

var endingAngle;

var centerX;

var centerY;

var clickX = new Array();

var clickY = new Array();

var clickDrag = new Array();

var paint;

var newDate = new Date;

var tempImgName;

var a = 0;

var b = 0;

var storeArr = []

var pro_enable = false;

$(document).ready(function(){

/*$('#geoLayout').append('

id="pencilIcon" />

id="clear" />

id="eraseIcon" />

Type

Type
Radius mm

Rotate °

Submit

');

geoLayout = document.getElementById('geoLayout');

clear = document.getElementById('clear');

pageText = document.getElementById('geoLayout');

noClick = 0 ;

firstMove = true;

canvas = document.getElementById('canvas');

ctx=canvas.getContext('2d');

ctx.beginPath();

$("#geoIcon").toggle(function(){

$("#geoLayout").fadeIn();

$("#geo-thumb").show();

},function(){

//$("#canvas").empty();

$("#canvas").css({'cursor':'default'});

$("#pencilDv").hide();

$("#compassDv").hide();

$("#protector").remove();

$("#ruler").remove();

//canvas = document.getElementById('canvas');

//ctx=canvas.getContext('2d');

//ctx.clearRect(0, 0, 585, 450);

//ctx.beginPath();

$("#geo-thumb").hide();

$("#geoTool").empty();

$("#geoLayout").fadeOut();

});

$("#pencilIcon").toggle(function(){

$("#pencilDv").show();

$("#eraser").remove();

$("#compassDv, #ProDiv").hide();

$("#canvas").css({'cursor':'pointer'});

if(pro_enable){

$("#canvas").css({'z-index':'100000','position':'absolute'});

}

else {

$("#canvas").css({'z-index':'0','position':'static'});

}

},function(){

$("#canvas").css({'cursor':'default'});

$("#pencilDv").hide();

});

var DragLeft = 0;

var DragTop = 0;

$("#eraseIcon").toggle(function(){

$("#geoTool").append("

");

new webkit_draggable('eraser',{revert: false});

eraseImage();

$("#pencilDv").hide();

$("#compassDv").hide();

},function(){

$("#eraser").remove();

});

$('#canvas').mousedown(function(e){

if($("#pencilDv").css('display')=="block")

{

paint = true;

addClick(e.pageX - eval(this.offsetLeft+geoLayout.offsetLeft), e.pageY - eval(this.offsetTop+geoLayout.offsetTop));

redraw();

}

});

$('#canvas').mousemove(function(e){

if((($("#pencilMode").val()).toLowerCase() == "freehand")&& ($("#pencilDv").css('display')=="block"))

{

if(paint){

addClick(e.pageX - eval(this.offsetLeft+geoLayout.offsetLeft), e.pageY - eval(this.offsetTop+geoLayout.offsetTop), true);

redraw();

}

});

$('#canvas').mouseup(function(e){

if((($("#pencilMode").val()).toLowerCase() == "freehand")&& ($("#pencilDv").css('display')=="block"))

{

paint = false;

clickX = new Array();

clickY = new Array();

clickDrag = new Array();

}

});

$('#canvas').mouseleave(function(e){

if((($("#pencilMode").val()).toLowerCase() == "freehand")&& ($("#pencilDv").css('display')=="block"))

{

paint = false;

clickX = new Array();

clickY = new Array();

clickDrag = new Array();

}

});

clear.onclick = function(){

noClick = 0;

storeArr = [];

firstMove = true;

next = 0;

ctx.clearRect(0, 0, 585, 450);

ctx.beginPath();

}

if(/iphone|ipod|ipad|android/i.test(navigator.userAgent))

init();

});

function eraseImage(){

domid = document.getElementById('eraser');

domid.onmousemove = function(event){

x = event.pageX-eval(pageText.offsetLeft +15);

y = event.pageY-pageText.offsetTop;

x1 = eval(event.pageX-eval(domid.offsetLeft+geoLayout.offsetLeft))-11;

y1 = Number(event.pageY-eval(domid.offsetTop+geoLayout.offsetTop));

if((x>0 && x< 585) && (y > 0 && y < 450)){

ctx.beginPath();

ctx.moveTo(eval(x-x1)-1,eval(y+y1)-1);

ctx.rect(eval(x-x1)-1,eval(y+y1)-1,2,2);

ctx.lineCap='round';

ctx.lineWidth = 40;

ctx.strokeStyle = "#000";

ctx.stroke();

}

function spoting(){

domid = document.getElementById('canvas');

domid.onclick = function(event){

if($("#compassDv").css('display')=="block")

{

var radius = $("#getRadius").val();

radius = eval(radius * 3.779527559);

noClick ++

x= event.pageX - eval(this.offsetLeft+geoLayout.offsetLeft);

y= event.pageY - eval(this.offsetTop+geoLayout.offsetTop);

if((x>0 && x< 585) && (y > 0 && y < 450)){

switch (($("#compassMode").val()).toLowerCase()){

case "arc":

arcMoves++;

ctx.moveTo(x,y);

ctx.rect(x,y,2,2);

if(arcMoves == 1)

{

centerX = eval(x);

centerY = eval(y);

ctx.lineCap='round';

ctx.lineWidth = 2;

ctx.stroke();

startingAngle = 0;

endingAngle = 6.3;

var counterclockwise = false;

/*var img = new Image();

tempImgName = newDate.getTime() + '.png';

img.src = tempImgName;

img.id = tempImgName;

ctx.drawImage(img,0,0);*/

ctx.beginPath();

ctx.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);

ctx.strokeStyle = "#fafafa"; // line color

ctx.lineWidth = 2;

ctx.stroke();

}

else if(arcMoves == 2)

{

startingAngle = Math.atan2(eval(y-centerY),eval(x-centerX));

if (startingAngle < 0)

startingAngle += 2 * Math.PI;

ctx.beginPath();

ctx.rect(x,y,2,2);

ctx.lineCap='round';

ctx.strokeStyle = "black"; // line color

ctx.lineWidth = 2;

ctx.stroke();

}

else

{

ctx.rect(x,y,2,2);

ctx.lineCap='round';

ctx.lineWidth = 2;

ctx.stroke();

endingAngle = Math.atan2(eval(y-centerY),eval(x-centerX));

if (endingAngle < 0)

endingAngle += 2 * Math.PI;

var counterclockwise = false;

ctx.beginPath();

ctx.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);

ctx.strokeStyle = "black"; // line color

ctx.lineWidth = 2;

ctx.stroke();

arcMoves = 0;

}

break;

case "circle":

ctx.moveTo(x,y);

ctx.rect(x,y,2,2);

ctx.lineCap='round';

ctx.lineWidth = 2;

ctx.stroke();

centerX = x;

centerY = y;

startingAngle = 0;

endingAngle = 6.3;

var counterclockwise = false;

ctx.beginPath();

ctx.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);

ctx.strokeStyle = "black"; // line color

ctx.lineWidth = 2;

ctx.stroke();

break;

}

function addClick(x, y, dragging)

{

clickX.push(x);

clickY.push(y);

clickDrag.push(dragging);

}

function redraw(){

ctx.strokeStyle = "black";

ctx.lineJoin = "round";

ctx.lineWidth = 2;

if(($("#pencilMode").val()).toLowerCase() == "freehand")

{

init();

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

{

ctx.beginPath();

if(clickDrag[i] && i){

ctx.moveTo(clickX[i-1], clickY[i-1]);

}else{

ctx.moveTo(clickX[i]-1, clickY[i]);

}

ctx.lineTo(clickX[i], clickY[i]);

ctx.closePath();

ctx.stroke();

}

else if(($("#pencilMode").val()).toLowerCase() == "line")

{

destroy();

ctx.rect(clickX[0],clickY[0],2,2);

ctx.lineCap='round';

ctx.lineWidth = 2;

if(clickX.length > 1)

{

ctx.rect(clickX[1],clickY[1],2,2);

ctx.lineCap='round';

ctx.lineWidth = 2;

ctx.stroke();

ctx.beginPath();

ctx.moveTo(clickX[0], clickY[0]);

ctx.lineTo(clickX[1], clickY[1]);

ctx.closePath();

paint = false;

clickX = new Array();

clickY = new Array();

clickDrag = new Array();

}

ctx.stroke();

}

function init(){

var c = document.getElementById("canvas");

c.addEventListener("touchstart",touchHandler,true);

c.addEventListener("touchmove",function(e){e.preventDefault()},true);

c.addEventListener("touchmove",touchHandler,true);

c.addEventListener("touchend",touchHandler,true);

c.addEventListener("touchcancel",touchHandler,true);

c.addEventListener("doubletap",touchHandler,true);

}

function destroy(){

var c = document.getElementById("canvas");

c.removeEventListener("touchstart",touchHandler,true);

c.removeEventListener("touchmove",function(e){e.preventDefault()},true);

c.removeEventListener("touchmove",touchHandler,true);

c.removeEventListener("touchend",touchHandler,true);

c.removeEventListener("touchcancel",touchHandler,true);

c.removeEventListener("doubletap",touchHandler,true);

}

function touchHandler(a){

var b=a.changedTouches,c=b[0],d="";

switch(a.type){

case"touchstart":

d="mousedown";

break;

case"touchmove":

d="mousemove";

break;

case"touchend":

d="mouseup";

break;

case"touchmove":

d="dblclick";

break;

default:

return

}

var e=document.createEvent("MouseEvent");

e.initMouseEvent(d,true,true,window,1,c.screenX,c.screenY,c.clientX,c.clientY,false,false,false,false,0,null);

c.target.dispatchEvent(e)

}

Type2

Pages

Drag and drop Clone Coding

Drag and drop reset

canvas Undo Redo Examples

Jquery for XML load with Next prev

canvas Examples