• jQuery.js (1.3 and above)
• jQuery.a-tools.js

jQuery.asuggest can be downloaded from here or from its GitHub page. Lets quickly dive into an example :

Html : (jsFiddle link)

<textarea rows="10" cols="55" id="comment"></textarea>

Jquery : (jsFiddle link)

$(document).ready(function(){

    var suggests = ["hello", "android", "world", "is", "all", "over", "under"];
    $("#comment").asuggest(suggests);    

});

Output : http://jsfiddle.net/yrshaikh/JbYdx/embedded/result/

More examples

In this post I’ll be showing you how to implement expandable and collapsible toggle panel using jQuery. Here in this example when you click on the heading, the content gets displayed by sliding and when you again click on the heading the content collapses. To implement this we will be using the following jQuery methods : slideUp(), slideDown(), attr(), css(), next(), and children().

Below is the output that we shall achieve by the end of this post.

Html: (jsFiddle link)

<div>
    <span id="expandAll" class="links">Expand All</span>
    <span id="collapseAll" class="links">Collapse All</span>    
</div>

<div id="header1" class="header">
    <img src="http://cdn1.iconfinder.com/data/icons/fatcow/32/bullet_toggle_minus.png" />
    <span>Sachin Tendulkar</span>
</div>
<div id="description1" class="description">
    Sachin Ramesh Tendulkar is an Indian cricketer widely acknowledged as one of the greatest batsmen in One Day International[2] and second only to Don Bradman in the all time greatest list in Test cricket
</div>

<div id="header2" class="header">
    <img src="http://cdn1.iconfinder.com/data/icons/fatcow/32/bullet_toggle_minus.png" />
    <span>Rahul Dravid</span>
</div>
<div id="description2" class="description">
    Rahul Dravid is a former Indian cricketer, who captained the national Test and One Day International (ODI) teams. Born in a Marathi family, he started playing cricket at the age of 12 and later represented the state team at the under-15, under-17 and under-19 levels.
</div>

Css: (jsFiddle link)

