<html>
<head>
<title></title>
<SCRIPT language=JavaScript src="dynlayer.js"></SCRIPT>
<SCRIPT language=JavaScript src="miniscroll.js"></SCRIPT>
<SCRIPT language=JavaScript>
<!--
/*
This is a simple application of DHTML to create a slick
interface to your pages. The concepts involved here
are Clipping, Nesting, Sliding, DynLayer, and MiniScroll
Object from the Scroll Concepts lesson.
*/
function init() {
// define arrays to be used to store DynLayers
pulloutContent = new Array()
pulloutWindow = new Array()
pulloutScroll = new Array()
// go through each of the 5 sets (0 to 4) of pullout screens
// assign a DynLayer to the main Window layer and the Content
// layer, then create a MiniScroll using these 2 DynLayers
for (var i=0;i<=4;i++) {
pulloutContent[i] = new DynLayer('pullout'+i+'Content')
pulloutWindow[i] = new DynLayer('pullout'+i+'Window')
pulloutWindow[i].slideInit()
pulloutScroll[i] = new MiniScroll(pulloutWindow[i],pulloutContent[i])
}
// set a flag so that you cannot activate multiple pullouts at the same
time
pulloutActive = false
// keep track of which of the screens is shown
pulloutShown = 0
}
// function to slide the currently shown screen out
// then calls pulloutEnd which slides the next one into view
function pulloutStart(i) {
if (i!=pulloutShown) {
pulloutActive = true
// when it's done sliding out, call pulloutEnd() to slide the other one
in
pulloutWindow[pulloutShown].slideTo(-285,null,15,15,'pulloutEnd('+i+')')
}
}
function pulloutEnd(i) {
pulloutShown = i
// set the flag back to false so that you can then click another one
pulloutWindow[i].slideTo(0,null,15,15,'pulloutActive==false')
}
//-->
</SCRIPT>
<STYLE type=text/css>A {
COLOR: #000000; FONT-FAMILY: 'Arial'; FONT-SIZE: 10pt
}
A.scroll {
COLOR: #ffffff
}
STRONG {
FONT-FAMILY: 'Arial'; FONT-SIZE: 15pt; FONT-WEIGHT: bold; LINE-HEIGHT:
25pt
}
P {
FONT-FAMILY: 'Arial'; FONT-SIZE: 10pt; LINE-HEIGHT: 13pt
}
#pulloutInterface {
BACKGROUND-COLOR: #000000; CLIP: rect(0px 400px 250px 0px); HEIGHT: 250px;
LEFT: 50px; POSITION: absolute; TOP: 50px; WIDTH: 400px; layer-background-color:
#000000
}
#pullout0Sidebar {
BACKGROUND-COLOR: #dedede; CLIP: rect(0px 100px 30px 0px); HEIGHT: 30px;
LEFT: 5px; POSITION: absolute; TOP: 5px; WIDTH: 100px; layer-background-color:
#DEDEDE
}
#pullout1Sidebar {
BACKGROUND-COLOR: #c5c5c5; CLIP: rect(0px 100px 30px 0px); HEIGHT: 30px;
LEFT: 5px; POSITION: absolute; TOP: 40px; WIDTH: 100px; layer-background-color:
#C5C5C5
}
#pullout2Sidebar {
BACKGROUND-COLOR: #a2a2a2; CLIP: rect(0px 100px 30px 0px); HEIGHT: 30px;
LEFT: 5px; POSITION: absolute; TOP: 75px; WIDTH: 100px; layer-background-color:
#A2A2A2
}
#pullout3Sidebar {
BACKGROUND-COLOR: #7e7e7e; CLIP: rect(0px 100px 30px 0px); HEIGHT: 30px;
LEFT: 5px; POSITION: absolute; TOP: 110px; WIDTH: 100px; layer-background-color:
#7E7E7E
}
#pullout4Sidebar {
BACKGROUND-COLOR: #7e7e7e; CLIP: rect(0px 100px 30px 0px); HEIGHT: 30px;
LEFT: 5px; POSITION: absolute; TOP: 145px; WIDTH: 100px; layer-background-color:
#7E7E7E
}
#pulloutUpDown {
LEFT: 5px; POSITION: absolute; TOP: 200px
}
#pulloutViewArea {
BACKGROUND-COLOR: #000000; CLIP: rect(0px 285px 240px 0px); HEIGHT: 240px;
LEFT: 110px; POSITION: absolute; TOP: 5px; WIDTH: 285px; layer-background-color:
#000000
}
#pullout0Window {
BACKGROUND-COLOR: #dedede; CLIP: rect(0px 285px 240px 0px); HEIGHT: 240px;
LEFT: 0px; POSITION: absolute; TOP: 0px; WIDTH: 285px; layer-background-color:
#DEDEDE
}
#pullout0Content {
LEFT: 5px; POSITION: absolute; TOP: 0px; WIDTH: 275px
}
#pullout1Window {
BACKGROUND-COLOR: #c5c5c5; CLIP: rect(0px 285px 240px 0px); HEIGHT: 240px;
LEFT: -285px; POSITION: absolute; TOP: 0px; WIDTH: 285px; layer-background-color:
#C5C5C5
}
#pullout1Content {
LEFT: 5px; POSITION: absolute; TOP: 0px; WIDTH: 275px
}
#pullout2Window {
BACKGROUND-COLOR: #a2a2a2; CLIP: rect(0px 285px 240px 0px); HEIGHT: 240px;
LEFT: -285px; POSITION: absolute; TOP: 0px; WIDTH: 285px; layer-background-color:
#A2A2A2
}
#pullout2Content {
LEFT: 5px; POSITION: absolute; TOP: 0px; WIDTH: 275px
}
#pullout3Window {
BACKGROUND-COLOR: #7e7e7e; CLIP: rect(0px 285px 240px 0px); HEIGHT: 240px;
LEFT: -285px; POSITION: absolute; TOP: 0px; WIDTH: 285px; layer-background-color:
#7E7E7E
}
#pullout3Content {
LEFT: 5px; POSITION: absolute; TOP: 0px; WIDTH: 275px
}
#pullout4Window {
BACKGROUND-COLOR: #7e7e7e; CLIP: rect(0px 285px 240px 0px); HEIGHT: 240px;
LEFT: -285px; POSITION: absolute; TOP: 0px; WIDTH: 285px; layer-background-color:
#7E7E7E
}
#pullout4Content {
LEFT: 5px; POSITION: absolute; TOP: 0px; WIDTH: 275px
}
</STYLE>
</head>
<body onload=init()>
<DIV id=pulloutInterface>
<DIV id=pullout0Sidebar>
<P align=center><A href="javascript:pulloutStart(0)">Item
0</A></P></DIV>
<DIV id=pullout1Sidebar>
<P align=center><A href="javascript:pulloutStart(1)">Item
1</A></P></DIV>
<DIV id=pullout2Sidebar>
<P align=center><A href="javascript:pulloutStart(2)">Item
2</A></P></DIV>
<DIV id=pullout3Sidebar>
<P align=center><A href="javascript:pulloutStart(3)">Item
3</A></P></DIV>
<DIV id=pullout4Sidebar>
<P align=center><A href="javascript:pulloutStart(4)">Item
4</A></P></DIV>
<DIV id=pulloutUpDown><A class=scroll href="javascript://%20Scroll%20Up"
onmousedown=pulloutScroll[pulloutShown].up() onmouseout=pulloutScroll[pulloutShown].stop()
onmouseup=pulloutScroll[pulloutShown].stop()>Scroll Up</A> <BR>
<A class=scroll href="javascript://%20Scroll%20Down" onmousedown=pulloutScroll[pulloutShown].down()
onmouseout=pulloutScroll[pulloutShown].stop() onmouseup=pulloutScroll[pulloutShown].stop()>Scroll
Down</A> </DIV>
<DIV id=pulloutViewArea>
<DIV id=pullout0Window>
<DIV id=pullout0Content>
<DIV align=center><STRONG>Item 0</STRONG></DIV>
<TABLE border=0 width=275>
<TBODY>
<TR>
<TD>
<P>This is item number 0. This text is here
to fill up space. This is item
number 0. This text is here to fill up space. This is item number 0. This
text is here to fill up space. This is item number 0. This text is here
to
fill up space.</P>
<P>This is item number 0. This text is here to fill up space. This
is item
number 0. This text is here to fill up space. This is item number 0. This
text is here to fill up space. This is item number 0. This text is here
to
fill up space.</P></TD></TR></TBODY></TABLE></DIV></DIV>
<DIV id=pullout1Window>
<DIV id=pullout1Content>
<DIV align=center><STRONG>Item 1</STRONG></DIV>
<TABLE border=0 width=275>
<TBODY>
<TR>
<TD>
<P>This is item number 1. This text is here
to fill up space. This is item
number 1. This text is here to fill up space. This is item number 1. This
text is here to fill up space. This is item number 1. This text is here
to
fill up space.</P>
<P>This is item number 1. This text is here to fill up space. This
is item
number 1. This text is here to fill up space. This is item number 1. This
text is here to fill up space. This is item number 1. This text is here
to
fill up space.</P>
<P>This is item number 1. This text is here to fill up space. This
is item
number 1. This text is here to fill up space. This is item number 1. This
text is here to fill up space. This is item number 1. This text is here
to
fill up space.</P>
<P>This is item number 1. This text is here to fill up space. This
is item
number 1. This text is here to fill up space. This is item number 1. This
text is here to fill up space. This is item number 1. This text is here
to
fill up space.</P>
<P>This is item number 1. This text is here to fill up space. This
is item
number 1. This text is here to fill up space. This is item number 1. This
text is here to fill up space. This is item number 1. This text is here
to
fill up space.</P>
<P>This is item number 1. This text is here to fill up space. This
is item
number 1. This text is here to fill up space. This is item number 1. This
text is here to fill up space. This is item number 1. This text is here
to
fill up space.</P></TD></TR></TBODY></TABLE></DIV></DIV>
<DIV id=pullout2Window>
<DIV id=pullout2Content>
<DIV align=center><STRONG>Item 2</STRONG></DIV>
<TABLE border=0 width=275>
<TBODY>
<TR>
<TD>
<P>This is item number 2. This text is here
to fill up space. This is item
number 2. This text is here to fill up space. This is item number 2. This
text is here to fill up space. This is item number 2. This text is here
to
fill up space.</P>
<P>This is item number 2. This text is here to fill up space. This
is item
number 2. This text is here to fill up space. This is item number 2. This
text is here to fill up space. This is item number 2. This text is here
to
fill up space.</P>
<P>This is item number 2. This text is here to fill up space. This
is item
number 2. This text is here to fill up space. This is item number 2. This
text is here to fill up space. This is item number 2. This text is here
to
fill up space.</P>
<P>This is item number 2. This text is here to fill up space. This
is item
number 2. This text is here to fill up space. This is item number 2. This
text is here to fill up space. This is item number 2. This text is here
to
fill up space.</P>
<P>This is item number 2. This text is here to fill up space. This
is item
number 2. This text is here to fill up space. This is item number 2. This
text is here to fill up space. This is item number 2. This text is here
to
fill up space.</P>
<P>This is item number 2. This text is here to fill up space. This
is item
number 2. This text is here to fill up space. This is item number 2. This
text is here to fill up space. This is item number 2. This text is here
to
fill up space.</P></TD></TR></TBODY></TABLE></DIV></DIV>
<DIV id=pullout3Window>
<DIV id=pullout3Content>
<DIV align=center><STRONG>Item 3</STRONG></DIV>
<TABLE border=0 width=275>
<TBODY>
<TR>
<TD>
<P>This is item number 0. This text is here
to fill up space. This is item
number 0. This text is here to fill up space. This is item number 0. This
text is here to fill up space. This is item number 0. This text is here
to
fill up space.</P>
<P>This is item number 0. This text is here to fill up space. This
is item
number 0. This text is here to fill up space. This is item number 0. This
text is here to fill up space. This is item number 0. This text is here
to
fill up space.</P>
<P>This is item number 0. This text is here to fill up space. This
is item
number 0. This text is here to fill up space. This is item number 0. This
text is here to fill up space. This is item number 0. This text is here
to
fill up space.</P>
<P>This is item number 0. This text is here to fill up space. This
is item
number 0. This text is here to fill up space. This is item number 0. This
text is here to fill up space. This is item number 0. This text is here
to
fill up space.</P>
<P>This is item number 0. This text is here to fill up space. This
is item
number 0. This text is here to fill up space. This is item number 0. This
text is here to fill up space. This is item number 0. This text is here
to
fill up space.</P></TD></TR></TBODY></TABLE></DIV></DIV>
<DIV id=pullout4Window>
<DIV id=pullout4Content>
<DIV align=center><STRONG>Item 4</STRONG></DIV>
<TABLE border=0 width=275>
<TBODY>
<TR>
<TD>
<P>This is item number 0. This text is here
to fill up space. This is item
number 0. This text is here to fill up space. This is item number 0. This
text is here to fill up space. This is item number 0. This text is here
to
fill up space.</P>
<P>This is item number 0. This text is here to fill up space. This
is item
number 0. This text is here to fill up space. This is item number 0. This
text is here to fill up space. This is item number 0. This text is here
to
fill up space.</P>
<P>This is item number 0. This text is here to fill up space. This
is item
number 0. This text is here to fill up space. This is item number 0. This
text is here to fill up space. This is item number 0. This text is here
to
fill up space.</P>
<P>This is item number 0. This text is here to fill up space. This
is item
number 0. This text is here to fill up space. This is item number 0. This
text is here to fill up space. This is item number 0. This text is here
to
fill up space.</P>
<P>This is item number 0. This text is here to fill up space. This
is item
number 0. This text is here to fill up space. This is item number 0. This
text is here to fill up space. This is item number 0. This text is here
to
fill up
space.</P></TD></TR></TBODY></TABLE></DIV></DIV></DIV></DIV>
<table width="55%" border="1" cellspacing="2"
cellpadding="2" align="right" bgcolor="#ece8cf"
bordercolor="#666666" class="bord2">
<tr>
<td align="left"> xxx </td>
<tr>
<td align="left"> </td>
</table>
</body>
</html>
|