$('#id').on("click", function() {
    alert("Item clicked");
});

But less common is the use of custom events available with the .trigger() and .triggerHandler() jQuery functions. With this I could create an event such as “cory.says.hello”, if I so wished and then handle it with

$('#id').on("cory.says.hello", function() {
    alert("Hello Cory");
});

Usage

So you are writting a lightbox plugin (or whatever plugin really), and you want to give anyone the ability to add additional logic when the lightbox opens. Of the many ways to allow them to do this an easy way is to create a custom event for them to handle.

So continuing with the lightbox example, you could add an event when you open the lightbox with something like:

function open() {
  //blah
  $('#id')triggerHandler({ type:"lightbox.open" });
  //more
}

which could then later be caught by anyone using your plugin like so:

$(function() {
  $('#id').on("lightbox.open", function() {
    alert("The lightbox just opened. Woo!");
  });
});

Nice and simplistic. What about passing variables to the event handler? Maybe I want to run an event on an ajax response or whatever the case may be.

  $('#id').triggerHandler({
    type:"lightbox.open",
    var1:'Howdy',
    information:'I could pass something here also'
  });

Then to get the var1, and information data out of the previous example we would do:

$(function() {
  $('#id').on("lightbox.open", function(o) {
    alert(o.var1 + " - " + o.information);
  });
});

Differences between .trigger() and .triggerHandler()

The differences between the two are pretty small, but still important. To quote the jQuery Docs:

The .triggerHandler() method behaves similarly to .trigger(), with the following exceptions:

• The .triggerHandler() method does not cause the default behavior of an event to occur (such as a form submission).
• While .trigger() will operate on all elements matched by the jQuery object, .triggerHandler() only affects the first matched element.
• Events created with .triggerHandler() do not bubble up the DOM hierarchy; if they are not handled by the target element directly, they do nothing.
• Instead of returning the jQuery object (to allow chaining), .triggerHandler() returns whatever value was returned by the last handler it caused to be executed. If no handlers are triggered, it returns undefined

To get started open up the NuGet package manager. (right click on the projects name, and select Manage NuGet Packages) Search for Quartz and click install. This will add the needed references as well as download the Common.Logging dependency if needed.

Now to the code, we need to create our Job which will be run by the scheduler. This class must use the IJob interface provided from Quartz.Net.

...
using Quartz;
using Quartz.Impl;
...

public class DailyJob : IJob
{
    public DailyJob() { }

    public void Execute( JobExecutionContext context )
    {
        try {
            //Your Logic
        } catch( Exception e ) {
            //Handle this please
        }
    }

    public static void ScheduleJob( IScheduler sc )
    {
        JobDetail job = new JobDetail( "Send", "Daily", typeof( DailyJob ) );
        sc.ScheduleJob( job, TriggerUtils.MakeDailyTrigger( "trigger1", 8, 15 ) );
        sc.Start();
    }
}

The code placed in the Execute function is obviously what will run when the job is executed at its scheduled time. If you fail to add the try/catch block then the code can silently fail without being caught by a global error handler since there is no http request present. The ScheduleJob function is not required by the IJob interface but seems more logical to me, so it is added as well.

The Scheduling function above creates a new job Daily.Send (thats GroupName.TaskName ) and schedules it to run daily at 8:15am (14, 15 would be 2:15pm). You can replacing the TriggerUtils.MakeDailyTrigger with how often you want the Job to run, such as every 20 minutes, every hour, etc.

Lastly we need to call this Schedule function from the Global.asax Application_Start function so that when our app starts the code is automatically scheduled.

DailyJob.ScheduleJob( new StdSchedulerFactory().GetScheduler() );

Event Type: Error
Event Source: .NET Runtime 2.0 Error Reporting
Event Category: None
Event ID: 5000
Date: ******
Time: *******
User: N/A
Computer: *******
Description:
EventType clr20r3, P1 w3wp.exe, P2 6.0.3790.3959, P3 *******, P4 *******, P5 1.0.0.0, P6 *******, P7 3b6, P8 c2, P9 system.nullreferenceexception, P10 NIL.