body{font-family:Arial;}
.header img{position:relative; top:10px;}
.header { font-weight:bold; padding-bottom:10px;cursor:pointer;}
.links {color:#3366CC;cursor:pointer;}
.links:hover {border-bottom:1px solid #3366CC;}

Jquery: (jsFiddle link)

var mImg = "http://cdn1.iconfinder.com/data/icons/fatcow/32/bullet_toggle_minus.png";
var pImg = "http://cdn1.iconfinder.com/data/icons/fatcow/32/bullet_toggle_plus.png";

$(document).ready(function(){
    $("#expandAll").click(function(){
        $(".description").slideDown();
        $(".header img").attr("src", mImg)
    });

    $("#collapseAll").click(function(){
        $(".description").slideUp();
        $(".header img").attr("src", pImg)
    });

    $("#header1").click(function(){
        var currentState = $("#description1").css("display");
        if(currentState == "block"){
            $("#description1").slideUp();
            $("#header1 img").attr("src", pImg)
        }
        else{
            $("#description1").slideDown();
            $("#header1 img").attr("src", mImg)
        }
    });

    $("#header2").click(function(){
        var currentState = $("#description2").css("display");
        if(currentState == "block"){
            $("#description2").slideUp();
            $("#header2 img").attr("src", pImg)
        }
        else{
            $("#description2").slideDown();
            $("#header2 img").attr("src", mImg)
        }
    });        
});

the last two click events for “header1″ and “header2″ can be clubbed as shown below :

Jquery: (jsFiddle link)

$(".header").click(function(){
    var currentState = $(this).next(".description").css("display");
    console.log(currentState);
    if(currentState == "block"){
        $(this).next(".description").slideUp();
        $(this).children("img").attr("src", pImg)
    }
    else{
        $(this).next(".description").slideDown();
        $(this).children("img").attr("src", mImg)
    }
});

Hope this helps :)

Step 1 : Getting Web Api Ready

Lets first create a web api method that will return a list of item (Artists) using the search term query sent from the autocomplete textbox. In this post I am not using database, instead I’ll be using List to keep this example as simple as possible.

Below is how I have defined my Artist class

public class Artist
{
    public int Id { get; set; }
    public int Name { get; set; }
}    

Next I have created a Web Api GET method that will use the search term entered in the autocomplete textbox and with a little help of LINQ will return a list of matching results.

using System.Collections.Generic;
using System.Linq;
using System.Web.Http;

namespace Autocomplete.Controllers
{
    public class ArtistApiController : ApiController
    {

        public List<Artist> ArtistList = new List<Artist>
        {
            new Artist{Id = 1, Name = "Sonu Nigam"},
            new Artist{Id = 2, Name = "Sunidhi Chauhan"},
            new Artist{Id = 3, Name = "Shreya Goshal"},
            new Artist{Id = 4, Name = "Mohit Chauhan"},
            new Artist{Id = 5, Name = "Nihkil Dsouza"},
            new Artist{Id = 6, Name = "Kailash Kher"},
            new Artist{Id = 7, Name = "Atif Aslam"},
            new Artist{Id = 8, Name = "Ali Zafar"},
            new Artist{Id = 9, Name = "Shafaqat Ali"},
            new Artist{Id = 10, Name = "Shankar Madahevan"}
        }; 


        // GET api/values
        public IEnumerable<Artist> Get(string query)
        {
            return ArtistList.Where(m => m.Name.Contains(query)).ToList();
        }
    }
}   

Our server side code is ready ! Time to test it out.

Step 2 : Client side code

Include jquery-ui.js and jquery.ui.css in your html

<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js" ></script>
<script type="text/javascript" src="~/Scripts/jquery-ui-1.8.20.min.js" ></script>
<link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" />

<div id="body">
    <label for="autocomplete-textbox">Search : </label>
    <input type="text" id="autocomplete-textbox" />
</div>

<script type="text/javascript">
$(document).ready(function (){
$('#autocomplete-textbox').autocomplete({
    source: function (request, response) {
        // prepare url : for example '/api/artistapi?query=sonu
        var autocompleteUrl = '/api/artistapi' + '?query=' + request.term;
        $.ajax({
            url: autocompleteUrl,
            type: 'GET',
            cache: false,
            dataType: 'json',
            success: function (json) {
                // call autocomplete callback method with results  
                response($.map(json, function (data, id) {
                    return {
                        label: data.Name,
                        value: data.Id
                    };
                }));
            },
            error: function (xmlHttpRequest, textStatus, errorThrown) {
                console.log('some error occured', textStatus, errorThrown);
            }
        });
    },
    minLength: 2,
    select: function (event, ui) {
        alert('you have selected ' + ui.item.label + ' ID: ' + ui.item.value);
        $('#autocomplete-textbox').val(ui.item.label);
        return false;
    }
});
});
</script>

One thing to note here is that inside the success method I have used the following code :

response($.map(json, function (data, id) {
    return {
        label: data.Name,
        value: data.Id
    };
}));

data.Id and data.Name is used because in the ajax response (as shown below) data is returned in this format.

Step 3 : Test & Output :

Hope this helps :)

1. Select Date Range using Datepick.js [Demo on Jsfiddle] [Demo on Datepick.js Website]

Html:

<p>
    <span class="demoLabel">Date range:</span>
    <input type="text" id="rangePicker" size="20" />
</p>

Jquery:

$(function(){
   $('#rangePicker').datepick({ 
        rangeSelect: true
    });
});

Output:

2. Select Date Range using Datepicker.js [Demo on Fiddle] [Demo on Jquery UI Website]

Html:

<label for="from">From</label>
<input type="text" id="from" name="from" />

<label for="to">to</label>
<input type="text" id="to" name="to" />     

Jquery:

$(function() {
    $( "#from" ).datepicker({          
      onClose: function( selectedDate ) {
        $( "#to" ).datepicker( "option", "minDate", selectedDate );
      }
    });
    $( "#to" ).datepicker({
      defaultDate: "+1w",  
      onClose: function( selectedDate ) {
        $( "#from" ).datepicker( "option", "maxDate", selectedDate );
      }
    });
});

Output:

Android Dashboard provides a heads-up overview over critical AdSense performance metrics, including CPM, CTR, page views, clicks, and estimated revenue, in easily-digestible form.

Includes a desktop widget showing today’s vital statistics.

Uses Google’s AdSense Management API to provide a secure, read-only view of your data. Supports phones with large screens, tablets, and now Google TV (for those that want an always-on dashboard for their office).

Download now from Google Play Store or scan this QR code with your android to start with your installation :

