Infinite Scrolling In ASP.NET With jQuery Apr 28, 2012 ASP.NET   JQUERY   T-SQL

I didn’t create the whole solution by myself. The initial idea is from the All-In-One Code Framework sample. I was just customizing my BlogEngine and for one of the module I thought it would be nice not to use paging and I should go for infinite scrolling stuff. This idea seems cool to me and without wasting any time I just do a quick web search and I came across a solution which is a part of a All-In-One Code Framework. This was not the complete solution I was looking for but I can re-use the jQuery part in the sample.

Assembling jQuery Part

I just re-use the all jQuery script as it is without any major modification. The only change I made is the name of the web method in the url parameter of the Ajax method I have in page code behind and change the method name to InfiniteScroll:

function InfiniteScroll() {
    $('#divPostsLoader').html('');
 
    //send a query to server side to present new content
    $.ajax({
        type: "POST",
        url: "Default.aspx/GetData",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            if (data != "") {
                $('.divLoadData:last').after(data.d);
            }
            $('#divPostsLoader').empty();
        }
    })
};

I already have 2 divs in the page where the data is being loaded when the user scrolls down at the bottom of the page. This is the simplest Ajax call written in jQuery and I assume you are aware of the syntax and methods and require no explanation. What I require here is to call this function when the user scrolls at the bottom of the page. So how to know when the user scrolls and reach at the bottom of the page? Here is the method which fires the InfiniteScroll() function:

$(window).scroll(function () {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
        InfiniteScroll();
    }
});

Make sure you put the scroll function inside the document.ready function. Now when the user scrolls at the bottom of the page then it will call the InfiniteScroll() function which in turn loads new data in the divLoadData div.

The Code-Behind

In the code-behind create a WebMethod function that returns a HTML string. For this example I am loading all my blog posts title, post date and slug from my blog engine database which is a SQL Server CE 4.0. Here is the method:

[WebMethod]
public static string GetData()
{
    RecordCount = RecordCount + 10;
    string Sql = "SELECT Title, DateCreated, Slug FROM be_Posts ORDER BY Title OFFSET " + FirstCount + " ROWS FETCH NEXT 10 ROWS ONLY";
    FirstCount = RecordCount;
    StringBuilder sb = new StringBuilder();
    dt = new DataTable();
    da = new SqlCeDataAdapter(Sql, con);
    con.Open();
    da.Fill(dt);
 
    DataView dv = dt.DefaultView;
 
    foreach (DataRowView row in dv)
    {
        sb.AppendFormat("<p>Post Title" + " <strong>" + row["Title"] + "</strong>");
        sb.AppendFormat("<p>Post Date" + " <strong>" + row["DateCreated"] + "</strong>");
        sb.AppendFormat("<p>Slug" + " <strong>" + row["Slug"] + "</strong>");
        sb.AppendFormat("<hr/>");
    }
 
    sb.AppendFormat("<divstyle='height:15px;'></div>");
    con.Close();
    return sb.ToString();
}

Infinite scrolling is nothing but is a sort of automatic paging. Every time a user scrolls down at the bottom of the page, the query gets fired and gets the new set of data. As I am using SQL CE 4.0 the paging query is different than that of the SQL Server 2008.

Query for SQL CE 4.0:

SELECT Title, DateCreated, Slug FROM be_Posts ORDER BY Title OFFSET 0 ROWS FETCH NEXT 10 ROWS ONLY

Change the OFFSET and FETCH NEXT to get the next result set.

Query For SQL Server 2008

SELECT Title, DateCreated, Slug FROM ( 
     SELECT
          ROW_NUMBER() OVER (ORDER BY title) AS row, Title, DateCreated, Slug
     FROM be_Posts
) AS a WHERE row BETWEEN 1 AND 10

I have changed the query in the above code to get me the set of next results every time a user scrolls at the bottom of the page. When the user scrolls down I increment the FirstCount with 10 which is a value of RecordCount variable. I have attached the complete solution so you can try. I don’t have the database included in the solution as it is my blog database. You have to create one to test it out.

Download: InfiniteScroll.zip (2.28 mb)

Microsoft Launches SkyDrive Application For Windows Apr 24, 2012 AZURE   MICROSOFT   UTILS   WINDOWS

Skydrive Logo

On 23rd April Microsoft announces the launch of official SkyDrive application for Windows on Windows 8 blog. This is one of the most awaited applications among the developers and users. All we wanted is a simple app through which we can manage our cloud storage with ease. Download the SkyDrive app here.

