CodeBasic.net | Malaysia's Web Developer cum Designer

COLSPAN and ROWSPAN Tutorial

Sat, 06 Mar 2010 04:28:05 +0000

Every webmaster also know that table cells can be spanned more than one column or row. The attribute of ROWSPAN is used to make cell span multiple rows. If let say ROWSPAN=”3″ it will only span a column vertically across three rows.

border=”1″ cellspacing=”2″ cellpadding=”2″ width=”200px”>

Codebasic.net
rowspan=”2″>spanned
myLengLui.com

imDavidLee.com
LifeTechie.com

LimPek.com
innoDesigner.com
PenangBlogger.com

Codebasic.net	spanned	myLengLui.com
imDavidLee.com	spanned	LifeTechie.com
LimPek.com	innoDesigner.com	PenangBlogger.com

The COLSPAN attribute is to make a cell span multiple columns. It spans the columns and will make your table cell span horizontally.

border=”1″ cellpadding=”2″ cellspacing=”2″ width=”200px”>

colspan=”2″>Codebasic.net

width=”20%”>imDavidLee.comLifeTechie.com

Codebasic.net
imDavidLee.com	LifeTechie.com

How To Find Length of String In Javascript?

Fri, 05 Feb 2010 01:40:41 +0000

While working with strings, most probably we will need to find a length of string, count of charachers and etc. In JavaScript we can make use of the string related function as the [variable].length

So, here we go!! I decided to share some really basic source code. Here’s the example shows in an alert dialog box with the length of the string “My Name is David”

var mystring = “My Name is David”;
alert( mystring.length );

Besides, you also can try to do this -> “My Name is David”.length , which is what the example button above is doing in the onclick event handler.

Why Web Developer Need To Know This?

This technique is very useful when validating a form where a textfield should not be empty.

Change Mouse Pointer Using CSS

Sat, 30 Jan 2010 01:29:09 +0000

There are certain scenarios where you want to change the mouse cursor when you hover over a link. By the way, when you do such a thing you put some javascript in the onclick event and with that you want to give the user a feeling that he/she’s clicking on a hyperlink.

Do you know how to change mouse pointer using CSS? Well, it’s simple and easy. This is the basic cursor type that we normally used:

i) default – Display the normal mouse pointer icon

ii) wait – The mouse icon to represent “processing”

iii) crosshair – A plus symbol

iv) text – An “I” shaped icon that is displayed when selecting text

v) pointer - A hand icon that you see when you hover

vi) help – A question mark

x) move – A cross mark

href=“#” style=“cursor: default;font-family:Arial;font-size:12″>cursor: default

href=“#” style=“cursor: hand;font-family:Arial;font-size:12″>cursor: hand

href=”#” style=“cursor: help;font-family:Arial;font-size:12″>cursor: help

href=”#” style=“cursor: crosshair;font-family:Arial;font-size:12“>cursor: crosshair

href=“#” style=“cursor: text;font-family:Arial;font-size:12″>cursor: text

href=“#” style=“cursor: wait;font-family:Arial;font-size:12″>cursor: wait

href=“#” style=“cursor: Move;font-family:Arial;font-size:12″>cursor: Move

Sample Testing:

Javascript Remove Blank Space In Text Field

Sat, 23 Jan 2010 03:32:05 +0000

This tutorial will help you to remove spaces in a text field using Javascript. Any spaces keyed in by the user will be removed when they click on the button or anywhere outside the text field.

This string.split() is to find all the substrings in a string that are separated by one or more characters. Then, i used string.join() to join a sequence of strings.

My Sample of Codes:

You can try to copy and paste into a notepad and save it as .html to test and see the result.

language=”javascript” type=”text/javascript”>

function removeSpace(string) {

return string.split(’ ‘).join(”);

}

type=”text” onblur=”this.value=removeSpace(this.value);”>

type=”button” value=”Remove Space”>

Convert String to Lowercase In Javascript

Sat, 16 Jan 2010 01:26:46 +0000

Now you can learn how to convert to lower case letters by using toLowerCase() functions in JavaScript. So, in order to convert a string to lower case, then you need to call the toLowerCase() method on the string.

The toLowerCase() method will return a lower case string into a new text field called “output”.

Sample Code of Converting String to Lowercase

Place this code inside the head section.

Place this code inside the body section.

name=“form”>
name=“input” type=“text” value=“im CodeBasic.net” size=“20″>

type=“button” value=“To Lowercase” onClick=”toLowercase();”>

name=“output” type=“text” value=”" size=“20″>

Simple Flash Based Text Scroller

Sat, 02 Jan 2010 03:43:56 +0000