Know a better app ? Please share your thoughts and feedback using the comment section below.

Cheers !

• Detailed Specifications
• Read full story on Engadget
• Facebook HTC First

There are two ways to take screenshot with Sony Xperia series smartphones.

Method 1 (Applicable to Gingerbread) : If the phone has not been upgraded to the ICS (Ice Cream Sandwich) OS, hold down the POWER button and on the option screen is a TAKE SCREENSHOT option

Method 2 (Applicable to Android 4.0 ICS and above) : Hold down the VOLUME DOWN button and the POWER button.

Below is a screenshot from my Xperai ION. (Click on it to zoom)

Hope this helps :)

Essentials

• Akismet : Akismet checks your comments against the Akismet web service to see if they look like spam or not.

• WP-Markdown : Allows Markdown to be enabled in posts, comments and bbPress forums.

• Disqus Comment System : The Disqus comment system replaces your WordPress comment system with your comments hosted and powered by Disqus.

• W3 Total Cache : Easy Web Performance Optimization (WPO) using caching: browser, page, object, database, minify and content delivery network support.

• WordPress Backup to Dropbox : Keep your valuable WordPress website, its media and database backed up to Dropbox in minutes with this sleek, easy to use plugin.

• WordPress SEO by YOAST : Improve your WordPress SEO: Write better content and have a fully optimized WordPress site using the WordPress SEO plugin by Yoast.

• Contact Form 7 : Just another contact form plugin. Simple but flexible.

• Flare : Flare is a simple yet eye-catching social sharing bar that gets you followed and lets your content get shared via posts, pages, and media types..

Analytics and Adsense

• Google Analytics for WordPress : Track your WordPress site easily and with lots of metadata: views per author & category, automatic tracking of outbound clicks and pageviews.

• Woopra : This plugin adds Woopra’s real-time analytics to any WordPress installation.

• Feedjit Live Traffic Feed : Feedjit lets you see friends and visitors as they arrive on your blog or website. Know when your best friends read about your latest adventure. Be alerted when your most important clients view your latest product offering. Feedjit lets you know, right now, who is visiting your site. Simply add the Live Traffic Feed and instantly start seeing who is visiting your site as they arrive.

• Traffic Counter Widget : TCW lets your users know how much traffic you have on your blog. It counts pages visited, hits and unique IPs on your blog and shows it in a widget.

Others

• Executable PHP widget : Like the Text widget, but also allows working PHP code to be inserted.

• WP Easy Uploader : Easily upload any type of content without the need for FTP. You can even upload plugin and theme archives, and the files will be extracted for you.

• WPtouch : WPtouch: A simple, powerful & elegant mobile theme for your website.

• Yet Another Related Posts Plugin : Display a list of related entries on your site and feeds based on a unique algorithm. Now with thumbnail support built-in!

• Broken Link Checker : This plugin will check your posts, comments and other content for broken links and missing images, and notify you if any are found.

• Bottom of Every Post : This plugin adds some content to the bottom of every post. That is all. No extra crap.

• Smart Archives Reloaded : Easily display posts grouped by year and month, in one or more elegant formats

Further Reading : Tips And Tricks HQ : List of the Best and Must Use WordPress Plugins

Why to use Elmah ? ELMAH serves as an unobtrusive interceptor of unhandled ASP.NET exceptions, those usually manifesting with the ASP.NET yellow screen of death.

So now we know what and why to use Elmah, Lets quickly get started on how to use Elmah with your ASP.NET MVC project.

Step 1: Right click on your solution and select the “Manage Nuget Packages” option

Step 2: In the Nuget Package manager search for “Elmah” and install the Elmah.MVC nuget extension. The Nuget Package manager will download and add the required dlls and modify the web.config’s <appSetting> for Elmah to work.

Step 3: That’s it !! Your Elmah is now ready to test. I have generated a 404 to test if my Elmah works, ELMAH can be accessed by this url : http://yourapp.com/elmah.

Hope this helps :)

Further Reading :

• Elmah on code.google.com
• Elmah.MVC 2.0.2 on Nuget
• Elmah.MVC on GitHub

1. Hanselman.com

2. CodingHorror.com

3. Stackoverflow Blog

4. Haacked !

5. Paul Thurrott’s SuperSite for Windows

6. Joel on Software

7. Labnol – by Amit Agarwal