This tutorial will show you how to change an image placeholder into a different image using a simple select field and a small bit of Javascript.

This could be used for instance on a product page where you have a different colour select option for an item and you want the image to change to match the select box.

First have your images ready, I have a blank.gif image, which is the main image that shows on page load, then I have red.gif and blue.gif that the select box will change it to.

Now add the following javascript code to your header:

This javascript function bascially sets up two variables: image and change. It sets the image variable to the id: imageToSwap and the change variable to the id: colour. It then makes the object’s search path that has the image ID the same value as the value of the object that has the colour id.

So in the page you will need to add the following image placeholder which has the imageToSwap id and the search path is whatever your default image is:

Now all you need is to add the select box with the colour id as follows:

Now when you select either red or blue the image will change to that of its option value.

Note: You will need to add the full path if the image is not in the same directory.

This tutorial will show how to create anchor links and using some jquery we will make those links into a nice slow tansition instead of jumping between anchors.

Firstly create your anchors points in your html as shown below:

To test it works simply put a div in the middle with a height larger than your screen size, like that below:

When you view this html code in the browser it should just jump from the top to the bottom and vice versa when you click the links. To make the links into a smooth transition you will first need to point to the latest version of jquery, click here to download.

You now need to create a new javascript file and add the following code, click here to view the code.

You can also adjust the speed of the transition. Simply change the ss.STEPS at the bottom of the code to a higher amount to slow the transition and a lower amount to speed it up, it is currently set at 50.

This tutorial will show you how to create a read more / read less content area. This is ideal for use with hidden content or FAQs for instance.

First you need jquery installed on your page, you can use the following link for this: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

Now create a new javascript file and insert the following code:

$(document).ready(function(){
$('#homeReadMo').slideUp( );
$('a.homeReadMo').click( function(){
if( document.getElementById( 'homeReadMo' ).offsetHeight > 0 ) {
$( '#homeReadMo' ).slideUp( 'fast' );
}
else{
$( '#homeReadMo' ).slideDown( 'fast' );
}
return false;
});
});

This code basically looks for the element with id=homeReadMo and contracts or hides the area on page load. The code also allows any element with the class of homeReadMo, when clicked, to expand or open the id=homeReadMo content.

The if statement within the second function finds whether the size of the hidden content if greater than 0 (ie: whether it is hidden already). If it is hidden then the function will expand and if it is not hidden it will contract.

You can then add the following code to the html for your elements:

With this setup you could even add more code to the javascript to change the read more text to read less when clicked, as follows:

$(document).ready(function(){
$('#homeReadMo').slideUp( );
$('a.homeReadMo').click( function(){
if( document.getElementById( 'homeReadMo' ).offsetHeight > 0 ) {
$( this ).html( 'read more' );
$( '#homeReadMo' ).slideUp( 'fast' );
}
else{
$(this).html('read less');
$( '#homeReadMo' ).slideDown( 'fast' );
}
return false;
});
});

This tutorial will show how to add curved corners to boxes using the curvycorners.src file, which you can download here.

Save the file to your root folder and point to the .src file in your html.

Now all you need to do is add a few simple lines of css to add curves to your div box.


-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomright: 10px;


You can now adjust the size of the curvature by amending the pixel amount, the bigger the amount the bigger the curve. You can even remove some of the corner curves so for instance only the top of your box has curves.

This css works fine in firefox, however as Internet Explorer is a different breed you may also require the following css to make sure it is cross-browser friendly:


-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;


So your div would then be:

#curved-corners {
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
}

This tutorial will show you how to make a div box hide and show with a simple line of jquery.

Firstly make sure you have the latest version of JQuery installed, then you need the following piece of javascript code:


function toggleDivName(DivNameIndex)
{
$("div[id^='DivName']").hide();
$("div[id='DivName"+DivNameIndex+"']").toggle();
}

function Close()
{
$("div[id^='DivName']").hide();
}


Here you can rename ‘DivName‘ to your desired title. The function toggleDivName basically reads in the DivNameIndex and depending on that index passed it will hide all other divs and then show or ‘toggle‘ the one passed. The close function then simply hides all divs.

Now in your html all you need is the following:

Here we have the div that will be hidden, the link to show it and also a link to close it. In your css, you simply need to make sure that the ‘DivName‘ is set to display: none.

You can now add more divs with more links without having to alter your javascript, like that shown below:

I have been checking a form input field to make sure that it is only submitted as a currency value. To do this we use Regular Expressions. Regular expressions are one of the built in objects within Javascript which describes a character pattern. We first define the pattern and then test our chosen string against it to test for a match.

The syntax used is:

Var myReg = /pattern/case

Where the pattern is the configuration of a string and the case specifies whether the search is global, case-sensitive etc. We use the test() method to check a string to see whether it contains the specified pattern. The method returns true or false depending on whether the string is found.

Example pattern structures are:

[a-z]   matches lower case alphabetical characters

[A-Z]   matches upper case alphabetical characters

\w   match any alphanumeric plus the underscore. The same as [a-zA-Z0-9_]

\d   match any numeric character. The same as [0-9]

\D   match any non-numeric. The same as [^0-9]

/^\d{5}$/ matches a 5 digit number

