Scrollable text box

**McKirahan** · Jul 23 '05, 01:16 PM

Re: Scrollable text box

"Sketcher" <sketcher@eirco m.net> wrote in message
news:DFZXc.2596 3$Z14.8244@news .indigo.ie...[color=blue]
> Hi all,
>
> I have a basic menu (compatible with IE and N6), the code of which is[/color]
shown[color=blue]
> below.
> Is there any way that I can tidy this up - perhaps define the criteria[/color]
once[color=blue]
> only for the entire menu.
> It seems like a lot of code for such a simple menu and repeatative in[/color]
parts.[color=blue]
>
> Also, I take it that it should work with other popular browsers aswell[/color]
e.g.[color=blue]
> Opera.
>
> Sketch
>
>
>
> <CENTER>
> <table width=100 border=0>
>
> <tr>
> <td onMouseover="th is.style.backgr oundColor='#D5E 0B8'"
> onMouseout="thi s.style.backgro undColor='#ffff ff'"><ilayer[/color]
width=100%><lay er[color=blue]
> width=100% onMouseover="th is.bgColor='yel low'"
> onMouseout="thi s.bgColor='whit e'"><FONT COLOR="#000000" FONT[/color]
FACE="VERDANA,[color=blue]
> ARIAL, HELVETICA, SANS-SERIF" SIZE=2><B>Item 1</ilayer></layer></td>
> </tr>
>
> <tr>
> <td onMouseover="th is.style.backgr oundColor='#D5E 0B8'"
> onMouseout="thi s.style.backgro undColor='#ffff ff'"><ilayer[/color]
width=100%><lay er[color=blue]
> width=100% onMouseover="th is.bgColor='yel low'"
> onMouseout="thi s.bgColor='whit e'"><FONT COLOR="#000000" FONT[/color]
FACE="VERDANA,[color=blue]
> ARIAL, HELVETICA, SANS-SERIF" SIZE=2><B>Item 2</ilayer></layer></td>
> </tr>
>
> <tr>
> <td onMouseover="th is.style.backgr oundColor='#D5E 0B8'"
> onMouseout="thi s.style.backgro undColor='#ffff ff'"><ilayer[/color]
width=100%><lay er[color=blue]
> width=100% onMouseover="th is.bgColor='yel low'"
> onMouseout="thi s.bgColor='whit e'"><FONT COLOR="#000000" FONT[/color]
FACE="VERDANA,[color=blue]
> ARIAL, HELVETICA, SANS-SERIF" SIZE=2><B>Item 3</ilayer></layer></td>
> </tr>
>
>
>
> </FONT></B>
> </TABLE>
> </CENTER>
>[/color]

Below are two solutions; watch for word-wrap.

Solution 1 uses CSS to reduce code:

<html>
<head>
<title>menues.h tm</title>
<style type="text/css">
td { font-family:verdana, arial,helvetica ,sans-serif; font-size:9pt;
font-weight:bold }
</style>
</head>
<body>
<center>
<table border="0" width="100">
<tr>
<td onMouseover="th is.style.backgr oundColor='#D5E 0B8'"
onMouseout="thi s.style.backgro undColor='#FFFF FF'">
<ilayer width=100%>
<layer width=100% onMouseover="th is.bgColor='yel low'"
onMouseout="thi s.bgColor='whit e'">
Item 1
</layer>
</ilayer>
</td>
</tr>
<tr>
<td onMouseover="th is.style.backgr oundColor='#D5E 0B8'"
onMouseout="thi s.style.backgro undColor='#FFFF FF'">
<ilayer width=100%>
<layer width=100% onMouseover="th is.bgColor='yel low'"
onMouseout="thi s.bgColor='whit e'">
Item 2
</layer>
</ilayer>
</td>
</tr>
<tr>
<td onMouseover="th is.style.backgr oundColor='#D5E 0B8'"
onMouseout="thi s.style.backgro undColor='#FFFF FF'">
<ilayer width=100%>
<layer width=100% onMouseover="th is.bgColor='yel low'"
onMouseout="thi s.bgColor='whit e'">
Item 3
</layer>
</ilayer>
</td>
</tr>
</table>
</center>
</body>
</html>

Solution 2 requires that JavaScript be enabled on the client's browser.

<html>
<head>
<title>menuez.h tm</title>
<style type="text/css">
td { font-family:verdana, arial,helvetica ,sans-serif; font-size:9pt;
font-weight:bold }
</style>
</head>
<body>
<center>
<script type="text/javascript">
var bgc1 = 'this.style.bac kgroundColor="# D5E0B8"';
var bgc2 = 'this.style.bac kgroundColor="# FFFFFF"';
var item = new Array();
item[0] = "Item 1";
item[1] = "Item 2";
item[2] = "Item 3";
var menu = "<table border='0' width='100'>\n" ;
for (var i=0; i<item.length; i++) {
menu += "<tr>\n";
menu += " <td onMouseover='" + bgc1 + "'\n";
menu += " onMouseout='" + bgc2 + "'>\n";
menu += " <ilayer width='100%'>\n ";
menu += " <layer width='100%' onMouseover='th is.bgColor=#FFF F00'
onMouseout='thi s.bgColor=#FFFF FF'>\n";
menu += " " + item[i] + "\n";
menu += " </layer>\n";
menu += " </ilayer>\n";
menu += " </td>\n";
menu += "</tr>\n";
}
menu += "</table>";
document.write( menu);
</script>
</center>
</body>
</html>

Your code had several mistakes.

1) </FONT></B> is at the end but should follow each set of <FONT ...><B>
tags

2) tags should be paired within each other; that is: your
</ilayer ...></layer> </ilayer></layer>
should be
</ilayer ...></layer> </layer></ilayer>
note the order of the closing tags.

Also, I don't see what the <layer> and <ilayer> tags do.

Scrollable text box

Scrollable text box

Comment