Here is what available now according to this blog post:

  • SkyDrive for the Windows desktop (preview available now). View and manage your personal SkyDrive directly from Windows Explorer on Windows 8, Windows 7, and Windows Vista with this new preview app available in 106 languages worldwide.

  • Fetching files through SkyDrive.com. Easily access, browse, and stream files from a remote PC running the preview app to just about anywhere by simply fetching them via SkyDrive.com.

  • SkyDrive storage updates. A new, more flexible approach to personal cloud storage that allows power users to get additional paid storage as their needs grow.

  • SkyDrive for other devices. We’ve updated the SkyDrive apps on Windows Phone and iOS devices, bringing better management features and sharing options to those devices. We’re also releasing a new preview client for Mac OS X Lion, letting you manage your SkyDrive right from the Finder.

After downloading the application run the setup. This will install the app.

Installing Skydrive

The installation will also let you sync the folders between your PC and other devices like WP7, Android and iPhone. You can un-check the option at this moment but if you wish to enable file sharing among devices then you can set this from SkyDrive app settings option later on.

Finishing Installng Skydrive

Once the installation is complete you can then set the folder SkyDrive path:

Setting up Skydrive

After the folder has been set up the SkyDrive app will started in the background. The SkyDrive app will then download the files from the SkyDrive inside the SkyDrive folder set up while installing the app. Check out the below screenshot, as the SkyDrive is sitting in the task bar and syncing the files on the other hand. The folders which are synced are marked with tick icon and the folders which are still in sync process is having the sync icon. If you have worked with LiveMesh then you must be aware of the sync icon.

Skydrive app running in the background Syncing files in progress

I am quite familiar with the application even before it’s launch. I have use LiveSync app so this app seems pretty similar to me. To add a new file just copy and paste or drag & drop the file in the local SkyDrive folder. The file or folder will then get synced to SkyDrive which can be accessed from anywhere around the planet. If you want to un-install the app then make sure that you un-link the SkyDrive folder before you do that (I don’t know why someone will remove the app!!) To un-link the local folder right-click the settings icon and click Unlink SkyDrive button to unlink the folder.

Unlink Skydrive

In the end the most awaited SkyDrive app is out and is going to be a big hit soon. If you have some suggestions for the SkyDrive app or want to report back a bug or you have some suggestions or want some new features then please do so. Let’s make this app a hit.

IMPORTANT: If you are not the current user of SkyDrive then be advised that for the new users the storage capacity available will be 7GB and not 25GB which is offered to old account holders. So make it quick to get the 25GB storage capacity before it gets too late.

Top 3 Ultimate Timepass For Developers Apr 23, 2012 FUNDOO   WEB

We have been programming a lot so we need some time to refresh our minds and get ourselves in a state where our mind processors can start working again more beautifully. When I am pushing myself hard I play 3 games that is on my favorite list. Though I do have many games but these are the 3 games that I play.

The World’s Largest Pac-Mac

The legendry dot-eating games Pac-Man. I first played this game on 8-bit Atari console and I remember I used to bet with my firends. We played Pac-Man on a single maze, we don’t have many options, but here we have lots and lots of mazes to choose from. The statistics is a section.

The World's Biggest Pac-Man

Angry Birds

One of the most playable and most addicted games at the moment available on the web. Amazing stages and awesome game play. I have spent numerous amount of effort and time on this game. I have played the offline version of this game, if you don’t want to install then play it right here.

Angry Birds Game

Cut The Rope

This game is more or like Angry Birds. Why? If you have played Angry Birds then you must have noticed that in Angry Birds it is not just about hitting the pillars. It’s about how you kill the pigs by consuming fewer birds. Cut The Rope is the game initially written in Objective-C and later written in JavaScript by the awesome developers at Zepto Labs. I love playing this game as it allows you think before you make the move.

Cut The Rope Game

Awesome jQuery Image Plugins For Web Developers Apr 22, 2012 JQUERY   WEB

I am not a web developer but still I love working with jQuery, CSS3, HTML5 and other web development frameworks. But as a programmer I love collect code snippets for my ease and store them on the cloud so I can get the access when I am in need and want to save my time while I am writing code. Out of the box I have a list of few image manipulation plugins which seems pretty impressive to me. Let’s take a look:

Image Carousels

For simple image carousels you can use rcarousel. The plugin is good if you are planning to implement a simple image carousel. If you are looking for some CSS3 taste then take a look at slideshow using jmpress. The transitions effects are awesome.

Jimpress plugin

Adipoli jQuery Image Hover Plugin

This is the best image hover plugin I used and available on the web so far. The plugin has to offer you some amazing effects. My favorite is the greyscale and popout, both effects are good if you plan to have a web based gallery.

