Andrew Sellick http://www.andrewsellick.com andrewsellick.com Sat, 28 Jun 2008 01:16:02 +0000 http://wordpress.org/?v=2.5.1 en Advance Vista Styled CSS Menu http://www.andrewsellick.com/94/advance-vista-styled-css-menu http://www.andrewsellick.com/94/advance-vista-styled-css-menu#comments Wed, 26 Mar 2008 14:37:49 +0000 andy http://www.andrewsellick.com/94/advance-vista-styled-css-menu

 

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.

Advanced CSS Menu

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)

CSS Vista Menu

step three

Build the HTML structure:

<div id="main-nav">
    <ul>
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
        <li><a href="#">Four</a></li>
    </ul>
    <div class="clear-both">&nbsp;</div>
</div>

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:

body{
    font-family:Arial, Helvetica, sans-serif;
    font-size:75%;
}

#main-nav{
    height:29px;
    float:left;
    background-image:url(../images/nav-bg.gif);
    background-repeat:repeat-x;
    background-position:top left;
    width:100%;
}

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.

#main-nav ul,
#main-nav li{
    padding:0px;
    margin:0px;
    list-style-type:none;
}

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

#main-nav ul{
    height:29px;
    line-height:29px;
    background-image:url(../images/nav-bar.gif);
    background-position:right;
    background-repeat:no-repeat;
    float:left;
    padding:0px 1px 0px 0px;
    margin:0px 0px 0px 10px;
}

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).

#main-nav li{
    height:29px;
    line-height:29px;
    display:inline;
    position:relative;
    float:left;
    width:80px;
    text-align:center;
}

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.

#main-nav li a{
    height:29px;
    width:80px;
    text-align:center;
    float:left;
    background-image:url(../images/nav-bar.gif);
    background-position:left;
    background-repeat:no-repeat;
}

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.

#main-nav li a:link,
#main-nav li a:visited{
    color:#FFFFFF;
    text-decoration:none;
}

#main-nav li.active a,
#main-nav li a:hover{
    background-image:url(../images/active.gif);
    background-repeat:no-repeat;
    background-position:left;
}

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.

]]> http://www.andrewsellick.com/94/advance-vista-styled-css-menu/feed JavaScript Clone Object Function http://www.andrewsellick.com/93/javascript-clone-object-function http://www.andrewsellick.com/93/javascript-clone-object-function#comments Thu, 20 Mar 2008 15:15:24 +0000 andy http://www.andrewsellick.com/93/javascript-clone-object-function Here’s a pretty useful function that clones objects with the use of recursion allowing deep cloning:

function cloneObj(o) {
     if(typeof(o) != ‘object’) return o;
     if(o == null) return o;
   
     var newO = new Object();
   
     for(var i in o) newO[i] = cloneObj(o[i]);
      return newO;
 }

 

Original source snipplr.com.

]]> http://www.andrewsellick.com/93/javascript-clone-object-function/feed JavaScript GUID Generator http://www.andrewsellick.com/92/javascript-guid-generator http://www.andrewsellick.com/92/javascript-guid-generator#comments Wed, 19 Mar 2008 12:37:40 +0000 andy http://www.andrewsellick.com/92/javascript-guid-generator 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:

function S4() {
    return (((1+Math.random())*0×10000)|0).toString(16).substring(1);
}

function generateGuid(){
        return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4()).toUpperCase();
}

 

