Css templates | CssTemplatesWeb » Ajax Articles

YUI Animation Tutorial

admin — Mon, 20 Jul 2009 00:13:14 +0000

The Yahoo UI library is the reason for most of the cool functions you see on some of Yahoo’s sites, like Flickr and Delicious. It’s still in active development by Yahoo and the community of YUI developers. It offers a lot of functions, Ajax support and animation effects. It’s cross-browser, and it’s packed with rich UI elements, like dialogs, calendars, WYSIWIG editors, sliders and DataTables. Both demos and documentation can be found at developer.yahoo.com/yui

The YUI Animation library

In our example, we’ve put together a few examples on how to use the Yahoo animation library. The first thing we did, was to include the YUI core and the minified version of the YUI animation library. We include these two files directly from Yahoo’s own servers, both to save bandwith, and to let the visitors use the cached version of the files if they’ve already visited a site that’s using these. The code for including the scripts:

^?View Code HTML4STRICT

 
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/animation/animation-min.js"></script>

Now we have the javascripts we need. Next thing to do is to use them. This block shows you the code for the first example:

^?View Code HTML4STRICT

<div class="block">
    <h3>Animating a property</h3>	                        
    <p>Click the block below to animate the width of the block.</p>
    <div id="demo1"></div>
    <script type="text/javascript">
    YAHOO.util.Event.on('demo1', 'click', function() {
    var anim = new YAHOO.util.Anim(this, { width: { to: 200} });
    anim.animate();
    });
    </script>
</div>

Check all the examples on our demo site: YUI examples
If you want to download the whole example, you can do so here:

Note: There is a file embedded within this post, please visit this post to download the file.

Ajax Twitter feed with Scriptaculous

admin — Mon, 20 Apr 2009 08:24:29 +0000

This example shows you how to integrate your Twitter on your website. It uses some custom javascript code, and it also uses the scriptaculous library to use a sliding effect. In this example it will show the 5 latest entries from your Twitter account.

You can see a video of how this works, shown in the demovideo of the template “Personal Homepage”.

We will start with the html file, in this case: index.html. You need to add the following code in the head section:

^?View Code HTML4STRICT

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset/reset-min.css" />
<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js"></script><script type="text/javascript" src="js/ajax.js"></script>

And then, somewhere in the body tag, you need to add this code (this is the code for showing the Twitter feed).

^?View Code HTML4STRICT

<body>
<div id="twitter" class="list">
<h1>Twitter</h1>
<img id="spinner-twitter" alt="spinner" src="#" width="16" height="16" />
<div id="list-twitter" style="display: none;"></div>
</div>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/SveinErik.json?callback=twitterCallback2&count=5"></script>
</body>

As you can see in the last line, you can see the name “SveinErik”, that is my Twitter username, so you need to put your own username there. The last thing, the magic, is found in the Ajax.js file (also included in the .zip file), this is where the actual javascript code for both getting the feed from Twitter, and also a function for showing how long ago each status update was written (like 2 days ago etc).

^?View Code JAVASCRIPT

function relative_time(time_value) {
var values = time_value.split(" ");
time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
var parsed_date = Date.parse(time_value);
 var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
delta = delta + (relative_to.getTimezoneOffset() * 60);
if (delta < 60) {
return 'less than a minute ago';
} 
else if (delta < 120) {return 'about a minute ago';
}
else if (delta < (60 * 60)) {
return (parseInt(delta / 60)).toString() + ' minutes ago';
}
else if (delta < (120 * 60)) {
return 'about an hour ago';
}
else if (delta < (24 * 60 * 60)) {
return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
}
else if (delta < (48 * 60 * 60)) {
return '1 day ago';}
else {
return (parseInt(delta / 86400)).toString() + ' days ago';
}
}
 
function twitterCallback2(twitters) {
var statusHTML = "";
for (var i = 0; i < twitters.length; i++) {
statusHTML += '' +
twitters[i].text + ' (' +
relative_time(twitters[i].created_at) +')
';
}
 $('list-twitter').innerHTML = '' + statusHTML + '
';
$('spinner-twitter').hide();
$('list-twitter').slideDown({ duration: 2 });
}

You can download the .zip file, containing a fully working example. This is the same code as used in the template “Personal Homepage”, which also include similiar ajax effects to grab the feed from both Twitter, Delicious and Flickr. It is available for only $9 in the shop.
Good luck!

Note: There is a file embedded within this post, please visit this post to download the file.

Json Flickr Feed example

admin — Thu, 31 Jul 2008 22:50:21 +0000

In many cases, you want to show pictures on your website. In some of these cases, you’ll want users to upload their own pictures. This could mean that you would have to build an upload system, with lot’s of security issues around it, and it also means that you’ll have to have a lot of webspace available at your webhost. Luckily, there is a really easy and neat solution to this.

