Flash - the cause of, and solution to, most of the internet's problems.

Aside from the known issues with flash, there is a major problem with the default setup of most flash objects which many people are unaware of.

A quick search through our support forum, will show up dozens of questions relating to Adobe Flash objects and dropdown menus appearing beneath them. The usual solution people look to as a solution, is to modify the z-index of either their menu, the flash object, or both. Unfortunately this only leads to dead-ends and confusion on the part of the site owner.

The solution thankfully, is relatively simple. All you need to do is to set the Flash object to “transparent”, and your dropdown menu will appear on top of the object instead of below it. I suspect Adobe added this behaviour intentionally as a way of hacking people’s sites into work as expected but has infuriated many web developers as this is not what would typically be expected for browser behaviour.

The solution

Add the following between your <object> tags:

<param name="wmode" value="transparent">

Add this in an <embed> tag:

wmode="transparent"

Your code should now look something like this:

<object>
  <param value="blabla.swf" / >
  <param name="wmode" value="transparent" / >
  <embed src="transparency.swf" wmode="transparent" type="application/x-shockwave-flash">
  </embed>
</object>

The book is easy to read, easy to understand and ideal for those wanting to branch out from being the user of an AJAX’ified WordPress plugin or theme into adding their own customised functionality to their site.

The book is 249 pages long and covers the following:

• The basics of AJAX
• How to load scripts correctly in WordPress
• How to set up PHP classes
• Loads of code examples

The book is for sale for US$24 from the WordPress and AJAX site.

PixoPoint Theme Integrator plugin page on WordPress.org

If you find the plugin useful, please rate is up by logging into the repository and clicking the stars in the right hand sidebar If you are using the plugin, please let us know as we’d love to see some more examples of the plugin in action.

The PixoPoint Theme Integrator page in the WordPress.org plugins repository

Jeff Chandler, the host of WordPress Weekly.

For those of you looking for another way to find out about the latest news, tips and information about WordPress but are sick and tired of reading through blog after blog of posts, an excellent alternative is to listen or even participate in a WordPress related podcast.

The leading podcast on WordPress is the WordPress Weekly podcast hosted by Jeff Chandler. Jeff does an excellent job of presenting the latest news and has a slew of top level WordPress  plugin authors, themers and general WordPress experts on his show, both as interviewees and during round table discussions with other WordPress experts.

Live broadcast

One of the key ingredients to the success of WordPress weekly is not only the boundless enthusiasm of Jeff as host of the show, but also the live setup. You can listen to the podcast live as it happens, and even call in if you would like to ask a question. There is also a chat box for the live listeners to discuss the podcast as it happens and to ask questions which may be answered on the show.

The live service is provided by the TalkShoe podcasting service. Visit the WordPress Weekly Talkshoe page to see the upcoming live schedule and to join in on the conversation.

Other WordPress podcasts

Press This by Joast de Valk
WordCast by Bitwire Media

Thanks to Ronald Huereca for the photo of Jeff. Ronald is our JavaScript guru so if you have a use for any JavaScript/AJAX related WordPress work, please get in touch!

Dropline menu

Dre Armeda from CubicTwo contacted us regarding the construction of a custom menu design for one of his clients. He requested a “simple solution for the sub-nav (with horizontal slider) to be extended like the image attached”. The image was of a dropline menu as follows:

Design sent to display exactly how the menu would look. Click to see the zoomed in version.

Active Sub-menu and integration

Dre requested for the active dropline menu to be loaded by default and for us to install our menu plugin and integrate it seamlessly into his test site.

Construction

We sent back the following page as an exact demonstration of what the menu would look like and asked if there were any corrections to be made.

Demonstration Page

After some email discussion regarding how the menu would work and a modification to the hover graphics we sent back a new link which Dre confirmed was exactly what was required. We were given administrator access to their WordPress admin panel and we installed our menu plugin, configured it, integrated it into their WordPress theme and updated the CSS to load the new design. And here is the final result:

The PixoPoint coded dropline menu on the Industrial Income Trust's website

By providing an exact image of what was required and full specifications as to how the menu was to function (dropline shown by default) and by showing us the exact page the menu was to appear on we were able to provide a demo page of what the menu would look like. This allowed the client to see exactly how the menu would look on their site so that any corrections necessary could be made before adding them to their live site.

