Monthly Archive for September, 2011

Facebook Ninja: The Comment Reveal

This is a cheap little trick, but I like to use the Facebook Comment Reveal to add a little excitement to my online social grind. Facebook will truncate a comment to reduce the length of the page and not bombard a casual reader with more than they care to consume. You get about six lines of text (including the length of your name in the first line) before Facebook will cut your comment off with anĀ ellipsisĀ and “Read More” prompt. So why not use this to your advantage?

Continue reading ‘Facebook Ninja: The Comment Reveal’

CSS selectors with multiple HTML attributes

Something I had been banging my head about recently… CSS selectors on multiple attributes. No doubt, CSS selectors are powerful. Selecting on ids and classes are a cinch. And in case you didn’t know, you can string multiple classes together in a selection.

  1. div#id.class1.class2.class3

Note: You could probably string multiple ids in a selector, but most proper engines will barf at you or simply return nothing. Despite the utility in being able to select multiple elements by their respective ids in one selector, this is poor form. If you find yourself doing this often, you might want to give regularly selected groups of elements a common class.

But even more impressively, you can do this on other HTML attributes. (Especially useful in Selenium when trying to verify specific types of input fields.) I was trying to verify a specific UI interaction where a password field would be revealed as plain text when in focus and returns to an obfuscated password field on blur. Unfortunately, I couldn’t figure out how to verify that a SPECIFIC field needed to have both name=’myformfield’ AND type=’password’. A single attribute can be selected as the following:

  1. div#id.class1[name='myformfield']

Then it occurred to me that I might be able to string together multiple attribute selections similar to multiple class selections. Wouldn’t you know, it worked?! At least, it works in version 1.4.3 of jQuery’s Sizzle (its CSS selection engine) and 1.2.0 of Selenium IDE.

  1. div#id.class1[name='myformfield'][type='password']

Awesome. Hope this helps someone.