Out With the Old, In With the New

As you might have noticed – I took a week off from blogging in order to focus on something else – cleaning up Jappler.com. Over the past few months I have learned so much more about WordPress, web site optimization, and what I really used this web site for – so I decided I needed to take some time to redo this site.

From a design perspective, I decided to darken the colors quite a bit in order to remove some of the drabness of the old design. I also added a background pattern to give some depth, and also added in some new pictures in the header that represent changes/additions in my life over the last few years. I love working with greys – so I added more grey elements. I also simplified the layout and got rid of a number of image based elements to keep everything minimal.

From a UI perspective, I decided to focus on the content I have created over the past 4-5 years instead of a few static pages here and there. I moved all of the blog content into the main navigation so it is easier to find/navigate. I also used Jappler Menus in combination with the WordPress function to list all categories/sub-categories.

From a functional perspective, I started from scratch with this new version. I created a number of custom functions that make presenting content a lot easier. I dropped the YUI library and went with all jQuery based AJAX functionality. The code is leaner, faster, and easy to modify for any future needs. The comments are now using WordPress’s threaded comment functionality, and a number of other WordPress 2.7 additions. I also went through and got rid of almost 50% of my old plugins (replaced the functionality with custom functions, WordPress built in functionality – or completely removed unused plugins.

From an optimization perspective, this site uses far less javascript, CSS, and images and will load much faster than the previous site. I also increased the use of title tags, alt tags, and other easy tricks to help with search engine optimization.

All in all – this was something fun that I enjoyed and look forward to adding even more new design/functional elements in the future.

Uncheck Checkbox Values

I recently ran into a situation with a custom form where users had a number of checkboxes where the values were saved upon submit. When they went back through the form to make changes, if they unchecked something that was already checked and submitted the form again, the checkbox value would not change (not empty). The solution (thanks to Demitrious for finding this!) was simple.

jQuery + CSS + XHTML = Jappler Menus v2

Previously – I introduced a nice way to create drop down menus using HTML (lists), Javascript (drop down), and CSS (styling of menu). I put all of this together and called it: Jappler Menus. (See previous post about Jappler Menus).

Since writing that post – I have found a better, faster, cleaner way to work with drop down menus. I had originally seen some nice menus: http://help-developer.com and decided with some changes – that would be a much nicer way to work with menus. For this – I give you Jappler Menus version 2.

Here is an example of Jappler Menus in action: http://jappler.com/downloads/jappler-menus_v2/

There are 3 main components to the Jappler menus: HTML, Javascript (jQuery), and CSS.

  1. The HTML to generate the menu contents. All you need to use to create the menu is create a simple HTML list:
    <ul>
    	<li><a href="#">Home</a></li>
    	<li><a href="#">About Us</a>
    		<ul>
    			<li><a href="#">Our Story</a></li>
    			<li><a href="#">Our Clients</a></li>
    			<li><a href="#">Our Philosophy</a></li>
    		</ul>
    	</li>
    	<li><a href="#">Our Products</a>
    		<ul>
    		       <li><a href="#">WordPress Themes</a></li>
    		       <li><a href="#">WordPress Plugins</a></li>
    		       <li><a href="#">WordPress Consultation</a></li>
    	         </ul>
    	</li>
    	<li><a href="#">HOWTOs</a>
    		<ul>
    			<li><a href="#">bbPress</a></li>
    		        <li><a href="#">WordPress</a></li>
    		        <li><a href="#">General</a>
    		        	<ul>
    					<li><a href="#">CSS</a></li>
    					<li><a href="#">XHTML</a></li>
    					<li><a href="#">Javascript</a></li>
    				</ul>
    			</li>
    	         </ul>
    	</li>
    	<li><a href="#">Archives</a></li>
    	<li><a href="#">RSS Feed</a></li>
    </ul>
    
  2. The javascript that makes the drop downs fade in and out. This uses jQuery and then some custom JS that takes care of our menu:
    function japplerMenu(){
    $(" #navigation ul ").css({display: "none"}); // Opera Fix
    $(" #navigation li").hover(function(){
    		$(this).find('ul:first').css({visibility: "visible",display: "none"}).fadeIn(200);
    		},function(){
    		$(this).find('ul:first').css({visibility: "hidden"});
    		});
    }
    
     $(document).ready(function(){
    	japplerMenu();
    });
    

    }

  3. The CSS to make things look pretty.Here is the custom CSS that is needed:
    #mainNav {height:30px;background: url('images/mainNav_bg.gif') repeat-x;width:623px;}
    
    #navigation, #navigation ul{position:relative;z-index:1000;list-style-type:none;list-style-position:outside;margin:0;padding:0;}
    
    #navigation a {display:block;padding:0 20px 0 20px;font-size:1.1em;font-weight:bold;color:#fff;text-decoration:none;line-height:30px;}
    
    #navigation li:hover {background: url('images/mainNav_bg-over.gif') repeat-x;}
    #navigation li:hover a {color:#fff;}
    
    #navigation li{float:left;position:relative;}
    
    #navigation ul {width:165px;position:absolute;left:-1px;top:29px;display:none;background:#f1f4f2;border:1px solid #4b4d5b;border-bottom:none;}
    
    #navigation li:hover li a {color:#333;}
    
    #navigation li ul a {float:left;width:155px;line-height:normal;font-weight:normal;font-size:.95em;text-align:left;border-bottom:1px solid #4b4d5b;background:#f1f4f2;height:auto;padding:5px;}
    #navigation li ul a:hover {background:#a4a5a9;color:#000;}
    
    #navigation ul ul{top:auto;}
    
    #navigation li ul ul {left:160px;margin:0;}
    
    #navigation li:hover ul ul, #navigation li:hover ul ul ul, #navigation li:hover ul ul ul ul{display:none;}
    #navigation li:hover ul, #navigation li li:hover ul, #navigation li li li:hover ul, #navigation li li li li:hover ul{display:block;}
    
    
    

    There is also some additional CSS for IE 6. (See IE 6 specific CSS). You can add some conditional logic to include this for only IE 6 (See the example source above – look in the header for the conditional code.)

