Tech Mug » jQuery

Simple jQuery Slideshow with Controls

Fraz Ahmed — Tue, 28 Jun 2011 13:18:21 +0000

I was looking for a simple Slideshow to add in one of my projects. But after searching on the internet I was not able to find my desired slideshow component then I decided to create my own.

I created this nice and simple slideshow using jQuery and jQuery Cycle plugin. It has Numbers control with Next and Previous control. This is not only image based slideshow but you may also put some content in each slide too.

I’m releasing this component for free. You may download and may use it in your own projects.

Your comments and suggestions are always welcome. Please spread the word and share this component on your favorite website.

AJAX Currency Converter with Google API

Fraz Ahmed — Fri, 27 Aug 2010 15:42:03 +0000

No doubt, Google is a magical search engine. Google also provides many APIs to be incorporated in your application. Today, we will use Google’s hidden currency conversion API. Why hidden? Because there is no official documentation for it.

We will build a currency converter from scratch, it pulls data from Google and display the results using jQuery AJAX function. For you better understanding, you may visit demo or download source code below:

Basically our whole code consist of three components – HTML for displaying interface, Javascript for AJAX functionality and PHP for fetching and manipulating conversion results from Google.

HTML Structure

HTML structure for this application is simple enough. There are two drop downs, one input field, one button and a div for displaying results. Drop downs are used for selecting From Currency and To Currency while input field is used for entering the desired amount to be converted in your selected currency. Conversion result displays in results div once you click on convert button. When you click on the button, it fires a Javascript function which is described below.

Javascript

Following is the code for our AJAX enabled javascript. Below code is executed upon clicking on convert button.


$(document).ready(function() {

 $('#convert').click(function(){

 //Get all the values
 var amount = $('#amount').val();
 var from = $('#fromCurrency').val();
 var to = $('#toCurrency').val();

 //Make data string
 var dataString = "amount=" + amount + "&from=" + from + "&to=" + to;

 $.ajax({
 type: "POST",
 url: "ajax_converter.php",
 data: dataString,

 success: function(data){
 //Show results div
 $('#results').show();

 //Put received response into result div
 $('#results').html(data);
 }

 });
 });
});

Above code is very simple and should be self explanatory, if you are familiar with jQuery AJAX function. For those who does not know, what’s going on here I tr to explain them.

$(‘#convert’).click(function… this is the starting point of our code, it means that execute the underneath code of this function when an element with id of ‘convert’ is clicked. In our case this id is used for ‘convert’ button.

After that we grab values from our HTML elements by using .val() function of jQuery and assign these values into Javascript variables. These variables are then used in dataString variable.

In our AJAX function we are using POST method and in ‘url’, we provide the url of our PHP file which will provide conversion results back to this AJAX function. We are sending ‘dataString’ as data to our PHP script.

After successful iterating to our PHP script, this AJAX function first shows our results div and out the received data into our results div as HTML.

PHP Code

The brain of our application is below PHP code.

Above code is well commented to make you understand better. In this code we are using some built-in PHP functions – file_get_contents, explode, round and ucwords.

In start we grab the values posted to this script by our AJAX function. We store these values into variables.
We make a string variable using above explained variables.
We concatenate this string variable to Google Currency Calculator API url and store the url in a new variable named $google_url.
We fetch the data of $google_url to $result variable using PHP’s file_get_contents function.
We receive data from Google something similar to
{lhs: “1 Euro”,rhs: “1.2692 U.S. dollars”,error: “”,icc: true}
Using PHP’s explode function, we separate lhs and rhs from the received response.
From rhs we get the converted value and multiply it by our dsired amount to get total conversion.
Using PHP’s round function, converted amount is round off to two digits.
After this we use PHP’s ucwords function to Capitalize our text’s first letter.
We almost do the same for lhs.
At last we make results by joining lhs and rhs and echo it to give the results back to our AJAX function.

Last words

In the source code I have applied some CSS to make the user interface better. So don’t be puzzled with the code in source file.

Finally, you have a working Live Currency Converter. You may use this script in your website to attract more visitors. Just play around the code and let me know if you can enhance it further. Please feel free to ask, your comments are always welcome.

If you like this article, please share it on your favorite website. It may help someone somewhere!

jMouse Follower

Fraz Ahmed — Wed, 29 Jul 2009 19:33:14 +0000

What is Mouse Follower?

Mouse Follower or Cursor Trail is typically an image or set of images which follows the cursor in your browser screen.

Demo and Download

To understand more clearly visit demo. Alternatively you may also download the files from here.

Problem

Today I was asked to enhance the existing mouse trail feature of a website. They were using 3 or 4 PNG images to make the mouse trail. But the problem was that images were inline. While our client wanted some more advanced animation with mouse trail/follower. And that animation was not possible without using flash animation in it.

From the above its clear that we were need to have a DIV in the script where all of the Flash embedded code may be inserted. I searched for many scripts but the problem was that they were doing well with IE but for Firefox answer was NO.

Things to do

Eventually I had to play with code. And surely my first choice for Javascript is always jQuery. Basically the concept was so simple, to achieve Mouse Follower effect we need to do following:

Create a DIV for Flash Object (You may also use image in this DIV).
Find X and Y co-ordinates of cursor’s current position.
Change DIV position according to X and Y position of Cursor.

How it works?

Explanation

In the above code first we define use document.ready() it simply call the underneath function on the load of page.
$(“*”).mousemove(function(e){… – this line reads that call the function whenever mouse move on any element of the page. mousemove is a jQuey event. Click here to learn more jQuery events.
$(“#follower”).css({… – this line looks for an element which ID is “follower”. This is our Flash Object DIV. In this line we change the CSS style of our DIV. jQuery has made it much easy for us to change the CSS style of any element on the move.
We get X and Y co-ordinates by calling page.X and page.Y builtin functions of jQuery.
We used margin-left and margin-top to style our DIV. Values of both margins are set equivalent of page.X and page.Y
So, every time when mouse moves on the page, our DIV changes its position itself. And this all is happening because we have defined the position of our DIV to absolute. So, DIV is free to move anywhere on the page.
We used +10 with page.X and page.Y its just because we wanted to move our object a little far from the cursor.
Our DIV has a Flash Object. And we have made this flash animation a transparent one. So, it will not hide any element on the page. Code for our DIV is below:

Don’t forget to share the post on your favorite website. It may also help someone somewhere.