In working on getting Ryboe.com to correctly validate tonight, I ran across an interesting tidbit about Flash movies and the W3C. The <embed> tag was created by Netscape as a way to get Flash objects to play in their browser. The problem with this Netscape-invented <embed> tag is that the W3C does not recognize it as a valid XHTML tag. If you are like me and would like for your site to validate, you have to remove it. So how do you get your Flash files to play in Firefox, Netscape, etc. and still have your site validate? Well, after doing some digging, I found that the solution is actually quite simple.

In this case, I have an image slideshow Flash movie that I want to display. Here is what the HTML embed code used to look like to show the Flash:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="580" height="225" id="slideshow" align="left">
<param name="movie" value="slideshow.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="wmode" value="transparent" />
<embed src="slideshow.swf" quality="high" bgcolor="#ffffff" wmode="transparent" width="580px" height="225px" name="slideshow_as2" align="left" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

In this article, entitled Embedding Macromedia Flash While Supporting Standards, Drew McLellan talks about his experience in dealing with this exact issue.

Just strip the <embed> tag altogether and place an extra definition of the Flash file path within the opening <object> tag. A "type" attribute is used to define that you want the Flash movie to play with the Macromedia Shockwave-Flash player. Here is my final code:

<object type="application/x-shockwave-flash" data="slideshow.swf" width="560" height="225" id="slideshow" align="left">
<param name="movie" value="slideshow.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="wmode" value="transparent" />
</object>

By defining the path to the Flash file again with the "data" attribute, my movie plays fine!

Familiar with seeing tag clouds around the net?  Would you like to display the content on your WordPress blog as tags and tag clouds respectively.  Then look no further.  We have released the first version of the Ryboe Tag Cloud Plugin for WordPress. This plugin uses the WordPress widget system to place a tag cloud in your sidebar.  With a fast and easy install, you can quickly convert your categories to "tags" and have a tag cloud in your sidebar in no time!

Download the Ryboe Tag Cloud Plugin

Here's how to install it:

1. Make sure you have WordPress Widgets installed on your .blog. If you don't, go ahead and head here for official instructions on how to install WordPress widgets. Note** The download link is on the left side of that page.
2. After verifiying that you have WordPress Widgets installed, download the Ryboe Tag Cloud Plugin for WordPress.
3. Unzip the file and copy it to your /wp-content/plugins/widgets directory with all of your other widgets.
4. Log into your WordPress Dashboard and head to the "Plugins" menu. Find the plug-in entitled "Ryboe Tag Cloud" and select "activate"
5. Navigate to Presentation -> Sidebar Widgets and drag the "Ryboe Tag Cloud" onto your sidebar layout. (Be sure to change your title here if you wish to have one).
6. Visit your blog to see your new tag cloud!

It's that quick and easy.  Now you have a slick little tag cloud of all your post categories on your sidebar!

In the world of buzzwords like Web 2.0 and Ajax, everybody is trying to get a grasp on the stylish quirks you see from website to website.  Back in the tutorial Getting Ready for Web 2.0 effects with Scriptaculous we talked about firing up a JavaScript effects framework on your server for future UI and display purposes.  Scriptaculous is immensely powerful and today I'd like to show you a quick example of how this framework can make your life easier.

One ever-so-popular effect that you commonly see used across the web is the highlighting of an HTML element with a nice yellow highlight fading back to the original background.  I have recently run across some interesting techniques that individuals were using to create this effect.  I briefly skimmed over this particular tutorial in question and was absolutely amazed at the amount of effort this individual had put in to create a multiple step animation sequence for changing the background colors of a DOM element.  (Basically, somebody needs to introduce this guy to the Scriptaculous library.)

In case you're in the dark on how to create a nice Highlight effect, here's an easy manner in which to do so using the form we created in the Error Output With Scriptaculous. 

Simply find the line:

<input type="text" size="30" id="email" />

Take this line and change it to:

