Ajax | Web 2.0 Css Templates

Ajax Twitter feed with Scriptaculous

admin » 20 April 2009 » In Ajax Articles » No Comments

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="images/spinner.gif" 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 += '<li>' +
twitters[i].text + '&nbsp;<small>(' +
relative_time(twitters[i].created_at) +')</small></li>';
}
 $('list-twitter').innerHTML = '<ul>' + statusHTML + '</ul>';
$('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!

Download: Twitter_Example Twitter_Example (43.3 KiB, 344 hits)

Json Flickr Feed example

admin » 31 July 2008 » In Ajax Articles » 5 Comments

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){
    $("<img/>").attr("src", item.media.m).appendTo("#images")
      .wrap("<a href='" + item.link + "'></a>");
  });
 
  $("#title").html(data.title);
  $("#description").html(data.description);
  $("#link").html("<a href='"+data.link+"' target=\"_blank\">Click here to get to the Flickr group</a>");
    //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.

Download: JsonFlickrFeedExample JsonFlickrFeedExample (16.8 KiB, 1,136 hits)

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 » 28 February 2008 » In Ajax Articles » No Comments

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]

Web 2.0 Css Templates

Tag Archive > ajax

Ajax Twitter feed with Scriptaculous

Json Flickr Feed example

What is ajax

Constituent technologies