For more information, see Help and Support Center at http://go.microsoft.com/fwlink/events.asp.

This was found in my Windows Application Error Log. Basically I had a system.nullreferenceexception somewhere in my application that was causing the ENTIRE application to restart. Fucking retarded, but according to this KB

“ASP.NET uses the default policy for unhandled exceptions in the .NET Framework 2.0. When an unhandled exception is thrown, the ASP.NET-based application unexpectedly quits.

This behavior does not apply to exceptions that occur in the context of a request. These kinds of exceptions are still handled and wrapped by an HttpException object. Exceptions that occur in the context of a request do not cause the worker process to end. However, unhandled exceptions outside the context of a request, such as exceptions on a timer thread or in a callback function, cause the worker process to end.”

“This behavior is by design.”

So now I know that I have an error in code that runs behind the scenes. But without some direction good luck ever figuring out the problem, which is where this nasty cryptic error message above comes into play.

The key items are the P1 – P10 specifically p7. According to this article on clr20r3 (notice clr20r3 was given before the P1 for EventType)

P1: Application Name
P2: Application version
P3: Application time stamp
P4: Assembly/Module name
P5: Assembly/Module version
p6: Assembly/Module timestamp
P7: MethodDef
p8: IL offset
p9: Exception name (Hashed because the name is too long )

So in my error above p7 is 3b6. Now comes the fun part. Open up IL Disassembler (comes with visual studio under the SDK tools)

1. Go to File > Open and select the .dll the error is happening in (the P4 from the error message)
2. View > Meta Info > Show!
3. Find and type in 06000 and your p7 so in this case 060003b6
4. You should see something like the picture below. If you scroll up the page it will say class and you should be able to narrow down the function causing the error from there.

<input type="text" name="user" />

), however easily adding that feature to older IE versions and any other browsers that don’t support it renders it unusable in production.

The below javascript/jquery code will check the page for any inputs with the placeholder attribute and make it work in browsers that do not support it, and it will do nothing in those that do.

(function($) {
  $.fn.placeholder = function() {
    if(typeof document.createElement("input").placeholder == 'undefined') {
      $('[placeholder]').focus(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
          input.val('');
          input.removeClass('placeholder');
        }
      }).blur(function() {
        var input = $(this);
        if (input.val() == '' || input.val() == input.attr('placeholder')) {
          input.addClass('placeholder');
          input.val(input.attr('placeholder'));
        }
      }).blur().parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() {
          var input = $(this);
          if (input.val() == input.attr('placeholder')) {
            input.val('');
          }
        })
      });
    }
  }
})(jQuery);

Line 3 of the javascript checks if the browser supports the placeholder attribute and only runs if it does not.

To call this plugin just add the following to your page.

$.fn.placeholder();

You may also want to add the following css to make it more like the browsers that do support it.

