This example will show the steps to take for centering slides in a slideshow using the Cycle plugin. HTML markup in this case is a group of images inside a <div> container. CSS is used to give some style to our slideshow and for centering everything. JavaScript is used to control the transitions of the slides and the animation of the slideshow.

HTML Markup:

<div id="showy">
<img src="/images/runaway-artist.jpg" alt="runaway artist" class="first" />
<img src="/images/darling-kittens.jpg" alt="darling kittens" />
<img src="/images/dog-in-sun.jpg" alt="dog in sun" />
<img src="/images/cat-in-tree.jpg" alt="cat in tree" />
</div>

A basic slideshow might have a few images that are cycled through in sequential fashion with random special effects that bring each photo into view. The JavaScript code that could be used with the jQuery Cycle plugin for such a slideshow could be as follows:

JavaScript:

jQuery(document).ready(function($) {
 $('#showy').cycle({
  fx: 'all',
  speed: 800,
  pause: 2000,
  slideExpr: 'img'
 });
});

So far, we’d get a mess if no CSS rules targeted the slideshow.

Without at least giving dimensions to the slideshow, via width and height properties, the Cycle plugin will be helpless to show the images correctly. Make sure to add width and height values to the slideshow container in the CSS rules.

Also, you’ll need to specify the position property. In this case we’re giving a value of ‘relative’ instead of ‘absolute’ for the position property as we want to center the slideshow instead of placing it at some exact location. Without specifying the position of the slideshow container, some of the transition effects won’t be seen as intended.

The trick to centering the slideshow is to set the margins. Give the right and left margins a string value of ‘auto’ to center things horizontally. The top and bottom margins are given a numerical value, 10 px in this case.

CSS:

#showy {
position:relative;
height:300px;
width: 300px;
margin: 10px auto;
}

Using these simple CSS styling rules, we get a more pleasing slideshow experience.

The jQuery Cycle Plugin offers an amazing number of transitions for your next slideshow. If any of the two dozen transitions don’t give the effect you’re looking for, the plugin can always be modified to suit. If you’re looking to make some unique transitions, check out the advanced demos on the plugin site.

Over 50 options can be implemented to show your slides in the best light. Options are available for controlling the speed of the transitions, the length of time between slides, as well as running the slideshow backwards or stopping after a certain number of slides have been shown.

Slides can be forced to fit a container and made to be manually paused and resumed. Easing transitions can be specified as can random showing of slides. Options in Cycle are plentiful and definitely worth investigating.

Command strings can be used to pause or resume the slideshow or advance to the next or previous slides. Tie these commands to a click event to let your visitors see the show as they wish.

The Cycle plugin works with two assumptions in creating slideshows. First, it assumes that a container object has been identified, usually via a class or id identifier, that will contain the slides for the slideshow. All children of the containing parent will become a slide.

Second, the slides must all be children of the container. Any object can be a child here, so textual content, images, anchors and divs can all be manipulated and viewed as slides in your slideshow. Don’t put anything else in the slideshow container unless you want it to become part of the slideshow.

Here’s the HTML markup that could be used for a simple slideshow of images:

<div id="show">
<img src="../images/pic1.jpg" alt="one" />
<img src="../images/pic2.jpg" alt="two" />
<img src="../images/pic3.jpg" alt="three" />
<img src="../images/pic4.jpg" alt="four" />
<img src="../images/pic5.jpg" alt="five" />
</div>

The images are contained in a specific container, div#show, which can be styled with CSS. Giving the container and the slides fixed dimensions works best, so make sure to specify the widths and heights.

The default behavior is to fade slides in and out of the container in a continuous and sequential manner, in a cyclical way. So, we’re going to ‘cycle’ through the slides in this slideshow. The javascript for a slideshow using default behavior is simple:

$('#show').cycle();

With Cycle plugin default settings the slideshow starts with the first image or slide and each slide takes one second, or 1000 milliseconds, to be faded in. Each slide is then paused for 4 seconds and then faded out in one second. The slideshow wraps around so that the first slide will be shown after the last one. The fading in and out action occurs continuously and indefinitely with the default settings, as below:

To alter the slideshow behavior pass an effect, other than fade, as a string to the cycle method, like so:

$('#show2').cycle('shuffle');

Check out all the effects that can be used to transition slides: blindX, blindY, blindZ, cover, curtainX, curtainY, fade, fadeZoom, growX, growY, scrollUp, scrollDown, scrollLeft, scrollRight, scrollHorz, scrollVert, shuffle, slideX, slideY, toss, turnUp, turnDown, turnLeft, turnRight, uncover, wipe, and zoom.

Several transitions can be combined in a comma-separated list if you can’t choose just one. Or, use the string ‘all’ to see all the slide transition effects in a random manner.

