I like to write custom Javascript and jQuery when needed to solve a problem, but often it makes more sense to avoid reinventing the wheel and turn to the open-source world instead. Below are a few scripts/plugins that I find myself using on almost every site I build. This is not an exhaustive list, but I find myself using these on a more consistent basis than anything else.
Fancybox
For "lightbox" style popups I always turn to Fancybox. It is great for one-off popup needs or full galleries. It's responsive, which is great and really a must-have these days. It is easy to setup, easy to style, and works as expected with HTML, AJAX, iframes, inline Javascript, and a lot more.
Cycle2
For image rotators and slideshow setups, Cycle2 is a flexible, lightweight solution. It has all of the usual features you would expect: responsive, direction navigation and pagers, various transition effects, swipe gesture support, and much more. One of biggest reasons I use it is that the script does not rely on it's own CSS to work. Other sliders I've used come as a package that includes a CSS file with styles required for the slider to function. The functionality of the slider is built into the script. Using the correct markup, you style the slider to fit the design. Then, when you add the script, it typically works. If the default markup doesn't work for your setup, you can define your own markup pattern. It also has a very valuable destroy command. In rare occasions it is necessary to remove the slider functionality, maybe based on a screen width. The destroy command makes this easy.
Placeholder
Older versions of IE (9 and below) do not support the placeholder attribute for form elements. The majority of the sites I build have been designed with placeholders instead of labels. Showing the labels in older browsers often cause design problems, so this plugin prevents that issue. Include the script, add the placeholder attribute to your form elements, and then call the function on document ready with the $('input, textarea').placeholder();.
Tweet Linker
This is a simple script written by former NMC employee Tyler Pearson. When creating a list of recent tweets, you'll quickly notice that the content in the JSON provided by twitter does not include the link markup. This script finds all of the URLs, handles, and hashtags, and links them appropriately.
FitVids
Services like YouTube, Vimeo, and others make it very easy for users to embed videos inline with their content. But if you've ever tried to embed one of these into a responsive content area, you'll notice that the embed code (iframe option) is not responsive. The quick and dirty solution is to set the width of iframes to 100%. With this in place, the iframe width will scale, and the video within the iframe will scale, but the height of the iframe remains constant. A while back I found a very helpful technique described here that works to scale the height of the frame as well, but it requires specific wrappers to be applied. Not always possible with rich text editors. FitVids.js takes care of this problem. Simply load the script and instantiate it with $("#thing-with-videos").fitVids(); when the document is ready and your videos will scale beautifully when the container is resized.
Leave the first comment