Javascript Plugin: InnerFade with jQuery

Fade elements in and out with the InnerFade javascript plugin. Its purpose is to fade “any element inside a container in and out” and it relies on jQuery to do its magic. InnerFade is a lightweight plugin of only 8 kb, so it won’t bog down your pages.

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:

  • 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!

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.

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.

Twenty Ten Child Theme Mods

Creating WordPress child themes is a slick way to make your own theme. All it takes are a few easy steps. Here’s an example using the standard Twenty Ten theme as the parent theme:

  • 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:

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!

CSS Rounds Corners in Firefox, But Not in IE8

Firefox/Mozilla browsers are gaining shares of the browser market and for good reason. Upbeat features let the user take complete control of their browsing experience, which is one main reason behind their gaining popularity. Add-On tools can help most any website developer to see that their site is put together in a valid way and that has pushed Firefox use among developers to probably a very high level. I still have yet to hear another web developer state that they prefer IE over Firefox, and I’m pretty sure that all of us have cursed IE6!

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:

.box {
border-width: 1px;
border-style: solid;
border-color: #000;
}

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

.box {
border: 1px solid #d1d1d1;
}

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:

.box {
border-left: 1px dashed #000;
border-right: 2px solid #5ca3b7;
border-top: 1px dashed #000;
border-bottom: 2px solid #5ca3b7;
}

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:

.roundedbox {
border:1px solid #5ca3b7;
padding:10px;
-moz-border-radius:10px;
}

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.

Calendar Pick-A-Date Scripts Reviewed

This week I needed to make a form where the user needed to enter two dates in order to produce a report with the selected start and end dates. What were my options?

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!