Making it Better
Adding a Room Change, Frames and Aesthetics
We have made a simple chat with a pop up, a prompt pop up, a form message, a whisper panel, and a /msg input.
Now we will add a room change and we will try to make everything look a little nicer.
For our room change we will use my "formgo" script with a frameset. I decided to use my formgo because with it you can change rooms and servers without reloading the page and all the other changeroom functions people use SUCK. We will add a frameset to the bottom of the chat and load my forgozuh.html page. That page has a form with a Zuh net server and it's port number in the form, but you can clear the form and put in any server name, port # or room name... I have a formgotc.html which is set to talk city also. You can copy mine and change it up to suit your needs or you can just access mine in your frameset as I have done in the example chat for this page.
Below I have the html you need to make a frameset with my formgo.html in it. Just put it in at the bottom of your chat, after the closing body tag.
<frameset rows="*" framespacing=0 frameborder=0>
<frame src="https://members.tripod.com/~fclinks/make/formgozuh.html" name="go">
</frameset>
That is all you need to put in. Just put it in after the <body> tag. The rows="*" just means that the frame will be as tall as it needs to be. You could use a pixel value like rows="100". With WebTV you could just use "1". Although it would seem that the frame would only be 1 pixel high, it will actually open up to accommodate any size page. I will just use the *, it will allow the frame to be as large as it needs to be.
I only have one frame on here but you could use more. You could load a page of links into one of the frames so that you could load different pages into the frameset. To add more you would do something like this:
<frameset rows="*,*" framespacing=0 frameborder=0>
<frame src="http://ww.blah.com/~mysite/chatlinks.html" name="links">
<frame src="https://members.tripod.com/~fclinks/make/formgozuh.html" name="go">
</frameset>
In the example above, it would load your links page in the top frame and my formgo in the bottom. From that link page you could load a page in the "links" frame or the "go" frame. To do this you would place a "target" in your link. Like this:
<a href="http://ww.blah.com/~mysite/page1.html" target="links">1</a>
<a href="http://ww.blah.com/~mysite/page2.html" target="go">2</a>
<a href="http://ww.blah.com/~mysite/page3.html" target="links">3</a>
<a href="http://ww.blah.com/~mysite/page4.html" target="go">4</a>
In the example above, page1 would load in the "links" frame, page2 in the "go" frame, page3 in the "links" frame. and page4 in the "go" frame. If you didnt have a "target" in the link, the page would load in the frame from which it was clicked on.
To make the forms and buttons look a little better there are a few attributes of the <form> tag which webtv supports. You can specify the background color of the input forms with the "bgcolor" attribute. You can specify the cursor color with the "cursor" attribute. You can remove the highlight around the forms by adding "nohighlight". And you can use "usestyle" to make the text in the form the same style as the text on the page would be. If you use usestyle you will need a font color tag in every <td> unless you want the text to be black..We will also add border=0 cellpadding=0 cellspacing=0 to the table tag so that the your inputs will be stacked closer together
<table border=0 cellpadding=0 cellspacing=0><tr><td>
<form id="c" action="javascript:B( )">
<input id="d" type="text" value="/msg " bgcolor=262626 cursor=white usestyle nohighlight width=150>
</form>
<td>
<form id="e" action="javascript:B( )">
<input id="f" type="text" bgcolor=262626 cursor=white usestyle nohighlight width=450>
</form>
</td></tr></table></form>
Tables can be confusing especially if you use alot of them.. I try to use only as many as I need to align everything the way I want it.
That is the entire thing. Now look at the improved chat with the room change doohinky and the semi-spiffy text inputs. There is a textarea below the chat which contains all of the codes. And as always you can edit the chat and see what it will look like with your changes. On the next page we'll add a time and date function, an entry message, and two forms that will leave the message in the form after you send it. Now go to the next page we will add a few more extras
[ IRC list ] [ Server List ] [ First page ] [ page 2 ] [ last page ]
[ next page ]
T