These menus are compatible with IE 6+, Safari 2+, Opera 9+, and FF 2+. If you want it to work in IE 6 – I have a start on some CSS that will make it work.

Quick CSS for WordPress Images

If you install WordPress and use the media uploader to manage your images in your posts – you can easily style your images quickly by adding the following code to your theme’s stylesheet.

img.alignright, img.aligncenter, img.alignleft {padding:4px;background:#efefef;border-color: #aaa #ccc #ddd #bbb;border-style: solid;border-width: 1px;}
img.alignright {float:right;margin-left:5px;}
img.alignleft, img.alignnone {float:left;margin-right:5px;}
img.aligncenter {display: block;margin-left: auto;margin-right: auto;}

This code will set up your images to float appropriately, as well as give a nice border as seen below.

Christmas in DC

Note* This information is now updated: Updated CSS

Always Use a Doctype

After spending an hour on something that should have taken me 20 minutes – I wanted to pass on something I should have caught right away. The problem: you use CSS to lay something out and it looks great in Firefox and Safari – but not in IE. At this point I validate the CSS to make sure I did not forget a bracket or something stupid. Next step – validate the XHTML. This is where I would have solved my problem, but I failed to take this step. At that point I would have seen that the script I was working with did not have a doctype defined. Once I added in the doctype – everything loaded as expected and I could not believe I missed something so basic. Lesson learned – and hopefully you will know now as well to make sure a doctype is always set.

Sliding Doors + Sons of Suckerfish = Jappler Menus!

There have been two great menu and navigation techniques I have used over the last few years:

  1. Sliding Doors of CSS
  2. Sons of Suckerfish (for drop down menus)

I have used both of these techniques on several web sites, but crazily not together…until a week ago when a client decided they wanted to move away from their antiquated menus that relied on hundreds of lines of javascript, HTML tables, and over 40 image files (for seven tabs). This technique works in IE 6, IE 7, Firefox, and Safari.

After I had put the code into place I thought it might be helpful for others to see exactly how it is done. These techniques give you a lot of flexibility with very lightweight code.

Code/Files Needed

  1. Two tab images (left and right, with both an active and hover (highligted) option
  2. Sub-menu arrow (not required)
  3. Sons of Suckerfish javascript
  4. CSS for both the drop downs and the sliding doors techniques
  5. Menu list code (your menu items)

Two tab images
The sliding door technique is great because you do not need to make tab specific images, nor do you need to worry about the tab length – it is all taken care of by two images and some CSS. For this example, I am going to use two basic tab images that I quickly created for this example:

  1. Left
  2. Right

Sub-menu arrow (not required)
If you want to easily let your visitors know you have a sub-menu within your menus, add in a sub-menu arrow.

Sons of Suckerfish javascript
After years of using nasty javascript – it is refreshing to see that this technique only requires a few lines of javascript (check out the javascript).

CSS for both the drop downs and the sliding doors techniques
The CSS for the drop down menus and the tabbed navigation is pretty slick (check out the CSS).

Menu list code (your menu items)
The menu list code is the actual menus/tabs. The code can be dynamically created by using something like wp_list_pages() in WordPress, or you can create the code yourself. I have created some sample code for this example.

Everything put together
Now that you have an understanding of all the files and code involved, let’s see everything put together This is a very good way to have sustainable code/files for a small or large web site when dealing with navigation.

Questions, comments? Contact me!

validate, validate, validate!

I have been working on a project for a few months that has been touched by many developers at various points in time. It is my job to optimize the code, ensure it works in multiple browsers, and then test new functionality. This is a huge project with tens of thousands lines of code. I recently got stuck on one issue that I could not figure out at all…so I finally decided to run everything through the W3C validators, and as soon as I did, I realized I should have done this as soon as I started on the project, then every x weeks.
I know I have said it before, but I will say it again. If you are working on a project and ever get stuck on something, validate your code.

Great CSS Buttons

I am working on a project that started small and got really big. Good for the company, bad news for the code. I am in the process of going through the code and to fix and optimize it for multiple browsers. One word of advice for developers: when starting a new project, expect exceptions. One issue I have run into: not all buttons will be 90px wide like once thought by the original designer. By using flexible code, your big and small sites can benefit from changes in the future. If you are going to create buttons for your site, check out the “sliding doors” buttons. I also recommend the “sliding doors” tabs – I use those on almost every site I do.

css containers: one image, fixed width, rounded corners.

I use reuse a number of CSS/XHTML layouts everyday and feel it is time to share. This is the third of three articles in a series on how to create various CSS rounded corner or “fancier than a simple box” container with CSS and XHTML that work in IE 6, IE 7, Firefox 1.5, Firefox 2.0, and Safari 2.0. I have used this code on several large and small sites and have enjoyed the flexibility of both changing the height and the width. (Also see css containers: simple, fixed width, rounded corners, and css containers: fancier, fixed width, rounded corners..)

There are some sites where you need to have some flexibility with both height and width of the containers. This technique is known as the “ThrashBox” and I will not go into detail about it because it is well documented: ThrashBox. If you want to use something like this, there is a great web site that offers to create the graphic needed based on your input of color, height, weight, and corner radius. Check it out:Spiffy Box.