Tony Thomas » jquery

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

UPDATE II

I just updated the theme of this site so:

It uses even less JavaScript (all animations and transformations are done w/ CSS3 tranforms)
It’s HTML5

More on both those points in a post soon. The upshot is that this post refers to a past theme and may be confusing.

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:

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