The live site

The live site can be seen at IndustrialIncome.com, however there are a couple of splash pages you need to click through before you can reach the menu.

Their new site hosted at RedDevils.co.nz

What we suggested was for them to use the hosted WordPress.com service. This is not the regular self-hosted solution that you can download from WordPress.org, but the hosted system which allows you to create your own blog/site within minutes. We have suggested this previously to those who can’t afford a more traditional solution, but have found it an uphill battle convincing people that WordPress.com can indeed meet their needs in exactly the same way a self-hosted solution would.

Misconceptions about WordPress.com powered sites

Traditionally WordPress.com has only been suggested as a low-budget option for those who can’t afford to upgrade to “proper” hosted setup, however for the Red Devils, we were able to meet all of their requirements without losing anything that they required in their site. We were also able to integrate their teams branding into an existing theme very quickly through some simple CSS upgrades.

The following is a common comment we receive from potential clients when suggesting using WordPress.com for their site.

But you can’t upload themes to WordPress.com and we need our own design

However, despite this, we had no trouble at all in redesigning a WordPress.com site for the Red Devils which suited their needs perfectly by using the “CSS upgrade” option. This costs a mere US$15 and allows you to totally modify the sites CSS. This gives huge power over how the site looks and behaves. We were able to use this to add a new background image, totally change the text colours, remove all remnants of the commenting feature of WordPress (even when comments are disabled their are still occasional bits of text mentioning the comments feature).

The custom CSS upgrade information as found on WordPress.com

The following is another common comment we receive on suggesting clients use WordPress.com to power their site.

No, I must have my own domain for branding purposes!

This is also a fallacy as there is a “domain upgrade” option available for another US$10. All you need to do is to point your domain at the WordPress.com name servers, purchase the upgrade, add the new domain to your list of domains and it will automatically start working and all your own URLs will redirect to the new one automagically. Apart from the small unobtrusive link back to WordPress.com in your footer, no one will have a clue that you are using the WordPress.com service.

The domain upgrade information as seen on WordPress.com

And last, but not least, the following is another common comment we receive on suggesting clients use WordPress.com over a self-hosted solution.

But I don’t want a blog, I want a website!

Ignoring the obvious fact that a blog is actually a website, it is entirely possible to make a WordPress.com “blog” look and behave in a very “non-bloggy” way. You can either ditch the blog functionality entirely and go for an entirely static site, or you can use the method we used for the Red Devils site by removing all mentions of “blog”, turning off commenting and stripping out any errant text which may appear in the site related to the commenting functionality, blog categories etc. This gives a simple list of news items on the front page to ensure that their site visitors see the most important/current content first up. They even use the sticky post feature of WordPress to ensure that news items they want to ensure readers see first are always at the top of the home page.

What other upgrades are available

There are a suite of different upgrades available for those who need them. The Red Devils did not require any of the other available extras, but depending on your requirements you may find some of the other options useful, in particular the ability to remove the occasional advertising which WordPress.com serves to your sites visitors.

The various upgrades available for WordPress.com

Maintenance

The beauty of using WordPress.com, is that not only does it cost almost nothing to setup (US$25 for the CSS and domain name upgrades), but you don’t need to bother maintaining a WordPress installation since they handle everything for you. You also don’t need to worry about DOS attacks, security or any of that stuff as the WordPress.com team have a terrific track record of handling such things spectacularly well.

The clients opinion

The Canterbury Red Devils have been very happy so far with the end-product. For negligible up-front cost they have all of the features they wanted for their site, a slick design, their own domain and to the casual observer it looks like the Red Devils have a regular self-hosted WordPress installation.

They have gone from an awkward to use static site which they couldn’t update, there were no RSS feeds, no email subscriptions, no photo galleries and they couldn’t give non-technical users the ability to edit their site. They can now have multiple members of their organisation editing the site with no fear of the site breaking or something going catastrophically wrong. They effectively have infinite bandwidth to handle any potential traffic spikes, their sites security is handled by the best experts in the business and their site loads lightning quick since it is hosted on the massive 1000+ server stack of WordPress.com.

