langui.sh » javascript

Tab Duplicator, A Safari 5 Extension

Paul Kehrer — Mon, 14 Jun 2010 14:37:48 +0000

Tab Duplicator adds a contextual menu item as well as a toolbar icon¹ that will duplicate your active tab. By default it creates a new tab in the background, but it can be configured to make them foreground as well. You can also select tab positioning (first, last, before active tab, after active tab).

To install:

Download the signed extension and double click to install²
Right click and choose “Duplicate Tab”.

You can view the source on GitHub as well! If you have suggestions for improvements let me know! Bug reports should be directed to the issues page.

Changes in 1.2

Added toolbar icon in addition to contextual menu. If you don’t want it you can hold command and click and drag it off to remove.
You can now choose where to position your duplicated tabs. Choices are after current tab (default), before current tab, beginning, or end.
Optimized code. No more injected script.
Validation of events (disables button/contextual menu item if no URL is loaded)

Thanks to Brian Kim for the icon!

You can hold command and drag the toolbar item off the toolbar if you don’t want to use it! ↩
If you haven’t enabled extensions in Safari then learn how. ↩

Google Lightboxer, A Safari 5 Extension

Paul Kehrer — Sun, 13 Jun 2010 18:35:21 +0000

7/20/2010 Update – Google has released a significant images update that breaks lightboxer. I’ll look into this and fix it within the next week or so.

View All My Safari Extensions

Google Lightboxer¹ is a Safari 5 extension that creates a Lightbox² slideshow on Google Images. Click any image and a slideshow will appear loading the full resolution images. If you don’t want to have the lightbox appear, hold command and it will be disabled temporarily.

To install:

Download the signed extension and double click to install³
Load Google Images and do a search.

Latest Release – v1.3

Pulls the Google Images metadata into the colorbox so you can see it while you’re browsing more easily.

Known issues:

Some JS errors in console. Will be resolved in future release, but they are cosmetic only.

You can view the source on GitHub as well! If you have suggestions for improvements let me know! Bug reports should be directed to the issues page.

Icon courtesy of Brian Kim. ↩
Actually it’s done using Colorbox ↩
If you haven’t enabled extensions in Safari then learn how. ↩

ctrlSwitcher, A Safari 5 Extension

Paul Kehrer — Sat, 12 Jun 2010 05:14:58 +0000

View All My Safari Extensions

On the Ars Technica forums someone mentioned that they’d like to be able to switch between tabs using command + numbers to choose tabs. I took a look at the Safari extension system, and while you can’t override the shortcuts bound to cmd 1-9¹ due to security restrictions, control is available. An hour or so later and ctrlSwitcher was born.

To use:

Download the signed extension and double click to install²
Pick if you want to use ctrl, opt, or ctrl+opt as your meta keys (default ctrl) in the prefs
Either close all tabs or restart your browser. ctrlSwitcher has to load a small script in each loaded tab (empty tabs cannot be switched to/from due to limitations on extensions)

v1.4:

ctrlSwitcher now allows you to switch tabs 10 through 19. Zero is for tab 10 and Q through P (on a QWERTY layout) is 11-19.³ Thanks to Zaudragon for the patch!

You can view the source on GitHub as well! If you have suggestions for improvements let me know! Bug reports should be directed to the issues page.

cmd-1 through 9 are assigned to bookmarks on your bookmarks bar in Safari ↩
If you haven’t enabled extensions in Safari then learn how. ↩
Unfortunately Safari extensions don’t have much support for i18n at the moment so other keyboard layouts are not supported. ↩

jqGrid Local Data Live Search

Paul Kehrer — Thu, 04 Mar 2010 20:34:09 +0000

jqGrid is an incredibly powerful and flexible plugin for jQuery that allows you to build data grids using nothing but Javascript, HTML, and CSS. I recently wanted to allow live filtering of local results (no AJAX queries, just parsing local data) based on a search string. View the demo and then follow along below.

Basic HTML Structure

Below is some very basic HTML that you can use to build a jqGrid.


  
    
    jqGrid Live Search Demo
  
  
    jqGrid Live Search Demo

Create A Grid

This snippet will create a grid using the “smoothness” jQuery-UI theme. This grid has 3 columns and obtains its data in JSON format from “data.php”. Notice the global declaration of searchColumn and the call to fetch an array of all the data from the name column when the gridComplete event fires. You could grab the other columns as well, but for this example we’re only going to search on name.

var gridimgpath = 'css/smoothness/images';
var grid = jQuery('#list');
var searchColumn;
 
grid.jqGrid({
	url:'data.php',
	datatype: 'json',
	mtype: 'POST',
	colNames: ['Name','Data','Date'],
	colModel :[ 
	  {name:'name', index:'name', width:140}, 
	  {name:'data', index:'data', width:200},
	  {name:'date', index:'date', width:200},
	],
	sortname: 'date',
	sortorder: 'asc',
	caption:'Search: ',
	viewrecords: true,
	loadonce: true,
	width: 750,
	forceFit: true,
	height:130,
	gridComplete: function() {
		searchColumn = grid.jqGrid('getCol','name',true) //needed for live filtering search
	}
  });

Live Filtering

This is the simple code that allows us to live filter on the grid. It will hide any id that doesn’t match the string you’re entering. The search is case insensitive.

//for live filtering search
jQuery('#gridsearch').keyup(function () {
	var searchString = jQuery(this).val().toLowerCase()
	jQuery.each(searchColumn,function() {
		if(this.value.toLowerCase().indexOf(searchString) == -1) {
			jQuery('#'+this.id).hide()
		} else {
			jQuery('#'+this.id).show()
		}
	})
})

Known Issues

At the moment if the first row is hidden the grid becomes unaligned from its headers (and live resizing of the columns does not work). This issue can be hidden by making all the headers the same width, but if a user resizes the problem will be visible again. There is a bug open on github to correct the issue.