Graph Tools using Js, HTML and Canvas

Flot: Attractive JavaScript plotting for jQuery

flotcharts.org

Additional examples are bundled with Flot. Also take a look at the Flot Usage Wiki for screenshots and stories from people and companies using Flot.

jqPlot Charts and Graphs for jQuery

jqplot.com

Computation and drawing of lines, axes, shadows even the grid itself is handled by pluggable "renderers". Not only are the plot elements customizable, plugins can expand functionality of the plot too! There are plenty of hooks into the core jqPlot code allowing for custom event handlers, creation of...

http://www.rgraph.net/

Modernizr - A Javascript library

What Is Modernizr

It is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

Why use Modernizr?

Taking advantage of cool new web technologies is great fun, until you have to support browsers that lag behind. Modernizr makes it easy for you to write conditional JavaScript and CSS to handle each situation, whether a browser supports a feature or not. It’s perfect for doing progressive enhancement easily.

How it works

Modernizr runs quickly on page load to detect features; it then creates a JavaScript object with the results, and adds classes to the html element for you to key your CSS on. Modernizr supports dozens of tests, and optionally includes YepNope.js for conditional loading of external .js and .css resources.

http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/

Source : Internet

Firebug Tutorials

 Nice guide for Web Developers

http://www.w3resource.com/web-development-tools/firebug-tutorials.php

Simple Incremental Status update

We may need to show the states of the server side operation status to users, if it is a bulk data process. One such example is Import or Export data. I searched for a solution and found a simple but attractive solution.

http://encosia.com/easy-incremental-status-updates-for-long-requests/

JQuery - Found Solution for Nested Droppable items

http://www.designerstalk.com/forums/programming/64268-jquery-droppable-div-created-fly-not-working.html#post777326


$(".myDropClass").droppable(
{
accept: '.myDragClass',
drop: function (event, ui) {
//remove old item
alert('Dropped');
$(this).find(".myDragClassPlaceHolder").remove();

var listHtml = "

" +
"

" +
"New Droppable area" + ui.draggable.text() + "

";
alert('Added1');
$(this).append(listHtml);
alert('Added');
$(this).find('#ontheflyDiv').droppable({
drop: function(event, ui)
{
alert('Set the droppable behavior to the newly created element');
$(this).append("hello");

}
});

}
});

Window - open, move

Window.open method opnes a window and window.move method Moves the screen position of the upper-left corner of the window to the specified iX and iY position.

mywindow=window.open('BalaSanHome.aspx','whatever','toolbar=no,status=no,width=500,height=250,scrollbars=no,directories=no,location=no,resizable=no,menubar=no,screenX=400,screenY=300,top=290,left=600' ,true);
       mywindow.moveTo(300,300);

Javascript : Using Math functions

function Multiply()
{//No of Hrs / No. of retry = Retry frequency
//Eg: 39 / 10 = 3.9 which is equal to 4 Hrs and 30 Minsvar var1,var2,var3;
var intHrs;
var intMins;
var1 = parseFloat(document.getElementById("txtop1").value );
var2 = parseFloat(document.getElementById("txtop2").value);
if ( isNaN(var1)  isNaN(var2) )
{
     var3 = 0;
     document.getElementById("txtop3").value = "0:00" ;
       
     return true;
}
var3 = var2 / var1;
intHrs = Math.floor(var3);
if (var3 - intHrs > 0.59)
{
    intMins = (var3 - intHrs) - 0.60;
    intHrs += 1;
}
else
{
    intMins = var3 - intHrs;
}
intMins = intMins.toFixed(2) * 100;
document.getElementById("txtop3").value = intHrs + ":" + intMins ;

return true;
}