Javascripts, JQuery

Collection of Open Source Javascript Libraries: Google API

The Google AJAX Libraries API allows to include most popular javascript libraries into web application with correctly setting cache headers and up to date with bug fixes.
By using google.load() method we can include most popular, open source JavaScript libraries.

Google AJAX Libraries has collection of following libraries,

  • jQuery
  • jQuery UI
  • Prototype
  • script.aculo.us
  • MooTools
  • Dojo
  • Ext Core
  • Yahoo! User Interface Library (YUI)
  • Ext Core
  • Chrome Frame

How to load libraries

To use API we need to add API library as,

<script src="http://www.google.com/jsapi"></script>

google.load() method is used to load library into application as,

<script type="text/javascript">
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.2");
google.load("prototype", "1.6.1.0");
google.load("scriptaculous", "1.8.2");
google.load("mootools", "1.2.4");
google.load("dojo", "1.3.2");
google.load("swfobject", "2.2");
google.load("yui", "2.8.0r4");
google.load("ext-core", "3.0.0");
</script>

e.g.

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("jquery", "1");

</script>
Javascripts

Javascript Progress Bar with CSS

Sometimes, we need a percentage bar / progress bar to show the progress of a specific task in web application. However, it is very difficult to find a working and easy solution without using Flash.

webappers has created java script based beautiful Progress Bar.

progressBar

Javascripts, Linq

Overview: jLinq

jLinq is a Javascript library that lets you write queries against arrays of javascript objects and JSON data.

Syntax and Examples

Syntax for jLinq is much similar to LINQ ,

var results = jLinq.from(data.users)
.startsWith("first", "a")
.orEndsWith("y")
.orderBy("admin", "age")
.select();

Some important commands

  • .startsWith( field?, value ): Check to see if the field starts with the specified value.
    //Some sample queries
    var results = jLinq.from(records)
    .startsWith("firstname", "jo") // first name starting with 'jo'
    .or("ji") // or first name starting with 'ji'
     
    var results = jLinq.from(records)
    //you can use an array of values to check
    .startsWith("firstname", ["a","e","i","o","u"])
    
  • .endsWith( field?, value ) : Check to see if the field starts with the specified value.
  • .contains( field?, value ) : Check to see if the field contains the specified value.
  • .match( field?, regexp ): Check to see if the
    value matches the regular expression. This command will still take case
    sensitivity into account.
  • .empty( field? ): Check to see if the field contains any value.
  • .greater( field?, value ): Check to see if the field is less than the provided value.

If the field is…

– a string, checks if it ends with the value
– an array, checks if the last element matches the value
– else, convert to a string and check returns jLinq Object

For all commands with examples see this.

Retrieve and Display Results

results[index][‘field’] will retrieve values from result object.

Following e.g. will retrieve data and displays in table,

var results = jLinq.from(data.users)
.startsWith("first", "a")
.toTable();
document.write(results);

Creating A Query Command

We can also create our own commands,

jLinq.extend({
    name:"evenValues", //the name of this command i.e. method
    type:"query", //the kind of command this is
    count:0, //how many parameters we expect
    method:function(query) {
        //determine how to evaluate the value being compared
        var compare = query.when({
            "string":function() {
                return query.value.length;
            },
            "array":function() {
                return query.value.length;
            },
            "other":function() {
                return query.helper.getNumericValue(query.value);
            }
        });
        //the actual comparison
        return compare % 2 == 0;
    }
});

E.g using custom command,

//this method is one way to do it
jLinq.from(data.users)
    .less("age", 30)
    .or()
    .evenValues()
    .select();

When you extend a query command , several additional operator prefixed name command are added to jLinq as well. Each of these perform the correct switches when they are used.

//this orEvenValues command is generated automatically
 
jLinq.from(data.users)
    .less("age", 30)
    .orEvenValues()
    .select();
Javascripts, JQuery, Tools

5 HTML text editors

1. FCKeditor

This lightweight HTML text editor brings to the web much of the power of desktop editors like MS Word.
Features:-

  • Multi browser compatibility
  • CSS support for better integration with your web site
  • Font formatting
  • Text formatting
  • Skins support
  • Plugins support
  • Spell checker
  • Multi-language support
  • Context menus support

2. Rich Text Editor
Free Rich Text Editor is a JavaScript WYSIWYG editor.
It can be easily integrate with any platform.
Editor lets you to switch between the design, HTML code & preview modes.

3. jWYSIWYG: jQueryPlugin

jWYSIWYG is a jQuery plugin, which transform  textarea into an editor.
It uses following simple function syntax,

$(function()
{
$(‘#wysiwyg’).wysiwyg();
});

4. Markitup : jQuery Plugin
MarkItUp is a JavaScript plugin built on the jQuery library. It allows you to turn any textarea into a markup editor.
Features

  • Lightweight
  • Powerful
  • Flexible editor engine

5. NicEdit

NicEdit is a Lightweight, Cross Platform, Inline Content Editor to allow easy editing of web site content on the fly in the browser.
NicEdit Javascript integrates into any site in seconds to make any element/div editable or convert standard textareas to rich text editing

editor

Ajax, Asp.net, Javascripts

Cancel previous Ajax requests on new request

If you are using ajax in web application , then there might be possibility that user does repetitively action such as click on button more than once which sends same asynchronous requests for every single click,
Before completing first request, another request for the same functionality is get sent and so on…

Here is the simple solution that helps to cancels previous ajax request,

Copy following two java scripts functions on page. it will cancel previous asynchronous requests. It works in asp.net ajax.

  
function pageLoad()
        {
Sys.WebForms.PageRequestManager.getInstance( ).add_initializeRequest(cancelPostBack);
         }
function cancelPostBack(sender, args)
        {
if (Sys.WebForms.PageRequestManager.getInstance( ).get_isInAsyncPostBack())
            {
              args.set_cancel(true);
            }
        }
Javascripts

Yahoo Media Player

The Yahoo! Media Player enhances web site or blog by creating an embedded player for each audio link. All the links can be played with one click, turning the page into a playlist. This is done by adding our JavaScript to your page.

How to Use?

  1. Link to audioInsert one or more anchor elements containing the URL of an audio file into your web page. For example:
    <a href="example1.mp3">My first song</a>
    <a href="example2.mp3">My second song</a>
  2. Embed the following js code into your page:
    <script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
  3. Use the playerThis play button will appear next to each of your audio links:Play Button
    Press a play button. The Yahoo! Media Player will open:

    Yahoo! Media Player