» Archive for the ‘Ajax’ Category
Google visualization and search API part 2.
…and here is second example:
Google Ajax Search API and Google Visualization API example 2
This time I mixed the results from Image search api with table visualization. Additionally, I created the container for larger images and connected it to the table with event listener, so when you click on thumbnail the larger version of an image will appear - simple image viewer.
Of course you can download the code and build your own application…
Related documentation:
Google Ajax Search API (image) reference
Google Visualization API reference
Google visualization and search API.
Hello everyone! Yesterday I had a bit of free time, so I decided to see what has been changed in Google Ajax API. It’s been quite some time since my last project, that’s why I was pretty curious what new features are available. New - means not used in my previous applications. So I’ve browsed through documentations, examples and believe me or not, I saw lots of new possibilities, ideas, I become inspired and motivated, and I’m not crazy (I hope).
Seriously, I have a few ideas related to Google Ajax API technology and I’ll show you some tricks, code and maybe I’ll make a new application based on these new features.
First example, what I did was to take Google Ajax Search API and mix it with Google Visualization API, and this is the result:
Google Ajax Search API and Google Visualization API example 1
Are You inspired? no? why? 
Please Wait for my next example…
If you however feel inspired you can download it and change it, and play with it, everything is in one file.
Related documentation:
Google Ajax Search API reference
Google Visualization API reference
NewsBar - No Results -
Few days ago one of the readers of my blog ask me how to get - No Results - in the Google NewsBar. Those who play with NewsBar knows that when query gives you no results the applications switch to default query (which is “Google”) and shows you news about the Google.
How to bypass the default query? Simple, just put the following line before you create newsBar object.
GSnewsBar.DEFAULT_QUERY = "";
Example from the Google NewsBar documentation:
function LoadNewsBar() {
var root = document.getElementById(”newsBarTop”);
var options = {
largeResultSet : false,
resultStyle : GSnewsBar.RESULT_STYLE_EXPANDED,
title : “Nintendo in the news”,
autoExecuteList : {
executeList : [ "Nintendo", "Nintendo DS", "Nintendo Wii" ]
}
};
GSnewsBar.DEFAULT_QUERY = ""; // bypassing the default query!
var newsBar = new GSnewsBar(root, options);
}
You can specify the default query, when queries from executeList produce an empty list of results.
Also, you probably want to count the number of result? It’s not that simple, because you will have to modify the function in gnewsbar.js and we don’t want to do that. The problem is that you have to wait until all data are loaded and then check the number of results.
Here is the solution, not very good, but if you find better one please post comment here.
[...]
GSnewsBar.DEFAULT_QUERY = ""; // bypassing the default query!
var newsBar = new GSnewsBar(root, options);
window.setTimeout(function(){
if (newsBar.ns.results.length==0) document.getElementById(”<id of the newsbar container>”).innerHTML=’No Results’;
},2000);
[...]
This function waits 2sec (2000ms) and then check if results are available, if not then it shows the ‘No Results’ text.
GreenLinks and WordPress
As I promised, a short tutorial about how to implement GreenLinks into the Wordpress theme.
First and most important thing: Get Google Ajax Search Api key for your website:
http://code.google.com/apis/ajaxsearch/signup.html
Second, open a source of this page:
greenlinks
This is the full code of my application!
Put the <header> content from my example into your theme header section (header.php file), also find the <body> tag in your theme files and insert the onLoad attribute (as I show in the example).
The last thing you should do is to put the GreenLink panel at the end of every post :). The best way to do this is to edit a single.php file (this works in my theme).
And… That’s it, of course if you know the basics of PHP and HTML.
I made a zip file with all the scripts, graphic and pages required to run the GreenLinks on your server. If you have any problem with installing my application just post the comment here.
Please do not remove my name and link to my blog from the GreenLink panel,
thank you!
Extended Google Ajax News Bar
As I promised, I wrote new application based on Google Ajax News Bar. This is not exactly new application, it might be say that this is an extension to the original News bar.
Google provides two kinds of ways in displaying the results:
- Horizontal - animated bar with ability to show the description in the other wrapper (
options.horizontal=true, and options.currentResult=document.getElementsById(wrapper)).
- Vertical - all the news results and its parts (title, description, etc.) are displayed in the specified container plus you have ability to switch between search items.
My version is between these two methods but near the first one. It is the normal horizontal bar but the difference is that the title and description are displayed in the popup box near mouse pointer when you move it over the news title.
You can use all options that are available in the original New Bar (and for horizontal method) except of currentResutls and horizontal (always true) - these are used internally and values will be bypassed.
The bad or good information is that this version using prototype.js.
Google Ajax News Bar
Google provides new feature called AJAX News Bar. This application lets you add news search results to your website or blog. You can specify the orientations, the number of results (of course 4 or 8, nothing has changed), etc. The interesting thing is controlling through the links in your page which news results are displayed (works same as my green-links). If you are not good in JavaScript you can use Wizard, it will generates the code for you.
Here are the links to reference, example, and
Wizard.
So, I’m starting to write new application right now, lets see what we can do with it…
Space Invaders!
My first contact with “Space Invaders” was about 6 years ago. It was an assembler version found in programmersheaven.com. I think this game is a grand grandmother of all space shooter games, look at the first release date - 1978. WOW! (four years older than me :)).
Couple of weeks ago I decided to create my own version of “Space Invaders”. The code was written by me but the sprites (aliens, UFO, laser gun) is taken from the original version. Everything is written in JavaScript, with the little (read big) help of Yahoo User Interface (same as the last two games).
I had the problem with Firefox, because instead of Opera and IE, in the Firefox the use of the processor while the game was running, was very big (maybe because that a lot of loops were running at the same time). So, I have to rebuild the first project and optimize it for the Firefox. However, still you can see some delay while aliens and UFO are moving (maybe it is some proof that the Gecko engine is slower than IE’s engine :/, no it can not be!). (If you have some time you can check which browser is faster, just turn on window.setInterval(); function (three or four different at the same time) with some loops (not infinite, you can change top and left attributes of some div elements).
This game also wasn’t tested in the Safari browser. Works fine in the latest version of Opera, Firefox, and IE.
Enjoy…
Puzzle!
Making games (even simple games) is a challenge. The creation process is not very difficult and may be fun of course if you know what you are doing (or writing). When I have a new idea I’m asking myself if I know how to do it. This is very important thing! I have to be sure if I know how to make the key elements of the code, before writing any line I must know the algorithm which will describe these elements. So I’m making a few tests, searching for solutions on the internet, in books, or trying to figure out by myself how to create it. And the last step is writing the code (hmm, someone could say that is the first step).
Today I want to present my new project based on YUI library and Flickr API. I think the title say everything - PUZZLE. Each photo which you can find by searching Flickr, is divided in sixteen pieces and placed on the square board. All pieces are randomly set and the last piece is empty. All you have to do, is to set the pieces in their correct places by swapping empty piece with near placed pieces.
The hardest thing while creating this game was figure out how to divide images into pieces using only JavaScript. CSS give us very helpful attribute called - “background-position“. If you have image with size, for example 640×480 pixels, and you want divide it into 16 squares you have to do something like this:
640 / 4 = 160;
480 / 4 = 120;
- .square1 { background-position: 0 0; }
- .square2 { background-position: 0 160px; }
- .square3 { background-position: 0 320px; }
- .square4 { background-position: 0 480px; } - the last square on the first line
- .square5 { background-position: 120 0; }
- .square6 { background-position: 120 160px; }
- .square7 { background-position: 120 320px; }
- .square8 { background-position: 120 480px; } - the last square on the second line
- .square9 { background-position: 240 0; }
- .square10 { background-position: 240 160px; }
- .square11 { background-position: 240 320px; }
- .square12 { background-position: 240 480px; } - the last square on the third line
- .square13 { background-position: 360 0; }
- .square14 { background-position: 360 160px; }
- .square15 { background-position: 360 320px; }
- .square16 { background-position: 360 480px; } - the last square on the fourth line
This technique works well on a small images (640×480 or less), you can use it also with the largest images, however the loading time will be longer (especially in IE).
Have a nice puzzling! 
Yetris
Welcome in the new year. I spent the last three days writing another web application based on YUI (Yahoo User Interface). This time I’d like to present a very old and class game - Tetris, but because I use libraries provided by Yahoo I called it Yetris!.
I used same ideas, algorithms (maybe I should call this engine) from the code which I wrote 5 years ago. Check my post from September 22nd (2006), I showed then a simple Tetris game written by me in assembly language. The new version is written in JavaScript.
This time I look deeper in YUI documentation especially in parts that concern animation, DOM and Event, what I’ve learned you can see by playing this game (A lot or not much? :))
You can find exactly three animations:
- Intro - brick image fade in, zooming text,
- Game Over - falling lines fade out,
- Yahoo YUI logo - zooming while mouse over.
I tested this game in 4 browsers (Opera, Firefox, IE 6, and IE 7) and works fine, however some unexpected things may occur. I will be grateful for any feedback about how this game works in Safari browser.
Have fun!
Gproto.js library
To faster and easier build web application based on Google Ajax Search API I created very simple library - gproto.js.
Gproto.js gives you control on every part of the result. You can change the font size, font colors, background color, margins, etc., by simply assigning the style class name to specified result element. You can also put the results of each search into a different containers, hide any parts of the results, control how many results will be displayed, set the “preloader” and “not found” messages, and more…
You can download and use it for free however you have to obey Google Ajax Search API Terms of Use, because it is based on a code provided by Google.
Google visualization and search API part 2.
…and here is second example:
Google Ajax Search API and Google Visualization API example 2
This time I mixed the results from Image search api with table visualization. Additionally, I created the container for larger images and connected it to the table with event listener, so when you click on thumbnail the larger version of an image will appear - simple image viewer.
Of course you can download the code and build your own application…
Related documentation:
Google Ajax Search API (image) reference
Google Visualization API reference
Google visualization and search API.
Hello everyone! Yesterday I had a bit of free time, so I decided to see what has been changed in Google Ajax API. It’s been quite some time since my last project, that’s why I was pretty curious what new features are available. New - means not used in my previous applications. So I’ve browsed through documentations, examples and believe me or not, I saw lots of new possibilities, ideas, I become inspired and motivated, and I’m not crazy (I hope).
Seriously, I have a few ideas related to Google Ajax API technology and I’ll show you some tricks, code and maybe I’ll make a new application based on these new features.
First example, what I did was to take Google Ajax Search API and mix it with Google Visualization API, and this is the result:
Google Ajax Search API and Google Visualization API example 1
Are You inspired? no? why? Please Wait for my next example…
If you however feel inspired you can download it and change it, and play with it, everything is in one file.
Related documentation:
Google Ajax Search API reference
Google Visualization API reference
NewsBar - No Results -
Few days ago one of the readers of my blog ask me how to get - No Results - in the Google NewsBar. Those who play with NewsBar knows that when query gives you no results the applications switch to default query (which is “Google”) and shows you news about the Google.
How to bypass the default query? Simple, just put the following line before you create newsBar object.
GSnewsBar.DEFAULT_QUERY = "";
Example from the Google NewsBar documentation:
function LoadNewsBar() {
var root = document.getElementById(”newsBarTop”);
var options = {
largeResultSet : false,
resultStyle : GSnewsBar.RESULT_STYLE_EXPANDED,
title : “Nintendo in the news”,
autoExecuteList : {
executeList : [ "Nintendo", "Nintendo DS", "Nintendo Wii" ]
}
};
GSnewsBar.DEFAULT_QUERY = ""; // bypassing the default query!
var newsBar = new GSnewsBar(root, options);
}
You can specify the default query, when queries from executeList produce an empty list of results.
Also, you probably want to count the number of result? It’s not that simple, because you will have to modify the function in gnewsbar.js and we don’t want to do that. The problem is that you have to wait until all data are loaded and then check the number of results.
Here is the solution, not very good, but if you find better one please post comment here.
[...]
GSnewsBar.DEFAULT_QUERY = ""; // bypassing the default query!
var newsBar = new GSnewsBar(root, options);window.setTimeout(function(){
if (newsBar.ns.results.length==0) document.getElementById(”<id of the newsbar container>”).innerHTML=’No Results’;
},2000);[...]
This function waits 2sec (2000ms) and then check if results are available, if not then it shows the ‘No Results’ text.
GreenLinks and WordPress
As I promised, a short tutorial about how to implement GreenLinks into the Wordpress theme.
First and most important thing: Get Google Ajax Search Api key for your website:
http://code.google.com/apis/ajaxsearch/signup.html
Second, open a source of this page:
greenlinks
This is the full code of my application!
Put the <header> content from my example into your theme header section (header.php file), also find the <body> tag in your theme files and insert the onLoad attribute (as I show in the example).
The last thing you should do is to put the GreenLink panel at the end of every post :). The best way to do this is to edit a single.php file (this works in my theme).
And… That’s it, of course if you know the basics of PHP and HTML.
I made a zip file with all the scripts, graphic and pages required to run the GreenLinks on your server. If you have any problem with installing my application just post the comment here.
Please do not remove my name and link to my blog from the GreenLink panel,
thank you!
Extended Google Ajax News Bar
As I promised, I wrote new application based on Google Ajax News Bar. This is not exactly new application, it might be say that this is an extension to the original News bar.
Google provides two kinds of ways in displaying the results:
- Horizontal - animated bar with ability to show the description in the other wrapper (
options.horizontal=true,andoptions.currentResult=document.getElementsById(wrapper)). - Vertical - all the news results and its parts (title, description, etc.) are displayed in the specified container plus you have ability to switch between search items.
My version is between these two methods but near the first one. It is the normal horizontal bar but the difference is that the title and description are displayed in the popup box near mouse pointer when you move it over the news title.
You can use all options that are available in the original New Bar (and for horizontal method) except of currentResutls and horizontal (always true) - these are used internally and values will be bypassed.
The bad or good information is that this version using prototype.js.
Google Ajax News Bar
Google provides new feature called AJAX News Bar. This application lets you add news search results to your website or blog. You can specify the orientations, the number of results (of course 4 or 8, nothing has changed), etc. The interesting thing is controlling through the links in your page which news results are displayed (works same as my green-links). If you are not good in JavaScript you can use Wizard, it will generates the code for you.
Here are the links to reference, example, and
Wizard.
So, I’m starting to write new application right now, lets see what we can do with it…
Space Invaders!
My first contact with “Space Invaders” was about 6 years ago. It was an assembler version found in programmersheaven.com. I think this game is a grand grandmother of all space shooter games, look at the first release date - 1978. WOW! (four years older than me :)).
Couple of weeks ago I decided to create my own version of “Space Invaders”. The code was written by me but the sprites (aliens, UFO, laser gun) is taken from the original version. Everything is written in JavaScript, with the little (read big) help of Yahoo User Interface (same as the last two games).
I had the problem with Firefox, because instead of Opera and IE, in the Firefox the use of the processor while the game was running, was very big (maybe because that a lot of loops were running at the same time). So, I have to rebuild the first project and optimize it for the Firefox. However, still you can see some delay while aliens and UFO are moving (maybe it is some proof that the Gecko engine is slower than IE’s engine :/, no it can not be!). (If you have some time you can check which browser is faster, just turn on window.setInterval(); function (three or four different at the same time) with some loops (not infinite, you can change top and left attributes of some div elements).
This game also wasn’t tested in the Safari browser. Works fine in the latest version of Opera, Firefox, and IE.
Enjoy…
Puzzle!
Making games (even simple games) is a challenge. The creation process is not very difficult and may be fun of course if you know what you are doing (or writing). When I have a new idea I’m asking myself if I know how to do it. This is very important thing! I have to be sure if I know how to make the key elements of the code, before writing any line I must know the algorithm which will describe these elements. So I’m making a few tests, searching for solutions on the internet, in books, or trying to figure out by myself how to create it. And the last step is writing the code (hmm, someone could say that is the first step).
Today I want to present my new project based on YUI library and Flickr API. I think the title say everything - PUZZLE. Each photo which you can find by searching Flickr, is divided in sixteen pieces and placed on the square board. All pieces are randomly set and the last piece is empty. All you have to do, is to set the pieces in their correct places by swapping empty piece with near placed pieces.
The hardest thing while creating this game was figure out how to divide images into pieces using only JavaScript. CSS give us very helpful attribute called - “background-position“. If you have image with size, for example 640×480 pixels, and you want divide it into 16 squares you have to do something like this:
640 / 4 = 160;
480 / 4 = 120;
- .square1 { background-position: 0 0; }
- .square2 { background-position: 0 160px; }
- .square3 { background-position: 0 320px; }
- .square4 { background-position: 0 480px; } - the last square on the first line
- .square5 { background-position: 120 0; }
- .square6 { background-position: 120 160px; }
- .square7 { background-position: 120 320px; }
- .square8 { background-position: 120 480px; } - the last square on the second line
- .square9 { background-position: 240 0; }
- .square10 { background-position: 240 160px; }
- .square11 { background-position: 240 320px; }
- .square12 { background-position: 240 480px; } - the last square on the third line
- .square13 { background-position: 360 0; }
- .square14 { background-position: 360 160px; }
- .square15 { background-position: 360 320px; }
- .square16 { background-position: 360 480px; } - the last square on the fourth line
This technique works well on a small images (640×480 or less), you can use it also with the largest images, however the loading time will be longer (especially in IE).
Have a nice puzzling!
Yetris
Welcome in the new year. I spent the last three days writing another web application based on YUI (Yahoo User Interface). This time I’d like to present a very old and class game - Tetris, but because I use libraries provided by Yahoo I called it Yetris!.
I used same ideas, algorithms (maybe I should call this engine) from the code which I wrote 5 years ago. Check my post from September 22nd (2006), I showed then a simple Tetris game written by me in assembly language. The new version is written in JavaScript.
This time I look deeper in YUI documentation especially in parts that concern animation, DOM and Event, what I’ve learned you can see by playing this game (A lot or not much? :))
You can find exactly three animations:
- Intro - brick image fade in, zooming text,
- Game Over - falling lines fade out,
- Yahoo YUI logo - zooming while mouse over.
I tested this game in 4 browsers (Opera, Firefox, IE 6, and IE 7) and works fine, however some unexpected things may occur. I will be grateful for any feedback about how this game works in Safari browser.
Have fun!
Gproto.js library
To faster and easier build web application based on Google Ajax Search API I created very simple library - gproto.js.
Gproto.js gives you control on every part of the result. You can change the font size, font colors, background color, margins, etc., by simply assigning the style class name to specified result element. You can also put the results of each search into a different containers, hide any parts of the results, control how many results will be displayed, set the “preloader” and “not found” messages, and more…
You can download and use it for free however you have to obey Google Ajax Search API Terms of Use, because it is based on a code provided by Google.