Originally posted by  Dr John Stockton on thescripts.com.

]]> http://www.andrewsellick.com/92/javascript-guid-generator/feed Playstation 3 (PS3) and BTHomeHub network issues (80710723) http://www.andrewsellick.com/91/playstation-3-ps3-and-bthomehub-network-issues-80710723 http://www.andrewsellick.com/91/playstation-3-ps3-and-bthomehub-network-issues-80710723#comments Wed, 27 Feb 2008 21:12:07 +0000 andy http://www.andrewsellick.com/91/playstation-3-ps3-and-bthomehub-network-issues-80710723 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..

]]> http://www.andrewsellick.com/91/playstation-3-ps3-and-bthomehub-network-issues-80710723/feed HTML Forms on the fly http://www.andrewsellick.com/90/html-forms-on-the-fly http://www.andrewsellick.com/90/html-forms-on-the-fly#comments Tue, 19 Feb 2008 22:45:01 +0000 andy http://www.andrewsellick.com/90/html-forms-on-the-fly 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).

]]> http://www.andrewsellick.com/90/html-forms-on-the-fly/feed Script of the week http://www.andrewsellick.com/89/script-of-the-week-7 http://www.andrewsellick.com/89/script-of-the-week-7#comments Fri, 15 Feb 2008 14:51:15 +0000 andy http://www.andrewsellick.com/89/script-of-the-week-7 Script of the week this week goes to the CSS Text Wrapper.   On the website they state " The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want. All you have to do is draw the left and right edges below and then copy the generated code to your website" and I have to say it is very impressive.

The site covers every angle from XHTML with inline CSS, to XHTML with external CSS styles and finally an unobtrusive JavaScript.  This is all neatly created for you on the fly from the website by using their flash tool to sculpt your desired shape.

The image to the left shows just how effective this technique can be producing some superb shapes to enrich your sites design and layout.

Have a look for yourself at the CSS Text Wrapper and if your still not decided why not have a look at the CSS Text Wrapper demo page.

]]> http://www.andrewsellick.com/89/script-of-the-week-7/feed PHP UK Postcode Validation http://www.andrewsellick.com/88/php-uk-postcode-validation http://www.andrewsellick.com/88/php-uk-postcode-validation#comments Fri, 15 Feb 2008 14:05:39 +0000 andy http://www.andrewsellick.com/88/php-uk-postcode-validation Well I’ll start off by saying I’m not dead.  I’m very much a live and kicking.  Sorry for the delay in posting, however, I have been working on a couple of big projects which I will post about here soon so check back to find out more.

Anyway back on topic I thought I would share a really neat piece of code with you.  I recently had the need to validate a UK post code, using PHP, and decided it was worth looking to see what other people had developed (no point in reinventing the wheel).  I found a very useful piece of code at braemoor.co.uk that offers full UK Postcode validation  as per the official specification and from the list of BFPO codes.

The code is very thorough and works like a charm so I would definitely recommend it.  They also offer other validation methods for UK telephone numbers, National Insurance, Credit Card, Email Address etc in a multitude of languages including JavaScript, PHP, ASP and PERL so check it out.

]]> http://www.andrewsellick.com/88/php-uk-postcode-validation/feed What makes a successful blog? http://www.andrewsellick.com/86/what-makes-a-successful-blog http://www.andrewsellick.com/86/what-makes-a-successful-blog#comments Sun, 13 Jan 2008 23:14:17 +0000 andy http://www.andrewsellick.com/86/what-makes-a-successful-blog So I’ve been blogging now for a  while now and I have recently been thinking, "What makes a successful blog?".  To be honest this is a question with endless answers, with many different variations and opinions, however, I thought I would voice my say.

Content

Well as they say content is key, you have to pick a topic from which you have a wide ranging knowledge.  If you can find a niche and strive to become an authority on the topic then people will pay attention.

The regularity at which you add content to your blog also provides a key point in determining whether visitor levels grow.  Frequently added content will help to drive new visitors to your blog whilst also providing regular readers with a reason to keep coming back.

Research research research

Keep your ear to the ground and finger on the pulse looking for the latest news and technologies.  Your users want to find cutting edge articles and if you can’t provide them they will find another site which can.

Create controversy