Do you know how to create a flash based text scroller to scroll a few lines of text?

This tutorial will help you to create the text scroller by just following the simple instructions:

Step 1: Create a dynamic textbox.

Step 2: Set the textbox to Multiline, and name the instance as ’scroller’.

Step 3: Right click on the dynamic text and choose Scrollable.

Step 4: Create 2 arrow key button to scroll up/down.

Step 5: Place this Actionscript into the button.

Scroll Up

on(release){

scroller.scroll=scroller.scroll-1;

}

Scroll Down

on(release){

scroller.scroll=scroller.scroll+1;

}

Basic Motion Guide Tween Tutorial

Fri, 25 Dec 2009 23:59:54 +0000

This Flash tutorial will show you how to use a motion guide to move an object.

Step 1: Draw an object on layer 1 and convert it into movie clip.

Step 2: Then, select the Tween in the Properties to Motion.

Step 3: Then, click on frame 30 and insert keyframe. Here, move the object to another location. For this tutorial, I’m going to be using simple circle.

Step 4: Right click on the layer 1, choose “Add Motion Guide”. Next, choose the pen tool to draw the curve.

Convert Bitmap Images to Vector in Flash

Sat, 19 Dec 2009 03:07:55 +0000

Do you know that you can convert your bitmap image to vector graphics using Flash? This is good tutorial for you since you can learn how to convert bitmap to vector in order to achieve a cool look and minimize your file size.

[bitmap image]

[vector graphic]

Steps On How To Convert A Bitmap To Vector

Just follow these simple steps and you will learn how to convert bitmap into vector:

1.Import your bitmap image into your Flash, go to File -> Import -> Import to Stage

2.Select your bitmap.

3.Then, convert it into vector graphics, go to Modify -> Bitmap -> Trace Bitmap.

4.You can adjust the settings to optimize your image for size and quality.

Creating Xmas Snowing Effect Using Flash

Sat, 12 Dec 2009 01:29:34 +0000

This tutorial will help you how to write the Actionscript to create snow animation effects. It also specifies the properties to be set, the frames to be selected etc. Just follow the necessary steps and I will explain each step in detail.

Steps 1: Create a snow particle. Click the Oval tool from your toolbox and set the color to white from your color palette.

Steps 2: Then convert it to movie clip by right clicking on the circle.

Steps 3: Select your movie clip and go to the Properties panel and type the word “snow” in .

Steps 4: After that, right click on your movie clip and select Actions. Copy and paste your code into Actions dialog box.

onClipEvent (load) {

//this is to specify the size of the movie stage, if you set the value of width and height to higher then the distance between each snow particle will be greater.

movWidth = 380;

movHeight = 400;

// use the Math.random() function to create a random speed of snow particle. The variable i takes a random value between 1 and 2 for the speed of the falling snow.

i = 1+Math.random()*2;

m = -Math.PI+Math.random()*Math.PI;

this._xscale = this._yscale = 50+Math.random()*100; //to make sure that x and y dimensions scale evenly

this._alpha = 75+Math.random()*100; //to set the alpha (transparency) value between 75 and 100.

// randomly position the snow particles on your movie

this._x = -10+Math.random()*movWidth;

this._y = -10+Math.random()*movHeight;

}

onClipEvent (enterFrame) {

// convert the value from m into radians so that movie moves horizontally

radian += (m/180)*Math.PI;

this._x -= Math.cos(radian);

this._y += i;

//set the conditions so that the snow particle will disappear from the screen and appear and repeat the process over again

if (this._y>=movHeight) {

this._y = -5;

}

if ((this._x>=movieWidth) || (this._x<=0)) {

this._x = -10+Math.random()*movWidth;

this._y = -5;

}

Steps 5: Right click on the first frame in your movie and select Actions. Copy and paste the following code into the Actions dialog box.

for (m=0; m<50; m++) {

duplicateMovieClip(this.snow, “snow”+m, m);

}

How to Create A Simple Flash Countdown Timer

Sun, 29 Nov 2009 08:35:30 +0000

Today, I will be teaching you how to make a flash countdown timer. This is very useful because in our daily life, there are counts up or down timers.

In this tutorial, you will see how to create a countdown animation using the shape tween effect.

Step 1

Select the Text Tool, click on the stage, and in Properties Panel below the scene to choose the options like it is shown on the picture below.

Step 2

While the number is still selected, then right click and select break apart to make the number become shape.

Step 3

Click on first frame, and in the Properties Panel, select the Tween Shape.

Step 4

After done for the first numbers, try to repeat steps for number 9,8,7….0 in an equivalent way like you have done the previous number.