If you’re working on responsive websites, you may already be familiar with FitVids – a nice little jQuery plugin that allows for fluid-width video embedding. This morning I found there’s also a FitVids plugin for WordPress. Very easy to use, just install it, activate it, then go to Appearance > Fitvids.

FitVids settingsIf you’re not already using jQuery 1.7+ – and you should be fine if your WordPress install is 3.4 or above – tick the checkbox to add jQuery 1.7.2.

Then under jQuery Selector, enter the container element you want to apply FitVids to. It’s probably .post, but if you’re not sure .body always works. Then save changes and you’re done – FitVids should now be resizing videos as browser size changes.

I’m currently working on building a good responsive base version of the Theme Hybrid child theme I use as the starting point for most WordPress sites. To that end, today I destroyed a project-in-progress to rebuild it responsively. It’s going well so far, but I’m not close to being done. 

One thing that is complete: I now have a responsive menu thanks to a little jQuery script called TinyNav.js. This automatically converts any ul or ol-based navigation menu to a select menu. It was very easy to do except for one thing that wasn’t clear from the documentation, which I’ll explain below.

First download TinyNav.js from the link above and upload it to your theme directory. Then in the head section of your theme, connect to the script:

Then add this, changing #menu-primary to the ul id in your WordPress menu. The second part of this makes the current_page_item appear in the select menu by default.

Finally, open up tinynav.js. This was the tricky part because it wasn’t explained clearly. You’re going to need to make one change: the first occurrence of ‘selected’ needs to be changed to ‘current_page_item’ and then the first part of the script should look like this:

Note that that’s just part of the first line in the minified script…

Now you’ll use media queries to control the appearance of the select menu and the hiding of the main menu, perhaps like this:

And you can style select.tinynav in CSS. Enjoy!

Today I was looking for ideas for displaying tooltips on a client’s new site… This is what I ran across, I hope it’s helpful.

Tooltip Scripts and Extensions

Top 30 jQuery tooltip plugins (using #13, Simpletip, for my project).

I like Tipsy and have used it before a few times, it creates Facebook-like tooltips.

Prototip uses Prototype and Scriptaculous to create a variety of AJAX tooltip styles. Old-school, some use images.

The successor to Prototip, Tipped uses Canvas and jQuery to create some very nice-looking and more complex tooltips; also has an API for custom cases.

A collection of 12 plugins for creating tooltips with jQuery, Mootools and Prototype.

Some tooltip extensions for Joomla.

Tooltip Tutorials

Chris Coyier’s nice tutorial on Bubble Point Tooltips With CSS3 and jQuery.

50+ Scripts With AJAX, Javascripts, CSS & Tutorials.

Tutorial on making Sexy Tooltips with Just CSS.

Tute on creating animated tooltips with CSS3.

Pure CSS Tool Tips Revisited.

How to create link tooltips with CSS3 and jQuery.

Another tutorial on CSS3-only tooltips.

Mobile-friendly CSS and jQuery tooltip tutorial.