Posts tagged jQuery

jQuery Tablesorter helper function for WordPress

In one of my projects, I converted WordPress into a reporting engine, which is used at 20 car dealerships to track Internet sales.  During development, I found that I was writing the same code over and over again for the jQuery Tablesorter plugin, which allows you to sort tables using a simple JavaScript call.

First, I would have to queue the script file, then add the appropriate JavaScript. To ensure the JavaScript was executed at the right time, I had to create a function to use it with add_action().  I found this to be tedious and unnecessary, and wrote a simple helper function to remedy this.  The following function was added to /wp-admin/includes/template.php, but if you use it, it will most likely go in a plugin or theme include.  This will prevent it from being overwritten during WordPress upgrades. Read the rest of this entry »

Share

Simple handling of jQuery dependencies with Zend Framework 1.9.x

I have a lot of experience with WordPress development, and I’ve grown to love the way JavaScript dependencies are handled in that particular application.  In WordPress, all JavaScript dependencies are defined in /wp-includes/script-loader.php.  To ensure jQuery loads before any jQuery-dependent scripts, you just use $script->add() and reference the jQuery library ID.  Easy as pie. Read the rest of this entry »

Share

Create a slide down menu with toggle button using jQuery

Recently, I have come to find myself recreating the same code over and over again for jQuery slide down menus equipped with one button to toggle display. There’s nothing complex about this code, but it will give beginners the gist of how to do accomplish the task. For this example, we will use jQuery 1.3.2, delivered from Google’s CDN.

On a side note, using a CDN like Google’s can lessen the load on your server, and will actually help reduce overall bandwidth usage on the web as whole. If a visitor has already downloaded the jQuery library from Google’s CDN, the majority of the time they won’t need to do it a second time if you implement this strategy.

The Google CDN address for jQuery 1.3.2 can be implemented using the following code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

HTML:

<input type="button" id="hidden_menu_button" value="Toggle Menu" />
<div id="hidden_menu" style="display: none;">
	<label><input type="checkbox" />Checkbox #1</label>
	<label><input type="checkbox" />Checkbox #2</label>
</div>

JavaScript:

<script type="text/javascript">
(function($) {
	$("#hidden_menu_button").click(function() {
		if ( $("#hidden_menu").is(":hidden") ) {
			$("#hidden_menu").slideDown("normal");
		} else {
			$("#hidden_menu").slideUp("normal");
		}
	});
})(jQuery);
</script>

View Demo

Share