What is toString(“X2”)?

“X2” here denotes the hexadecimal format specifier. Standard numeric format strings are used to format common numeric types. A standard format string takes the form Axx where A is a single alphabetic character called the format specifier, and xx is an optional integer called the precision specifier. The format specifier must be one of the built-in format characters. The precision specifier ranges from 0 to 99 and controls the number of significant digits or zeros to the right of a decimal. The format string cannot contain white spaces.

If the format string does not contain one of the standard format specifiers, then a FormatException is thrown. For example, the format string “z” is interpreted as a standard numeric format string because it contains one alphabetic character, but the alphabetic character is not one of the standard numeric format specifiers so a FormatException is thrown. Any numeric format string that does not fit the definition of a standard numeric format string is interpreted as a custom numeric format string. The format string “c!” is interpreted as a custom format string because it contains two alphabetic characters, even though the character “c” is a standard numeric format specifier.

The following table describes the standard numeric format strings. Note that the result string produced by these format specifiers is influenced by the settings in the Regional Options control panel. Computers using different settings will generate different result strings.

 

Please visit Custom Numeric Format Strings for more details.

Source: msdn.microsoft.com

 

 

(50)

Drag Drop & MouseMove Event Handling in Javascript

Below is an example of mousemove event handling that has mostly been used with drag & drop. Three DIVs are used to demonstrate in this example, the first one contains a picture on which I’ve performed Drag & Drop to move it’s container. The second one records all the mouse movements with it’s current location and deviation on each single move. The third one is used here to demonstrate a little animation using javascript. Even it can be done with the only javascript, I’ve attached JQuery to make the div run smooth. If you click anywhere in the document the circle object will follow the cursor and if you click and drag the picture object it will move with the cursor. You can also find a live demo link at the bottom of this post for the same.

(Note:Please report any broken link)
Drag & Drap Demo

#test
{
height:200px;
width:200px;
border-radius:15px 15px 15px 15px;
background:url('http://4.bp.blogspot.com/_Eqdxlws5VV8/SmX2GPB8QhI/AAAAAAAAI1c/PAQvAJlwYso/s400/nursery+web+spider.JPG') no-repeat;
background-size:contain;
box-shadow:0 0 15px 5px red, 0 0 10px 5px silver inset;
background-position:center;
position:relative;
top:10px;
left:10px;
float:left;
z-index:2;
cursor:move;
-webkit-user-select: none; 
-moz-user-select: none; 
}
 
 
#textDiv
{
    z-index:1;
    height:500px;
    width:400px;
    float:left;
    box-shadow:0 0 15px 5px green, 0 0 10px 5px silver inset;
    overflow:auto;
    position:relative;
    left:40px;
    border-radius:15px;
    padding-top:20px;
    padding-left:20px;
    text-align:center;
    
}
#testDiv
{
    box-shadow:0 0 15px 5px blue, 0 0 20px 10px #dedded inset;
    height:100px;
    width:100px;
    float:left;
    position:fixed;    
    background-color:Green;
    border-radius:50px;
}
 



 
    var currentTop;
    var currentLeft;
    var dragObject;
 
    function mouseUp() {
        dragObject = null;
    }
 
    function makeDraggable(obj) {
        obj = document.getElementById(obj);
        obj.onmousedown = function () {
            dragObject = this;
            currentTop = obj.offsetTop;            
            currentLeft = obj.offsetLeft;
        }
    }
    
 
    function mouseMove(event) {
        if (dragObject) {
            this.onselectstart = function () { return false; }
            var txtDiv = document.getElementById("textDiv");
            var theEvent = event ? event : window.event;
            var x = theEvent.clientX;
            var y = theEvent.clientY;
 
            var moveX = x - currentLeft;
            var moveY = y - currentTop;
            var adjustX = dragObject.offsetWidth / 2;
            var adjustY = dragObject.offsetHeight / 2;
            $(dragObject).animate({ left: currentLeft + moveX - adjustX, top: currentTop + moveY - adjustY }, 1);           
            txtDiv.innerHTML += "Current Position: Top:-"+currentTop+" Left:-"+currentLeft+"
";
            txtDiv.innerHTML += "Mouse Moved: X: "+moveX+"  |  Y: "+moveY+"
";
            txtDiv.scrollTop = txtDiv.scrollHeight;
        }
        
 
    }
 
    document.onmousemove = mouseMove;
    document.onmouseup = mouseUp;
    document.onmousedown = mouseDown;
    function mouseDown(event) {
        var div = document.getElementById("testDiv");       
        $(div).animate({ top: event.clientY - 50, left: event.clientX - 50 }, 1000, function () { div.style.backgroundColor = get_random_color(); });        
    }
 
    function get_random_color() {
        function c() {
            return Math.floor(Math.random() * 256).toString(16)
        }
        return "#" + c() + c() + c();
    }
 
    window.onload = function () {
        makeDraggable("test");        
    }

 

 

A working demo is here: DragDropDemo

(4)