Thanks for taking the time to visit my blog. I've been working on it since November 2010, and aim to try and keep adding as many article as time permits.

I've been working as a Web-Design / Coder for many years now, and thought it was finally time for me to give back some of the stuff I've learned over the years. I started this blog in November 2010, and have already added quite a few varying articles to the site. I'm always looking for new suggestions, so please visit the forum, or shoot me an email with suggestions!

If you feel you would be able to contribute to this blog in any way, please shoot me an email (or send me a message from the forum)

Categories:
    • 3 Column “Fluid” Design example…
      I thought I would post some info on how to make a “fluid” design. This can be used as a base for the design, and then you can tweak it how you want. First of all, lets see an example of what we are going to be creating: http://www.mywebsitedesignersblog.com/examples/3-col-fluid.html As you can see, I’ve added background colors to the page, so you can see the different “blocks” Obviously you can remove those. The main thing to take into consideration with a “fluid” design, is that you need to have margin: auto set..i.e: You can change the width of this to whatever you [...]
    • Simple Menu System using jQuery, and sub-slide list elements
      I was recently having a play around with a menu system, and came up with this: To see an example of it working, go here Its VERY simple to setup, and requires literally the smallest amount of Javascript First of all, add the following code into your … part of the page: Now add the following CSS to your page: ..and finally, the menu code itself: Be careful to look at the structure of this – For example, to make a pop-down sub ul element, you do: Hope this is helpful to someone, and if you have questions – please add a comment here, [...]
    • Social Media “side bar” with AddThis
      I’ve been amazed at the response to the “How to add Social media icons (as a sprite) and Google +1” article I wrote not too long ago, so I thought would give it another go, and write one about adding social media buttons as a “fixed” left/right sidebar. First of all, let me show you what we will be creating: 32×32 icons, with hover effect 32×32 icons, with NO hover effect 64×64 icons, with hover effect 64×64 icons, with NO hover effect To download the images, please click here Once you have that, we can look at the HTML. First of all – [...]
    • Rounded corners in IE 6, 7, 8, 9, Firefox, Chrome and Safari
      I was recently tasked with doing a redesign of someones site, and I wanted to try and find a good way to add “rounded” edges to the main content block, and a few other places. I found a HTC file, but could never get that working properly. In the end, I came across this post: http://www.dillerdesign.com/experiment/DD_roundies/#download Its SO easy to setup, I was amazed! You can see an example of this working here …. and then your HTML: ..and then add the following CSS to that page (just general CSS, nothing related to the rounded edges itself); And voila – it should work! UPDATE: I found [...]
    • Changing your background color based on the time of day!
      I was recently asked by someone to come up with a bit of code, which would let them change the color of their site , based on what time of day it was. I found it was surprisingly easy with jQuery! Here is the CSS (obviously you can change the color’s to whatever you want ): ..and the HTML: So your example may look a bit like this: Obviously you can do whatever you want with the CSS class. For example, to specify an image: Enjoy! Copyright secured by Digiprove © 2011All Rights Reserved Original content here is published under these license terms:  X  License Type: Read Only License Summary: You may read the original content [...]
    • Archive of CSS
    • Google Maps GeoCoding with Sidebar and inline searching
      After a LOT of work, I’m pleased to write up about a new script I’ve just finished. Its based on the Google PHP code for doing something similar (but in PHP): http://code.google.com/apis/maps/articles/phpsqlsearch.html You can see a working example of my script here: http://www.mywebsitedesignersblog.com/examples/google_map_ajax/map.html Requirements A MySQL database Perl The following perl module (installed as standard on most servers): Unicode A basic understanding of HTML, Javascript and mySQL databases Features: Quick loading (using mySQL) Easy to setup (you can add extra fields too) Sample data provided, to test it “out of the box” Works fine with UTF8 charachters Free Ok – first of all you will need to download this ZIP [...]
    • Marker Clusters in Google Maps v3 API
      After the success of this article: http://www.mywebsitedesignersblog.com/2011/09/google-maps-v3-making-a-map-with-multiple-markers-on/ I thought I would create an example of using Google Maps “Clustering” capabilities, for the maps where you have simply too many markers in one area. You can see an example here: http://www.mywebsitedesignersblog.com/examples/google_maps/google_maps_marker_cluster_example.html For this feature, we will be using an add on library called “Fluster2″. You can download this for free here: http://blog.fusonic.net/2009/12/clustering-for-google-maps-v3-with-fluster2/ Making use of this feature couldn’t be simpler 1) Upload the fluster2 files into a directory on your server 2) In your HTML, include the required libraries like so: Then add the following script to that page as well: Adding extra markers is simple [...]
    • Google Maps v3.. Making a map with multiple markers on
      I recently started converting over someones Google Map section of their site, to use the new(er) v3 API. Its relatively simple (in fact, quite a bit simpler than the old version). First of all – you no longer need an “API Key” (which you used to have to include in your pages, and caused fun and games when trying to use sub-domains and whatnot) First of all, lemme show you an example of what we are going to be creating: http://www.mywebsitedesignersblog.com/examples/map_marker_test.html First of all you need to make sure you include the “libs” from google maps (this is the stuff that does the [...]
    • Getting the FULL url of an image, even with relative paths…
      I was recently trying to get hold of a “full” image URL from the source of a page. I tried the following: ..and even using some JS code to try and work out if the image was a relative, absolute, or full URL… but that prooved very messy (and probably buggy). After some research I came across this option: This works perfectly with stuff like: An example of it running would be: Copyright secured by Digiprove © 2011All Rights Reserved Original content here is published under these license terms:  X  License Type: Read Only License Summary: You may read the original content in the context in which it is published (at this web address). No [...]
    • Checking the validity of a “price” in Javascript
      I recently needed to verify that someone entered a valid price for a field on one of my forms. I did a bit of looking around, and everything I found seemed a little over the top! Here is what I came up with: …simply call with: It will accept the format of: 1 10 10.99 10.50 9.99 etc .,..it WONT accept stuff like: 10.1 Enjoy Copyright secured by Digiprove © 2011All Rights Reserved Original content here is published under these license terms:  X  License Type: Read Only License Summary: You may read the original content in the context in which it is published (at this web address). No other copying or use is permitted without written agreement from the author.
    • jQuery “Add Bookmark” plugin – abookmark
      After the popularity of my other post which gave you info on how to use jQuery to create a bookmark, I thought I would write an easier to use “plugin” for jQuery which would let you do it much easier. You can see an example of it here: http://www.mywebsitedesignersblog.com/examples/abookmark/index.html You can download the plugin from here Ok, so now let look at how you call it: Now, you have 3 ways to call this plugin: The current page (no options passed) A custom page + title, passed in from the plugin paramaters) A link, which you want to offer as a bookmark Here is how you call it [...]
    • jQuery plugin – FlashingText v1
      I decided to finally jump in the deep end and write my own jQuery plugin Its nothing too complex… it will let you assign a class to text/div blocks, and “flash” the background/font color every xx milliseconds. Its VERY simple to use. It works in IE 6, 7, 8 , 9 etc, FireFox 2+, Chrome and Safari (I havn’t tested any more, but they should all be fine). As always IE was a sod to get working… ie. the rgb() stuff comes out as rgb(123,123,123) in IE 8 and lower… but in Chrome, FF, IE 9+ it [...]
    • “Search Auto Suggestion”, like Google
      I was recently playing around with some code to make an “auto suggest” function for when people do searches / add values into an input field. Here is what I came up with: View the example Its pretty simple to setup: 1) Add in the jQuery library (if you don’t already have it!): 2) Add the following Javascript code into your page: 3) Add the following CSS: To make it align correctly to your input, you will probably need to play around with the bit highlighted (line 5), so that it correctly indents from the left margin. 4) Download the following files and upload them into [...]
    • Archive of jQuery
    • Convert HTML HEX code (#ffff00, etc) into RGB (255,255,0)
      I recently needed to convert a HEX value in a database into a RBG (red-green-blue) value for using in some Javascript. I ended up doing it in the Perl code, as it worked out pretty simple: Then call with: This would convert the above into rgb(255,0,255) Enjoy! Copyright secured by Digiprove © 2011All Rights Reserved Original content here is published under these license terms:  X  License Type: Read Only License Summary: You may read the original content in the context in which it is published (at this web address). No other copying or use is permitted without written agreement from the author.
    • “Search Auto Suggestion”, like Google
      I was recently playing around with some code to make an “auto suggest” function for when people do searches / add values into an input field. Here is what I came up with: View the example Its pretty simple to setup: 1) Add in the jQuery library (if you don’t already have it!): 2) Add the following Javascript code into your page: 3) Add the following CSS: To make it align correctly to your input, you will probably need to play around with the bit highlighted (line 5), so that it correctly indents from the left margin. 4) Download the following files and upload them into [...]
    • Cleaning characters from a string, with 1 simple regex
      I recently came across a nice regex function, which I didn’t know about. Normally, if I wanted to replace a selection of charachters from a string – I would simply do: But I recently found this can be achieved using a single regex: Basically, we are just “merging” those 2 queries into a single one, split using a pipe (|). Sometimes however (with more complex regexes), you may find it better to still use 2 seperate regexes, just so it makes it easier to understand in the future Copyright secured by Digiprove © 2011All Rights Reserved Original content here is published under these license terms:  X  License Type: Read Only License [...]
    • AndySQL – simply OO interface Perl module for manipulating mySQL!
      I recently had a bit of spare time, and thought I would put it to use coming up with a nice OO interface module for Perl, which will let you connect to mySQL databases much simpler. Please be aware this is my FIRST module of this kind, so if you spot any bugs/issues, or just have some suggestions – please don’t be scared to ask To download this module, please click here. Extract these files, and upload them somewhere on your server. Then in your script, add this line after the “shebang”: If the files are in the same directory [...]
    • Javascript (jQuery) , Perl and AJAX Retro Page Counter
      I was recently asked by someone to write a page counter, which would work seperatly for EACH page. I came across this cool “retro counter” jQuery plugin, which I thought I would use to create an AJAX based hit counter (using jQuery, Perl, AJAX, and the flipCounter plugin) Ok – first of all lets see what exactly we are gonna be creating: http://www.mywebsitedesignersblog.com/examples/counter/counter.html and http://www.mywebsitedesignersblog.com/examples/counter/counter2.html (same example, but showing how it works on seperate pages) As you can see, we have a nice little counter that is showing us the number of page views this specific page has had. You can also see [...]
    • Archive of Perl Coding
    • My Top jQuery Date Selector (picker) Plugins
      I’ve done quite a few jobs which have needed date selectors in one sense or another. I thought I’d put together a list of the cool jQuery one’s I’ve found, and also some non-jQuery ones, for those of you who want to use them. Enjoy! jQuery UI Goto Site – Download AI I quite like this plugin, as it has a LOT of other stuff that comes with it (i.e size, effects, accordian, and a ton of other stuff). The only downside I could see, was that its quite bloated in terms of how much stuff you [...]
    • Flash, CSS and Image menu system – the easy way!
      Making your site look good, is always at the top of any Webmasters list! Cool buttons/menu systems, is one of the ways to do that. There are a few types of menus you can use: Flash CSS Images Here is a list of some of my favourite sites: Image Menus Button Generator - http://www.buttongenerator.com/ This site has a variety of cool menu systems that use basic images, and a clever bit of CSS and DHTML. Creating your menus on this site is as simple as it gets … simply choose the menu you want, click the “click here to edit menu” link, and enter the values that [...]
    • Recommended Premium Template Sites
      There are many “premium” pre-made template sites around, which lets you simply download a ZIP with all the images, CSS, XHTML and more done …. and all you do is customize it to suite your needs! Here are a few of our favourites: 4Templates – With templates starting at just $4.99US, they offer logos, business cards, full web-designs. With over 2,000 templates – you will be spoilt for choice! Template Monster – These templates are generally submitted by top-notch designers from around the world. Varying in price, you can also buy the design “outright” (for example, if you want to be the ONLY [...]
    • Speed up Google+ Button by loading Javascript only when someone hovers
      I was recently checking the speed of this blog, and I found the Google+ button was REALLY slowing down my site. I did a bit of research, and people were suggesting to “load it when someone hovers over” … which made sense Here is an example of what we are trying to do: http://www.mywebsitedesignersblog.com/examples/speeding_up_google_plus.html Its actually very simple to do. 1) Remove this part: 2) Replace that section of your HTML with: Simply change the image source to the real location of the Google+ image you wanna use (ideally the same as you would have seen if you were using the JS [...]
    • Optimize JPG image on your site the easy way!
      I was recently tasked with trying to “optimize” a selection of JPEG images (over 20,000 of them – so not something you would want to do manually!). After a bit of research, I came across jpegtran After seeing how simple it was to save large chunks of data for those images, I decided to write a batch script to do just that. It uses perl, and needs to be run via Telnet/SSH. The script is as follows: Save ther above as “optimize_jpg.cgi” and upload it to your server. Be sure to change the path its looking for the images in: Then login [...]
    • Optimizing your web-site
      I get asked this quite a lot, and the best resource I’ve found thus far, is GTMetrix. Basically, what this site does, is run your page through Firefox’s "Firebug" and "YSlow" add-ons, and then returns the results back to you in a  very nice (and clean!) interface, so you can see exactly whats going on On of my favourite features, is the "timeline" … this lets you quickly and easily see how long its taking for files to download, so you can see your optimizations in realtime! One little thing to be aware of, is that if you are using "caches" for your html/css/images/js files, then each time [...]
    • The importance of “minifying” your HTML…
      In the times where people want your sites to load quicker – making the HTML page as small as possible is a must for webdesigners! The below example is a prime example (its only a small example, but the point is there); The “non minified” version is 948 bytes The minified version, is 896 bytes: As you can see, there is 62 byte difference! Now, that doesn’t sound like much – but if you take into consideration thats almost a 6% difference, simply by removing leading/trailing spaces, tables, and unrequired newlines! Now, most pages tend to be kb’s in size, for example one of these [...]
    • Speeding up your site with CDN’s
      Ever since Google brought in their new Algorithms, which incorporate the speed of your site, its become more and more important to make your site as fast as possible There are many options for you, such as minifying CSS / Javascript / HTML, optimizing images, and more – but we will deal with those separately, as they are entire topics on their own ) You can see the blog entry from Google here, just to proove I’m not lying! Ok, now back to the “speeding up” part. A CDN (Content Distribution Network) is basically lots (generally hundreds) of web servers scattered all around the world. [...]
    • Archive of SEO
    • Installing and setting up WordPress
      I thought I would put together a very quick tutorial on how to install the latest version of WordPress, which is one of the most populare blogging scripts available (for free!). Over 25 million people have already chosen to use WordPress, so you’re in good hands! If you have access to SSH, this whole process is very quick: This will then grab the file from WordPress for you. If you don’t have the “unzip” feature on your server, then you can also download the .tar.gz file: If you DON’T have access to SSH, you can just as easily do it by downloading the [...]
    • Roll Your Own theme – simple 5 minute way to create a wordpress theme!
      As some of you may be aware, this blog is using WordPress. I’m a bit of a “newbie” when it comes to designing themes for WordPress… in fact, I’d never done it before this site! I came across this really helpful site by Gary Smith, which has a simple to customize ZIP file full of the templates, which you literally can setup in 5 minutes. His site is: http://garysmith.co/01/roll-your-own-wordpress-themes/ I had a bit of an issue with the comments system in this theme, but he was kind enough to send over a fix – and it works fine now. A few things [...]
    • “Auto Clear” on select field when typing a search query
      As you may or may not have noticed on my blog, when you click the “search box” just above this text, it will “wipe” the blurb text from that field…. and ONLY when its not got a custom value in (other than the default). As always, using jQuery this is VERY simple to do 1) Include jQuery into your page: 2) Add the following JS code into your page: 3) Then for the input field you want this to be the case for, make sure it has id=”search_input” as its ID (or change the above javascript to use the ID you have [...]
    • 3 Column “Fluid” Design example…
      I thought I would post some info on how to make a “fluid” design. This can be used as a base for the design, and then you can tweak it how you want. First of all, lets see an example of what we are going to be creating: http://www.mywebsitedesignersblog.com/examples/3-col-fluid.html As you can see, I’ve added background colors to the page, so you can see the different “blocks” Obviously you can remove those. The main thing to take into consideration with a “fluid” design, is that you need to have margin: auto set..i.e: You can change the width of this to whatever you [...]
    • Social Media “side bar” with AddThis
      I’ve been amazed at the response to the “How to add Social media icons (as a sprite) and Google +1” article I wrote not too long ago, so I thought would give it another go, and write one about adding social media buttons as a “fixed” left/right sidebar. First of all, let me show you what we will be creating: 32×32 icons, with hover effect 32×32 icons, with NO hover effect 64×64 icons, with hover effect 64×64 icons, with NO hover effect To download the images, please click here Once you have that, we can look at the HTML. First of all – [...]
    • Rounded corners in IE 6, 7, 8, 9, Firefox, Chrome and Safari
      I was recently tasked with doing a redesign of someones site, and I wanted to try and find a good way to add “rounded” edges to the main content block, and a few other places. I found a HTC file, but could never get that working properly. In the end, I came across this post: http://www.dillerdesign.com/experiment/DD_roundies/#download Its SO easy to setup, I was amazed! You can see an example of this working here …. and then your HTML: ..and then add the following CSS to that page (just general CSS, nothing related to the rounded edges itself); And voila – it should work! UPDATE: I found [...]
    • Random banner rotation with jQuery
      I have been asked a few times, on different occassions, for a bit of Javascript which would rotate x number of banners randomly. I decided to come up with both a jQuery solution, and also a “pure” javacript sample, for those who are not using jQuery (personally, I prefer to use jQuery – as its much more versed in all the different browsers, so gives less chance of stuff not working how it should!) First of all – let me show you an example of what we are going to be creating Anyway, here is the code: Ok, now lets break it [...]
    • Archive of HTML / XHTML coding