Adipoli plugin

Captify

If you are looking to have a caption for your images, then do that in style. Captify is a plugin let you have pretty image captions for the image. You can have the caption on the image by default or you can show it to the user on mouseover. You can take a look at a little demo here and download it from the GitHub

Captify plugin

Spritely.net

Want to work with sprites but don’t know how to kick off? Don’t wait and go to Spritely. Before you download check the gallery examples. In short Spritely allows you to turn your images into a movie. Simply awesome!!

Spritely plugin

jParallax

I will be surprised if you have not heard about this plugin. One of the most amazing and powerful plugin or I should say a library that can make your images speak or work on their own. I am not going to describe what it does, so you have to go and look for yourself. Visit the demo page.

jParallax plugin

Minify Your CSS & Javascript With SquishIt Apr 15, 2012 API   ASP.NET   WEB

No one likes if their favourite site is loading up slow. Using CSS sprites instead of using individual images and minify javascript and css files is a way to minimize the request send to the server and also saves you few KBs or may be even MBs. If your site is high on using javacript and CSS then you should minimize them.

I recently used SquishIt to combine/minimize my CSS and javascript files. I found 2 major benefits, first, I am able to combine all of my CSS files into one and minimize it, and second it reduces the request sent to the server to load several .css and .js files. In a typical web application I can have one style sheet and one javascript or jQuery file, but if I am planning to use some plugins then there might be more than one style sheet and javascript files which will get loaded on every page request. Here is an example of a sample web forms application loading two css and javascript files which includes the plugin code.

Loading time of static assets in browser console

Here you can see that there are 4 requests in total to load site CSS and Javascript files. Though in this case the size of the file is less but when you have really large files then it can really affect your site performance and also save MBs in a long run. So, what happens when I use SquishIt? Install the package by firing the below command at NuGet console.

Nuget SquishIt Command

SquishIt is not an independent package, it has dependencies which is doing all the work of minifying and compressing CSS and JS files behind the scenes.

Nuget dependencies

After the package is installed successfully, time to squish the files. Open the web page or the master page where you are loading CSS and JS files (in my case it is site.master) and add a reference to the SquishIt assembly on the top of that page.

<%@ Import Namespace="SquishIt.Framework" %>

In the head section of your page we can then combine all the CSS and JS files and then render them into ONE single file. There are two different methods to minimize CSS and JS files i.e. Bundle.Css() for CSS files and Bundle.JavaScript() for JS files. Here is an example:

To bundle CSS:

<%= Bundle.Css()
       .Add("Styles/adipoli.css")
       .Add("Styles/Site.css")
       .Render("Styles/squishstyle#.css")
%>

To bundle JavaScript:

<%= Bundle.JavaScript()
       .Add("Scripts/jquery-1.7.1.min.js")
       .Add("Scripts/jquery.adipoli.min.js")
       .Render("Scripts/squishjs#.js")
%>

You can go on adding all the css and javascript files using the Add() method. After all the files has been added call the Render() method. You can say that the Add() method just keep all the files in a stack and the Render() method will combine and minimize the files. If you look closely in the Render() method has a new file name with a (hash) #. The hash symbol is just generates a new unique id of the bundled script.

When you run the application and check the network call stack in your browser, you’ll find that the files are not combined. The page is still loading 4 files!? To overcome this set the debug mode to false in the web.config file.

<compilation debug="false" targetFramework="4.0" />

Now if you look in the network call stack, you will find the files have been squished and minimised and compressed!!

Console log for asset loading time after the use of SquishIT

And here are my saving statistics:

Without SquishIt:

Four requests in total!!

Name/Path Type Size Content Time Latency
adipoli.cs text/css 683B 62ms
/Styles text/css 441B 55ms
Site.css text/css 4.40KB 68ms
/Styles text/css 4.16KB 61ms
jquery-1.7.1.min.js application/x-javascript 109.91KB 80ms
/Scripts application/x-javascript 109.65KB 67ms
jquery.adipoli.min.js application/x-javascript 7.57KB 242ms
/Scripts application/x-javascript 7.32KB 163ms

The Squish effect:

Two requests in total. Check out the file size and content being loaded.

Name/Path Type Size Content Time Latency
squishstyle6788C36F832FE70161B88F2D08193F3E.css text/css 2.95KB 80ms
/Styles text/css 2.71KB 72ms
squishjs0F44BB5917C6332E4D49DFCDA5F3556D.js application/x-javascript 98.29KB 91ms
/Scripts text/css 98.03KB 76ms

The same can be done in MVC with this NuGet package.