So to check for a currency we use:

var myRegEx = /-?[0-9]+\.[0-9]{2}$/;

and to call the test method we use the following:

if (myRegEx.test(labour_rate)) {
alert(‘great!’);
return;

}

else{
alert(‘boo!’);
return;

}

All developers have to transfer sites at some point, if you don’t I envy you. It seems that site transfers always have teething issues with the difference in server builds, operating systems having different compilations of PHP and the rest.

And worst of all, different hosts limitations…

But to transfer a site you need to make a simple list of things that need to be done in order for it to work.

• Get all files, including hidden files (many a time I’ve been caught up on the .htaccess on a mac being hidden and a site riddled with 404 errors…)
• Get all database details of the new server
• Update all calls to databases
• Use Dream Weaver (for the only things its any good for) to search and replace across the site for the old URL and change it to the new one, and the same with database details)
• Make sure image, stylesheet, javascript and any other call is base root not an absolute URL (unless externally hosted)
• Upload everything, including creating the new databases
• Test everything, fix bugs and teething issues

If you can do all of the above your site will transfer easy peasy.

A drop down menu always seems buggy, lets face it they’re a nightmare and we usually just leave it “For the easier alternative”

But they’re really not that difficult to achieve. See the code below for how to achieve this with some simple jQuery and your own CSS.

jQuery('#main_menu').mouseenter(function(){
        jQuery('#sub_menu').show();
})
.mouseleave(function(){
        jQuery('#sub_menu').hide();
}};

The above uses mouseenter() and mouseleave() rather than mouseon() and mouseout(). The difference between the 4 functions is mouseenter() will monitor the mouse over event and ignore mouseon() events on children and mouseleave() fires when you leave either the children of the element or the element itself.

Which makes it perfect for hover menus, hovering over expanding details and many other really cool things.

Enjoy making your jQuery hover menus without having to use hoverintent or any other complicated plugins or jQuery, it really is that simple

To further the tutorial I did on scroll boxes I have decided to show you how to build a drop down box with JavaScript and css, this method is great if you want to add more content to your page but don’t want it immediately visible to any user. Below is an example of this script in action.

Example:

Read More »

The code behind this is actually really simple and is below with an explanation underneath it of each part

<script type="text/javascript">
function setHeight(height){
       $element = document.getElementById('moreinfo');
       if($element.style.height == '0px') $element.style.height = height+'px';
       else $element.style.height = '0px';
       return false;
}
</script>

This is the JavaScript function which changes the height of the div you have your content in, the first line (beginning with $element =) is simply assigning the element we want to hide to a variable, its less code and tidier to use throughout the script.

The second line (beginning with if( ) is the piece of code which decides wither to expand or contract the element we’re hiding, and the line underneath (beginning with else) is the decision if the “if(” returned false

The return false is simply there to stop our page redirecting to www.example.com/# (url with the hash)

Below is the piece of code you need to add to any link, span, p element or whatever it is you want to use as your button (works on images too)

onclick="setHeight(250);"

Hope you find this tutorial useful, this is a great technique for adding content for SEO Purposes

With HTML 5 and XHTML 2 just round the corner more and more developers are getting excited at the new possibilities available on the web. But are these new technologies actually good for your website.

The simple answer is.

YES

HTML 5 and XHTML 2 are great for your SEO, but building with them can be difficult with non standards browsers *cough* Internet Explorer *cough* not being prepared for these new elements.

A short list of some of the new elements to help better segregate your pages is below:

Tags for layout segregation

• article – the main content of the page
• aside – extra content
• figure – peripheral content with caption
• footer – the footer of the page
• header – the header of the page
• nav – the page navigation
• section – any section or portion of the page

Tags for media segregation:

• audio – denoting an audio stream
• source – the video or audio source files
• video – denoting a video stream

Tags for DHTML, Ajax and general web application

• canvas – a place to draw dynamic graphics
• command – denotes a command button that has information sent to the server or script
• datagrid – references dynamic data in a tree form or tabular data form
• datalist – references a list of data in a drop-down list
• details – provides additional details of a page element, like pop-up help text
• output – references the output of a script or calculation
• progress – represents a progress bar in the completion of a process

There are more tags but these are what will make your web development change and your thought process behind building your website will alter for a more semantically correct website.

But as I mentioned above, there are still some browsers (a browser) falling behind (never caught up)

But there is a work around using JavaScript. See below for how to make these elements work with Internet Explorer versions 5+

document.createElement('article');//create a dom element "article"
document.createElement('footer');//create a dom element "footer"
document.createElement('header');//create a dom element "header"

As you can see, its pretty simple and it simply tells Internet Explorer based browsers to create these elements in the dom ready for use, So far I have not tested this with validation. But validation is nothing more than a little badge at the bottom of your pages these days, its almost as overused as the Glider (see below)

So HTML 5 and xHTML is good for SEO because search engines can now tell what section of your website is for what, such as header and footer give the search engines a rough idea of what kind of content to expect and article/section tell the search engines that this is where the main bulk of your content lays.

So a more semantic web should mean a more relevant web and less SERP spammers destroying positions.

With that, HTML 5 and xHTML2 are just around the corner and so is the more semantic, clever and aesthetically pleasing web.