Fix: jqGrid search operator menu items jumping around on hover

A colleague noticed earlier on today, that on the Chrome browser they were using, the search operator menu items of a jqGrid on a web app’s UI were jumping around on hover, making it practically impossible to select one.

  

Seems this had started occurring on that ASP.net MVC web application, after a recent update to the latest jQuery-UI NuGet package.

Probably the issue wouldn’t occur if it wasn’t using the older free version of jqGrid. Will probably transition it eventually to free-jqGrid, the free fork (and quite evolved since forked) of the older free version of jqGrid, since jqGrid’s newer version is now commercial.

For the time being, I ended up adding this fix to Content/Site.css of the ASP.net MVC webapp:

/* jqGrid search operator menu item hover (uses jQuey-UI) */

a.ui-corner-all.g-menu-item.ui-state-hover {
    border: 1px #cccccc !important; /* fix for Chrome: removed "solid" (was causing hovered items to resize and menu to relayout, making it too hard to select them */
    /*border: 1px solid #cccccc;*/ /* this is used by jQuery-UI for .ui-state-hover */

    color: blue; /* showing blue color for hovered over menu text, should show better than a hover border since selected item already has a border itself */
}

This also has the added extra that on hover it shows the hovered item’s text in blue:

PivotViewer for a rich search experience

For ClipFlair, I’m looking into implementing advanced search using Silverlight PivotViewer

Update: 

You can now check out ClipFlair Gallery in all its PivotViewer with DeepZoom glory.

A really nice example of PivotViewer search is at:

http://www.appletoncompassion.org/VirtualExhibitViewer

This may take long time to load, since its loading 10000 children art DeepZoom image tiles

You can use the mousewheel to zoom in there or the zoom slider at top-right (can also click an item to zoom to it)

See the filters at the left handside, play with them by selecting items there at the various properties to see the images get rearranged to show only ones selected by the filters.

Has also buttons at the top-right to bin the items based on having same values at properties selected

Another good example is Netflix movie catalog:
http://netflixpivot.cloudapp.net/
e.g. select Sort: Genre at top-right and click Graph View button there instead of the default Grid View to see the items get binned by Genre, then start filtering them down from the left handside bar

Also see a SharePoint sites collection search with PivotViewr:
http://www.wssdemo.com/livepivot/

MSDN magazine collection with PivotViewer:
http://pivot.blob.core.windows.net/msdn-magazine/msdnmagazinepivot.htm

Finally, for a nice series of Silverlight PivotViewer programming articles by Tony Champion see:

http://tonychampion.azurewebsites.net/blog/index.php/tag/pivotviewer/

http://pivotviewerlessons.codeplex.com/ (source code)

http://pivotviewer.championds.com/ (live examples)

BTW, people are also working on HTML5 PivotViewer:

http://www.rogernoble.com/2012/02/02/addressing-the-elephant-in-the-room-the-html5-pivotviewer/

http://lobsterpot.com.au/lobsterpot-html5-pivotviewer-now-open-source

http://lobsterpothtml5pv.codeplex.com/

http://lobsterpot.com.au/pivotviewer/api-reference

http://lobsterpot.com.au/pivotviewer/extending-the-html5-pivotviewer

http://pivot.lobsterpot.com.au/html5.htm (Live HTML5 Sample)

http://examples.hubbardone.com/html5/html5pivotviewer.htm (Live HTML5 Sample)

For developers, here are some direct links to .CXML (Collection XML) files:

http://gallery.clipflair.net/collection/activities.cxml
http://gallery.clipflair.net/collection/video.cxml
http://gallery.clipflair.net/collection/images.cxml

http://pivot.blob.core.windows.net/msdn-magazine/msdnmagazine.cxml
http://images.appletoncompassion.org/deepzoomfull/AppletonCompassionFull.cxml
http://www.esrc.ac.uk/Pivot/CXML/Grants/Grants.cxml
http://labs.championds.com/MIX10/MIX10Collection.cxml
http://spscollection.blob.core.windows.net/pivot/SharePoint.cxml
http://www.xpert360.net/SQLBits/Collection.cxml
http://pivot.metia.com/worldcup/wc2010-dz.cxml

By opening the .CXML file URL in a web browser you can see its XML-based structure.

