People keep asking me how to install extensions in Safari 5, so here’s a quick visual primer.
Open Safari’s preferences, click the advanced tab at the top, and check “Show Develop menu in menu bar”.
Now click the Develop menu in the menu bar and select “Enable Extensions”.
Extensions are now enabled! Double click your extension to add it, and then you can control them in the Safari prefs under the Extensions tab.
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.
Google Lightboxer1 is a Safari 5 extension that creates a Lightbox2 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:
Latest Release – v1.3
Known issues:
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.
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-91 for some reason, control is available. An hour or so later and ctrlSwitcher was born.
Features
- Use a modifier (ctrl by default) + the number keys to instantly jump to a tab. Keys 1 through 0 will go to tabs 1-10, and keys q through p will go to tabs 11-19.
- Configurable modifier key
- Configurable “go to last tab” key
Download and 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
- Now 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)
- Note for Windows users: You will need to switch your default modifier key from ctrl to alt or ctrl+alt to have this tool work.
v1.6:
- Adds cmd+opt as a choice for key combo (see the commit)
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 ↩
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.
Below is some very basic HTML that you can use to build a jqGrid.
<html>
<head>
<!--snipped necessary JS and CSS includes here-->
<title>jqGrid Live Search Demo</title>
</head>
<body>
<h2>jqGrid Live Search Demo</h2>
<table id="list"></table>
</body>
</html>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: <input type="search" id="gridsearch" placeholder="Search" results="0" class="gridsearch" />', viewrecords: true, loadonce: true, width: 750, forceFit: true, height:130, gridComplete: function() { searchColumn = grid.jqGrid('getCol','name',true) //needed for live filtering search } });
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() } }) })
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.
I installed the 10.04 LTS (Lucid Lynx) 64-bit alpha 3 this morning to check out some of the new features. And since I’ve done a few other articles about running Ubuntu in a VM I thought I’d share the experience yet again.
If you’re running VMWare Fusion 3.0+ (or the current release of Workstation 7) then the version of VMWare Tools you have with your software can successfully install with no manual intervention. Simply pick easy install and let VMWare do all the work.
If you’re running an older version you will want to take a look at my Ubuntu 9.10 instructions for help with getting open-vm-tools running for you in 10.04.
I’ll update this article if anything changes (the kernel freeze for Lucid Lynx is not until March 11).