IE MultiPage Alternative: This Works!

**Jabba The Nut** · Jul 28th, 2002, 04:05 PM

I wanted a 7 page credit application and need to be able to flip through each page of the application on the client-side. I tried the IE multipage control coupled with the IE TabStrip control, but found it too difficult to manipulate. Instead I did the following using <DIV> tags and javascript.

Step 1:

I encapsulated each page in <DIV> tags with ids that matched the page numbers. Additionally, the display property for these tags was set to 'none' to turn them off by default (i.e., we want all pages turned off by default. we will turn them on when needed)

<DIV id="pg1" style="DISPLAY: none">Page 1 Content Here</DIV>
<DIV id="pg2" style="DISPLAY: none">Page 2 Content Here</DIV>

These <DIV> sections can be turned off and on in javascript with code such as the following:

document.getElementByID("pg1").style.display = 'none'; //to turn the page off
document.getElementByID("pg1").style.display = 'block'; //to turn the page on

Step 2:

I created a 1-row table with several columns (meant to be a tabstrip or pagebar). Each column had a single <A HREF> link designed to call a javascript function to flip to the desired page. These tags were given ids that matched the page they were designed for. For example:

<TABLE>
<TR>
<TD><A id="pgtab1" HREF="JavaScript:pgSelect('1')">1</A>
<TD><A id="pgtab2" HREF="JavaScript:pgSelect('2')">2</A>
</TR>
<TABLE>

Step 3:

I created two css style classes (A.PageBar and A.PageBarSelect) that established the styles I wanted for the pagebar. The A.PageBar class provided the style I wanted for unselected tabs (i.e., medium gray text with no border when not hovered, dark gray text with dark gray border when hovered). The A.PageBarSelect class provided the style I wanted for the selected tab (i.e., blue text and blue border when not hovered, blue text and blue border when hovered).

Step 4:

I setup a hidden textbox with the id="curPgNum" and a default (or starting) value="1" to contain the page number of the current page:

<INPUT id="curPgNum" type="hidden" value="1">

Step 5:

I wrote the javascript function that flipped through the pages and syncronized the pagebar tabs. The function is as follows:

function pgSelect (pgnum) {

//Note that pgnum is the desired page and is provided in the
//function call from the pagebar tab <A HREF> tag.

//get the number of the current page from the hidden textbox.

var curpg = document.myForm.curPgNum.value;

//turn off the current page (turn of the <DIV> section). Remember
//that each <DIV> section had an id that
//corresponded to a page number (i.e., id="pg1")

eval("document.getElementById('pg" + curpg + "').style.display = 'none'");

//turn on the desired page.
eval("document.getElementById('pg" + pgnum + "').style.display = 'block'");

//change the style of the pagebar tab for the current page to the
//unselected style (A.PageBar). Remember, the pagebar tabs were given
//ids that matched their respective pages (i.e., id="pgtab1")

eval("document.getElementByID('pgtab" + curpg + "').className = 'PageBar'");

//change the style of the pagebar tab for the desired page to the
//selected style (A.PageBarSelect).

eval("document.getElementById('pgtab" + pgnum + "').className = 'PageBarSelect'");

//Set the hidden textbox value equal to the new desired page number
//(the desired page number becomes the current page number).

document.myForm.curPgNum.value = pgnum;

}

Step 6:

I wrote the javascript function that is called in the OnLoad event of the <BODY> tag. This function turns on the page 1 <DIV> and sets up the pagebar tab such that page 1 is selected.

function pginit () {

//turn on <DIV> for page 1.

document.getElementById("pg1").style.dispay = "block";

//set pagebar tab for page 1 to the style for selected.

document.getElementById("pgtab1").className = "PageBarSelect";

//set the hidden textbox value to '1'. This stores the current page number.

document.myForm.curPgNum.value = "1";

}

The above method works beautifully. Not only does it give the speed of page flipping that the IE Multipage and Tabstrip controls provide on the client-side, but it also allows you full and easy access to the controls on your page (the Multipage does not).

I hope that this method proves useful to you. You can modify it to suit your needs and I am sure that you could devise an easy way to implement this programmatically.

Good Luck :)

**Jabba The Nut** · Jul 28th, 2002, 07:06 PM

Here is a link to an example of the multipage alternative...

http://www.loanval.com/multipage/credapp.aspx

Hope you find it useful. I think it's cool. :)

Thread: IE MultiPage Alternative: This Works!

Thread Tools

Display

IE MultiPage Alternative: This Works!

Here's a link

Posting Permissions