jQuery Smooth Page Links – $.smoothAnchor()

The jQuery smoothAnchor Function provides you with a lightweight script that can make your in-page anchor links smooth scrolling. There are a few plugins out there which do the same thing but this is my lightweight version and I know it works properly in all the main browsers. So if you after a quick code [...]

Read more

jQuery Convert Text to HTML List – $.stringToList

This is a little jQuery utility function I wrote which simply converts text (ie – a long string) into a HTML list. It has a couple of settings for choosing conversion to Ordered List (OL) or Unordered List (UL). The delimiter for each item in the list is a full stop.

Before

After

jQuery.stringToList()

/*
 * $.stringToList
 * jQuery Function to convert a block of text into a html list.
 * @requires: full stops after each sentence to match list elements
 * @param: list type: ul or ol
 * Usage: $('#inclusions').stringToList('ul');
 * Author: Sam Deering
 */
$.fn.extend(
{
	stringToList: function(listType)
	{
		var sentenceRegex = /[a-z0-9,'‘\- ]+/igm, htmlList = '<'+listType+'>';
		$.each($(this).html().match(sentenceRegex), function(i, v)
		{
			/* Remove blank elements */
			if (v && (/[a-z0-9]+/igm.test(v)) && v != 'strong')
			{
				htmlList += '<li>' + v + '</li>';
			}
		});
		htmlList += '</'+listType+'>';
		$(this).html(htmlList);
	}
});

/* Convert text to html list */
$('#inclusions').stringToList('ul');

Custom Namespace Version

/*
 * $.stringToList - jQuery Function to convert a block of text into a html list.
 * @requires: full stops after each sentence to match list elements
 * @param: list type: ul or ol
 * Usage: FC.UTIL.stringToList($('#inclusions'),'ul');
 */
stringToList: function(textContainer,listType)
{
	var sentenceRegex = /[a-z0-9,'‘\- ]+/igm, htmlList = '<'+listType+'>';
	$.each(textContainer.html().match(sentenceRegex), function(i, v)
	{
		/* Remove blank elements */
		if (v && (/[a-z0-9]+/igm.test(v)) && v != 'strong')
		{
			htmlList += '<li>' + v + '</li>';
		}
	});
	htmlList += '</'+listType+'>';
	textContainer.html(htmlList);
}

/* Convert text to html list */
NAMESPACE.stringToList('#inclusions','ul');

Read more

Inserting an Element then Cloning it using jQuery

This is an example of using the jQuery.clone() function which some of you might not have heard of. It’s pretty simple to use and basically just copies the element you specify. In this example it creates 2 identical sidebars one on left and one on right saying “WEBPAGE-PREVIEW”. Which could be handy for showing clients that the webpage is only a preview. Changing CSS with jQuery is pretty easy to do!

Webpage Preview Example

The code

Just run the code in Firebug on jQuery4u homepage to see it in action.

(function ($) {
	var containerHTML = '<div class="preview">W E B P A G E - P R E V I E W</div>';
	$('body').prepend(containerHTML);
	$('.preview').css(
	{
		'background-color': '#DDDDDD','position': 'fixed','font-family': 'times new roman','text-wrap': 'suppress','padding': '10px','font-size': '20px','width': '20px','height': '100%','z-index': '1000','font-weight': 'bold','opacity': '0.7','vertical-align': 'middle','border': '5px solid red'
	});
	/* clone to right */
	$('.preview').clone().css({'position': 'fixed', 'right': '0'}).prependTo('body');
})(jQuery);

Read more

jQuery Function to All Clear Form Data

Pretty useful jQuery Function to clear all form data which I found on Karl Swedberg’s website. It simply removes all data from the form including text inputs, select boxes, radio buttons, checkboxes etc… There are two versions and the second version is probably more useful as you can apply it directly to the DOM element as a jQuery function.

function clearForm(form) {
  // iterate over all of the inputs for the form
  // element that was passed in
  $(':input', form).each(function() {
    var type = this.type;
    var tag = this.tagName.toLowerCase(); // normalize case
    // it's ok to reset the value attr of text inputs,
    // password inputs, and textareas
    if (type == 'text' || type == 'password' || tag == 'textarea')
      this.value = "";
    // checkboxes and radios need to have their checked state cleared
    // but should *not* have their 'value' changed
    else if (type == 'checkbox' || type == 'radio')
      this.checked = false;
    // select elements need to have their 'selectedIndex' property set to -1
    // (this works for both single and multiple select elements)
    else if (tag == 'select')
      this.selectedIndex = -1;
  });
};

jQuery Element Function

$.fn.clearForm = function() {
  return this.each(function() {
    var type = this.type, tag = this.tagName.toLowerCase();
    if (tag == 'form')
      return $(':input',this).clearForm();
    if (type == 'text' || type == 'password' || tag == 'textarea')
      this.value = '';
    else if (type == 'checkbox' || type == 'radio')
      this.checked = false;
    else if (tag == 'select')
      this.selectedIndex = -1;
  });
};
//usage
$('#flightsSearchForm').clearForm();

Source

Read more

5 Different Ways to Declare Functions in jQuery

Introduction

Choosing which way to declare a JavaScript function can be confusing for beginners as there are several different ways to declare functions using JavaScript/jQuery. I’ll try to explain the benefits of each one and how and why you might use them when writing your awesome jQuery code.

1. The basic JavaScript function

This is the simplest way to declare a function in JavaScript. Say for example, we want to write a simple function called multiply(x,y) which simply takes in two parameters x and y, does a simple x times y and returns the value. Here are a few ways you might go about doing exactly this.

function multiply(x,y) {
     return (x * y);
}
console.log(multiply(2,2));
//output: 4

If you wanted a quick function to test something then maybe that’s the only occasion you would use this. It’s not good coding and doesn’t promote code reuse.

2. JavaScript functions for get/set

If you need a private utility for getting/setting/deleting model values then you can declare a function as a variable like this. This could be useful for assigning a variable upon declaration calculated by a function.

var multiply = function(x,y) {
     return (x * y);
}
console.log(multiply(2,2));
//output: 4

//The same function but with a self execution to set the value of the variable:
var multiply = function(x,y) {
     return (x * y);
}(2,2);
console.log(multiply);
//output: 4

3. Create your own jQuery function

This is an awesome way to declare functions that can be used just like your regular jQuery functions, on your DOM elements! Rememeber jQuery.fn is just an alias for jQuery.prototype (which just saves us time when coding such jQuery.fn.init.prototype = jQuery.fn = $.fn as such).

jQuery.fn.extend({
    zigzag: function () {
        var text = $(this).text();
        var zigzagText = '';
        var toggle = true; //lower/uppper toggle
			$.each(text, function(i, nome) {
				zigzagText += (toggle) ? nome.toUpperCase() : nome.toLowerCase();
				toggle = (toggle) ? false : true;
			});
	return zigzagText;
    }
});

console.log($('#tagline').zigzag());
//output: #1 jQuErY BlOg fOr yOuR DaIlY NeWs, PlUgInS, tUtS/TiPs & cOdE SnIpPeTs.

//chained example
console.log($('#tagline').zigzag().toLowerCase());
//output: #1 jquery blog for your daily news, plugins, tuts/tips & code snippets.

Don’t forget to return the element so that you can chain jQuery functions together.

4. Extend Existing jQuery Functions

(or which either extend existing jQuery functions with extra functionality or creating your own functions that can be called using the jQuery namespace (usually, we use the $ sign to represent the jQuery namespace). In this example the $.fn.each function has been modified with custom behaviour.

(function($){

// maintain a to the existing function
var oldEachFn = $.fn.each;

$.fn.each = function() {

    // original behavior - use function.apply to preserve context
    var ret = oldEachFn.apply(this, arguments);

	// add custom behaviour
	try {
		// change background colour
		$(this).css({'background-color':'orange'});

		// add a message
		var msg = '<span style="float:left;font-size:24px;font-weight:bold">Danger high voltage!</span>';
		$(this).prepend(msg);
	}
	catch(e)
	{
		console.log(e);
	}

    // preserve return value (probably the jQuery object...)
    return ret;
}

// run the $.fn.each function as normal
$('p').each(function(i,v)
{
    console.log(i,v);
});
//output: all paragrahs on page now appear with orange background and high voltage!

})(jQuery);

5. Functions in custom namespaces

If your writing functions in a custom namespace you must declare them in this way. Extra functions can be added to the namespace you just need to add a comma after each one (except the last one!). If your unsure about namespacing see jQuery Function Namespacing in Plain English

JQUERY4U = {
	multiply: function(x,y) {
		return (x * y);
	}
}
//function call
JQUERY4U.multiply(2,2);

Conclusion

Knowing when and how to declare different types of JavaScript/jQuery functions is definately something any good js developer should know inside out.

Read more

5 Different Ways to Declare Functions in jQuery

Introduction

Choosing which way to declare a JavaScript function can be confusing for beginners as there are several different ways to declare functions using JavaScript/jQuery. I’ll try to explain the benefits of each one and how and why you might use them when writing your awesome jQuery code.

1. The basic JavaScript function

This is the simplest way to declare a function in JavaScript. Say for example, we want to write a simple function called multiply(x,y) which simply takes in two parameters x and y, does a simple x times y and returns the value. Here are a few ways you might go about doing exactly this.

function multiply(x,y) {
     return (x * y);
}
console.log(multiply(2,2));
//output: 4

If you wanted a quick function to test something then maybe that’s the only occasion you would use this. It’s not good coding and doesn’t promote code reuse.

2. JavaScript functions for get/set

If you need a private utility for getting/setting/deleting model values then you can declare a function as a variable like this. This could be useful for assigning a variable upon declaration calculated by a function.

var multiply = function(x,y) {
     return (x * y);
}
console.log(multiply(2,2));
//output: 4

//The same function but with a self execution to set the value of the variable:
var multiply = function(x,y) {
     return (x * y);
}(2,2);
console.log(multiply);
//output: 4

3. Create your own jQuery function

This is an awesome way to declare functions that can be used just like your regular jQuery functions, on your DOM elements! Rememeber jQuery.fn is just an alias for jQuery.prototype (which just saves us time when coding such jQuery.fn.init.prototype = jQuery.fn = $.fn as such).

jQuery.fn.extend({
    zigzag: function () {
        var text = $(this).text();
        var zigzagText = '';
        var toggle = true; //lower/uppper toggle
			$.each(text, function(i, nome) {
				zigzagText += (toggle) ? nome.toUpperCase() : nome.toLowerCase();
				toggle = (toggle) ? false : true;
			});
	return zigzagText;
    }
});

console.log($('#tagline').zigzag());
//output: #1 jQuErY BlOg fOr yOuR DaIlY NeWs, PlUgInS, tUtS/TiPs & cOdE SnIpPeTs.

//chained example
console.log($('#tagline').zigzag().toLowerCase());
//output: #1 jquery blog for your daily news, plugins, tuts/tips & code snippets.

Don’t forget to return the element so that you can chain jQuery functions together.

4. Extend Existing jQuery Functions

(or which either extend existing jQuery functions with extra functionality or creating your own functions that can be called using the jQuery namespace (usually, we use the $ sign to represent the jQuery namespace). In this example the $.fn.each function has been modified with custom behaviour.

(function($){

// maintain a to the existing function
var oldEachFn = $.fn.each;

$.fn.each = function() {

    // original behavior - use function.apply to preserve context
    var ret = oldEachFn.apply(this, arguments);

	// add custom behaviour
	try {
		// change background colour
		$(this).css({'background-color':'orange'});

		// add a message
		var msg = '<span style="float:left;font-size:24px;font-weight:bold">Danger high voltage!</span>';
		$(this).prepend(msg);
	}
	catch(e)
	{
		console.log(e);
	}

    // preserve return value (probably the jQuery object...)
    return ret;
}

// run the $.fn.each function as normal
$('p').each(function(i,v)
{
    console.log(i,v);
});
//output: all paragrahs on page now appear with orange background and high voltage!

})(jQuery);

5. Functions in custom namespaces

If your writing functions in a custom namespace you must declare them in this way. Extra functions can be added to the namespace you just need to add a comma after each one (except the last one!). If your unsure about namespacing see jQuery Function Namespacing in Plain English

JQUERY4U = {
	multiply: function(x,y) {
		return (x * y);
	}
}
//function call
JQUERY4U.multiply(2,2);

Conclusion

Knowing when and how to declare different types of JavaScript/jQuery functions is definately something any good js developer should know inside out.

Read more

jQuery Check if Toggle is Open/Closed

Simple jQuery code snippets to check if toggle is open or closed. Basically, the current state can be determined by using this test:

$(this).is(":hidden").

Another way, as shown in the following example, is by using the data attribute to append a state of ‘open’ or ‘closed’ to the toggle button like so:

if (this.data('state') === 'closed') {
    $('.' + toggleBtnClass).innerText(moreText);
    _this.data('state', 'open'); /*add data to store state*/
} else {
    $('.' + toggleBtnClass).innerText(lessText);
    _this.data('state', 'closed'); /*add data to store state*/
}

To see this in action, check out the jQuery.autoToggles plugin.

Read more

jQuery Hover Highlight Script

Hi guys, I’ve written this jQuery script which highlights any element on the page (by changing the background colour). It’s a clever little script which will save you lots of time if you have many elements that require mouse hover events.

Features

• Specify a background colour for hover when mouse hovers element
• Retains background colour when mouse leaves element

Usage

<script type="text/javascript">
$(document).ready(function() {
	/*highlight background on hover*/
	$('.displayItem').hoverHighlight('#E0E0E0');
});
</script>

Demo

The following divs have been given class=”displayItem” and hover with an orange background.

Transparent backgrounds (only in FireFox)

Coloured backgrounds (all browsers)

jQuery.hoverHighlight()

I’ve tested the script on the different browsers and fixed IE6 & IE7 bug (they don’t support the jQuery.data method so I’ve coded in a default value for those browsers that don’t support it). So now it works on all browsers.

You’ll also need this script to convert the colours from RGB to Hex.

/*
 *	Create Hover Backgound Highlight for any element.
 *	Retains original background-color.
 */
$.fn.extend({
	hoverHighlight: function (colour)
	{
		$(this).live('mouseenter', function()
		{
			/*save original background colour*/
			if ($(this).css('background-color') && $(this).css('background-color') !== 'transparent')
			{
				$(this).data('bgColour',rgb2hex($(this).css('background-color')));
			}
			else {
				$(this).data('bgColour','transparent');
			}
			$(this).css('background-color',colour);
		}).live('mouseleave', function()
		{
			var defaultBg = 'transparent';
			var changeBg = ($(this).data('bgColour') !== null) ? $(this).data('bgColour') : defaultBg;
			$(this).css('background-color',changeBg);
		});
		return this; /*enable jQuery chaining*/
	}
});

Full Code For Demo Above

<script type="text/javascript">
(function($)
{
	$.fn.extend({
		hoverHighlight: function (colour)
		{
			$(this).live('mouseenter', function()
			{
				/*save original background colour*/
				if ($(this).css('background-color') && $(this).css('background-color') !== 'transparent')
				{
					$(this).data('bgColour',rgb2hex($(this).css('background-color')));
				}
				else {
					$(this).data('bgColour','transparent');
				}
				$(this).css('background-color',colour);
			}).live('mouseleave', function()
			{
				var defaultBg = 'transparent';
				var changeBg = ($(this).data('bgColour') !== null) ? $(this).data('bgColour') : defaultBg;
				$(this).css('background-color',changeBg);
			});
			return this; /*enable jQuery chaining*/
		}
	});

	function rgb2hex(rgb)
	{
		 rgb =  rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
		  return "#" +
		  ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
		  ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
		  ("0" + parseInt(rgb[3],10).toString(16)).slice(-2);
	}

	$(document).ready(function()
	{
		/* Transparent backgrounds */
		/* highlight background grey on hover */
		$('.displayItem1').hoverHighlight('#C1BDBD');
		/* highlight background red on hover */
		$('.displayItem2').hoverHighlight('#F40E0E');
		/* highlight background orange on hover */
		$('.displayItem3').hoverHighlight('#FFB200');

		/* Coloured backgrounds */
		/* highlight background pink on hover */
		$('.displayItem4').hoverHighlight('#EF9BE0');
		/* highlight background yellow on hover */
		$('.displayItem5').hoverHighlight('#FCEB00');
		/* highlight background green on hover */
		$('.displayItem6').hoverHighlight('#1DE020');
	}); 

})(jQuery);
</script>

Read more