Posts Tagged: javascript
AvianSafari 1.1.0
I’ve just released AvianSafari 1.1.0.
Features
- Significant performance improvements
- Support for “Snowflake” 64-bit status IDs
- Fixes for timestamps in View Thread
Get it now! Or check out the updated source.
Tab Duplicator, A Safari 5 Extension
Tab Duplicator adds a contextual menu item as well as a toolbar icon1 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:
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!
Google Lightboxer, A Safari 5 Extension
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:
- Download the signed extension and double click to install3
- 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.
ctrlSwitcher, A Safari 5 Extension
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 Local Data Live Search
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.
<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> |
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: <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 } }); |
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.