Categories
jquery

How to Create Page Load Animations Using jQuery

We have all gone to Google.com and noticed that they have a neat little animation to reveal more of their page.  So let me show you how to create similar effects using jQuery and jQuery UI.

We will be using the .animate effect for jQuery UI, along with FadeIn and AddClass.  I’m not going to go into detail about these because the code speaks for itself.  I have created 5 demos to showcase animations that are possible on initial page load.  Each demo page gets less and less animation until it’s just a fadein effect.

Check out the demo animations here.

I certainly do not recommend that you apply these animations for most websites.  However, there are plenty of instances where these animations could enhance your sites.  These may be cool for portfolio websites, temporary splash pages before your site launches, or anything else that you may want the user to really notice.

You can take it a step further and only have the animations show for new visitors.  Once a user has visited, create a cookie for them so they do not see the animation.

I should also mention that these pages DO NOT render correctly with IE7+ users.  This is an unfortunate side-effect when using the .animation class on your entire wrapper div.  It has been tested and renders correctly with Chrome, Opera, and Firefox.

Categories
jquery

jQuery 1.3+ Autocomplete, The Newbie Guide

This is my first jQuery guide specifically for newbies who either don’t have much experience with jQuery or just need to see an example to understand it. The more examples you read, the better off you are at developing your own stuff.

For those of you hoping to see jQuery UI 1.8’s autocomplete, sorry to disappoint you. I tried to use their new autocomplete built in feature, but was unsuccessful using their new plugin. The autocomplete plugin I will be using was created by Jörn Zaefferer and can be found here.  Even though he has several examples, I still couldn’t figure out how to achieve the autocomplete I was looking for.  My guide also has techniques borrowed from 1300 grams.  My goal is that this guide will be newbie friendly so just about anyone can pick it up from here.

For this example we will be using similar code from FantasySP to search for baseball players. (If you haven’t heard of FantasySP, its a fantasy sports news aggregator that collects player updates from dozens of sites to give you an edge when managing your fantasy team.) When typing a name we want to see what team he plays for and his position:

Let’s take a look at the input box that is used to achieve the autocomplete:

MLB Player Search

Nothing too complex going on here.  The autocomplete=”off” is to make sure the web browser’s autocomplete is disabled.  Now onto the jQuery function. (Unfortunately syntax highlighting won’t be used because it screws with the code. No idea why.)


$(document).ready(function() {

$('#player').autocomplete("/tutorials/autocomplete/auto_complete.php", {
dataType: 'json',
parse: function(data) {
var rows = new Array();
for(var i=0; i
rows[i] = { data:data[i], value:data[i].pos, value:data[i].team, result:data[i].value };
}
return rows;
},
formatItem: function(row, i, n) {
return row.value + ' ' + row.pos + ' ' + row.team +' ';
},
extraParams: {
q: '',
limit: '',
maxRows: 15,
term: function () { return $('#player').val() }
},
max: 25,
width: 200
});
});

Things get complicated when it gets to parse:. Essentially all it’s doing is taking the returned JSON response and organizing it an array so it can be manipulated. I am adding two new JSON values that need to be manipulated, pos and team. They are listed like so: value:data[i].pos, value:data[i].team. The section where it says result:data[i].value is what is returned into the input box when it is selected. We don’t want pos or team included in the box, so we simply use .value.

Next up is “formatItem:”. This is what adds extra styling to the results. It’s fairly straightforward, we are using the same values that were just added to the array in the previous function.

“extraParams:” are the added variables that will be passed to the PHP script. We have q, limit, maxRows and term. q and limit are set to blank because I won’t be using them in this particular example.

Now the easy part is the PHP function:

$var = mysql_real_escape_string(strip_tags($_GET['term']));
$sport = 'mlb';

if($sport == 'mlb' && strlen($var)  >= 1){

	$result = mysql_query("SELECT * FROM players WHERE sport = '$sport' and hisname LIKE '%$var%' LIMIT 25");

	while($row = mysql_fetch_assoc($result)){

        $row_array['pos'] = $row['pos'];
        $row_array['team'] = strtoupper($row['team']);
        $row_array['value'] = $row[hisname];

 array_push($return_arr,$row_array);

}

echo json_encode($return_arr);
}

That is all there is to it folks! Check out the barebones demo. It shows the necessary javascript files needed and syntax highlighting.

If you are great with jQuery and would like to rewrite the javascript function to work with the jQuery UI autocomplete, be my guest. I will glady link to your post or append the code to this post.

Categories
jquery php

jQuery vs Prototype, a newbies perspective

When I first started to dabble with javascript and ajax, Prototype was the only game in town that was making any headlines. So of course I used prototype with script.aculo.us .  I was able to make some simple stuff, but my coding with Prototype wasn’t very elegant and it certainly wasn’t the best way to code things.  But you know what, I’m a javascript newbie and  it worked!

Over the last few years it seems like Prototype development has slowed down a lot, while jQuery is making huge headway.  Every tutorial I see is using jQuery.  So I FINALLY decided to buy a book and learn it.  They are vastly different to say the least.  My prototype code had an awful lot of onclick=”” kinda stuff inside the HTML, while jQuery let’s your code appear more transparent and natural.  I love being able to pass my own variables using html attributes.

I went through a lot of WTF, why isn’t this working moments during my first attempts at coding using jQuery techniques.  However, overall I love jQuery.  Now my code is optimized, cleaner, and I feel as though I am not limited in what I want to do.  If I can dream it, I can code it with jQuery.  Not a small feat for someone like myself.

For example, with Prototype I simply didn’t know how to show a loading gif when an ajax command was in use.  It sounds simple and a lot of you are probably thinking what an idiot.  I turn to jQuery and my first attempt I find that it’s so simple to achieve.  Not only that but I can easily manipulate form values, check their validity,and pass them along with no problem at all.

To learn jQuery I completely rewrote all of my javascript code for FantasySP.  It took me about 2 LONG weeks, but now I feel as though I can code just about anything I want.  My code is a mere 7kb in size now, compared to 49kb in Prototype.  I am actually making reusable functions now and you can too.

My only quibble with jQuery is that coding an advanced autocomplete function is a huge pain in the ass.  Prototype let me customize it from the backend (PHP), whereas jQuery forced me to use JSON and adding extra javascript code.

So for those of you who haven’t used a framework before, or are still using Prototype, give jQuery a try.  You won’t be disappointed.