Tony Thomas » JavaScript

Baseline WordPress Theme Version 1.0.2

admin — Mon, 22 Mar 2010 17:34:43 +0000

I’ve uploaded a new version of the Baseline theme for WordPress development. The only change this time around is that I’m using wp_enqueue_script() to include WordPress’ existing copy of JQuery. (Hat tip to Chris Coyier.) This seems like a significant enough change to merit a small version bump.

I used the Baseline theme as a launching pad for this website. At least for me, it serves as a good starting point when you begin developing a brand new theme.

If you find this useful, you might be interested in checking out Jeff Star’s functions.php template.Similar Posts:

No Flash Required

admin — Sat, 20 Mar 2010 17:30:30 +0000

I just added a pretty sweet bit of eye candy to my nav menu using strictly CSS & JQuery. The method is here. The code is here.

You do need to have a either a webKit or Mozilla browser for it to work properly. The point is that there are fewer and fewer things that Flash can do that can’t be done with HTML, JavaScript and CSS. In fact, just about every single bit of animation I’ve had done in Flash over the last couple of years could be recreated with JQuery & CSS3.

UPDATE

Since I couldn’t get the z-index to function properly in Internet Explorer, I used JQuery’s .browser property so the function only runs in supported browsers–namely, Mozilla or WebKit. The function actually degraded fairly well, except for Internet Explorer’s buggy handling of z-index. For reference, I’ve included my version of the plug-in because it has this and other subtle variations.

(function($) { 
	if ($.browser.webkit || $.browser.mozilla) {

		$.fn.spasticNav = function(options) {

			options = $.extend({
				overlap : 2,
				speed : 500,
				reset : 1500,
				color : '#BDD2FF',
				easing : 'easeOutExpo'
			}, options);

			return this.each(function() {

			 	var nav = $(this),
			 		currentPageItem = $('.current_page_item', nav),
			 		blob,
			 		reset;

			 	$('').css({
			 		width : currentPageItem.outerWidth(),
			 		height : currentPageItem.outerHeight() + options.overlap,
			 		left : currentPageItem.position().left,
			 		top : currentPageItem.position().top - options.overlap / 2,
			 		backgroundColor : options.color
			 	}).appendTo(this);

				$('.current_page_item a').css('z-index', 1000);

			 	blob = $('#blob', nav);

				$('li:not(#blob)', nav).hover(function() {
					// mouse over
					clearTimeout(reset);
					blob.animate(
						{
							left : $(this).position().left,
							width : $(this).width()
						},
						{
							duration : options.speed,
							easing : options.easing,
							queue : false
						}
					);
				}, function() {
					// mouse out
					reset = setTimeout(function() {
						blob.animate({
							width : currentPageItem.outerWidth(),
							left : currentPageItem.position().left
						}, options.speed)
					}, options.reset);

				});

			}); // end each

		};

	}

})(jQuery);

Similar Posts:

Display Form Fields Based on Selection Using JQuery

admin — Mon, 15 Mar 2010 02:59:52 +0000

This is a simple method of showing and hiding form elements based on the user’s selection. It’s based on this article with a couple of very minor changes. (Dare I say, improvements?) I’m going to assume you’ve already included the JQuery library so I won’t cover that here. I want to go straight to the code. (View the example page here.)

First, the form:


	
		Questionnaire
		
			Choose 1 to make the next select list appear.
			
		
		
			
				Select "Yes" to make the next option appear.
				
			
		
		 
			
				This is the last question.

Now make sure your “hide” css class is hidden:

.hide
{

	display:none;

}

Now with the wonderful elegance of JQuery, we’ll tell the browser to display the hidden divs based on the user’s selection:

$(document).ready(function(){
	$("#select1").change(function(){

		if ($(this).val() == "1" ) {

			$("#hide1").slideDown("fast"); //Slide Down Effect

		} else {

			$("#hide1").slideUp("fast");	//Slide Up Effect

		}
	});

	$("#select2").change(function(){

		if ($(this).val() == "1" ) {

			$("#hide2").slideDown("fast"); //Slide Down Effect

		} else {

			$("#hide2").slideUp("fast");	//Slide Up Effect

		}
	});
});

Let’s look at what’s happening here. First, we have a form with select boxes with ids “select1″, “select2″ and “select3″. The last two are hidden by enclosing them in a div with our “hide” class. (Incidentally, Blueprint provides a “hide” class for you if you use that framework.)

Next we tell JQuery that as soon as “select1″ is changed, we need to evaluate the new value. In this case, if the new value is “1″, we want to display the div with the id “hide1″ using JQuery’s slideDown effect. We do this with JQuery’s change event.

$("#select1").change(function(){ // when #select1 changes

		if ($(this).val() == "1" ) { // see if the new value is "1"

			$(".hide1").slideDown("fast"); // if it is "1", display the .hide1 div with the slideDown effect

		} else {

			$(".hide1").slideUp("fast");	//otherwise, hide it with the slideUp effect

		}
	});

Once “select2″ is displayed, we can evaluate it to see if we need to display “select3″ which is in a div with a “hide” class and “hide2″ id.

