Andrew Sellick

Simple PHP Email Obfuscation

Mon, 15 Sep 2008 13:10:25 +0000

Here’s a simple piece of code that performs PHP based email obfuscation to replace standard characters with an ASCII encoded alternative.

This technique, although simple, will block some of the less intelligent spiders/robots out there. There are many other techniques including using JavaScript to render email address or images or even reversing the email address through CSS, however they all have their pros and cons and remember there isn’t an solution.

'.email_obfuscator('test@test.com').'';

?>

CSS Float Tutorial

andy — Mon, 15 Sep 2008 10:52:05 +0000

I regularly get asked to explain CSS floats, how they work and more importantly how to fix the wonderful array of bugs that get thrown up during development.

For this reason I thought it may be a good idea to point everyone in the direction of a very useful article on CSS Tricks. It walks you through the development process for floating content and highlights any issues that may arise and the workarounds.

All in all a very good post and well worth a read if you need a little recap.

View CSS Float arictle

sIFR 3

Wed, 10 Sep 2008 14:01:58 +0000

This a quick post to demonstrate the power of sIFR 3. Most of you will have heard about sIFR and its benefits, but for those of you that haven’t “sIFR lets you use your favorite font on your websites by working with Flash, JavaScript and CSS”. It enables developers to build templates as close to the creative as possible without the use of images and compromising accessibility/usability.

Click the link below to see a few of the sIFR showcases I have put together.

I have used sIFR for some time now and decided it was about time that I created a few examples to give a quick overview as to its power.

View the sIFR 3 example

Searchme Visual Search

Sat, 23 Aug 2008 17:19:44 +0000

After stumbling the web for a while a couple of days ago I found a site called Searchme and I have to say ‘what a site’.

As Searchme profess on their website they are a ‘visual search engine’ meaning results for key phrases are returned in the form of pictures (screen shots) of websites. Key phrases are also highlighted to indicate where your search was matched.

Now if this wasn’t good enough, to be honest I was very impressed at this stage anyway, I then proceeded to the video search section and was blown away by the visual display of the videos as well as the overall acuracy of the search results.

Being able to search the videos through cover flow certainly makes life a hell of a lot easier and faster. I could breeze past the videos I didn’t want to see and simply select the videos I did and watch them there and then on the Searchme site.

I really believe as this site grows in popularity and they improve their ranking system of indexed sites Searchme will become a very popular search engine.

What would I improve?

Well I guess I would look to offer other types of views other than just cover flow. A thumbnail view and I dare I say it a plain old list view caters for all needs, but then again maybe that starts to move the site away from its original intention.

No I’m not dead :-)

Thu, 21 Aug 2008 14:58:24 +0000

Firstly I just thought I would write this article to let everyone know I’m still alive and kicking. It’s been a few hectic months for me, however, I’m back and going to start posting again.

The good newsa is over the last fw months I have developed several new JavaScript widgets so keep checking back as I will release them over the next few days.

Advance Vista Styled CSS Menu

andy — Wed, 26 Mar 2008 14:37:49 +0000

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:

Home

Three

Four

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.

JavaScript Clone Object Function

andy — Thu, 20 Mar 2008 15:15:24 +0000

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.

JavaScript GUID Generator

andy — Wed, 19 Mar 2008 12:37:40 +0000

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.

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

andy — Wed, 27 Feb 2008 21:12:07 +0000

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

andy — Tue, 19 Feb 2008 22:45:01 +0000

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