Simple jQuery loader image function – attached to all ajax and form posts

So I needed a simple ajax loader box indicating when there was a ajax request going on in the page.

Fortunately jquery ajax have global events you can attach to enable this behavior.

Code:
Html at the end of masterpage perhaps (before </body>):

	    <div id="loadingbox">
            <img src="../../Assets/Images/Loadingbox/ajax-loader-big.gif" alt="Loading..."/>
	    </div>

Ajax loader images can be found here: http://ajaxload.info/

Javascript:

//Generic loader image function. 
//Attached to global jquery ajax calls and form posts.

$(document).bind("ajaxStart", function () {
    $("#loadingbox").show();
});

$(document).bind("ajaxComplete", function () {
    $("#loadingbox").hide();
});

$(document).bind("ajaxError", function () {
    $("#loadingbox").hide();
});

$(document).submit(function () {
    $("#loadingbox").show();
});

The 3 first functions is attached to global ajax events. They are per default always raised by jquery ajax functions. More info: http://api.jquery.com/category/ajax/global-ajax-event-handlers/

The last function attaches to all form posts. (E.g. not ajax but might still be good to have).

Further extension would be to add more click event handlers. E.g. on certain a-elements perhaps. A problem though: if a user clicks a link the request will happen before the js. Therefore you must use e.preventDefault() and then show the loader. After that need to redirect the user to the desired url.

Add a script element for the js file in masterpage <head>:

<script src="/Assets/Scripts/loadingbox.js" type="text/javascript"></script>

Css:

#loadingbox {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 99999;
    background-color: #fff;
    opacity: 0.9;
    border: 1px solid black;
    border-radius: 5px;
    padding: 25px;
    margin-left: -41px;
    margin-top: -41px;
}

Initially on every page load the loading box will be hidden. (Display: none).

Position fixed is needed so that the loaderbox always be placed in an fixed location relative to the browser window. Also enables the ability to let the box appear above the other html elements. (a high z-index).

Its then placed in the middle, vertically and horisontally: top: 50% and left: 50%.

A little opacity is added, a thin black border and rounded corners (radius). Padding adds white space between the image and the black border.

The negative margins is used to place the loader box in perfect center. Everything in css is placed according to topleft corner of the window as a startingpoint. The box is 82px wide (image is 32px wide and padding on both side is 50px (25+25px padding)).

This means the loadingbox and image will be slightly tilted to right and below the perfect center lines. We adjust this by setting negative margin to half the width and height of the box. (-41px respectively).

Chrome Web Store – Visual Event – Show jQuery event listening code

Ever want to know which line of javascript code that is listening to a certain event on an element? Even when working with jQuery?

This tool for Chrome is really sweet!
Chrome Web Store – Visual Event.

However its seems to be native functionality in Chrome already?
See Paul Irish posting here:
https://groups.google.com/forum/#!topic/google-chrome-developer-tools/NTcIS15uigA

Didnt get it to work in my Chrome browser although. (just like the latest posts in above forum – just shows jquery source code)

ASP.NET Web Optimization tips

Good starting point:
http://www.hanselman.com/blog/TheImportanceAndEaseOfMinifyingYourCSSAndJavaScriptAndOptimizingPNGsForYourBlogOrWebsite.aspx

This seems like a nice “does it all” nuget package:
http://www.codeproject.com/Articles/69484/Combres-2-0-A-Library-for-ASP-NET-Website-Optimiza

Supports:
Bundling and minifications, gzip, cache headers


Overview
Combres (previously hosted in CodePlex) helps your ASP.NET and ASP.NET MVC applications perform faster and rank better with YSlow and PageSpeed.

Features highlights:

  • All in one solution supporting JS/CSS combination, minification, compression and caching (by adding proper Expires/Cache-Control headers, ETag and server-side caching)
  • Easy to use, simply download it via Nuget, declare JS and CSS resource groups in an XML file and use them in your pages, Combres will take care of the rest
  • Integrated with ASP.NET routing engine and work with ASP.NET WebForm 3.5/4.0/4.5, ASP.NET MVC 2/3/4 and Azure web applications
  • Detect changes in Combres config file, managed JS/CSS files and support auto-versioning, so you don’t have to manually rebundle JS/CSS resources after making changes to them
  • Extensible architecture with many extension points
  • And many more: CDN, HTTPS, debug mode, external JS/CSS (dynamically requested from other servers), Less CSS etc.
  • Proven solution with many thousands of downloads in NuGet, CodePlex and The Code Project

Tips for Visual Studio 2013 — Visual Studio Magazine

Peek Definition (Alt+F12) provides you the benefits of Go To Definition without actually taking you anywhere. It opens the code file and displays the referenced definition directly beneath the line on which you’re focused, pushing your code lines down so it doesn’t cover them up. And if you drill down again, you get a second page in the Peek Definition window containing that referenced definition.

In Visual Studio 2013, you can now drag and drop code using the arrow keys. The trick is to hold down the Alt key.

To move lines with the keyboard:
Move your cursor anywhere within the line. You don’t have to select the entire line.

Hold the Alt key and press the up or down arrow keys until the line is where you want it.

To move multiple lines with the keyboard:
Select any portion of a set of lines. (Shift+Arrow Up/ArrowDown)

Hold the Alt key and press the up or down arrow keys until the lines are where you want them.

via 6 Top Tips for Visual Studio 2013 — Visual Studio Magazine.

Picking Up Queue Messages: Strategy and Tactics — Visual Studio Magazine

Picking Up Queue Messages: Strategy and Tactics

If you’re using MSMQ to offload work from your Web site, you have a number of ways to pick up those messages, including processing those messages as soon as they turn up.

By Peter Vogel02/26/2014

MSMQ provides a way of offloading work from your application to be processed at a later date or on another computer. In an earlier column, I showed how to write messages to a Microsoft Message Queue (MSMQ) for later processing. In this column, I’ll show the code for reading your messages from the queue and, more important, give you some options on where to put that code.

via Picking Up Queue Messages: Strategy and Tactics — Visual Studio Magazine.