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.

jQuery Plugin Tips: ColorBox

ColorBox is described as “A lightweight customizable lightbox plugin for jQuery 1.3+”. As of this writing the ColorBox jQuery plugin is being actively supported as Version 1.3.19 was issued on 8 Dec 2011. It’s an open source work released with the MIT license and it’s one of the top ten jQuery plugins used around the world.

To use ColorBox first download the plugin, unpack the .zip file, and inspect the example directories. The index page in each example folder presents a series of links to slideshows with different features, such as elastic transitions, fade transitions, or using other content types. The colorbox directory contains a minified .js file and a non-minified JScript file.

ColorBox requires that its stylesheet be included in the <head> before its javascript source, which must be included after the javascript library. In the head of an HTML page call colorbox.css, jQuery library, and then any jQuery plugins — in that order. If you don’t call jquery.js before the plugin, nothing happens on the page where you’re wanting to view a lightbox or slideshow. You’ll see a “jQuery is not defined” error if you’re using the Firebug development tool.

We want the webpage to be fully constructed before running any scripts, so put <script>s near the end of the HTML, just before the closing body tag, </body>. That way, when elements are called for in the script, they will already be present.

You don’t want the scripts near the top of the document because of the way a web page is constructed. HTML is parsed by the browser until it comes across a script. When a script is encountered the parsing is paused and the script is then executed. If a script precedes the elements that it calls for, the script won’t work as intended.

Alternatively, the script could be wrapped in a ready() method like so:

Using the ready() function assures that the DOM is completely constructed before modifying it with the script.

ColorBox works on any jQuery selectable object. It’s a simple matter to create a slideshow by grouping images with the “rel” attribute or with a common class name, like so:

A simple, one-line script is all that’s needed to create a slideshow from the images grouped by their common class name, in this case .group1.

When the image link is clicked this script will center each image in a lightbox and shadow the rest of the page behind the image. Clicking on the page, or close button, will bring back the page as it was before clicking on the image.

To create a slideshow complete with previous, next and close buttons, add ‘rel=group1’ as a css key:value pair inside curly braces in the parentheses for the colorbox function.

Any number of key:value pairs can be added here to make your slideshow really stand out.

Other content types can be used with ColorBox, like HTML, Flash, video, or external webpages. Of course, that means you can let your imagination run wild and use ColorBox to your advantage in creating beautifully modern websites.

Most Popular jQuery Plugins

jQuery is one of the most popular JavaScript libraries in use on the Internet today. Over 50% of the top 10,000 websites rely on it, as do 30% of the top million sites, according to gary at BuiltWith.

JavaScript functionality is extended with the jQuery library which is in turn extended via plugins. There are thousands of plugins to choose from depending on the functionality that’s required. The most popular plugins are well written, ready for the masses, secure, and really useful with a minimum of work.

The top ten most popular jQuery plugins are listed below with the approximate percentage of the top sites using them.

  • UI ~30%
  • Form ~20%
  • Cycle ~20%
  • Tools ~5%
  • Easing ~5%
  • Cookie ~5%
  • PrettyPhoto ~5%
  • ColorBox ~5%
  • Bgiframe ~5%
  • Validate ~5%

Enhance your skills as a developer by becoming familiar with these jQuery plugins.

Using PHP Inside Content of WordPress Blogs

Using PHP inside of content on WordPress sites may not produce the expected results. As WordPress is built in PHP, you might think you could just start typing PHP code inside a post to pull some information from a database. Sorry to say, but it doesn’t work that way.

WordPress takes your blog content and runs it through some backend shenanigans to create the output that you see on the screen. WP expects to find other content in posts, like text and images, not code.

To run PHP code inside a blog post or Page, you’ll have to work a little differently than simply filling up the space in the text editor.

There are two ways (at least) of using PHP inside WP blogs to produce the desired output. The first way is to set up a WP template page that points to a pre-written PHP page that is identified in a Page. The second way is to use a plugin that facilitates PHP code execution inside content areas in WordPress. Both ways have their advantages and disadvantages.

Using WP Template Pages to Execute PHP Code

A template page is used to identify a pre-written PHP page. By saying “a pre-written PHP page” I mean a .php file that you’ve already written and which has been executed successfully by a server. A template file has at the top of it a PHP comment which identifies the template name followed by an include statement that identifies the .php file. WP template files must follow this format to be properly identified by the WordPress engine as a template file.

<?php
/*
Template Name: soccer-roster
*/
include (TEMPLATEPATH . ‘/soccer-roster.php’);
?>

The above snippet  is a complete template file which indicates the name of the template as “soccer-roster” and the path to the associated PHP file, soccer-roster.php. The template file is best saved with “template” in the file name. It must be located in the site’s theme folder.

After creating the template file and .php file, upload both to the theme folder. Create a blank Page. Do not put anything where you would normally write the content, but go ahead and give it a meaningful title. On the Add New Page page, look for the “Page Attributes” widget. Click the down-arrow to expand the list of templates and select your template. Using the example above, you would select the “soccer-roster” template. If the template is not stored in the theme folder, it will not appear in this drop-down list. Save the page and preview it. The PHP code, from soccer-roster.php, should be executed just as you would expect.

PROs

  • No interference from WP, code interpreted as stand-alone PHP.
  • Page renders as expected.

CONs

  • Can only be used with Pages, not posts or text widgets.
  • May have to wrestle with adapting PHP output into style of site.
  • CAUTION: Use a child-theme to safely save site-specific template files.

If your site relies heavily on plugins, using template pages may be the best method, see below. If it’s not a big deal to style the PHP output pages like the rest of your site, creating WP Pages that use templates is a breeze. If you need to put code in a post or text widget, keep reading.

Using WP Plugins to Execute PHP Code

Modifying WordPress themes is not for everyone, so using a plugin to execute PHP code may be the easier option. There are more than a handful of plugins available for the task. I chose to use Exec-PHP plugin for WordPress. It is a very well documented plugin. Thank you, Sören.

Download, unpack, upload and activate the plugin in the usual fashion. Verify these settings to make the plugin do its magic:

  • Disable tag balancing by unchecking ‘WordPress should correct invalidly nested XHTML automatically’ in the Settings/Write menu.
  • Disable the WYSIWYG editor (visual editor) in the user’s settings through the Users/Your Profile menu.
  • Assign the ‘unfiltered_html’ capability to the user, if user is not the administrator. Can use role manager plugin to assign this capability to other users.
  • Assign the ‘exec_php’ capability to the user, if user is not the administrator. Can use role manager plugin to assign this capability to other users.

Once I disabled the visual editor, my site was ready to go.

PROs

  • Easy, just change a couple of settings in blog admin. Plugin gives highly visible warning on Add New Post or Add New Page pages if the settings are not correct.
  • PHP code can be written in the normal fashion using the <?php ?> tags. It does not need to be marked up in any special way as it might with other plugins.
  • PHP can be used in text widgets and posts, as well as Pages.

CONs

  • Can’t use plugins that embellish or rely on the WYSIWYG editor.

Didn’t try any other PHP-execution plugins because Exec-PHP worked as soon as the visual editor was disabled.

As mentioned either method will get you there, it’s just a matter of style. If you need the visual editor to create your posts, use the template method. If you want to put PHP code in posts and text widgets, use the plugin method. Good luck!