JavaScript evolves at a really fast pace. With such a big wave of fresh JavaScript technology splashing the web everyday it’s a daunting task to keep up to date with all of it. jQuery is the preferred library due to its undeniable popularity, although some scripts are written in pure JavaScript.
In this article we are going to cover 10 useful scripts that will save you some time when solving common problems. Most of these snippets are good to copy & paste but feel free to analyze, strip, mix, share, or adapt them to your own workflow.
10 Useful JavaScript Snippets
1. Maximum width or height in a set of elements
This script is very useful to make equal height columns or equal width rows easily:
var getMaxHeight = function ($elms) { var maxHeight = 0; $elms.each(function () { // In some cases you may want to use outerHeight() instead var height = $(this).height(); if (height > maxHeight) { maxHeight = height; } }); return maxHeight; };
Usage:
$(elements).height( getMaxHeight($(elements)) );
To get the maximum width, replace all occurrences of height
and Height
with width
and Width
respectively.
Demo: Equal height columns
2. Validating a date effectively
The date library in JavaScript is often too simple and usually not enough for advanced date formatting. Although there are many JS libraries that make working with dates much easier, sometimes you just want something simple that validates a date from a string. In that case you can use the following script. It lets you validate a date with any delimiter character and 4 digit year.
function isValidDate(value, userFormat) { // Set default format if format is not provided userFormat = userFormat || 'mm/dd/yyyy'; // Find custom delimiter by excluding // month, day and year characters var delimiter = /[^mdy]/.exec(userFormat)[0]; // Create an array with month, day and year // so we know the format order by index var theFormat = userFormat.split(delimiter); // Create array from user date var theDate = value.split(delimiter); function isDate(date, format) { var m, d, y, i = 0, len = format.length, f; for (i; i < len; i++) { f = format[i]; if (/m/.test(f)) m = date[i]; if (/d/.test(f)) d = date[i]; if (/y/.test(f)) y = date[i]; } return ( m > 0 && m < 13 && y && y.length === 4 && d > 0 && // Check if it's a valid day of the month d <= (new Date(y, m, 0)).getDate() ); } return isDate(theDate, theFormat); }
Usage:
The following will return false
because November doesn’t have 31 days.
isValidDate('dd-mm-yyyy', '31/11/2012')
Demo: Validating a date input
3. Setting breakpoints for responsive design
This utility is a simple approach to set width breakpoints when working on responsive designs. It’s a quick way to relate CSS media queries in your JavaScript code as you go.
function isBreakPoint(bp) { // The breakpoints that you set in your css var bps = [320, 480, 768, 1024]; var w = $(window).width(); var min, max; for (var i = 0, l = bps.length; i < l; i++) { if (bps[i] === bp) { min = bps[i-1] || 0; max = bps[i]; break; } } return w > min && w <= max; }
Usage:
if ( isBreakPoint(320) ) { // breakpoint at 320 or less } if ( isBreakPoint(480) ) { // breakpoint between 320 and 480 } …
The following demo shows the script in action with some CSS media queries. When a box is clicked it will alert the device that matches the current window width. As the window is resized, the CSS media queries will change the color of the boxes and the JS breakpoints will make sure the correct device is alerted. It’s a very simple example but try to imagine the possibilities.
Demo: Responsive breakpoints with media queries
4. Highlighting text
There are many jQuery plugins to highlight text but I find this technique powerful, easy to implement and customize and it can work without any libraries, just plain JavaScript. The script returns the original text with the terms wrapped in a tag so they can be styled with CSS.
function highlight(text, words, tag) { // Default tag if no tag is provided tag = tag || 'span'; var i, len = words.length, re; for (i = 0; i < len; i++) { // Global regex to highlight all matches re = new RegExp(words[i], 'g'); if (re.test(text)) { text = text.replace(re, '<'+ tag +' class="highlight">$&</'+ tag +'>'); } } return text; }
You may also want to unhighlight text.
function unhighlight(text, tag) { // Default tag if no tag is provided tag = tag || 'span'; var re = new RegExp('(<'+ tag +'.+?>|<\/'+ tag +'>)', 'g'); return text.replace(re, ''); }
These two snippets would make a great start to build your own text highlighting plugin.
Usage:
$('p').html( highlight( $('p').html(), // the text ['foo', 'bar', 'baz', 'hello world'], // list of words or phrases to highlight 'strong' // custom tag ));
Demo: Highlighting text in a paragraph
5. Animated text effects
Simple yet powerful script to animate text properties. It yields some intersting results when combined with CSS3 transitions. This snippet is provided as a jQuery plugin for ease of use:
$.fn.animateText = function(delay, klass) { var text = this.text(); var letters = text.split(''); return this.each(function(){ var $this = $(this); $this.html(text.replace(/./g, '<span class="letter">$&</span>')); $this.find('span.letter').each(function(i, el){ setTimeout(function(){ $(el).addClass(klass); }, delay * i); }); }); };
Usage:
Create a class in CSS with some styles and run the plugin on an element that contains some raw text, like a paragraph.
$('p').animateText(15, 'foo');
Demo: Typewriter and highlighter effects with CSS3 transitions
6. Fading elements one by one
jQuery plugin to fade a collection of elements one by one with custom delay:
$.fn.fadeAll = function (ops) { var o = $.extend({ delay: 500, // delay between elements speed: 500, // animation speed ease: 'swing' // other require easing plugin }, ops); var $el = this; for (var i=0, d=0, l=$el.length; i<l; i++, d+=o.delay) { $el.eq(i).delay(d).fadeIn(o.speed, o.ease); } return $el; }
Usage:
$(elements).fadeAll({ delay: 300, speed: 300 });
Demo: Fading images one by one
7. Counting clicks
Sometimes you need to know how many times the user clicks on an element. The most common solution is to create a counter as a global variable but with jQuery you can prevent polluting the global scope by using data()
to store the counter.
$(element) .data('counter', 0) // begin counter at zero .click(function() { var counter = $(this).data('counter'); // get $(this).data('counter', counter + 1); // set // do something else... });
Demo: Counting clicks on a button
8. Embedding Youtube videos from links
Useful script to create embedded Youtube videos from links with custom parameters. It works with mostly every Youtube link format since it uses a pretty forgiving regex, but it may not work for every single case. This script also fixes the tedious “super z-index
” issue that you may have experienced when embedding Youtube videos.
function embedYoutube(link, ops) { var o = $.extend({ width: 480, height: 320, params: '' }, ops); var id = /\?v\=(\w+)/.exec(link)[1]; return '<iframe style="display: block;"'+ ' class="youtube-video" type="text/html"'+ ' width="' + o.width + '" height="' + o.height + ' "src="http://www.youtube.com/embed/' + id + '?' + o.params + '&wmode=transparent" frameborder="0" />'; }
Usage:
Check out the Youtube API parameters for more info on params
.
embedYoutube( 'https://www.youtube.com/watch?v=JaAWdljhD5o', { params: 'theme=light&fs=0' } );
Demo: Embedded Youtube videos from links
9. Reducing text by word limit
This script is similar to the excerpt
function in WordPress. It allows you to truncate a string to a particular number of words and it adds ellipsis if necessary. It works with text that may have other inline tags such as strong
or em
or links.
function excerpt(str, nwords) { var words = str.split(' '); words.splice(nwords, words.length-1); return words.join(' ') + (words.length !== str.split(' ').length ? '…' : ''); }
Demo: Easy “read more” with inline tags
10. Creating dynamic menus
Create any type of menu dynamically, like ordered lists, unordered lists, select dropdowns… It’s a very simple script with lots of potential.
function makeMenu(items, tags) { tags = tags || ['ul', 'li']; // default tags var parent = tags[0]; var child = tags[1]; var item, value = ''; for (var i = 0, l = items.length; i < l; i++) { item = items[i]; // Separate item and value if value is present if (/:/.test(item)) { item = items[i].split(':')[0]; value = items[i].split(':')[1]; } // Wrap the item in tag items[i] = '<'+ child +' '+ (value && 'value="'+value+'"') +'>'+ // add value if present item +'</'+ child +'>'; } return '<'+ parent +'>'+ items.join('') +'</'+ parent +'>'; }
Usage:
// Dropdown select month makeMenu( ['January:JAN', 'February:FEB', 'March:MAR'], // item:value ['select', 'option'] ); // List of groceries makeMenu( ['Carrots', 'Lettuce', 'Tomatos', 'Milk'], ['ol', 'li'] );
Demo: Creating many types of menus
Conclusion
These snippets will hopefully bring something new based on experience and hours of fiddling that hasn’t been shared before, at least in this form and shape. They can be real timesavers in some situations or a great start for your next awesome plugin.
If you find this useful or want to share your own twist, please leave a comment below.