AdSpeed.org | Giving it back

This scripts show the content of a div when clicked on an opener.

if (typeof(document.createElement('div').contains) == 'undefined') {
  /** overwrite this function to avoid firing child event inside a parent */
  HTMLElement.prototype.contains = function(node) {
    if (node == null) return false;
    if (node == this) return true;
    else return this.contains(node.parentNode);
 } 
} // fi

var $globInPopup = false;
var $globTarget;
var $globTimerID;

function hidePopup($pPop) {
 $pPop.style.visibility = 'hidden';
 $globInPopup = false;
}

function showRelPop($pPopID) {
 $as($pPopID).style.visibility = 'visible';
}

Labels: javascript

This js code extends the tablesorter plugin in jQuery:

Parser for sorting values like "$1,300.50"
Parser for sorting values like "2 months ago","3 years ago" (actual timestamp hide in the comment)
Parser for sorting values like "SMALLER","SMALL" (actual text value hide in comment)
Widget to highlight a row when mouse hovers it
Widget to highlight a header when mouse hovers it
Widget to save/memorize sort order via AJAX

Let's get right into the code:

/** define custom sorter and widgets for tablesorter plugin for jQuery
* @since 10/4/2008
* @author Son Nguyen
*/

// add sorting by 1,300,000 (with commas)
$.tablesorter.addParser({
 id: "fwnumber",
 is: function(s) {
  return false;
 },
 format: function(s) {
  return $.tablesorter.formatFloat(s.replace(/(\,|\%)/g,""));
 },
 type: "numeric"
});

// only look for value in the comment, eg: <IMG>, 
$.tablesorter.addParser({
 id: "commenttxt",
 is: function(s) { 
  return /^/.test($.trim(s));
 },
 format: function(s) {
  return s.replace(/^.*/g,"$1");
 },
 type: "text"
});

// only look for value in the comment, eg: <DATE>
$.tablesorter.addParser({
 id: "commentnum",
 is: function(s) { 
  return /^/.test($.trim(s));
 },
 format: function(s) {
  return s.replace(/^.*/g,"$1");
 },
 type: "numeric"
});

// show the hover row different than other rows
$.tablesorter.addWidget({
 id: "rowHover",
 format: function(table) {
  $("tr:visible",table.tBodies[0]).hover(
   function () { $(this).addClass(table.config.widgetRowHover.css); },
   function () { $(this).removeClass(table.config.widgetRowHover.css); }
  );
 }
});

// apply CSS to the sortable header when mouse hovers it
$.tablesorter.addWidget({
 id: "headerHover",
 format: function(table) {
  $("thead th:visible",table).hover(
   function () { if (!table.config.headerList[$("thead th:visible",table).index(this)].sortDisabled) $(this).addClass(table.config.widgetHeaderHover.css); },
   function () { $(this).removeClass(table.config.widgetHeaderHover.css); }
  );
 }
});

// call a link via AJAX to save/memorize the sort order
$.tablesorter.addWidget({
 id: "memorizeSortOrder",
 format: function(table) {
  if (!table.config.widgetMemorizeSortOrder.isBinded) { // only bind if not already binded
   table.config.widgetMemorizeSortOrder.isBinded = true;
   $("thead th:visible",table).click(function() {
    var i = $("thead th:visible",table).index(this);
    $.get(table.config.widgetMemorizeSortOrder.url+i+'|'+table.config.headerList[i].order);
   });
  } // fi
 }
});

Demo HTML file

<html>
 <head>
	<title>Testing - sorttable.js</title>
	<script src="jquery-1.2.6.min.js"></script>
	<script src="jquery.tablesorter.min.js"></script>
	<script src="tablesorter.extend.js"></script>

<body>

<h1>This table is sortable, click on the headings to sort</h1>

<table id="myGrid" cellpadding="0" cellspacing="0">
	<thead>
		<tr>
			<th>Number</th>
			<th>String</th>
			<th>Currency</th>
			<th>Embedded</th>
			<th>Time</th>
		</tr>
	</thead>
	<tbody>
		<tr><td>120</td><td>ABC</td><td>$123.50</td><td>MEDIUM</td><td>1 month</td></tr>
		<tr><td>0</td><td>XYZ</td><td>$99</td><td>SMALL</td><td>1 week</td></tr>
		<tr><td>1</td><td>Member</td><td>$932,329</td><td>SMALLER</td><td>2 month</td></tr>
		<tr><td>678</td><td>John Doe</td><td>$323.23</td><td>SMALLEST</td><td>1 year</td></tr>
		<tr><td>4,342</td><td>O'Ryan</td><td>$1,223.50</td><td>LARGE</td><td>2 day</td></tr>
	</tbody>
</table>

</body>
</html>

Labels: javascript, jquery

With JSONP, you can avoid the "Access is Denied" problem when loading a remote AJAX request. jQuery 1.2.x now supports JSONP, you can use that or this simple code snippet. In this example, let's assume you're on a page with a remote javascript loaded, now you only want this remote script to reload, not the whole page. And the result of getJSON.php:

Labels: ajax, code, javascript

If you need to reload a partial content (not the whole page) with JavaScript, you can easily use AJAX (jQuery is the simplest). But if the content is also from another website (eg: some API), then you can use JSONP (JSON with Padding) to get around the security protection of AJAX requests. And in the server-side javascript.php, you would return:

Labels: javascript

AdSpeed.org | Giving it back

Popup

jQuery - Extend tablesorter plugin

JSON with Padding = JSONP

Reloading partial page content with JavaScript

PHP Classes

Recent Entries