<input type="text" size="30" id="email" onblur="new Effect.Highlight(this, {startcolor: '#ffff00', restorecolor: 'true'})"/>

What's going on here?  Well we are using the onblur element listener to trigger JavaScript when the user moves their focus from the input box in question.  The JavaScript included in the quotation marks simple creates a new Effect called Highlight and sets a few arguments.  "this" is used to identify the HTML element we are running the effect on.  (We can use "this" since we are defining the JavaScript in-line.)  The options "startcolor" and "restorecolor" are set in the next part of the JavaScript declaration.  Using a hex code, we can tell Scriptaculous exactly what color we want the animation to start with.  The "restorecolor" parameter is handy because it will return the background color of the element to its original color without us having to worry about what the initial value was.

View Yellow Fade Technique Example. The effect will trigger when you place your cursor in the "email" box and tab to the next field or click elsewhere on the page.

Note** There are other options you can define here, refer to the official Scriptaculous documentation for more information.

Continuing on from yesterday's tutorial, Error Output With Scriptaculous, in which we got started with a nice little login form showing off simple validation and error output with Scriptaculous, I decided today we would add onto that form a little bit.  One neat thing that you can accomplish in creating your forms in HTML is the use of a custom "submit button". 

By defining your submit button as an image, you can use any image file to replace the standard grey HTML button you see sprinkled all over the web.  In order to do this, you simply change the HTML code you use in your form.

Previously we were using the code:

<input type="submit" value="Login" />

Now obviously, this got the job done but we would like for our site visitors to have a nice themed experience when logging in, so let's style it up!  To do so, simply change the "type" attribute and define a "src" attribute on your input element, leaving your code looking like

<input type="image" src="./images/submit_button.jpg" />

The "src" is the path to the image you want to use.  I decided I wanted to spruce things up a little more and give the submit button some flare, adding a rollover state to it.  In order to do so, I first prepped my image file in Photoshop, leaving me with a two state image:



As you can see, both the on and off states are visible in this image. Why wouldn't I separate them out into individual image files?  Well the answer is, there is no need to with the use of CSS (and afterall, I'd rather only have to worry about loading one image on the client side than two).

How exactly is this accomplished?  Well for starters, we need to simplify the markup for our submit button.  Start by changing the attributes of the "input" element, defining "type","class", and a blank "value":

input type="submit" class="submit" value="" />

Before the CSS is added, we are left with a small non-user friendly button.  By defining the "submit" class that we just attached to our "input" element, we can all at once implement our image as the button.

.submit
{
    background: url(./images/submit_button.jpg) no-repeat;
    height: 42px;
    width: 130px;
    border: none;
}

In this CSS class we are setting the background image, height and width, and stripping the element of its default browser-styled HTML border.  The button is perfectly functional!  However, we still want to add the hover state.  In order to do so, we simply need to define a hover state for the "submit" class.

.submit:hover
 {
     background: url(./images/submit_button.jpg) 0 -42px no-repeat;
 }

In this code, we are leaving all the attributes the same except for the background property, which we are adjusting the background position with a height of -42px.

View Image as a Submit Button with Hover Example

Voila!  There you have some nice little CSS submit button magic.  Note, the hover state will not work in Internet Explorer 6, which does not recognize :hover classes in CSS.  There is an easy way to work around this, which I will uncover in the not so distant future.

With the release of the new Scriptaculous 1.7.0 Beta, Thomas Fuchs has introduced a new effect, morph.  The syntax for this new feature is quite easy to grasp.  Simply call the function on the element you wish to morph.

$('my_element').morph();

You can also pass this function arguments to define CSS properties on the fly.

$('my_element').morph({fontSize: '12px', color: '#7F1123'});

Here is an example of the Scriptaculous morph function and how it can be used.

The code I used in my example was quite simple.  I set some default values in CSS for the element I was going to morph.  Then I created some anchor text, in which I tacked on a onclick behavior that called the morph() function.  This is what my markup looks like:

<div id="change_me">Watch me morph!  Click Below!</div>
<a href="#" onclick="$('change_me').morph({fontSize:'36px',color:'#7F1123'}); return false;">Click Here</a>

The magic is primarily done in defining the initial CSS values and passing your new ones to the function.  Pretty handy!

Note– using this method requires the newest beta release of Scriptaculous.  The download is available toward the bottom of this page on mir.aculo.us.  Direct download link.

In this tutorial, Error Output with Scriptaculous, we discuss how to get a basic Scriptaculous effect up and running. This tutorial shows how to properly set up HTML markup so that JavaScript can effectively interact with the DOM and use the Effect.Appear method to display error output. This example centers around a simple login form that validates user input.

A new tutorial has been added entitled Getting Ready for Web 2.0 Effects with Scriptaculous. In this tutorial, you can gain a general overview of the Scriptaculous library for JavaScript and what it is used for. Then, the tutorial gives you detailed instructions on how to get Scriptaculous up and running on your web server. It's pretty easy so get started today!

As I am working on the site here, I have noticed a behavior of WordPress that is indeed annoying. By default, WordPress renders quotes as the fancy style of quotes. Usually this would not be an issue as they are awfully pretty quotation marks, curving according to their placement on the string. However, when using code examples, this is not a desirable effect as it will keep users from being able to copy & paste code examples for their own use.

The Problem. How do I remove fancy quotes from my posts in WordPress?

The Fix. In an effort to fix this problem I came across an easy fix. The folks over at semiologic.com have put together an easy to install plugin for WordPress enttitled "Unfancy Quote Plugin". The plugin is a single PHP file that you need to upload to your /content/plugins directory in your WordPress install. Once you have it uploaded just head over to the admin panel and activate the plugin! Presto!

Unfancy Quote Plugin for WordPress

How does it work? Well it's actually quite simple. The plugin utilizes the PHP str_replace() function to seek out instances of the fancy quotes in strings and replaces them with standard quotes. This is possible by using the HTML entities codes for the corresponding quotation marks.

As I was getting my template refined for the implementation of this site, I came across an interesting little code snippet.

What was I trying to do? I was working on adding what WordPress calls "Pages" to my site to use as static content for my project examples. Once I had added my pages, I needed to display these pages on my header.php. In order to do so, WordPress provides a function. Here's what the code looks like:

<?php wp_list_pages(); ?>

The issue with this function is it provides an entire list of links to each of your pages that you have added to WordPress. In my case, I had set up a number of Pages to be children [pages linked off] of the "Project Examples" page. It turns out that you can provide to the wp_list_pages() function an argument defining the depth of pages shown. If you wanted to only show one level of pages, you would use the value '1'.

I was able to choose the levels deep I wished to display pages from the parents. In doing this, the function would no longer display all my pages but rather just the top level. It's now up to me to manually link to the other existing pages in my content management system.

The final code:

<?php wp_list_pages('depth=1'); ?>

Note, you can also exclude individual pages from being displayed using this function. In order to do so, provide the id's of each page you would like to hide and format as such:

<?php wp_list_pages('exclude=12,43'); ?>

It turns out there is quite a bit you can do with this functions. Check out the official WordPress docs for more

Welcome to Ryboe.com! This site has been started primarily as a platform for me to share my knowledge of the world of web development and share my adventures. The best way to get better at something is to teach others, so in large part this is an honor for me because I get to share my knowledge along with help others become better at what is ultimately a very exciting area of study — web development.

The reason why a blog is the perfect format for learning about the various technologies involved in developing with web languages has to do with evolution. The technologies involved in developing web sites and web applications are always evolving, and as a web developer you have to work hard to keep current. My focus with this blog is to bring to my audience the most up to date observances and tutorials on languages I am working with on a day to day basis. I may also decide to dive into various design aspects throughout. If you would like to get a quick overview of what Ryboe.com is all about, check out the about page on the site.

Thanks for coming! Oh, and don't forget to add this feed to your RSS reader using the buttons at the right of the site!