Special thanks to Vince Mitalas from the Red Devils who worked with us on this project and who has been adding all the content ready for the sites launch today.

Vince Mitalas of the Canterbury Red Devils ice hockey team

Getting your own WordPress.com powered site

If you don’t have the CSS coding skills or simply want someone else to handle everything for you, please get in touch with us as we are very keen to build more of these hosted setups. If it matches your requirements, they are an inexpensive way to enter the online world without losing any of the professionalism of the regular self-hosted WordPress installation.

WP Tavern

The WordPress Tavern has become the defacto goto place for many WordPress experts. The site is run by the unofficial WordPress community superstar Jeff Chandler who is based in the USA. The site includes a blog with posts from both Jeff himself and other contributors and a terrific forum for discussing the latest news, tips and tricks of WordPress. The site is also the home of WordPress Weekly, the best podcast about WordPress.

WP Garage

Although not updated as often as it once was, WP Garage is a terrific source of information about plugins, themes and basic tricks. The site is ideally suited to those wanting to move from being a novice WordPress user to a power user as it includes a series of basic coding tricks and tips. The site is run by Miriam Schwab of Israel who is also the CEO of illuminea, an internet presence and marketing firm.

Justin Tadlock / Theme Hybrid

Justin Tadlock is one of the leading experts on theme development for WordPress. Justin is very much at the cutting edge of creating innovative themes which can be modified extensively (via child themes) without touching the core theme code. He is the author of Theme Hybrid and also written some high quality plugins for WordPress. Justin operates a theme club which includes a high quality support forum for his various (free) products.

Other resources

There are so many other resources about WordPress that we couldn’t possibly list them all. However here is a list of resources we also recommend checking out.
Theme Shaper – An excellent site by Candian based Ian Stewart, about WordPress theme development and in particular his parent theme, Thematic.
WP Vibe – A resource site about WordPress plugins and themes by Dre Armeda and Jonathan Dingman.
SitePoint – Although not a WordPress specific site, SitePoint is an excellent place to learn more about the software. SitePoint includes the most popular web development forum on the internet.
WP Mu Tutorials – One of the best places to find Mu specific information about WordPress. The site is run by husband and wife team Ron and Andrea.
Andrew Rickmann’s blog – An excellent site for opinions on the more advanced issues relating to WordPress.
Mark Jaquith on WordPress – Mark Jaquith is one of the core developers for WordPress and also the best of the core developers at dispersing information about the cutting edge of WordPress development.

The following code will produce a clean smooth flowing animation effect just like you can see in the menu above for our own site.

function suckerfishmenu(){
	$('#suckerfishnav ul').css({display:'none'}); // Opera Fix
	$('#suckerfishnav li').hover(function(){
		$(this).find('ul:first').css({display:'none'}).slideDown(300);
	},function(){
		$(this).find('ul:first').css({display:'none'});
	});
}
 $(document).ready(function(){
	suckerfishmenu();
});

To make this work, you simply need to insert the above code after you load jQuery and between the <head> tags for your page and use a dropdown menu with an ID of #suckerfishnav. Make sure you reference the jQuery.js file correctly (available here). If you are using WordPress, then you will want to make sure you are loading jQuery via the enqueue method to avoid clashes with plugins which use jQuery and add var $ = jQuery; to ensure that jQuery works with the non-conflict mode of the version of jQuery version bundled with WordPress.

If all of that seems too complicated, don’t despair as the new version coming soon of our PixoPoint Menu plugin has this new animation method built in so that you won’t need to touch any code to get it working.

Suckerfish

The original Suckerfish javascript code was posted on A List Apart by Patrick Griffiths and Dan Webb. As outlined in our :hover pseudo class post, it simply adds support for the same effect as the :hover pseudo class in Internet Explorer 6 and older browsers.

The following code is based on the most popular form of the Suckerfish script, the “Son of Suckerfish” by HTML Dog. This code works with any unordered list with an ID of #suckerfishnav.

