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…
by jonathan | Oct 19, 2009 at 9:45 pm |
web design
I recently was doing some upgrades on a site that was built by a previous company. The site in question was not built with standards in mind and displays in quirks mode. The site looks fine in most browsers and although not the best idea, I have been making updates to work in quirks mode. As you might have guessed I wanted to incorporate the Jquery library, Thickbox for image viewing. The only problem is that when you view an image while scrolled down on a page the Thickbox image shows at the top of the page. You have to scroll up in order to see the image. This only happens in IE and only when viewing a page in quirks mode.
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…
After doing some redesigning on this site I noticed that my NextGen gallery effects (ie. thickbox, lightbox) stopped working. When you clicked on an image it would link you directly to the jpeg image. I was getting very frustrated but after some research it turns out I was missing a very important line of code in my footer. I needed to add the php line “wp_footer();” to my footer file.
From WordPress Theme Development Page:
Goes in the “footer” of a theme; footer.php template. Example plugin use: insert PHP code that needs to run after everything else, at the bottom of the footer.
- Usage: <?php do_action('wp_footer'); ?>
- -or- <?php wp_footer(); ?>
This creates a space for wordpress to add code into your footer. NextGen gallery adds the thickbox javascript links in the footer so they are called at the end of a page load. If you are having the same problem try added the footer code to your theme.
