mclelun » JavaScript

jQuery Twitter Update List

mclelun — Sat, 16 Jan 2010 15:29:06 +0000

After my first experiment using jQuery to develop a rotating banner, I noticed that the script I wrote could be use for other similar list items such as a Twitter update list.

To retrieve recent my tweets, I paste the following JavaScript provided by Twitter into the of my page.

Then, I make some simple changes to my jQuery rotating banner script and CSS. Viola! The twitter update list is working as expected. You can view the demo in this page.

Download

To use this twitter update list, You will need to replace the username with your twitter name. You can also specify how many tweets to retrieve by changing the value of count parameter.

jqtwitter.js 1KB
jqbanner.zip 35.5KB

JavaScript Pong Game

mclelun — Sun, 10 Jan 2010 18:23:43 +0000

Back then, most JavaScript usage I saw was just for something simple such as bookmark or pop up window. There weren’t many fancy examples but this is not true nowadays. Two years had pass since I heard about Ajax from a friend, I finally decide to spend some time on JavaScript.

JavaScript and ActionScript

Both JavaScript and ActionScript are based on ECMAScript which means they share identical syntax. So, I don’t really have a hard time to understand the basic of JavaScript.

JavaScript Game

For me, the best way to learn is to get my hands dirty instead of reading tons of text and did nothing. I manage did a simple Pong game even though my knowledge on JavaScript is limited.The game can be view at this page.

Pong (marketed as PONG) is one of the earliest arcade video games, and is a tennis sports game featuring simple two-dimensional graphics – wiki

Flash game is usually loop with an onEnterFrame event. But there aren’t any “frames” in JavaScript, so we will need to construct the game loop by using a setInterval() method. Both JavaScript and ActionScript’s setInterval is similar, which execute code periodically.

Of course this little game experiment I did doesn’t really show the power of what JavaScript could do. So, navigate to Google’s Chrome Experiments and have a look at some great experiments did by other PROgrammers.

Download

View JavaScript Pong Game
pong.js 2.69KB

JavaScript Framework

Besides writing your script from scratch, you could also utilize JavaScript framework which will ease your development process. Below are some of the many JavaScript frameworks available.
JQuery
MooTools
YUI
Prototype

jQuery Rotating Banner

mclelun — Sun, 10 Jan 2010 14:33:24 +0000

While I was working on the revamp of my site, I noticed I could use a rotating banner in the landing page to show certain works or blog post that I wish to highlight. My first thought was to develop this with Flash, but I changed my mind after thinking that banner like this could be done easily with just JavaScript.

While developing this banner, I used a JavaScript Framework, jQuery to speed up the development process. JavaScript is not my strongest point, but I managed to come out with a simple rotating banner. You can view the banner in this page.

Features

Currently, the banner will rotate automatically every few seconds and can be pause or resume anytime by clicking the button on the banner. You can go through the banners by clicking the next or previous buttons too. Slides information text is grab from the container DIV. so, you could basically put text, images or both into the rotating slides.

Last Update

31 May 2010
Add in Sliding/Fading animation for title attributes.

30 April 2010
Change to horizontal scrolling of slides, it still can be easily modify to vertical scrolling. The old script of fading in and out of slides is still in the JS.

16 January 2009
Pause and play share a single button now and I had change the structure slightly to allow HTML text in the rotating slides.

Download

The script for this banner is quite simple and self explanatory. To use this rotating banner, you will need to download the zip file which contain all the images, CSS and sample HTML page.

jqbanner.js 2.17KB
jqbanner.zip 35.7KB
jqbanner_v1.zip (Old version) 35.1KB