sfHover = function() {
var sfEls = document.getElementById("suckerfishnav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

The following code is more suitable for situations in which you need support for multiple dropdown menus on the same page as it works on any unordered list with a class of .sf-hover (ie: you can’t have two menus with the same ID therefore this class system works better in such situations).

function sfHoverEvents(sfEls) {
var len = sfEls.length;
for (var i=0; i
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(" sfhover", "");
}
}
}
function sfHover() {
var ULs = document.getElementsByTagName("UL");
var len = ULs.length;
for(var i=0;i
if(ULs[i].className.indexOf("sf-menu") != -1)
sfHoverEvents(ULs[i].getElementsByTagName("LI"));
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);</code>

Superfish

Superfish is a plugin for the jQuery javascript framework. Unlike the simple Suckerfish methods outlined above, Superfish adds many more features to your menu than just :hover pseudo class support in IE6.

Some features of the Superfish jQuery plugin are:

• Timed delay on mouseout to be more forgiving of mouse-piloting errors.
• Animation of sub-menu reveal. The animation speed is customisable
• Keyboard accessibility. Tab through the links and the relevant sub-menus are revealed and hidden as needed.
• Supports the hoverIntent plugin. Superfish automatically detects the presence of Brian Cherne’s hoverIntent plugin and uses its advanced hover behaviour for the mouseovers (mouseout delays are handled by Superfish regardless of the presence of hoverIntent).
• Indicates the presence of sub-menus by automatically adding arrow images to relevant anchors. Arrows are fully customisable via CSS.

To see a demo of the Superfish plugin in action, hover over the menu of the Dunedin Ice Hockey Association.

HTML

We will post another blog post soon outlining best practices and how to create your own custom HTML for your menu.

Other scripts

There are many other alternative scripts out there too. If you have any favourites, please post a link to them in the comments.

:hover pseudo class

It has been known for a long time that it is possible to create dropdown menus purely using nested HTML blocks and the :hover CSS pseudo class. Unfortunately, although almost every single web browser added support for this feature a long time ago, Microsoft decided to drag it’s heels and waited a horrendously long time before eventually launching Internet Explorer 7 (IE7) which finally had support for the :hover pseudo class. Many users still do, and likely will for many years to come, use Internet Explorer 6 (IE6) as their browser. There are many, many reasons why they shouldn’t be using it, but unfortunately some users either refuse to upgrade, don’t know how or are simply stuck on an old school corporate intranet without the ability to upgrade. For this reason a slew of methods via javascript have been created to add support for the :hover pseudo class into IE6 and older browsers. This is the reason that all of our WordPress menu plugins use javascript, they work without the javascript in all modern browsers, but for Internet Explorer 6 and older browsers they use a javascript to allow the menus to still operate.

Suckerfish and conditionals

The suckerfish script is the standard script used to add the same effect as the :hover pseudo class in IE6. In the past, it was common place to simply load the file for every page load, however now that IE6 does not have a 90%+ hold on the browser market place it is advisable to only serve the scripts to those browsers that need it. The best way to serve the file only to those older browsers is to place a link to an external script via IE conditional comments like this:

<!--[if lte IE 7]>
<script type="text/javascript" src="suckerfish_ie.js"></script>
<![endif]-->

You could alternatively include the code directly on the page itself, but this increases the page load slightly for all browsers rather than just limiting it to the old clunkers like IE6. With conditionals you can save quite a few lines of code on every page load.

Once you have a Suckerfish script running on your page, you can apply a class (usually .sfhover for most scripts) to the CSS and use that for IE6 instead of the :hover pseudo class.

Why we need to use IE7, not IE6 conditionals – another Microsoft screwup

You may have noticed that the above code is written to serve the Suckerfish script to IE7 and older browsers, despite IE7 already featuring support for the :hover pseudo class. Previously this would have been considered silly as it would only slow down the loading of a page in IE7. However Microsoft being Microsoft, have decided to add a compatibility mode into Internet Explorer 8 (IE8) which it says “will behave just like IE7″. However this is entirely incorrect as IE8 compatibility mode does not support the :hover pseudo class at all. Most of the time this would not matter, but if a user is browsing your site and for whatever reason decides to click the “compatibility mode” button, they would not be able to use your menu if there was no javascript being served to it, and since it considers itself to be IE7 it will not follow IE6 conditional comments. For this reason, we must now place the script inside IE7 conditionals as above.

Coming soon will be a blog post about alternatives to the Suckerfish script, the best versions to use and how to setup your custom HTML.