Archive for the ‘JavaScript’ Category


No Flash Required

Saturday, March 20th, 2010

JPEF of the nav menu from anthonygthomas.comI 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. (more…)

Display Form Fields Based on Selection Using JQuery

Sunday, March 14th, 2010

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.) (more…)

Introducing the Baseline Development Wordpress Theme

Monday, February 8th, 2010

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. (more…)

Getting Blueprint CSS & JavaScript Libraries Into Your CakePHP Layout

Wednesday, November 26th, 2008

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.

<?php

$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:
<link rel="stylesheet" type="text/css" href="/app/webroot/css/blueprint/screen.css" />
<link rel="stylesheet" type="text/css" href="/app/webroot/css/blueprint/ie.css" />
<link rel="stylesheet" type="text/css" href="/app/webroot/css/style.css" />

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:

<link rel="stylesheet" type="text/css" href="/cvp-msi/https/app/webroot/css/blueprint/print.css" media="print" />
<link rel="stylesheet" type="text/css" href="/cvp-msi/https/app/webroot/css/blueprint/screen.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="/cvp-msi/https/app/webroot/css/blueprint/ie.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="/cvp-msi/https/app/webroot/css/style.css" media="screen, projection" />

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: