$('#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.

<ul>
<?php
  if($post->post_parent == 0) {
    $pageLinkID = $post->ID;
    $title = $post->post_title;
  } else {
    $pageLinkID = $post->post_parent;
    $title = get_the_title($post->post_parent);
  }
  echo '<li class="parent"><a href="'.get_page_link($pageLinkID).'">'.$title.'</a></li>';
  $pages = get_pages('child_of='.$pageLinkID);
  foreach ($pages as $p) {
    echo '<li><a href="'.get_page_link($p->ID).'">'.$p->post_title.'</a></li>';
  }
?>
</ul>

If you need to order the posts by the order value change the

$pages = 

Line to

$pages = get_pages('child_of='.$pageLinkID.', 'sort_column' => 'menu_order', 'sort_order' => 'asc');

add_action( 'widgets_init', 'add_sidebars' );
function add_sidebars() {
  register_sidebar(
    array(
      'id' => 'right',
      'name' => __( 'right' ),
      'description' => __( 'Right Sidebar' ),
      'before_widget' => '<div id="%1$s" class="widget %2$s">',
      'after_widget' => '</div>',
      'before_title' => '<h3>',
      'after_title' => '</h3>'
    )
  );
  register_sidebar(
    array(
      'id' => 'left',
      'name' => __( 'left' ),
      'description' => __( 'Left Sidebar' ),
      'before_widget' => '<div id="%1$s" class="widget %2$s">',
      'after_widget' => '</div>',
      'before_title' => '<h3>',
      'after_title' => '</h3>'
    )
  );
  // add however many more are needed..
}

Then to place the sidebars in your theme just use:

<?php
  dynamic_sidebar( 'right' );
  dynamic_sidebar( 'left' );
?>

open external links in a new tab(_blank)
place an image next to external links

Example Use

Options

blank – if true it will change the links to open in a new tab by adding target=”_blank”. This defaults to true.

path – if set this is the (From the site root) to the image to show next to external links. defaults to ” which will not show an image.

ignore – this is the class name that can be put on a link so that the plugin will not add the image or target changes.

License

WTFPT (http://en.wikipedia.org/wiki/WTFPL) = “Do What The Fuck You Want To Public License”.

Source:

On Github

Full

(function($){
	$.fn.extTab = function(params) {
        var defaults = {
            blank:true,
            path:'',
            ignore:''
        };
        params = $.extend(defaults, params);
        var t = $(this).find("a[href^='http:']").not("[href*='" + document.location.host + "']");
        if(params.ignore != '') {
        	t = t.not("[class*='" + params.ignore + "']");
        }
    	if(params.blank) {
    		t.attr( "target", "_blank" );
    	}
    	if(params.path != '') {
    		t.append(' <img src="http://' + document.location.host + params.path + '">');
    	}
    };
})(jQuery);

Minified

(function(c){c.fn.extTab=function(a){var a=c.extend({blank:!0,path:"",ignore:""},a),b=c(this).find("a[href^='http:']").not("[href*='"+document.location.host+"']");a.ignore!=""&&(b=b.not("[class*='"+a.ignore+"']"));a.blank&&b.attr("target","_blank");a.path!=""&&b.append(' <img src="http://'+document.location.host+a.path+'">')}})(jQuery);

Icons

Just an example of some icons to use

In the functions.php file of the theme we first need to add support for menus.

if (function_exists('add_theme_support')) {
    add_theme_support('menus');
}

The function_exists is only there for backward compatability.. so you can probably safely remove it. Without the add_theme_support when someone clicks on Appearance -> Menus they will get the message

“The current theme does not natively support menus, but you can use the “Custom Menu” widget to add any menus you create here to the theme’s sidebar.”

Next we need to define our menus using the register_nav_menu  function. The following defines 3 different menus; main, top and side to be used within our skin

if ( function_exists( 'register_nav_menu' ) ) {
  register_nav_menus( array(
    'main' => 'Main Navigation',
    'top' => 'Smaller top nav',
    'side' => 'nav within sidebar'
  ))
}

Now if we go to the menus page within WordPress we should see that our skin supports 3 different menus. With the descriptions we provided in the functions.php file.

Now we need to add these menu place holders to our theme so the menus appear in the appropriate places. So within your themes .php pages add the following line

<? php wp_nav_menu( array( 'theme_location' > 'top', 'container' > '' ) ); >

*The container parameter removes the (pointless) wrapping div tag.

Then for each of the other menus you add the above code again giving it the other menu items.

The videos were provided in a .mov format so being lazy I tried just sticking those videos in to chrome and it worked… sorta.

<video width=800 height=600><source src=video.mov></video>

Sound Played Every Other Load

Very quickly the problems started occurring. First off the sound stopped playing every other time the video was played.

That seems to be a bug and to fix it I had to  remove the old video tag and replace it every time I played a video.

Video Load Performance  Problems

Then I moved from the short demo videos (10 secs) to the full 3 min videos and right off the bat, I saw huge performance delays. So slow that it appeared the videos would not show and the Task Manager did not show activity. Perhaps there is a file max size I have missed?

Now faced with this major performance problem I set out to see which video format worked fastest on which browser, since I had the luxury of picking a browser.

I converted the video into the .ogv, .mp4 (H.264) and .webm using the  Miro Video Converter (Which is REALLY easy and simple). It gave me the following file sizes.

• .mov – 631,964KB (Original File)
• .mp4 – 210,954KB
• .mp4 – 66,280KB*
• .ogv – 144,690KB
• .webm – 25,315KB

*I ended up using the Adobe Media Encoder to reconvert the second (smaller) .mp4 because it gave better compression and wanted to see what kind of difference it made.

Using the following 3 browsers:

• Firefox 3.6.12
• Chrome 7.0.517.44
• Opera 10.63

Heres how each format worked in them.

Firefox:

• .mov, .mp4 and .webm – do not run
• .ogv – ran but was very slow to start, after that the video was smooth.

Chrome:

• .mov – would not run
• .mp4 – would not run
• .mp4 (smaller) – ran smoothly but took a minute to appear
• .ogv – seems to be sized differently, runs really jagged, and just overall unacceptable.
• .webm – Extremely responsive, but the quality was plain awful.

Opera:

• .mov, .mp4 – does not run
• .ogv – Responsive and smooth.
• .webm – Extremely responsive, but the quality was awful. (same as chromes webm)

Before I started I assumed Chrome/WebM would be the best overall bet, just from the chatter it has been creating. But it seems that I was wrong.

Overall the .ogv on Opera seemed to be the best option.

It does seem that there is a very apparent association between file-size and initial load time. (bandwidth ignored) But nothing I could find written on the matter, or how to improve it. (@CoryMathews if you know)

After all this it still seems like the HTML5 video tag is far from ready, but its a hell of a lot nicer to use then flash.

Great HTML5 Video Tag Articles

• Introduction to HTML5 Video – dev.opera.com
• Everything you need to know about HTML5 Video and Audio 2 – dev.opera.com
• HTML5 Video – diveintohtml5.org

Sample Source  Code

Page Structure-ish

...
<script src="jquery.js"></script>
<style>
  #VideoShow { display:none; top:0; left:0; }
  #closeVid { position:absolute; top:0;z-index:5; display:none; }
</style>
...
<div id="But1"></div>
<div id="But2"></div>
...
<div id='closeVid'><img src='close.jpg'></div>
<div id="VideoShow"></div>
...
$("#But1").click(function(){ playVideo("video.mov"); });
$("#But2").click(function(){ playVideo("video.mp4");  });

function playVideo(videoName) {
  $("#VideoShow").fadeIn(300).html("<video width=800 height=600><source src=\"" + videoName + "\"'></video>");
  $("#closeVid").fadeIn(300);
  var Vid = document.getElementsByTagName('video')[0];
  Vid.play();
  Vid.addEventListener('ended', function(e) {
    closeVideo();
  }, false);
}

function closeVideo() {
  var Vid = document.getElementsByTagName('video')[0];
  Vid.removeEventListener('ended', arguments.callee, false);
  $("#VideoShow").fadeOut(300).html("");
  $("#closeVid").fadeOut(100)
}

<script type="text/javascript">
$(function(){
$("a[href^='http:']").not("[href*=EXAMPLE.com']").attr({ target: "_blank" });
});
</script>

You could also use this same technique to add a small friendly image next to these links  notifying the user they are about to leave the site.

<script type="text/javascript">
$(function(){
$("a[href^='http:']").not("[href*=EXAMPLE.com']").attr({ target: "_blank" }).append(" <img src=\"outLink.jpg\">");
});
</script>