Foward and Back Buttons

How to make JavaScript history buttons

Well, you want to make a back button- but you want the button to take the viewer back to the page they just came from, which may not have been one of your pages. This kind of back button would act like the back button on a web browser. Well, if you really want to have one, you can do it with a nifty little javascript. Here it is:

This will place a button on your page that will send the user back to the last page in their history list before yours. To try it out, click the link below and see the button on the new page.
Example Page
And when you clicked the button, you ended up back here. You can try going to the example page from elsewhere......you'll just be sent back there when you click the button....

So, what does all of that code mean? Okay, here's the scoop:

1.

This opens a form so we can use the button on the page.

2.
This creates the button we use for the script.

3. ....onClick="history.back()">
This is what makes everything happen. The onClick=" " tells the browser to do the command in the quotes when the button is clicked. The history.back() is the function that does just what it says: It takes the viewer on step back in their history list.
Is there more? ..I thought you'd never ask......
Okay, you can swap out the history.back() function above with one of the following to do some different things:

1. history.forward()
This will take the viewer one step forward in their history list.

2. history.go(-1) or history.go(1)
This allows you to determine how far forward or back to take the viewer. Use a minus sign and a number to go back, or just a number to go forward.

Introduction to Tabular Data Control (IE)

Introduction to Tabular Data Control (IE)

Tabular Data Control is a Microsoft ActiveX control that comes pre-installed with all versions of IE4+. This useful control allows you to access, display, and even sort ASCII information stored on the server end, such as a .txt file. In other words, it creates a simple "database" function without the need for server side scripting such as PHP and mySQL. A client side language such as JavaScript handles the more sophisticated features of Tabular Data Control. In a nutshell, TDC renders a simple client side database!

As mentioned, the tabular data control is available in IE 4 and upwards. Netscape requires a plug-in for the same function to work.

Implementation:

The ActiveX control is initialized using the

CLSID:333C7BC4-460F-11D0-BC04-0080C7055A86

Thus we initialize this control in a web page as follows :

Any object, like applet, has a number of parameters. Parameters of the object are specified using the tag. The tabular data control has around 8 parameters. Here, I'll discuss only the more important ones :

• DataURL: The path of the file that contains the data. For eg "data.txt".
• UseHeader: Specifies whether the first line of the data file should be used as reference names for their respective fields below. If specified to false, use "Column1", "Column2" etc instead. The default value is false.
• TextQualifier: Specifies the optional character that surrounds a field.
• FieldDelim: Specifies the character that is used to separate each field in the data file. The default character is the comma (,). For eg, consider a data file where we have the fields data: *SomeName*|*SomeAge*|*SomeSex*. Here, the field delimiter used is '|' and '*' is  the text qualifier.
• RowDelim: Specifies the character used to mark the end of each row of data. The default character is the newline (NL) character.

Thus, an example complete initialization will look as follows :

The parameter names are not case sensitive. The TextQualifier parameter is purely optional, though can be useful in helping you more easily distinguish between each data entry.
First, let us consider a simple example where I store my name and age in a text file data1.txt. Here is the file:
data1.txt:

name|age
~Premshree Pillai~|~19~

Now, I will extract this data and display it in a web page as follows : Corresponding HTML page:

The output will display : Premshree 19
Note the attributes within the SPAN tags. DATASRC specifies the data source to use, which is the same as the ID of the object we have initialized (here, 'data1'). The DATAFLD attribute specifies which field of the data we want to display. The data file data1.txt had two fields 'name' and 'age' as you can see. Specifying the DATAFLD as 'name' will display the name.
Now, the above example, while perfectly valid, reveals a potential shortcoming of the technique- as we add and remove data in the text file, we also need to then update the corresponding HTML on the page to accommodate this change (ie: add/remove tags). This process quickly becomes cumbersome depending on the size of our database and how often it changes. Fortunately for these situations there is another way to display the data that is both dynamic and self-correcting.

Using document.createElement() to test for browser support for an element

Cross browser scripting is becoming an ever more convoluted game of features versus support. Most of us are familiar with using object detection or the Navigator object to check for backing for a given JavaScript object or method, but these techniques do not work well when the objective is to check whether the browser recognizes a particular HTML element, such as HTML 5's canvas or element. This is where document.createElement() can be very helpful.

To test for support for an element, the basic premise is this:

• Use document.createElement() to dynamically create the element as if the browser supports it.
• Check the newly created object for a known property or JavaScript method that should exist if the browser actually supports this element.
• For INPUT elements, set its TYPE attribute to the target INPUT TYPE you're testing for, and see if the browser retains that value.

document.createElement() behaves as such that it will create an element regardless of whether the browser actually supports it. The true test on the legitimacy of this newly created element is whether or not it supports the properties and methods expected of it, and that's what we exploit here to test for browser support for an element.

  Checking for support for the canvas element of HTML 5

Lets start our parade of examples with a check for support for the canvas element of HTML 5. Standard object detection doesn't work here, since the canvas element isn't automatically represented by a JavaScript object when the page loads.

var test_canvas = document.createElement("canvas") //try and create sample canvas element

var canvascheck=(test_canvas.getContext)? true : false //check if object supports getContext() method, a method of the canvas element

alert(canvascheck) //alerts true if browser supports canvas element

In the above, first we create a "test" canvas element, then see if it's a legitimate canvas object by checking for the getContext() method, which all canvas capable browsers should have. Canvascheck in turn returns a Boolean indicating whether the browser supports the canvas element of HTML 5.

Checking for support for the audio and video elements of HTML 5

Next up, you can also use document.createElement() to check for support for the new audio and video elements of HTML 5. Both elements once defined support a list of methods, one of which is play(). By fishing for this method in the newly created object, we can check whether the browser actually supports these two elements:

var test_audio= document.createElement("audio") //try and create sample audio element

var test_video= document.createElement("video") //try and create sample video element

var mediasupport={audio: (test_audio.play)? true : false, video: (test_video.play)? true : false}

alert("Audio Element support: " + mediasupport.audio + "\n"

+ "Video Element support: " + mediasupport.video

)

Checking the

It's a very handy feature, but obviously one that only works in IE. To see if the browser can handle IE behaviors, first, create a "dummy"