AndrewSellick.com features: JavaScript, script.aculo.us, XHTML, CSS, SEO and PHP

Advance Vista Styled CSS Menu 26Mar08

After seeing an amazing design tutorial on PSDTUTS for a Vista Style menu design a decided to give it ago and turn their design into reality.  Well I’ve built it and it looks pretty good (see the css vista menu demo) so I thought I would share how I did it with the world.

step one

Create a PSD of the menu as details in the PSDTUTS article linked above.

step two

Cut out the images required for the menu design and save them to an images folder at the root of your site.  The required images are as follows:

• A one pixel wide image of the background of the menu. (nav-bg.gif)
• A one pixel wide image of the divider (bar) that splits each nav item. (nav-bar.gif)
• An active state image with the blue glow. Notice this image also has a divider (bar) on the left hand side of this image. This will be important for later on in this tutorial. (active.gif)

step three

Build the HTML structure:

As you can see above the structure is a simple unordered list of the desired navigation items, contained within a div named "main-nav".

HTML wise that is it really.  Just drop this in to the body of the site.

step four

Now we need to style the menu using the images we previously cut out as detailed below:

The code above sets the default font and font size for the body of the document.  You can use whatever font you desire here or if you only want to apply these font styles to the menu add the font styling to the "#main-nav" style.

The "#main-nav" style sets the height/width of the menu whilst also applying the navigation background to the container.

Next we need to remove the default padding/margin and bullets applied to unordered lists.

Now we set the height of the ul tag to match the height applied to the "#-main-nav" container whilst also applying the nav divider (bar) image as the background of the ul, positioning it to the right hand side.  Finally we float the ul left which gives a cross browse effect of width auto and pad the right hand side by 1px (This will allow room for the nav divider to show).

Next we set the height and width of the li tag and float it left forcing each li tag to sit inline with each other.  In this example the width is fixed to 80px but this is very much up to you and your design.   A line-height si also set to equal the applied height forcing the text to vertically align to the middle.

Now we need to style the "a" tag itself.  Again it has been given the same width and height as the li tag and floated left.  This makes sure the whole navigation item is clickable as well as to remove unwanted margins in IE 6.  Next the nav divider (bar) image is added to each "a" tag to complete the dividing pipes look.

Finally we need to add the link styling and active/hover states.  The text colour is set to white and link underline removed for all "a" tags and we apply the active image to the active class and "a" tag hover state.

Now all you need to do is check it out in your browser.  Enjoy..

demo

Check out the CSS Vista Menu Demo for yourself.

download

Download the CSS Vista Menu.

JavaScript Clone Object Function 20Mar08

Here’s a pretty useful function that clones objects with the use of recursion allowing deep cloning:

Original source snipplr.com.

JavaScript GUID Generator 19Mar08

I recently found an interesting forum post which detailed how to generate GUIDs using JavaScript on the fly.  Its very simple and looks as follows:

Originally posted by  Dr John Stockton on thescripts.com.

Playstation 3 (PS3) and BTHomeHub network issues (80710723) 27Feb08

Well I’ve just got myself a Playstation 3 so as you can imagine I was really happy when I finally got it all connected up?!  Thing is that’s when everything seemed to go wrong.

My first port of call, once inserting the basic settings, was to get connected to my wireless network.  As you can see from the title of this article I’m currently using a BTHomeHub and even with the problems I have had with it in the past I did not think for one second that I would have any issues with connecting my PS3 to the internet.  After inserting my wireless network details and testing the connection everything appeared fine, however, on trying to update the PS3 I kept receiving the following error number 80710723.

Well I have to say I wasn’t expecting that, but nonetheless I decided to search the internet to find a solution.  After a great deal of browsing I came to realise that this was a very common problem but unfortunately solutions weren’t readily available until I found a good post on AVForums where the following instructions are issued:

"I’m also having a bit of bother with this setup changing a nat type 3 to nat type 2 as pro evo currently not working on the network after the 2.0 update.

To assign a static ip on the router side of things, goto hub manager, then find your ps3 under devices. Change the type to gaming console and click keep same ip address.

To open ports, goto application sharing and pick a game from the default list, or create your own port forwarding by going to "If the game or the application you are looking for does not exist, click here to create it (you will be asked for game or application details)." Click manual entry of ports and you can assign port numbers via UDP or TCP.

DMZ doesnt work well with homehub and i reccomend to set your firewall settings appropriately to stop incoming traffic if you are opening ports."

To open the ports correctly I found another very useful site called Port Forward which has a step by step guide detailing how to open ports on the Home Hub for the Playstation 3.

All appears to be working now, although I’m sure as I start to play more online games I will encounter more problems.

Hope this helps..

HTML Forms on the fly 19Feb08

I have been looking about at form generators recently and I think it’s fair to say pForm have created one of the best. The generator offers many options including; theme/colour scheme selection, the choice of a multitude of field elements (from a textbox to a file upload) to add to your form, editable form and form field properties and finally ability to download your recently created form.

This is a really nice generator so if your interested have a look at pForm (HTML Forms on the fly).