Web Design   

Development

Forward/Next Script for jQuery Tools Tabs

Make forward and next buttons or links on each tab view. In the rel tags of each button, place the id of the tab that would be next or before in the sequence.

<button rel="#tab1">&nbsp;</button>
<button rel="#tab3">&nbsp;</button>

Then, use this handy little script:

$('.nav_arrow').click(function () {
var nextPage = $(this).attr('rel');
$(nextPage).click();
return false;
});

Effectively, you are telling the forward or next button that if it’s clicked, cause the corresponding tab to be clicked, opening that view.

jQuery Clearfields Plugin

This is not the one mentioned on jQuery.com (http://plugins.jquery.com/project/clearField). However, this may have been inspired by it. I can’t remember where this plugin came from, to be totally honest. It was possibly written by my ex-coworker Nathan. Any-who, if the author steps forward, I will be glad to attribute it.

It’s easy to implement. Download clearfield.js and link it into your page. Then place the class “clearField” on all your inputs, selects, and textareas. Instantiate the function in your custom javascript page with this:

$('.clearField').clearField();

If you don’t have access to the form element markup, or you are using a framework, a little bit of jQuery can be used to add the necessary classes:

$('input, select').addClass('clearField');

jQuery Striping for Table Rows

A simple script to select, and then add striping to table rows:

$(‘tr:odd td’).css(‘background’,'#yourcolor’);

Get Option Values from a Select

This is an easy way to grab all the option values from any regular html select, and print them to your Firebug console as a comma separated list. (I found this useful when I needed to grab the state names listed on a previous version of a company website.)


var newArray = [];
var list = $('#selectID').find('option');
for(var i = 0; i < list.length; i++) {
newArray[i] = list[i].text;
}
console.log(newArray.join(", "));

Super Easy jQuery Accordion Menu

I created this accordion menu rather on accident. (See my previous post, ). I was actually writing jQuery to make a show/hide question answer list, and realized it would be really easy to turn it into an accordion menu.

Here’s the result:

How to create it:

1. Include the jQuery library in your page with a script tag. Example:

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

This example links directly to the jQuery library hosted on google. You may link to your own copy.

2. Create a new .js document, and add this code:

$(document).ready(function(){
	$("ul.hidden").hide();
	$("a.toggleLink").click(function () {
		$("ul.hidden").not($(this).next("ul:first")).slideUp();
		$(this).next("ul:first").slideToggle("normal");
	});
});

Add this file using the <script> tag.

3. Add this to the body of your page:

<ul id="accordian_menu">

     <li><a href="#" class="toggleLink">Our Company</a>

     <ul class="hidden">

     <li><a href="#">About Us</a></li>

     <li><a href="#">History</a></li>

     </ul>

     </li>

     <li><a href="#" class="toggleLink">Products/Services</a>

     <ul class="hidden">

     <li><a href="#">Custom Web Design</a></li>

     <li><a href="#">Content Management Solutions</a></li>

     <li><a href="#">Website Optimization</a></li>

     <li><a href="#">Email Campaigns</a></li>

     </ul>

     </li>

     <li><a href="#" class="toggleLink">Portfolio</a>

     <ul class="hidden">

     <li><a href="#">Static HTML</a></li>

     <li><a href="#">Wordpress Themes</a></li>

     <li><a href="#">Emails</a></li>

     </ul>

     </li>

     <li><a href="#" class="toggleLink">Contact</a>

     <ul class="hidden">

     <li><a href="#">Phone</a></li>

     <li><a href="#">Email</a></li>

     <li><a href="#">Request a Quote</a></li>

     </ul>

     </li>

</ul>

4. Add these classes to your stylesheet:

a {
	text-decoration: none;
}
a.toggleLink {
	display: block;
	padding: 5px;
	background: #936;
	color: white;
	border-bottom:1px dotted #CC99CC;
	}
ul#accordian_menu {
	margin: 0;
	padding: 0;
	width: 150px;
}
ul#accordian_menu li {
	list-style-type: none;
}
ul#accordian_menu li ul {
	padding-left: 0;
	background: #FFDAEE;
}
ul#accordian_menu li ul li {
}
ul#accordian_menu li ul li a:hover {
	background: white;
}
ul#accordian_menu li ul li a {
	color: #936;
	display: block;
	border-bottom: 1px dotted #C9C;
	padding: 5px;
}

These classes could probably be refined a little, but I kept them pretty specific so they won’t conflict with any similar markup that might be in your page. Feel free to rename or change them to suit your needs.

Take it further:

  • Use divs or paragraphs instead of list items to make a show/hide section of content.
  • If static (non-sliding content) will be wedged anywhere between your sliding elements, you must use the .nextAll() method, instead of .next().

Note: If you’re new to jQuery, you only need to include the $(document).ready(function()) once in your javascript document–wrap it around all of your functions.

« Older Entries

Without ambition one starts nothing. Without work one finishes nothing. The prize will not be sent to you.
--Ralph Waldo Emerson

I'm a web designer and writer based out of Nashville, TN, where I live with my husband, step-daughter, and chihuahua.

moonkatcreations at gmail dot com

Recent Posts