Flickr has been the number 1 for storing pictures online for some years, and they are offering developers a nice API, which means that we can use many of their functions in our own solutions. In this case, we are going to use it to grab the latest pictures from a Flickr group. But how? With JSON (JavaScript Object Notation). Jquery is able to transfer data between domains, and this means that with a little code, we can use this to show our pictures from the rss feed from the Flickr group.

I’ve put together an example on how to do this (you can download this as a .zip file at the bottom of the article).

What you need to pull this together is:

Jquery
A couple of lines in your htm file
Another couple of lines in your css document
A Flickr rss (doesn’t have to be yours, just a Flickr rss)

This is the code you need to put in your htm file (in the head tag):

^?View Code HTML4STRICT

<link rel="stylesheet" type="text/css" title="My style" media="screen" href="jsonstylesheet.css" />
<script src="js/jquery-1.2.6.pack.js" type="text/javascript"></script>

And put this where you want inside the body tag (change the url to your own Flickr Rss feed):

^?View Code JAVASCRIPT

<script type="text/javascript">
$.getJSON("http://api.flickr.com/services/feeds/groups_pool.gne?id=807213@N20&lang=en-us&format=json&jsoncallback=?", function(data){
  $.each(data.items, function(i,item){
    $("").attr("src", item.media.m).appendTo("#images")
      .wrap("");
  });
 
  $("#title").html(data.title);
  $("#description").html(data.description);
  $("#link").html("\"_blank\">Click here to get to the Flickr group");
    //Notice that the object here is "data" because that information sits outside of "items" in the JSON feed
});
script>

You also need to put this into your body tag (where you want the images to show):

^?View Code HTML4STRICT

<p>Only the last 20 pictures added to the Flickr group will show. To check out all the pictures, go to the Flickr group here:</p>
<p id="link"></p> 
<div id="images"></div>

To add some styling, add this in you css file:

^?View Code CSS

#images { width: 500px; padding:0; margin:15px 0px 0px 100px; overflow: hidden; }
#images img { border:none; padding-right:5px; padding-bottom:5px;}

That’s it!

Here is a little screenshot on how it will look. Of course, you can style it the way you want with css.

You can download the zip file, containing all you need.

Note: There is a file embedded within this post, please visit this post to download the file.

You can also buy the “Personal homepage” css template, containing this function (only a bit more fancy), plus it integrates feeds from both Twitter and Delicious as well.

What is ajax

admin — Thu, 28 Feb 2008 10:23:13 +0000

AJAX (Asynchronous JavaScript and XML), or Ajax, is a group of inter-related web development techniques used for creating interactive web applications. A primary characteristic is the increased responsiveness and interactivity of web pages achieved by exchanging small amounts of data with the server “behind the scenes” so that entire web pages do not have to be reloaded each time there is a need to fetch data from the server. This is intended to increase the web page’s interactivity, speed, functionality, and usability.

AJAX is asynchronous; in that extra data is requested from the server and loaded in the background without interfering with the display and behavior of the existing page. JavaScript is the scripting language in which AJAX function calls are usually made.^[1] Data is retrieved using the XMLHttpRequest object that is available to scripting languages run in modern browsers, or alternatively Remote Scripting in browsers that do not support XMLHttpRequest. There is, however, no requirement that the asynchronous content be formatted in XML.

AJAX is a cross-platform technique usable on many different operating systems, computer architectures, and web browsers as it is based on open standards such as JavaScript and the DOM. There are free and open source implementations of suitable frameworks and libraries.

Constituent technologies

AJAX uses a combination of:

XHTML (or HTML) and CSS, for marking up and styling information.
The DOM accessed with a client-side scripting language, especially ECMAScript implementations such as JavaScript and JScript, to dynamically display and interact with the information presented.
The XMLHttpRequest object is used to exchange data asynchronously with the web server. In some Ajax frameworks and in certain situations, an IFrame object is used instead of the XMLHttpRequest object to exchange data with the web server, and in other implementations, dynamically added <script> tags may be used.
XML is sometimes used as the format for transferring data between the server and client, although any format will work, including preformatted HTML, plain text and JSON. These files may be created dynamically by some form of server-side scripting.

Like DHTML, LAMP, and SPA, Ajax is not a technology in itself, but a term that refers to the use of a group of technologies.

The “core” and defining element of Ajax is the XMLHttpRequest object, which gives browsers the ability to make dynamic and asynchronous data requests without having to reload a page, eliminating the need for page refreshes.

Besides XMLHttpRequest, the use of DOM, CSS, and JavaScript provides a richer “single-page” experience.

[Source: wikipedia]