Posted by: Peter Andrease

Posted on: May 24, 2012 1:50 pm

-

There are 3 ways of showing fonts on your website. Javascript, css and cufon, all have their advantages and disadvantages. I’m going to write off cufon straightaway as it uses flash which has the lowest support out of all three. Flash is unsupported on both iphone and ipad – I’d avoid it.

CSS

The quickest and easiest way I think is to use google web fonts, it’s not the best but it is free. At the moment there are over 500 font families on there and 90% of them aren’t great. So you’re going to have to do a lot of sifting through to find the right font. Here’s 10 I like….

  • Open sans
  • Josefin sans
  • Abril fatface
  • Dosis
  • Pt sans
  • Droid
  • Arvo
  • Gravitas
  • Jura
  • Yanone Kaffeesatz

You’ll have to watch out for what they look like especially if you’re going to use it in body text, I would recommend only using them as display and captions for some of them.

Okay another css font resource is font-squirrel. You’ll find some good fonts on here too, font-squirrel also has a generator on the site. So you can upload the font and get all the type that you need to work across browser, they even give you the html and css and even the cufon file (if you’re really want it). If you’re generating your own font be careful what you use because even if you’ve brought the font doesn’t mean you can go spreading it around the net, once it’s there and there’s a link to it anyone can download it.

Another one worth checking out is “The league of moveable type”.

JavaScript

JavaScript is a nice way off using fonts on your site too. I find the give a much cleaner look rather than the sharp edges you get with css fonts on some browsers. The only problem I find is that you get the default font load up before you see the javascript loaded font – the font-size could be wildly different and could cause the site to look bad before the javascript loads. Saying that there are work arounds for this and the speed of most peoples internet these days I don’t think it’s a problem. Two really nice font resources are Typekit recently acquired by adobe and Fontdeck. They both cost a various amount but there are free versions. I found that with Typekit you get an allowance of 2 fonts for 1 site plus a typekit badge in the bottom corner of the screen. The pricing structure is slightly different for both resources but both rely on amount of view per month.

I find the fontdeck site much nicer to use but both have really high-quality fonts like Din, Adelle, Futura, Freight Sans, Proxima Nova.

Both are CSS and JavaScript fonts are really easy to implement and both should be in a web designer’s toolkit.

Posted by: Peter Andrease

Posted on: March 17, 2011 10:24 am

-

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.

Posted by: Peter Andrease

Posted on: March 1, 2011 9:25 am

-

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.

Posted by: Peter Andrease

Posted on: February 24, 2011 2:58 pm

-

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;
});
});

Posted by: Peter Andrease

Posted on: February 17, 2011 9:14 am

-

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;
}

Posted by: Peter Andrease

Posted on: February 8, 2011 11:10 am

-

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:

Posted by: SEO Positive

Posted on: January 5, 2011 4:28 pm

-

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;

}

Posted by: SEO Positive

Posted on: November 29, 2010 11:55 am

-

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.

Posted by: SEO Positive

Posted on: November 8, 2010 8:37 am

-

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

Posted by: SEO Positive

Posted on: July 1, 2010 8:12 am

-


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 »

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt scelerisque scelerisque. Vestibulum in est eu purus fermentum scelerisque. Mauris laoreet tristique ipsum, ac congue justo rutrum sed. Suspendisse venenatis facilisis enim, non venenatis lacus ultrices a. Donec consequat porttitor velit. Maecenas porta libero vel lorem posuere porttitor. Sed in accumsan quam. Nam tincidunt venenatis ligula. Vestibulum quis est massa, nec euismod nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Nulla mollis vestibulum mollis. Nulla quis dui et augue hendrerit viverra. Nulla vitae nulla eget velit pulvinar blandit. Sed at arcu vitae metus pretium elementum. Cras at velit sed leo ornare laoreet. Aliquam lacinia cursus ante, pellentesque malesuada est tincidunt ac. Phasellus ut condimentum mi. Vivamus tincidunt elementum eleifend. Vestibulum viverra nisl eu diam sodales non cursus urna gravida. Cras lobortis commodo risus, quis adipiscing est faucibus non. Mauris lobortis nisl nec lectus adipiscing nec auctor risus tincidunt. Ut ornare sollicitudin viverra. Nulla facilisi. Integer sed justo quis urna ornare consequat id sed tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer arcu quam, congue vitae suscipit vitae, consequat at risus. Vivamus a quam lorem, ut tempor nibh. Quisque vitae leo id tortor tristique tristique id et urna. Sed semper justo eget ligula tempor id convallis lectus sodales.
Read Less «

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

Authors
Categories
Archives
Blogroll