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

Posted by: SEO Positive

Posted on: May 19, 2010 10:55 pm

-

jQuery is a JavaScript library used by a very large percentage of the web development community, SEO Positive base most, if not, all of the JavaScript work we produce on jQuery because in the words of SEO Positive’s head of web development “It makes him weep with happiness”, we prefere to say it speeds up our development 10 fold.

Today we’re going to learn how to make our very first jQuery click event, a simple fading out action.

Firstly we need to create a div element with a contrasting background colour.

<div style="background: green;">Hello world</div>

Now we have an element we can call from jQuery, head over to www.jquery.com and download the production release and include it into our page using the example below.

<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>

Once you have this in your page, you should be able to set up the click and fade event using the example below.

<script type="text/javascript">
$(document).ready(function(){
    $('div').click(function(){
          $(this).fadeOut();
    });
});
</script>

The above code will trigger a fading event on the all the divs on the page.

The code explained:

$(document).ready(function(){ should come before any jQuery you wish to use as this initiates and prepares jQuery for use once the document has finished loading and after you have finished writing your jQuery functions this should follow });

The next line $(‘div’) selects all the divs on the page and $(‘div’).click(function(){ means bind all click events on a div to the function .fadeOut

Much like the $(document).ready(function(){ closing line you must close any functions with });

Once you have these elements on your page, the click on any div should cause it to fade out at default speed.

For more details see www.jQuery.com

Authors
Categories
Archives
Blogroll