Every (blank) pixel counts! - Minor quirk on custom ribbon action icons in modern lists

Typically the icon for a custom ribbon action in classic pages is 32x32 pixels. On modern lists the icon however is 20x20 pixels. If you use a 32x32 pixel image this is what it will looks like in classic and modern view.

Notice in modern view how the icon goes below the base line of the default ribbon icons, and that the icon is a little fuzzy. This is due to scaling 32x32 down to 20x20, which is not a direct pixel multiple. The solution is to pad the 32x32 image to 40x40. Keep the icon the same size, but increase the white space.

Original 32x32 icon

Padded 40x40 icon

In classic mode, the icon will look the same due to the use of CSS to position the image, where any overflow is hidden. In modern view however we now get a crisp image aligned with the existing icons. The crispness is due to the image being 40x40 pixels, and divided exactly in half – which avoids pixel smoothing on resize.

This might not be a big deal, but every pixel counts right? Going forward for modern pages you would use SharePoint Framework extensions for ribbon actions instead which allows the use of Office UI Fabric font icons instead of image files.

How to: Frame a search center with little work

Lately I have encountered several customs who deploy search from SharePoint 2010, but they still have other solutions running on MOSS 2007 or other portal frameworks. Instead of creating custom solutions using the search service on SharePoint 2010, framing is a quick solution to get you up and running.
One way is to create a custom master page to replace v4.master for the search center, but this requires html knowledge and tinkering. In many cases it’s just as easy to go the configuration way.

Check if an element is truly hidden with jQuery

I’m tinkering with a web application and have a situation where I want to select only elements which are visible on the page. Initially I tried using the is(“:visible”) jQuery (v1.4.2) selector, but it seems to be broken, at least for IE.

My solution was inspired by an old posting, and I created the following extension which checks the styles on the current element, and if it’s inherited, then check the parent element.

$.extend(
   $.expr[":"],
   {
       reallyhidden: function (a) {
           var obj = $(a);
           while ((obj.css("visibility") == "inherit" && obj.css("display") != "none") && obj.parent()) {
               obj = obj.parent();
           }
           return (obj.css("visibility") == "hidden" || obj.css('display') == 'none');
       }
   }
 );

and use it like this:

if (element.is(':reallyhidden')) return false;