Now this is something I hear other bloggers mention a lot and to be quite honest I’m not too sure I totally agree, so let me explain.  If your articles cause controversy but you believe in everything your writing and feel you can back up your statements then I have no problem with this.  This is the start of a debate not a war, however, if your sole aim is to cause controversy with the aim of driving traffic and you can’t substantiate your claims/statements then I believe you will only create a negative long term impact on your blog.  Users are not stupid and do not like deliberate and underhand attempts for attention, plus it’s never a good idea to get yourself a bad reputation.

Passion and drive

Your articles must display your passion and drive for your desired topic.  Without this your articles will undoubtedly be a less then entertaining read and more than likely provide very little interest to readers.

Think SEO

You may have the best blog in the world but if nobody can find it whats the point?!  Consider how you name your articles, the keywords you use within your article content as well as your templates HTML structure to name but a few.  Have a look at SEO related sites such as Matt  Cutts dot com and SEO Trickster dot com to help increase your SEO knowledge as your blog will directly benefit.

Publicise

Promote your website and its articles on sites such as Digg, Stumbleupon or reddit.  If your article hits the spot and proves popular with readers then expect huge levels of traffic to descend on your blog, whilst obviously raising your profile.

Guest Blog

Guest blogging, although it could easily fit into the category above, further helps to raise your profile.  Offering articles to popular sites with similar content to your own (making sure you are referenced at the top of the article with a link back to your site) again increases awareness of you and your site, whilst also driving traffic.

Show personality

It is important to show your readers that you are a human being.  By allowing your personality to flow through your articles you can easily endear your readers to you.  This can help develop a sense of community and loyalty prompting repeat visits and high levels of commenting.  Remember users love an active site with frequent commenting.

Monetise

How does monetising make a successful blog?!  Well I guess it does depend on your ambitions for your blog, although as I’m sure your aware any money you make through schemes such as Google Adsense or the Yahoo! Publisher Network can be directly pushed back into your blog for programs such as Google Adwords or maybe you want to pay a friend to create a fresh design.

Network

Talk to other bloggers and listen to their views and opinions.  Not only can this gain you a very vital link if you get on well, but it can also provide you with a very nice topic for you to debate on your blog.  A bit of sensible blog rivalry (debating) never hurt anybody and again can gain you some much needed online attention.

Link to other blogs

Link to other blogs can work on many levels; firstly if trackbacks are enabled on the recipient site then you will receive a link back to your site and the possibility of further traffic and secondly, as stated above in the "Network" section, it can provide a topic for debate with other bloggers gaining you valuable attention.

Link bait

Although many users frown upon "link bait" (articles or content which are "guaranteed" to receive incoming links from other sites) you should never rule it out.  Increasing the amount of inbound links to your site will help increase your traffic levels through referrals as well as improve your natural search rankings, whilst also raising the profile of your site.

Encourage repeat visits

From a must have online tool that users just can’t live without to the killer list of resources, it is essential that users have a reason to keep coming back to your site.  Without this your site will have a very limited life span.  These reasons can also help to provide the required "link bait" as stated above.

Refresh your blog

It is important to visually refresh your blog over time as nobody wants to visit a site that looks like it was built in 1997 so try and keep up with the times.  Mixing up the design of your site can also offer further stimulation and greater levels of interaction to users helping to increase repeat visits and the time spent on your site.

Do not rest on your laurels

Finally it is important to remember that no matter how popular your website/blog you cannot afford to rest on your laurels.  Doing so means your website can only go in one direction, backwards.

Keep those ideas and enthusiasm flowing and I’m sure you’ll all side step this particular hurdle.  Happy blogging!!!

]]> http://www.andrewsellick.com/86/what-makes-a-successful-blog/feed Free SEO internet marketing book http://www.andrewsellick.com/87/free-seo-internet-marketing-book http://www.andrewsellick.com/87/free-seo-internet-marketing-book#comments Sun, 13 Jan 2008 19:28:04 +0000 andy http://www.andrewsellick.com/87/free-seo-internet-marketing-book Over the last year or so I have been trawling the internet for SEO tips/advice and during my research I stumbled upon a free internet marketing book that may be of interest.  The guys/girls at Marketing Pilgrim dot com have compiled a free e-book offering great reviews of SEO as well as a general overview of internet marketing industry.

