Turning radio buttons into pictures
Radio buttons are awesome, but there’s not much you can do to style them. Say you have a form that lets users pick a category of food and then answer questions about that food. You might have fruit,...
View ArticleCustom SharePoint browser warning
SharePoint 2010 includes a helpful dialog box that warns users who are using outdated versions of Internet Explorer: As you can see, however, it’s neither particularly attractive nor very helpful. It...
View ArticleResponsive design and server-side code
Update This post has been completely re-written to describe a better way of making server-side code responsive. Instead of posting the variable through Ajax, it uses GET to load a fully-responsive...
View ArticlejQuery teaser animation
Today we’ll explore a jQuery-powered animation effect that you sometimes see: An object that moves across the screen, morphing into a fixed button when it reaches the opposite side of the browser...
View ArticleAn example of SharePoint responsive design
We recently went live with a responsive retrofit of a complex SharePoint site: the website of Tennant Company. Their site looks like this at desktop resolution (click the image for a larger view): It...
View ArticleBug fix: putting a background image on a table row
I came across this bug today, and the solution was difficult enough to find that I thought I’d share. The problem If you put a background image on a table row, it works fine in Firefox and modern...
View ArticleDisplaying links alphabetically in columns
As a developer, I’m often asked to display a dynamic list of links based on page types. For example, a pet store may have a page for each type of pet it sells, and they would like a landing page that...
View ArticleCSS: Weird inline-block behavior
In CSS, inline-block is an odd animal — neither inline, nor block. Further, it comes with its own set of rendering rules that can sometimes lead to unexpected results. Take the following example:...
View ArticleRemove default text styles from SharePoint 2010 dropdowns
In my article on custom rich-text-editor (RTE) styles in SharePoint 2010, I noted that while it’s easy to add styles, or to wipe out all the default styles and replace them with your own, it’s not easy...
View ArticleCustom promo boxes in SharePoint 2013
In SharePoint 2013, it’s fairly easy to set up a list/CQWP combination that gives users a surprising amount of control over the layout and presentation of promo boxes. For instance, the setup I’m about...
View ArticleRecreating tile view using Display Templates
A new feature of 2013 are the metro-style tiles. Every new team site has them as a banner on the homepage. To create your own tiles you are limited to the promoted links app or the Announcement Tiles...
View ArticleClickable labels that highlight when selected
I’ve been designing a touch-friendly form for one of our clients. One thing we wanted to do was make checkboxes and radio buttons easier to tap, and clearly show what has been selected. A little bit of...
View ArticleDrag and drop sorting of table rows in priority order
A common design pattern is making choices from a list, and then adding those choices to a table of results. Often the table will use some sort of Javascript plugin — Footables, Datatables, etc. — to...
View ArticleBootstrap radio buttons and checkboxes in columns, with contextual text fields
We recently did a project with the following requirements: Touch-friendly interface (translation: big touch targets); Bootstrap; Radio and checkboxes need to highlight when selected; When a radio...
View ArticleSharePoint 2013: Generate dynamic content using XSLT and a comma-delimited...
In SharePoint, the Content Query Web Part uses XSLT templates to display the results of each query. This is normally a fairly straightforward process (for XSLT). For an example, see the “Promo boxes”...
View Article
