When WordPress changed their administrator layout I was fascinated with the navigation menu. It has a sleek and useful feel to it. Notable features would include the active styling to your current page, the sliding action of each menu section, the hover effect that shows the user which menu can be opened and how it keeps menus open between page views. Someone who designs and codes web sites can not just look at the end user experience but also the code behind the menu. I think WordPress does a very good job of using images and css to style the menu efficiently and cleanly but enough about WordPress let me get to what this article will be about.
I want to show how a vertical sliding menu can take on some of the features WordPress has implemented but also keep it simple to explain. I did not want to use any images to style the menu and keep everything as clean as possible. What I ended up with was 50% css, 25% jquery and 25% html. I used a few advanced CSS selectors and attributes (like border radius) to refine the effect.
Take a look at the final product here and read on for the explanation. Like always I have put the CSS and jquery in the same file to make it easy for you to inspect and download.
Continue Reading…
When I first started to design this site I did not pay much attention to standards or validation. I fired up my php / html editor and Firefox then got to work. When I got the basic template squared away I decided to check out what Internet Explorer 8 had done to my design. I was naive to think that Microsoft had retooled IE8 into a smart self helping browser. All of my floats were the wrong width, the text was much larger basically the whole layout was broken. I noticed that IE was rendering in the dreaded quirks mode. This started several rounds of Googling to find out if I was using the right DocType or maybe I was missing a tag or it could be any number of other items IE thought I needed.
Turns out that with IE8 came a brand new compatibility tag that would force the browser to use a specified rendering mode.
<meta content="IE=8(Insert browser mode here)" http-equiv="X-UA-Compatible"/>
This will force IE8 to specifically use the friendly and more standards compliant IE8 rendering mode. The fix works but this only targets IE8, all the people still using IE7 (upgrade please) will get the broken quirks mode. You may ask you self “Change the above code to IE=7 and all is good”. This will force IE8 to use the rendering engine of IE7 however IE7 will still do its own thing.
This is where the “House” epiphany moment happened. I found a web site that mentioned something about having a commented line above the DocType would make Internet Explorer do weird things. I took a look at my code and I had a commented line
<!-- Insert Header File -->
<?php get_header(); ?>
above my php line of code that inserted the header. I removed the commented line and all is well.
<?php get_header(); ?>
I do not even need the special IE8 rendering mode meta tag anymore. I could not believe that something so ridiculous would keep IE from rendering things in a standards mode.
A trend that has becoming more popular is having a floating feedback button on your home page so you can take advantage of your visitors opinion. The button can link to a form where the user can express their thoughts about the site or a page that allows them to vote on what features they would like to see on the site. You can mimic the feedback button for your own site with a some basic html and css.
Sneak a peek at the final product. (I hope you like the red, white and blue.)
Continue Reading…
This idea of collapsing tables came to me while trying to retrofit a Lotus Domino web application with better usability. The main principal is to use Jquery to hide part of the table when a specific cell or row is clicked.
Peek at the final product.
There are several really great Jquery html integration tutorials on the web. In fact this is a really great one. The previously linked page details how to setup Jquery to easily create zebra rows, row hover effect and row filtering. I will be showing you something a little different but equally easy to setup.
I will be setting up a table so that when you click on the head row the body will collapse or hide. This sounds pretty easy if you have a little Jquery knowledge but I am going to show you a few things that make the effect easy to reproduce when you do not know how many tables you will end up with. The main problem that I was having with the Lotus web application was that the tables was being created dynamically. Some times there might be 3 tables and sometimes there might be 10. Also I had nested tables which complicates things a little. I will explain more as we get into it. So lets start.
Continue Reading…
