Super awesome query that puts MS Excel to shame!

SELECT * FROM Table1 WHERE Table1.principal NOT IN (SELECT principal FROM table2)

with data export to file:

SELECT *
INTO OUTFILE "c:/mydata.csv"
	FIELDS TERMINATED BY ',' OPTIONALLY ENCLOSED BY '"'
	LINES TERMINATED BY "\n"
FROM Table1
WHERE Table1.principal
NOT IN (SELECT principal FROM table2)

Just released my Code Lab redesign. Let me know what you think.

eZColumns is a jQuery plugin for newspaper -like columns on the web. It grabs the child elements of a container and organizes them into a top-down, customizable, set of columns. The advanced example also features a super fast searching ability. Check out the eZColumns home page and Jquery project page.

JavaScript enables us to use a special trick to turn any returned value into a boolean. For example, this can be very helpful for running browser feature detection scripts like the one below.

Testing for the HTML5 Canvas

if ( !!document.createElement("canvas").getContext ){
   //run code for browsers that support canvas
}

In this example, document.createElement("canvas") creates dummy element that, if HTML5 is supported, inherits all the methods from the Canvas element. By testing for a Canvas method like .getContext, not .getContext() - this runs code, we can check if the real Canvas exists and is supported.

Here, the first negation converts the .getContext test result (whatever the data type might be) to a boolean. The second negation changes the boolean again to give the proper result.

Testing Negative Cases

If the value is null, undefined, false, "", or 0, then the first negation converts it to true. The second negation changes it to false.

Testing Positive Cases

If the value is object, true, "ANY VALUE” or 1, then the first negation converts it to false. The second negation changes it to true.

If you need to quickly benchmark some code in firefox (maybe chrome too) try the following function to make you life easier…

function benchmark(name, fn, n) { 
   console.time(name); 
   for(var i = 0; i < n; i++) 
      fn(); 
   console.timeEnd(name);  
}

…where name is an arbitrary test name, fn is the function you want to test, and n is the times to run the function.

There might come a time where an HTML table can’t be used but the faux-columns need to be sorted.

The example image above shows, on the left, unsorted columns and, on the right, sorted columns.

The HTML for this fake columns example is a table-less group of divs as follows:

<style type="text/css">
  .row {clear:both}
  .column {width:100px;height:150px;margin:5px;float:left}
  .header{background:#000; color:#fff;}
  .group1, .group4 {background-color:#F00}
  .group2, .group5 {background-color:#6C6}
  .group3, .group6 {background-color:#06C}
  .hover {background-color:purple};
</style>

<div class="row">
	<div class="header">My Header</div>
	<div class="group1 column">group1</div>
	<div class="group2 column">group2</div>
	<div class="group3 column">group3</div>
	<div class="group4 column">group4</div>
	<div class="group5 column">group5</div>
	<div class="group6 column">group6</div> 
</div>
<div class="row">
	<div class="group1 column">group1</div>
	<div class="group2 column">group2</div>
	<div class="group3 column">group3</div>
	<div class="group4 column">group4</div>
	<div class="group5 column">group5</div>
	<div class="group6 column">group6</div> 
</div>
<div class="row">
	<div class="group1 column">group1</div>
	<div class="group2 column">group2</div>
	<div class="group3 column">group3</div>
	<div class="group4 column">group4</div>
	<div class="group5 column">group5</div>
	<div class="group6 column">group6</div> 
</div>
<div class="row">
	<div class="header">My Header 2</div>
	<div class="group1 column">group1</div>
	<div class="group2 column">group2</div>
	<div class="group3 column">group3</div>
	<div class="group4 column">group4</div>
	<div class="group5 column">group5</div>
	<div class="group6 column">group6</div> 
</div>

Notice that the HTML uses classes like row and column to create faux rows and columns.

Using a little bit of jQuery, the following JavaScript can sort the faux columns:

// include jQuery library first
// row selector, col selector, order array
function sortCols(row, col, order){ 
 $(row).each(function(){
  var tmp = {};
    $(this).children(col).each(function(cindex){
      tmp[cindex] = $(this).detach();
    });

    for(i in order){
      $(this).append( tmp[order[i]] );
    }
 });
}

Running the following function will sort the columns while keeping all bindings:

Use regular jQuery selectors and an array of positions as parameters. You can specify the selector classes for rows and columns and the function will take care of the rest. In the example below, columns 3 will be first, 6 will be second, and so on…

// parameters are: row selector, col selector, order array
sortCols(".row", ".column", [2,5,0,3,4,1]);

But wait! It also works on tables!!

sortCols("tr", "td", [2,5,0,3,4,1]);

With the absence of table-less designs, creating equally proportionate “boxes” in HTML can be daunting. So, with the help of a couple of CSS tricks and jQuery, I’ll demostrate a cross-browser method of creating equally tall and wide boxes.

before:

after:

The new jQuery $.equalHeights([widths]) Plugin

$.fn.equalHeights = function(widths) {
   $(this).each(function(){
      var tallest = 0;
      var widest = 0;
      $(this).children().each(function(i){
         if ($(this).height() > tallest) { tallest = $(this).height(); }
         if (widths) if ($(this).width() > widest) { widest = $(this).width(); }
      });

   // for ie6, set height since min-height isn't supported
   if ($.browser.msie && $.browser.version == 6.0) {
      $(this).children().css({'height': tallest}); 
      if (widths) $(this).children().css({'width': widest}); 
   }

      $(this).children().css({'min-height': tallest});
      if (widths) $(this).children().css({'min-width': widest});
   });
   return this;
};

This plugin has been changed from the original to include the optional [widths] paramter instead of the previous [px]. You can now pass true if you need the plugin to apply the largest width across all children.

The JavaScript

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
</script>
<script type="text/javascript">
   $(document).ready(function(){
      $(".boxes").equalHeights(true);
});
</script>

Here I pass true as an argument to ensure the plugin sets the widest min-width across all boxes.

The CSS

<style type="text/css">
.box {background:#39F; margin:0.5em;}
.boxes {background:#eee;}
.iblock{
   display: -moz-inline-stack;
   display: inline-block;
   vertical-align: top;
   zoom: 1;
   *display: inline;
}
</style>

Using the .iblock class is a great trick for getting boxes to look and behave properly throughout the most popular browsers- IE6 to the latest Firefox. I discuss it further here.

The Markup

<div class="boxes">
   <div class="box iblock">Hello</div>
   <div class="box iblock"><p>Hello</p><p>World. How are you?</p></div>
   <div class="box iblock">Hello</div>
   <div class="box iblock">Hello</div>
</div>

This chunk of HTML shows the basic markup for the boxes in this demo.

The Full HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Boxes and Grids</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
</script>
<script type="text/javascript">
   $(document).ready(function(){
      $(".boxes").equalHeights(true);
});
$.fn.equalHeights = function(widths) {
   $(this).each(function(){
      var tallest = 0;
      var widest = 0;
      $(this).children().each(function(i){
         if ($(this).height() > tallest) { tallest = $(this).height(); }
         if (widths) if ($(this).width() > widest) { widest = $(this).width(); }
      });

   // for ie6, set height since min-height isn't supported
   if ($.browser.msie && $.browser.version == 6.0) {
      $(this).children().css({'height': tallest}); 
      if (widths) $(this).children().css({'width': widest}); 
   }

      $(this).children().css({'min-height': tallest});
      if (widths) $(this).children().css({'min-width': widest});
   });

   return this;
};

</script>
<style type="text/css">
   .box {background:#39F; margin:0.5em;}
   .boxes {background:#eee;}
   .iblock{
      display: -moz-inline-stack;
      display: inline-block;
      vertical-align: top;
      zoom: 1;
      *display: inline;
   }

</style>
</head>
<body>
<div class="boxes">
   <div class="box iblock">Hello</div>
   <div class="box iblock"><p>Hello</p><p>World. How are you?</p></div>
   <div class="box iblock">Hello</div>
   <div class="box iblock">Hello</div>
</div>
</body>
</html>

Declared Arguments

Usually, we provide an argument list when declaring a JavaScript function. Therefore, creating a function that checks for the existence of an argument is pretty simple. For example:

function popup (url, framename, attr) {
    if (!url) url = '';
    if (!framename) framename = 'MyPopup';   
    if (!attr) attr = "width=800px,height=600px";
   
    window.open(url, framename, attr);   
    return false;
};

Unlimited Arguments

However, in some cases you might want to accept an unknown number of arguments. For this case, JavaScript provides an array-like object corresponding to the arguments passed to the function called arguments. For Example:

function unlimited (){
    for( var i = 0; i < arguments.length; i++ ) {
        alert("Argument [" + i + "]: " + arguments[i]);
    }    
}

I just finished uploading a jQuery plugin called relCopy. It spawned from the need to duplicate form fields with specific needs. Try the Demo or Read the Docs. Also visit the the jQuery Plugin page.