.placeholder { color: #aaa; }

The original bulk of this code was written by Nico Hagenburger. I basically only added the support check and turned it into a plugin.

First install URLRewrite on a windows server with IIS7 from  http://www.iis.net/download/URLRewrite

After its installed a new button titled URL Rewrite will be added. Select it.

Under Actions click Add Rule(s)…

Select Rule with URL Rewrite map

Change the Rule Action to Redirect and give it any name you wish it makes no difference what it is.

Then under actions click Add Mapping Entry…

In the Original Value field give the path to the old page without the http://www.example.com in the above example it redirects /oldpage.html to /newpage.html

Keep adding new Mapping Entries for every page you need to redirect.

Yes there are complete CSS solutions to this but it seems that at times they can be problematic, and at other times laziness can kick in.

$(document).ready(function () {
    $("#divID").height($(document).height());
});

//And the slightly more fancy way. With a subtle slide down.

$(document).ready(function () {
    $("#divID").animate({ height: $(document).height() }, 500 );
});

1. Gritter – By:@jboesch

jQuery Grown look-a-like plugin

Plugin Page

Demo

2. jQuery Link Nudging – By: @davidwalshblog

A jQuery Link Nudging Plugin which is essentially a classy, subtle link animation

Plugin Page

Demo

3. Create The Fanciest Dropdown Menu You Ever Saw

Create The Fanciest Dropdown Menu You Ever Saw

Demo

4. ColorBox – By: @jacklmoore

A light-weight, customizable lightbox plugin for jQuery 1.3

Demo

5. Interactive, Filterable Portfolio – By: @JoelSutherland

A jQuery Plugin to Create an Interactive, Filterable Portfolio

Demo

6. Animated Menu Using jQuery

Nice animated menu using jQuery and CSS

Demo

7. jQuery Ajax delete

jQuery Ajax delete

Demo

8. Galleria

Galleria is a javascript image gallery

Demo

9. Easy Slider By: @cssglobe

Easy Slider 1.7 - Numeric Navigation jQuery Slider

Demo

10. Cycle Lite

lightweight slideshow plugin

Demo

11. Notify Bar By: @DmitriSmirnov

shows a notify bar (like on Twitter's webpage)

Demo

12. Animated Tabbed Content – By: @gayadesign

Animated Tabbed Content

Demo

To Stay up to date with more great jQuery Links follow @jQueryLinks on twitter.

On ward to Url Variables.

Url variables is one of the first topics to learn for a new developer wanting to move from static web sites to dynamic sites. Url variables, also called query strings in some languages(asp.net), allow a variable to be passed from one page to another with very little overhead and very little code.

We have all seen the sites, such as mine here, where they have a url such as corymathews.com/?id=12 or something similar. These extra items after the ? are called url variables and I am going to explain what these are, what are they used for, and how do they work?

What are url variables?

Url variables allow developers to  pass multiple values from one page to another in order to display different results every time the same page is loaded. This saves the developer from having to make hundreds of pages which are exactly the same. This is mainly because doing so wouldn’t be very realistic or good for any budget.

How do url parameters work?

Take a look at the following link:

http://www.osguide.net/Software/index.php?p=2

We see a couple different parts. We see the domain osguide.net a directory named Software the current page index.php and then we see a ?p=2. This ?p=2 is a url variable setting the variable “p” equal to 2. In this case its being used as a variable to store the current page for my pagination script on the site, but it could be for just about anything. When the page is first loaded I have programmed it page to look to see if the variable p is declared in the url bar. If it is declared then my page knows to display the corresponding page of results, in this case 2. On the other hand you must always take into account if the url parameter is not declared. In my example here if p was not in the url I would consider this page 1 and thus set p to 1.

A thing to note here is that this url can be rewritten as http://www.osguide.net/Software/?p=2 since the index.php is understood and not actually needed.

What if you want to pass multiple parameters? This can be easily accomplished, with the & symbol. For instance in the previous example If I also wanted to set the variable ‘R’ I would simple use a url like so:

http://www.osguide.net/Software/index.php?p=2&r=3

This can go on and on for as long as you like. Take a look at some of the sites you go to such as gmail, they may pass quite a few different url variables, mainly depending on your browser. All you have to do is keep adding the & in between every variable.

So What are url parameters used for?

Probably most common use for url parameters is to associate the correct information to display from a database. The way this works logically is very simple. A page is set up kind of like a template for content without any “real” content in it. Then from the url variable passed in a query is run on a database and the related page’s contents are returned from the database to be displayed on the page. This allows a developer to create one page to show the details of anything, such as this article, without having to create a different page for every article.

Recently I was introduced to SaveTheDevelopers.org. Their mission is simple

“Save A Developer. Upgrade Your Browser.”

Basically they want to speed up the transition from IE6 to a modern browser.

What makes SaveTheDevelopers.org so much better than the rest is that it is much more professional looking than any other anti-IE6 “movement” site. Most anti-IE6 sites simply bash IE6 and never tell you why other browsers really are better.  

They have made it extremely simple to add their image on your site as well. You simply include one line of javascript in the header of all your pages.