I thoroughly recommend you have a browse…

download

Download a copy of the free SEO internet marketing book.

]]> http://www.andrewsellick.com/87/free-seo-internet-marketing-book/feed JavaScript Table Row Highlighter Class using Mootools http://www.andrewsellick.com/85/javascript-table-row-highlighter-class-using-mootools http://www.andrewsellick.com/85/javascript-table-row-highlighter-class-using-mootools#comments Wed, 09 Jan 2008 20:22:14 +0000 andy http://www.andrewsellick.com/85/javascript-table-row-highlighter-class-using-mootools Well Christmas has been and gone (I hope you all had a fantastic Christmas/New Year), and now it’s time to get back down to some work.

I have developed a simple little class to highlight table rows using Mootools and I thought I would share it with the world.

code

As you can see below the HTML code is very basic and uses an ID to define the region which requires highlightling.  In this example an ID of "highlight" has been applied to the tbody.

Finally all that is left is to instantiate the "tableHighlighter" class using the ID of "highlight" to reference the table (or part of) required.

<table>

    <thead>
        <th>One</th>
        <th>Two</th>
        <th>Three</th>
        <th>Four</th>

        <th>Five</th>
        <th>Six</th>
    </thead>
    
    <tbody id="highlight">
        <tr>
            <td>1</td>
            <td>40cm</td>

            <td>Quaterfold</td>
            <td>100</td>
            <td><a href="#">1000</a></td>
            <td>3346005</td>
        </tr>
        <tr>
            <td>1</td>

            <td>40cm</td>
            <td>Quaterfold</td>
            <td>100</td>
            <td><a href="#">1000</a></td>
            <td>3346005</td>
        </tr>

        <tr>
            <td>1</td>
            <td>40cm</td>
            <td>Quaterfold</td>
            <td>100</td>
            <td><a href="#">1000</a></td>

            <td>3346005</td>
        </tr>
        <tr>
            <td>1</td>
            <td>40cm</td>
            <td>Quaterfold</td>
            <td>100</td>

            <td><a href="#">1000</a></td>
            <td>3346005</td>
        </tr>
        <tr>
            <td>1</td>
            <td>40cm</td>
            <td>Quaterfold</td>

            <td>100</td>
            <td><a href="#">1000</a></td>
            <td>3346005</td>
        </tr>
        <tr>
            <td>1</td>
            <td>40cm</td>

            <td>Quaterfold</td>
            <td>100</td>
            <td><a href="#">1000</a></td>
            <td>3346005</td>
        </tr>
    </tbody>
    

</table>

<script type="text/javascript">
    
    var th = new tableHighlighter( ‘highlight’ );
    
</script>

class options

The Hightlighter class comes with several options built in to allow for easy customisation.  These include:

  • rowColourClass - Can be named as you wish and referenced through css to produce your desired results.
  • rowHoverColourClass - Can be named as you wish and referenced through css to produce your desired results.
  • highlightRow - odd or even

An example of how this could be used is as follows:

<script type="text/javascript">
    
    var th = new tableHighlighter( ‘highlight’, {highlightRow: ‘odd’, rowColourClass: ‘myRowClassOne’, rowHoverColourClass: ‘myRowHoverClassTwo’} );
    
</script>

mootools modules

The modules required for this class is as follows:

Core

  • Core

Class

  • Class

Native

  • Array
  • String
  • Function
  • Number
  • Element

Element

  • Element.Event

download

Please feel free to download the JavaScript Table Row Highlighter code.

demo

Have a look for yourself at the JavaScript Table Row Highlighter demo.

]]> http://www.andrewsellick.com/85/javascript-table-row-highlighter-class-using-mootools/feed