Alternatively, you can use an options object to set the fx option among others. The code below specifies fade, zoom and curtainY effects to bring the slides in and out of the container. Each slide will be brought in slowly (800 ms) and taken out quickly (400 ms) taking a total of 3 seconds for each complete transition. This is the code for the slideshow (#show3) at the top of this post.

$('#show3').cycle({
  fx: 'fade,zoom,curtainY',
    speedIn: 800,
    speedOut: 400,
    slideExpr: 'img'
    timeout: 3000,
    nowrap: true
});

The parameter slideExpr is given a string value of ‘img’ in order to produce a slideshow without long blank pauses in between slides when using WordPress. WordPress and other content management systems may introduce extraneous markup when preparing webpages. The markup may be incorrectly interpreted by different browsers used to view slideshows created with Cycle, so it’s become important to specify the elements that are supposed to be cycled in the slideshow. Thus, the addition of slideExpr: ‘img’ as an optional parameter is necessary for image slideshows in WordPress.

The slideshow just above will be shown only one time and end with the last slide because the nowrap option is set to true. This might be a good thing to remember for leaving a textual message on the screen with your last slide instead of having the slideshow run indefinitely.

If you get stuck or need a little help with figuring out how to work the Cycle plugin, visit the jQuery Forum.

Any group of elements can be faded in and out with the InnerFade plugin as long as they are inside a container that is targeted by the first line of the script. Example elements that can be faded in and out are links in an unordered or ordered list, textual list items, or paragraphs in a div.

• A. Eat Right – It’s the easiest medicine to take.
• B. Buy Less Stuff – You don’t really need it, do you?
• C. Recycle Everything – Save the Earth from humans.
• D. Laugh Every Day – It helps to keep things in perspective.
• E. Help One Another – Some day you’ll need a little help, so spread good karma.
• F. Keep Smiling – It releases happy endorphins and makes you look great, too!

Target specific classes or ids for the right effect. Using the InnerFade plugin with jQuery is a simple way to show a countdown clock where one number fades out and the next one in the sequence fades in.

A news ticker, like the one above, can be created by fading in and out headlines for each news item. Each headline could be a link to the complete story. The headlines could be marked up as list items, like this list of good ideas:

<ul id="good_ideas">
<li>A. Eat Right - It's the easiest medicine to take.</li>
<li>B. Buy Less Stuff - You don't really need it, do you?</li>
<li>C. Recycle Everything - Save the Earth from humans.</li>
<li>D. Laugh Every Day - It helps to keep things in perspective.</li>
<li>E. Help One Another - Some day you'll need a little help, so spread good karma.</li>
<li>F. Keep Smiling - It releases happy endorphins and makes you look great, too!</li>
</ul>

The easiest way to use the InnerFade plug is to accept the default settings, as we did above, and call it with a minimum of effort like so:

jQuery(document).ready(function($) {
    $('#good_ideas').innerfade();
  });

There are only a handful of options and changing them is fairly simple. The type of animation can be set to ‘fade’ or ‘slide’. The speed of the fading or sliding effects is set in milliseconds or with the strings ‘slow’, ‘normal’, or ‘fast’. Timeout is the time between animations in milliseconds. The type of slideshow is set using the strings ‘sequence’, ‘random’, or ‘random_start’. The height of the container element can be set in px, em, %.

Default Settings:

animationtype: fade
speed: normal
timeout: 2000
type: sequence
containerheight: auto
runningclass: innerfade

Now that you know you can call the javascript plugin and use it with the default settings, try changing the settings for different effects. For example, try sliding the elements slowly in and out of the 45px tall container in random order with a 3 second pause.

$(document).ready(
  function() {
    $('.group2fade').innerfade({
      animationtype: slide,
      speed: 'slow',
      timeout: 3000,
      type: 'random',
      containerheight: '45px'
    });
  }
);

The InnerFade plugin handles all the hiding of elements until viewed, so without javascript enabled, the visitor will see everything on the page. Use a <noscript> method to offer alternative content to browsers with javascript turned off and put it in the html document just before the closing body tag.

InnerFade plugin can be used for simple slideshows too. The only caveat is to make sure images are of the same size or the bottom edges of larger pics will be seen behind the stack of images.

• modify the child-stylesheet to make things look how you want
• create child-directory for new child theme
• add template files to child-directory, if you wish
• upload child-directory to /wp-content/themes/
• activate new child theme

The child-stylesheet must be saved with the name “style.css” in the child-directory. The child-stylesheet header (which has to be at the top of the sheet) must contain a few lines that identify its parent theme, like so:

/*
Theme Name:     Twenty Ten Child
Description:    Child theme for the Twenty Ten theme
Author:         Your name here
Template:       twentyten
Version:        0.1.0
*/

@import url("../twentyten/style.css");

{put new style rules here}

You can add a line for the Theme URI: and Author URI:, if you like. Only the Theme Name: and Template: lines are required, the others are optional.

The @import rule indicates the directory of the parent theme and the location of the stylesheet. All you have to do is put in the new css rules below the import line.

That’s it!

If modifying the stylesheet doesn’t quite get all the changes you want, realize that you can add any template file to the child-directory and that will over-ride the parent file with the same name. For example, say you want to stick in a block for an advertisement right under the header image. Copy header.php and add a new <div> at the bottom of the page just below <div id=”main”> and stick the ad code in this division. Upload this new header.php into the child-directory and it will replace the one from the parent template.

Activate your new child theme and see how it looks!

Firefox also champions the use of future CSS, which are CSS features that will only be seen by IE users at some time in the future. Ok, I made that up, but since Internet Explorer is playing the catchup game, I think it’s only fitting to point out an example.

Looking at some CSS basics…we have a way to draw a box around some content. It’s called the border property. The top, left, right and bottom sides of the box can be assigned diferent values for the width, style and color. Each of these values can be assigned separately or all at once.

Separately:

All together, in the order width, style, color:

If you want to have different widths, styles or colors for your box, then you’ll have to use the properties that target each side, like so:

That’s nice, but sometimes we really don’t want the square boxy look. Rounded corners are nice, aren’t they? Well, our Firefox users can see rounded corners for the same box that we’ve built for our menu. All we have to do is add one property to the menu, called the -moz-border-radius, and specify its size. IE simply ignores this property, so those boxes will show pointed corners.

.roundedbox {
-moz-border-radius:10px;
}

The 10 pixel radius is the size of the rounded corner. We probably want to add a little padding to the menu box so the content isn’t smashed against the border, so we’ll set that at 10 px, too.

Here’s a menu box that will show rounded corners in Firefox/Mozilla browsers:

There are ways to get the rounded corner look in IE browsers, but it’s a bit more work. For now, we’ll continue to use the -moz-border-radius property in appreciation of our Firefox users.

I considered writing my own php script where I would have separate pull-down boxes for the day, month and year to assure that there was no mistake as to the actual dates. That would take a little extra format massaging to create the date in MySQL format, so I looked for scripts that others had already written. Who wouldn’t?

Formatting dates can drive a person crazy. Does ’06-08-2000′ mean June 8th or the 6th of August? Writing for the Web should be universal. The month-day format that we tend to use in the U.S. is confusing to everybody else who uses the day-month format, and vice-versa.

Writing by hand I like to use this format ’12-Mar-2000′ so there is no ambiguity, but that format needs to be converted to ‘YYYY-MM-DD’ format when sending dates to MySQL.

So, what are my requirements for such a Date-Picker Script?

• easy, intuitive for the user
• easy for me with output in MySQL format (YYYY-MM-DD)
• unrestricted license would be nice

I tried a few different date picker scripts and decided upon SpiffyCalendar because it’s the most advanced, yet easily modified to suit my purposes. Also, there is an established support system via a Yahoo! user group. That’s really nice, and unexpected.

Here’s the scripts I tried and the pros and cons for each…most weren’t as user-friendly as SpiffyCalendar.

PHP Calendar

PROS
• I like the look of this calendar, but it’s difficult to determine how to modify the calendar other than for css of calendar appearance.
• Date output is already in MySQL format: YYYY-MM-DD

CONS
• Can’t select year from calendar unless you click back or forward to the actual month.
• Ugly and excessively long query strings in links.

DatePick

PROS
• I like the little calendar icon.

CONS
• Can’t select year from calendar unless you click back or forward to the actual month.
• Timestamp is included. Don’t need it.
• Relies on javascript and pop-up window to select date.
• Calendar doesn’t update well when moving from month to month. Part of the calendar doesn’t get loaded in so all days are not selectable. Have to manually widen window to see all days.
• Can’t select year directly, have to click through months to get to next year.
• No directions on how to modify output.

DateTimePick

PROS
• I like the little calendar icon.
• Can modify output via provided directions.

CONS
• Can’t select year from calendar unless you click back or forward to the actual month.
• Relies on javascript and pop-up window to select date.
• Calendar doesn’t update well when moving from month to month. Part of the calendar doesn’t get loaded in so all days are not selectable. Have to manually widen window to see all days.
• Can select year directly, but calendar doesn’t update well.

SpiffyCalendar

Sign up to the Yahoo! Group to download the script. Script used to be offered at the now defunct GeoCities. The above link is the first place I found it posted afterwards.

PROS
• Calendar pops into page, not a separate window.
• Can modify output via provided directions.
• Can get help at Yahoo! Groups.
• Unrestricted license.
• Can refresh page containing calendars as link is not modified after picking a date or two.
• Highlights holidays, although will have to remove Dec 1st developer’s birthday. (OK, modified holiday array in script on lines 86-87.)

CONS
• Format of date will have to be modified for MySQL. (OK, Added "cal1.dateFormat="yyyy-MM-dd"; after instantiation in header for calendar named ‘cal1′.)
• Relies on javascript.
• Had to modify the images folder location in the .js file to an absolute address, although things worked fine on my local server with a relative address.

I’m sure there are plenty of these date-picker scripts floating around the Web. Do you have a different one to share with us? Leave a comment!

Once installed, Colorzilla resides down in the left, bottom corner of Firefox. You’ll see a little eye dropper icon. Click the eyedropper and the mouse pointer changes to a cross hair. Hover over any spot on the page and the RGB and #hex values are noted at the bottom of your browser. Click again and the color values are stored temporarily until you click on the eyedropper again.

If you leave the current tab and come back you’ll note that the color values have disappeared from the bottom bar, but they’re not really gone. Right-click the eyedropper and you’ll be presented with a menu of choices.

Right-click menu for ColorZilla Firefox browser extension.

Have fun exploring all the features of ColorZilla, but take note that the details of the last color picked are ready for you to copy in your favorite format.

The Options menu has a hidden feature that you might want to check out:

ColorZilla Firefox browser extension options menu.

Right-click on the eyedropper, click on Options, then click on Statusbar Format…. Here, you can modify the information that you see in the bottom bar of the Firefox browser when you activate ColorZilla.

ColorZilla menu for statusbar formatting.

Now, along with color values, you can “see” elements of a webpage, their paths, URLs and distances to other page elements.

A great feature that I must point out is the Webpage DOM Color Analyzer that you can reach from the Options menu. Visit a page where you like the color scheme, right-click the eyedropper and choose the Webpage DOM Color Analyzer…. A window at the bottom of the screen will show the main colors of the page, but not from the images on the page. Clicking on any of the colors in the palette will show you the css rules that are using that color.

ColorZillla – what a neat way to explore a page and all its colors!

Don’t have a site yet? Post your widgets to iGoogle, a Google “homepage” that you can modify as you see fit. Click on the iGoogle link at the the top right of www.google.com and you’ll see a version of google that you can modify to your liking by arranging tabs and blocks of content.

Here’s the widget I’m talking about:

Try moving either color pointer and see the resulting color and #hex value in the top box.

On the widget’s page at widgetbox, look under Get Widget on the right side of the page. If you’re not familiar with some of the icons, just hover your mouse pointer to get a tool tip that tells you the name of the site that the icon represents. Click on “more…” to see other icons. Here, you can also choose your language and modify your widget, if possible. Code is available for WordPress blogs – just look for the big W in the icon list.

To post the widget at iGoogle, click on the big G icon. A small window pops up that directs you to click on the “Add Widget” button to open the iGoogle installer. When the installer page opens click on the “Add to Google” button. Your new iGoogle page opens with the new widget displayed. Drag and drop the widget into the place you prefer and make sure to sign in to Google to save your page.

Same thing with WordPress. Add your favorite widget to a post or put it in your sidebar.

The only catch here is to grab the right code. If you take the code from one of the icons presented, the widget will be in its default state. Should you modify or customize your widget – like I did with Farbtastic by changing the language to English and enlarging the widget to 300 x 300 px – make sure to click on the small “Get Widget” button that has a little checkmark – it’s right below the customize part of the Get Widget section. Post your customized widget and make sure it’s what you want before you finish up with widgetbox.

Click the Random button to see randomly chosen color schemes or input your own RGB or Hex value to start the color selection.

Copy the screen to save an image of the color scheme containing nine colors and their hex values.

But you don’t really need to download the software to pick up the color schemes that you like. Just hover your mouse pointer over the color blocks in your favorite color scheme and write down the #hex code from the tool tip. Now you’re all set to use your favorite new colors!

Better yet, sign up for a free account on ColorSchemer. For parting with an email address you’ll be able to build a personalized Favorite Schemes list. Once you sign up, go to the Scheme Gallery and browse to a scheme you like. You’ll see who made the scheme, the number of times its been downloaded, the scheme’s rating out of 5 stars (and how many people rated it), and a link called “Add Fav”. Click on Add Fav to put the scheme you like into your Favorite Schemes.

My Favorite Schemes will show what you have saved so far. What a nice service to allow us to collect these color schemes and save them for later.

Bookmark ColorSchemer!

Don’t miss the fantastic post on 140 Named Colors!