Archive

You are currently browsing entries tagged to 'Web Development'.

CSS drop-down menus: keeping the top level selected when hovering over a sub-menu, now in jQuery

Posted 6 September 2009 Tagged to , , ,

Awhile back I wrote a JavaScript tutorial on how to keep the top level menu item selected when hovering over a drop down menu. Since then I’ve become a strong user and proponent of the JavaScript library jQuery. Not only is it easy to use, it also can help simplify your code-base very significantly. I’ve explained the updated code below. As you can see, it is much simpler.

Read full entry...

Redirecting blog URLs in Wordpress MU using .htaccess and mod_rewrite

Posted 30 April 2009 Tagged to ,

Recently, one of the blogs I help support wanted to change its name and location. This meant changing the virtual directory name in the URL as well. Typically, simply changing the directory name in the WordPress settings would break all incoming links, something we definitely wanted to avoid.

Fortunately, it is very easy to change the directory and seamlessly redirect users to the new site by editing the “.htaccess” file at the root of your blog.

Simply add the following line:

RewriteRule ^olddirectory(.*) newdirectory$1 [L,R]

So, in my case, I was redirecting from the old blog called “Campaign” to a new one called “Obama”, so my addition looks like this:

RewriteRule ^campaign(.*) obama$1 [R,L]

For the most part this is self-explanatory if you are familiar with regular expressions. The caret is an anchor signaling the start of the redirect directory and the (.*) is a catch-all, ensuring everything following the old directory will be included in the redirect.

The “[R,L]” at the end are flags to, first, force the redirect and, second, to show that is the end of the redirection in that particular RewriteRule. Both flags are required.

Apache has detailed documentation on using RewriteRule, including specifics on the use of flags.

Read Comments

CSS drop-down menus: how to keep the top level selected when hovering over a sub-menu

Posted 12 April 2007 Tagged to , ,

Pure CSS-based drop-down menus are a great thing, if for no other reason than their sheer simplicity and flexibility. However, they have two main drawbacks.

  1. They don’t work in Internet Explorer 6 due to the browser’s poor support for the :hover pseudo-class.
  2. When the mouse cursor is over a drop-down, the top level navigation item does not stay highlighted under most conditions.

Fortunately, both problems can be solved with some simple JavaScript. The first problem is easily corrected with the excellent Son of SuckerFish drop-down code. The second problem can be solved using the equally small amount of code described below.

The best part of this code its use of DOM hooks in your XHTML document to add the functionality making it self-contained and allowing full separation of content and design.

For the sake of simplicity, and reducing the number of called functions, I’ve combined the SuckerFish JavaScript with my own.

Read full entry...