Jun
6th

Currency Converter In Javascript

Files under Javascript | 15 Comments | 10,436 views

If you need help to create a currency converter by using JavaScript, then this is my basic sample for you to do:

currency_converter

Limitation:

- You need to edit the code and update the currency value from time to time as it does not subscribe to rates feed and use the server side solution to provide accurate and up to date currency conversion.

First, create HTML Code that contain the flag image which represent country currency and textbox for user to key in the value to convert

Create outer table that contains the instruction for user and inner table that display all the country flag, country name and textbox. Using table is more efficient since it can ensure proper alignment most of the time.

My Coding Part:

(more…)

May
16th

Images Left/Right Scroll Script

Files under Javascript | 6 Comments | 3,175 views

In this tutorial you will learn how to scroll the image from left to right and vice versa by clicking and holding down the scroll buttons.

image scrolling

This setup uses a <div> tag with a picture inside. The image is sized 100 x 100 pixels for each; the division viewpoint is set to 210 x 120 pixels. You need to set overflow:hidden in order to hide all images and horizontal scrollbar to be displayed.

When a button is pressed and held down, either function ScrollLeft() or ScrollRight() is called to start a timer and scroll the division by +4 or -4 pixels every 5 milliseconds. When the button is released, you need to clear the timer in order to prevent the division to be continued scrolling.

Works Fine In All Web Browser

I have tested this on IE7, Opera, Safari and Firefox 3.0 on PC and it works great. IE6 will have little problem on the image button issue, there will have border appear on the image if the image is used for linking purpose, it is inside anchor tag <a>…</a>.

My Coding Part

(more…)

May
10th

Javascript Image Link Rotator

Files under Javascript | Leave a Comment | 2,947 views

The below example is rotating image links on a timer. Each image link will be changed after every 5 seconds. This basic script is to allow you to save space or just to make your page a little bit interesting. You can use this method to display ads at any timing options that you need.

My code can support sequential or random rotation. You can specify its own url for each image link.

Images of varying dimensions can be included in the rotation. If you want to display your image dimension, then you just go to set the width and height of tag.

<body onLoad=”rotateImage(’rImage’, ‘link’)”>

<center>

<a id=”rLink”><img id=”rImage” width=150 height=150>
</a> <!– You can set your dimension of image –>

</center>

</body>

(more…)