By using ClipFlair Studio‘s Gallery component you can open most of those .CXML URLs and play with the respective collection (you use the wrench button on the Gallery component’s titlebar to turn it over and set the Source URL, then turn over again to see the collection – just wait a bit if it’s big and takes some time to load).  An alternative is to open in your browser a URL of the form http://studio.clipflair.net?gallery=http://spscollection.blob.core.windows.net/pivot/SharePoint.cxml

Not all of these URLs will work in ClipFlair Studio’s Gallery component though, because some servers may be using restrictive access policy files for Silverlight, not allowing a Silverlight app like ClipFlair Studio which is served from http://studio.clipflair.net to download the .CXML file.

HowTo: Remove Babylon search from Mozilla Firefox address bar

Babylon Search is one of the most abusive addons for Mozilla Firefox and other web browsers. It installs with other free software (most probably profiting from tracking your searching habits) and then it is quite hard even for experienced users to completely uninstall it.

While maintaining other computers in the past I’ve used a combination of Add-Remove programs dialog, searching programs folder for Babylon text string and deleting related files, entering “about:config” at Firefox address bar and searching for Babylon in Firefox settings, right clicking each one of them to restore etc.

For the separate search bar it is easier to remove Babylon, since Mozilla has a dropdown menu there with search engine settings, however it’s sad that the aforementioned menu doesn’t control the address bar search.

However, in a recent incident I found an easier way to get rid of the crappy Babylon search which hijacks the search action when one types at Mozilla address bar some search query.

There’s a (quite hidden) action to reset Mozilla settings. You go to Mozilla’s menu (either from the old menu bar if visible, or from the newer yellowish button at the top-left of the Firefox window) and select Help/Troubleshoot problems and it takes you to an (internal) webpage that hosts a button you can use to reset all Mozilla settings to defaults (as if it was installed for the first time).

This is quite useful since even updating Mozilla (another hidden action, placed at Help/About dialog), won’t fix it if settings have been tampered with by malicious installers like Babylon’s. In fact some malicious addons for Mozilla even tamper its version setting so that it won’t update. Resetting settings as mentioned above can help with that, if not you may have to download and install the latest Firefox manually from http://www.mozilla.com (preferably download it in such a case from another browser like Internet Explorer if that seems to work OK).

Remove older crippled Google Search Provider from IE9 RC

Just installed Internet Explorer 9 (IE9) Release Candidate (RC), found the link at:

http://www.zdnet.com/blog/hardware/internet-explorer-9-rc-available-for-download/11349

Was amazed by it’s performance and clean GUI (especially the choice to move the yellow warning bar to the bottom and make it of smaller width than the browser window in order to be more noticeable). Do visit http://www.beautyoftheweb.com to explore IE9’s potential (and try the billiard game at http://agent8ball.com to see the graphics hardware acceleration).

However, when typing at the address bar (now combined with the search bar since new users were mixing them up and typed URLs at the search bar with unexpected outcome) the suggestions dropdown was showing two Google icons and one Bing.

Then I also noticed that one of the Google icons (the one that was already selected), didn’t allow me to turn on suggestions (send keystrokes to search engine as you type for dynamic search/suggestions).

The suggestions dropdown window just had an “Add” button that takes you to a page with more search providers to add, but no button to allow you to edit those search providers. So I right clicked the empty area at the right side of the address bar and selected to show the “Command bar” (means menu bar).

 

Then at menu “Tools”, I selected “Manage Add-ons”

 

There as you can see at the screenshot above (grabbed with ALT+PRINTSCREEN button combination and pasted into Windows Live Writer), the item selected says “Top Result Search” and has “Not Available” and also the “Top Result search address” field says the same. Also noticed in was using “google.gr” whereas the other google icon was using “google.com” and had all search address fields filled-in.

So I reckoned I should remove that problematic entry.

A thing I don’t get is those UIs that don’t allow you to press Remove button at a Default choice and force you to first set another one as default, then they enable the remove button. Totally non-intuitive for new users of computers. They should instead prompt you to select other default after you press Remove on the current Default one. If you must always have one entry there they should just disable remove when list item count is just one.

To keep it short, I clicked Bing as the Default search engine by selecting it and pressing “Set as Default”, then clicked the problematic Google search entry and selected “Remove” (the remove button was now available since it wasn’t the default search anymore).

The clicked “Close” and all was fine with search suggestions for both Bing and Google, plus got rid of that 2nd Google icon at the search suggestions drop-down window.