Content is what interactive TV is all about. This is what your audience sees after successfully following the interactive TV link. These tips should help you create better content for your shows:
Include a<body hspace=0 vspace=0>
on your top-level frameset page to avoid the ugly gray border you would
otherwise see. Now, most browsers cannot handle the body tag in a
frameset document, but the WebTV® browser can, so be sure to make this
tag WebTV-specific.
Here's how:
<script language="Javascript">
if (navigator.appVersion.indexOf("WebTV;2.2") != -1)
{
document.write("<body hspace=0 vspace=0>");
}
</script>
Use
the navigator.networkOnline()
JavaScript function to
determine if you need to reconnect the user to the Web for your
experience to work properly.
For example:
<script language="Javascript">
function watchConnect()
{
setTimeout("watchConnect()",5000);
if (navigator.networkOnline()){
document.all["disconnect"].style.visibility="hidden";
} else {
document.all["disconnect"].style.visibility="visible";
}
}
watchConnect();
</script>
Use
<div>
tags to create layers of your interactive TV content so you can
dynamically move them on and off the screen. For many examples of this
technique, please visit the samples page.
TIP: If you open this URL with your WebTV Internet receiver, you
will be able to try out the code.
Use form elements to dynamically update content on the screen such as blocks of text, titles, and buttons. By using extensions you can make any form element look like regular HTML text and you can disable it (so it is not editable).
For example:
<font color=000000 transparency=20>
<TEXTAREA rows=6 width=270 transparency=25 nobackground
border=0 noselect usestyle name="float_desc">
My Dynamic Text.
</TEXTAREA>
</font>
If
you want to animate something, you can do it incrementally with the
setTimeout()JavaScript function.
For example:
function move_div(div_name, div_final_position)
{
var division = document.all[div_name].style;
// INCREMENT THE MOVEMENT OF THE DIV BY 10
var new_pos = division.posTop - 10;
if (new_pos < div_final_position)
{
division.posTop = div_final_position;
}
else
{
division.posTop = new_pos;
setTimeout("move_div('" + div_name + "'" +
div_final_position + ")", 100);
}
}
function animate_div()
{
var division = document.all["my_div"].style;
//SET THE INITIAL POSITION OF THE DIV
division.posTop = 420;
division.posLeft = 4;
division.visibility = "visible";
setTimeout("move_div('my_div', 100)", 100);
}