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 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: 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: June 10, 2010 7:50 am

-

So there are many different content management systems available, each with there own pro’s and cons but today we are going to focus on the two largest PHP content management systems, Joomla (1.5+) and WordPress (2.8+)

At SEO Positive we use both of these to satisfy our clientele and even our own projects as they allow for quick development and total control over the content.

But which one should I use for my project?

This depends entirely on the goal of your project. Below we have outlined features of both CMS’

WordPress

  • Instant blogging
  • 1 minute to set up, with no knowledge of programming necessary
  • Instant theme installation
  • Search engines love WordPress
  • Stable platform with very few bugs/catches
  • Automatic plug in installation/updates and activation
  • 100% control over the theme’s layout/colours etc
  • JavaScript is jQuery powered

Joomla

  • Stable platform to build any large scale website on
  • Instant page creation
  • Menu management
  • Dedicated media manager (upload and download)
  • Fairly easy plug in installation/management
  • Instant theme installation
  • Nearly 100% control over the theme and all layouts and colours
  • JavaScript is powered by MooTools

They have a lot more features than the above mentioned ones, but I’m going to leave it there on that, if you still can’t decide what is best for your website perhaps I should explain a little more about them?

Joomla is a content management system, for building websites into. So being dedicated to a purpose would seem like a pro to add to the list, but it does come with its con’s. Joomla is technical to update and manage, with a complicated and sometimes confusing management area it can be tricky to get used to for anyone of a lesser technical mind where as WordPress is a blogging platform that happens to be fantastic for a quick website build with CMS. WordPress also has an incredibly easy to use management area, everything is laid out in a way that you can’t confuse and everything is labeled in a way you can’t find tricky.

Joomla stands trumps for large scale websites (30+ pages) and WordPress would suite more a smaller website (up to 30 pages) as it has no internal banner, footer or menu managers.

Joomla also stands up trumps with themes as you can use multiple themes throughout the site depending on what page your users are currently viewing/reading, with its banner, footer and menu managers and custom ‘modules’ feature there is nothing you can’t customise in Joomla and this wins it for us here at SEO Positive over WordPress as to build a bespoke website and give any client total control of there site we find Joomla perfect.

Posted by: SEO Positive

Posted on: June 8, 2010 4:04 pm

-

So, many of you like and use jQuery. Its a fantastic JavaScript library, built for designers and beginners to learn and quickly roll out massively interactive applications on bombastic scales.

But is it really necessary?

Well it depends on what you plan to do, are you using the Ajax functionality or simple tweens like fade’s and slide’s if so, then you’re better off writing your own JavaScript as the jQuery library is a massive lump in your downloads, whether your page is optimised no matter how many parallel downloads you can achieve this is still a large product to be downloading for all first time visitors. Sure there are work arounds like putting your script tags at the bottom of your page and other common optimisation techniques.

But does it make sense to have thousands of lines of code you know you’re never going to use for the sake of convenience?

For instance

document.getElementsByTagName('div').style.visibility='hidden');

Is exactly the same as

$('div').css({'visibility':'hidden'});

Except with the jQuery example, you’ll find theres a look up, function calls, instantiation etc slowing the whole process down. So in terms of convenience, is it actually that convenient?

At SEO Positive we use a mixture of jQuery, MooTools and bog standard JavaScript.

But I prefer to build all my own JavaScript tailored to the project, of course I do keep a library of my own tucked away for use which in future tutorials I will post as tutorials on here.

For convenience jQuery and MooTools are fantastic, for helping optimising your website they actually aren’t that great.

At SEO Positive we think really hard about convenience, speed and overall optimisation which all helps with the development of any project and the search engine optimisation which ultimately gives you the best product tailored to your needs. jQuery and MooTools are great, but building your own JavaScript is much more rewarding and overall better for your website.

Authors
Categories
Archives
Blogroll