$("#select2").change(function(){ // once select2 is changed

		if ($(this).val() == "1" ) { // see if the new value is "1"

			$(".hide2").slideDown("fast"); // if it is, display the hide2 div using slideDown

		} else {

			$(".hide2").slideUp("fast");	// otherwise hide it using slideUp

		}
	});

Remarkably simple really. Review the working example and code here.

Update (March 15, 2010)

You also could show/hide a single form element by id rather than enclose them in a div. I enclosed them in a div 1.) so I could hide the label and 2.) because in my application where I use this solution, I’m actually hiding a whole group of fields.

Resources

Similar Posts:

Introducing the Baseline Development WordPress Theme

admin — Tue, 09 Feb 2010 01:53:16 +0000

I’ve come up with some habits that I’ve developed from building themes for WordPress over the years. One, is to start with a nearly blank style sheet. I also like to hook in several JavaScript libraries and CSS frameworks from the start to take advantage of things like JQuery, Blueprint’s CSS reset and Superfish menus.

I’ve decided to build and release an XHTML 1.0 version and release it as a springboard for others who may want to take advantage of the same sets of tools. The theme isn’t much to look at (that’s the point), but it includes:

Blueprint CSS framework
960 Grid System
JQuery 1.4.0
JQuery UI 1.7.1
Superfish JQuery menu (with HoverIntent.js)
IE8 JavaScript Library
Widget-enabled sidebar
Test Content file from WP-Candy
Valid XHTML 1.0

More information here.

If you want to use all of these tools, you’re all set. If you want to use a few, it’s just a matter of removing them from header.php.

First off, I really like Blueprint’s browser reset, so I wanted to include that here. I also like the flexibility the 960 Grid System offers in terms of column width. As a result, I’ve included them both.

If you don’t wish to use any of these, simply remove them from header.php. Next up is the Superfish CSS:

You must keep this if you’re using Superfish. If you’re not going to use Superfish, you should remove these lines too:

Next is Blueprint’s Internet Explorer CSS reset:

I’ve also had good luck using the IE8 JavaScript library, so that’s included next:

Then JQuery and JQuery UI libraries:

That’s it. All the frameworks and libraries are loaded. If you don’t think you’ll need any one of them, you can just take them out. WARNING: The layout of the columns does rely on the 960 Grid System CSS file. If you take that out of the head the columns won’t work and you’ll break the layout.

Otherwise this should give you a good start that will allow you to take advantage of tons of cool JQuery stuff and leverages a very popular CSS Grid System for laying out columns. It should be easy to modify this theme to fit your own design.

Download the theme here.Similar Posts:

Getting Blueprint CSS & JavaScript Libraries Into Your CakePHP Layout

admin — Wed, 26 Nov 2008 19:55:58 +0000

Updated 12/3/2008

The other day I wrote about getting the Blueprint CSS framework into your WordPress theme. If you’re developing in CakePHP, it’s even easier to link multiple style sheets and JavaScript libraries to your layout file.


$css = array('blueprint/screen', 'blueprint/ie', 'style');

$jslibraries = array('prototype', 'scriptaculous', 'jquery');

echo $html->css('blueprint/print', 'stylesheet', 'media="print"');

echo $html->css($css, 'stylesheet', 'media=”screen, projection”');

echo $javascript->link($jslibraries);

?>
Let’s take these one at a time.
$css = array('blueprint/screen', 'blueprint/ie', 'style');
CakePHP’s html helper will load any css file you specify. First, make sure the css files are in app/webroot/css. Then put any css files you want to link to your layout in an array like I have above. You might have noticed that I didn’t include print in my array. That’s because we want to add an media=”print” as a separate attribute that the other style sheets won’t have.
Once they’re loaded into your array, simply put echo $html->css($css); in the head of your layout. The output will be:






We still haven’t linked our print style sheet. Make sure you link the print style sheet above the others so they override it. We can add media="print" by putting this into our layout head:
echo $html->css('blueprint/print', 'stylesheet', 'media="print"');
So now:
$css = array('blueprint/screen', 'blueprint/ie', 'style');

echo $html->css('blueprint/print', 'stylesheet', 'media="print"');

echo $html->css($css, 'stylesheet', 'media=”screen, projection”');
Results in:







Two things to note. In $html->css($path, $attributes), the first argument is the path from app/webroot/css. The second argument is html attributes.
Linking JavaScript libraries is very similar.
$jslibraries = array('prototype', 'scriptaculous', 'jquery');
This will link to prototype.js, scriptaculous.js and jquery.js respectively as long as there in app/webroot/js.
Put echo $javascript->link($jslibraries); into the head of your layout and you’re done. You have all three JavaScript libraries at your disposal.
Other good resources:

CakePHP Core Helpers
Developing With CakePHP
CakePHP API JavaScript link Helper
CakePHP API CSS link Helper

Similar Posts:

Getting Blueprint CSS & JavaScript Libraries Into Your CakePHP Layout
Incorporating Blueprint CSS Into Your New WordPress Theme
Introducing the Baseline Development WordPress Theme
Blueprint CSS Readme File
Baseline Theme Version 1.0.1