Good old HTML! When we first started dabbling around in the Internet ( a long long ago, in a galaxy far far away!), we'd proudly boast to all our friends that we could 'program' in HTML. We'd create ugly looking pages, push them under everyone's noses and fish for compliments. "Doesn't it look nice?" we'd ask, "Isn't the layout cool?", we'd say. We'd usually get a sickly grin and a "That's very good" from most people, though a couple of people did throw up when we showed them our home page at neca.com. It was largely because of these encouraging remarks that we were spurred on to produce even greater works of art, like pages with blindingly blue backgrounds and our excruciatingly long home page. Ah, the good old days!
A lot has changed since those first few heady days and now we're not all that gung-ho over HTML anymore (Do I hear a sigh of relief?). After all, if an application like FrontPage can write HTML code, then it can't be too difficult, can it? There's no challenge left in HTML anymore. Besides, the more HTML code you see, the uglier it seems to get. It reminds me of the not so good days of WordStar where you had to put weird tags all over to mark out blocks or to make a word appear in bold.
The worst of HTML's sins, even worse then it's revolting syntax, is that it is Static. Each time you want to change something on the page you have to connect to the server and download a fresh copy. If, for example, I want the color of some text to change when I pass the mouse over it then using plain vanilla HTML, it simply can't be done. If I want anything new, I've just got to get a new page.
This is of course a terrible disadvantage and it was to fill in this need for dynamism that plugins like Macromedia's ShockWave were produced. Eventually the big guns of the browser world also wised up and Netscape released JavaScript with Microsoft soon retaliating with Visual Basic Script. JavaScript is a relatively simple scripting language with absolutely no relation to Java. Probably the only reason it was christened JavaScript was to satisfy the marketing department! Just as useful is Visual Basic Script from Microsoft, which has proved to be as powerful as JavaScript. These languages made it possible to add some amount of complexity and dynamism to the page, but it still wasn't enough. Even now it's impossible to change the color of the text depending on the position of the mouse pointer. You still have to get a new page for that.
The guys at Microsoft quickly realized that if HTML was to become more useful and even more omnipresent, it would have to become more dynamic. That means that once the page came over to your machine from the server, there should be no reason to go back. All the processing should take place on your machine. For example, a search engine should now send me the results of a query unsorted. Depending on the option I choose, I should be able to sort the data as I want on my machine. If I want to change the sorting method I needn't go back to the server, I should be able to re-sort it right here on my own computer.
This flies right in the face of Sun's philosophy of the Network Computer. They want all the important work done on the server with the client being as anorexic as possible. Microsoft is moving in the opposite direction, saying that the server shouldn't be overburdened with needless requests; let the clients do most of the work themselves. After all, I don't want to sit around waiting for a page to come from the server every time I do something or click somewhere. I'd rather the work was done right here on my PC where the bandwidth between the CPU and the data is measured in Megabytes per second rather than in Kilobits per second.
Microsoft wanted to make HTML more responsive, but they couldn't possibly rewrite the language. So instead they decided to revamp it and the results are very impressive indeed. It may look and feel a lot like the old HTML, but it's radically different. The main difference between Dynamic HTML (DHTML?) and classic HTML is that each and every tag is now an Object and can have a unique ID and properties. That doesn't sound very important but sure is. Since every tag now has a name, I can access certain tags and not others; change some tags and leave others the way they were. Tags now have properties too. These properties control the tag and it's text and define it's attributes.
Scripting languages have also gained importance and can no longer be dismissed as mere toys. JavaScript and VBScript are the glue which holds Dynamic HTML together. Since every tag has a name, we can change their properties depending on the user's actions, using a scripting language. So now when you move over some text, an event like 'onMouseOver' can be activated and it can call a specific function. The script will then take over and dynamically change the properties of the tag.
We've provided you with a similar example right here.
<HTML>
<HEAD>
<script language=JavaScript>
function aa() {
var r = document.rangeFromElement(ii)
r.pasteHTML("<MARQUEE>sonal</MARQUEE>")
}
</script>
</HEAD>
<BODY>
<H1 id=ii onclick="aa();"> Vijay Mukhi</H1>
</BODY>
</HTML>
The first thing you should notice is the id=ii in the heading tag. This is the id or the name of the tag. Onclick="aa();" means that whenever the user clicks on the heading, call the function aa(). When aa() is called it quickly replaces the heading tab with a scrolling marquee. The text is also changed from Vijay Mukhi to Sonal. However the id and event are not changed so when you click on the scrolling Sonal, another Sonal appears.
We'll get into the details of this later, but this simple example shows that everything on the page is now ephemeral. In fact, internally IE4 creates a new page every time you click on the heading, but that page is created locally and loaded locally so the process is almost instantaneous. The original code doesn't change and if you view the source, it'll look just the same as before. Yet, the page has changed and internally the heading has been replaced by a marquee. So now you can change anything on the page. It's like clicking and downloading a new page from the server, only this time the server's on your hard disk. This is what Dynamic HTML is all about, changing the HTML page that appears on your screen, in real time.
There's Dynamic HTML built into the Operating System too. In the same way as the code to display a .bmp as a background image was built into the OS, the code to view and interpret HTML files has also been added. So when you open a folder you see an HTML page. It's like looking at your computer through the eyes of a browser. A little later we'll fiddle around with mycomp.htm, the HTML file which masquerade as the folder My Computer.
ActiveX
There's always a catch to everything and Dynamic HTML is no exception. Along with furthering the cause of HTML, Microsoft has also furthered the careers of ActiveX programmers and other Microsoft sympathizers. Microsoft has decided to tightly integrate ActiveX into Dynamic HTML. It's still possible to use the <applet ></applet > to place a Java applet in your code, but a new tag, <object></object> has also been added. This tag enables you to add an ActiveX object to your page. While a Java applet can't directly affect the browser or it's attributes, with an ActiveX object you can do almost anything. You can flip text, change tags, change the browser toolbar... anything.
So whenever you see something that look like it belongs in a proper .exe file, it's ActiveX. If when you right-click, a menu pops up, its ActiveX. If it's fast and cool, it's ActiveX. Using ActiveX and Dynamic HTML in conjunction you can give your HTML pages levels of dynamism that until now, could only be found in a multimedia CD.
My Computer
Here's our first example about Dynamic HTML and it's uses. What used to be My Computer is now an HTML file called mycomp.htm in C:\Windows\Web. Before you start mauling it I suggest you copy the entire directory to another location. Now use Edit or any other text editor and view mycomp.htm.
Looks a little confusing eh? It isn't really and you'll soon figure out what most of the tags do. All we're going to do is get you started and then we'll leave the rest to you.
The first thing you should do is delete the contents of the entire file and replace them with the tags given below.
<HTML> <BODY> <H1>Mycomp is an HTML file, just like all the other folders!</H1> </BODY> </HTML>
Save the file and then go back to the Active Desktop. Click on My Computer. So there you have it, final and irrevocable proof that all folders are actually HTML files in disguise. You can put any tag you want here.
Now put this code in the file.
<HTML> <BODY> <H1>Hello</H1> <object id="FileList" style="position: absolute; HEIGHT: 100%; LEFT: 0;TOP: 0; WIDTH: 70%" classid="clsid:1820FED0-473E-11D0-A96C-00C04FD705A2" align="baseline" border="0"></object> </BODY> </HTML>
When you do this, the Hello will promptly disappear behind the ActiveX object which displays the icons in the window. You can do anything with the icons, click then move them, rename them.. whatever you want. Fiddle around with the style settings to make the text and the icons appear simultaneously on the screen.
I've already mentioned the Object tag before and you know by now that it's used to put an ActiveX Object into your page. That's exactly what we've done here. This is an OCX which displays the icons found within the file mycomp.htm. How exactly it goes about it is unknown
The Object tag is the ActiveX equivalent if the Java Applet tag. When we use the Applet tag we give the name of a .class file, but when we use the Object tag we give the CLSID of the ActiveX object which is a 16 byte number. When the browser sees the CLSID it goes to the registry and loads the Object, else it looks at the CodeBase and downloads the file.
Play around with the HTML file as much as you want, just remember to replace it with the original file when you're done.
On to some Dynamic HTML examples.
<HTML> <HEAD> <script language=JavaScript> function aa() { var r = document.rangeFromElement(ii) r.pasteHTML("<MARQUEE>sonal</MARQUEE>") } </script> </HEAD> <BODY> <H1 id=ii onclick="aa();"> Vijay Mukhi</H1> </BODY> </HTML>
This here is the very same example we showed you earlier. It is by far the easiest and most effective demonstration of Dynamic HTML's abilities and so we'll be explaining it in greater detail here. When you run this program, it will display the text Vijay Mukhi in the H1 (Heading1) format. When you click on the text, the name will disappear and a marquee with the text Sonal will start scrolling by. Throughout, the browser makes no contact with the server. All processing takes place on the client.
The HTML, HEAD and BODY tags are necessary. The program doesn't work without them. The first thing you've probably noticed (besides the presence of JavaScript) is that the H1 tag now has a couple of new fields. The id field gives the tag a name by which it can be referred to. Onclick="aa();" implies that when the user clicks on the tag H1, the function aa() should be called. It is the script that changes the text.
The script starts and ends with the SCRIPT tag. The function itself ends with the braces. In the function we create a variable r and in the same line assign it the value of document.rangeFromElement(ii) which is one of a huge number of inbuilt functions. JavaScript variables are of only one type. This functions shows that the global object document has a member rangeFromElement. What this statement does is take all the text in the heading and assign it to the variable r. In the next line we say r. pasteHTML, where pasteHTML is a global object present in all variables, and replace the heading tag with the following...
<MARQUEE>sonal</MARQUEE>
Remember, only the tag and the text is replaces, the id and the onclick remain the same. To test this out, click on the scrolling Sonal and you'll see another appear. This happens because when you click the function aa() is called again and it again replaces the tag with a marquee.
<HTML> <BODY> <OBJECT CODEBASE="http://www.microsoft.com/netshow/download/nsoplay.exe#Version=1,0,0,475" CLASSID="clsid:2179C5D3-EBFF-11CF-B6FD-00AA00B4E220"> WIDTH=200 HEIGHT=200 ID="NSOPlay1" NAME="NSOPlay1"> <PARAM NAME="_ExtentX" VALUE="200"> <PARAM NAME="_ExtentY" VALUE="200"> <PARAM NAME="AutoStart" VALUE="-1"> <PARAM NAME="FileName" VALUE="http://www.microsoft.com/ie/ie40/collab/ie40.asx"> <PARAM NAME="ControlType" value="2"> </OBJECT> </BODY> </HTML>
In this next program we use an ActiveX object to play an .asx file we've got from a website. The tag CODEBASE points to where the object is found and the param name FileName points to the file we wish to pass the ocx. That's about all there is to it!
The object Codebase is used when windows can't find the CLSID in the registry. When this happens the browser goes to the specified site and downloads a copy of the OCX. Once downloaded, the CLSID is added to the database in the registry. From now on, whenever you need this OCX you can get it directly from the hard disk rather than have to download it each time like a Java applet.
<HTML> <HEAD> <SCRIPT LANGUAGE="VBScript"> sub window_onLoad() Dim t Set t = MSIE2 t.Invoke end sub </SCRIPT> </HEAD> <OBJECT id="MSIE2" width=0 height=0 classid="clsid:11148320-7314-11d0-8a03-00a0c90a90ac"> <PARAM NAME="Action" VALUE="AddDesktopComponent"> <PARAM NAME="URL" VALUE="http://www.vijaymukhi.com"> <PARAM NAME="Type" VALUE="WebSite"> </OBJECT> </HTML>
This is perhaps the most useful of all the examples listed here. What this program does is add a Website to your Desktop as a Desktop component. Just substitute the value "http://www.vijaymukhi.com" with the name of your site and viola!, your readers can now have a permanent conduit to your page!
When the window loads, the function window_onload is called. Within this function we set t to be equal to MSIE2, the id of the ActiveX object listed below it. We then say t.invoke, which simple means run the ocx.
The object itself accepts various parameters as input. The most important is the name of the website. Nothing to it really.
<HTML> <BODY> <SCRIPT LANGUAGE="VBScript"> function Headline_onclick() if Blurb.style.display = "" then Blurb.style.display = "none" else Blurb.style.display = "" end if end function </SCRIPT> <DIV ID="Headline"> True Web Integration </DIV> <DIV ID="Blurb"> <UL> <LI TYPE=DISC><A HREF="default.htm">Browse your own computer!</A> <LI TYPE=DISC><A HREF="default1.htm"> computer! </A> </UL> </DIV> </BODY> </HTML>
This too is a useful little example. When you click on the words True Web Integration, the two links, Browse your own computer! and computer! disappear. When you click on the Headline once more, they reappear. It's an interesting way of creating a site-map or perhaps providing help.
When you click on the text the function Headline is called. Notice that unlike in the first example, the line onlick=<function name> isn't used. Instead we just put that information in the function itself. This is the main difference between VBScript and Jscript. VBScript is better integrated into Dynamic HTML. The new tag <DIV></DIV> divides your code into components or containers. In this way you can give a whole bunch of tags a common identity and change their properties in one fell swoop.
When the function Headline is called, it toggles the properties of the second DIV tag, i.e. blurb. If the display characteristics are set to "" (visible), then we set them to "none" and vice-versa. In this way we make the whole tag visible if it is hidden and hidden if it is visible. So the two lines disappear and then reappear.
<HTML>
<BODY>
<FORM name=Form1>
<INPUT name=ie4b onclick="ie4button(this);" type=Button value="Are you running IE 4.0?">
</FORM>
<script language=JavaScript>
function ie4button(b) {
window.IEVersion = msieversion();
window.RunningIE4 = (window.IEVersion >= 4);
if (window.RunningIE4 == true) {
b.value = "IE 4 is running";
}
else {
if (window.IEVersion <= 0) {
b.value = "Not running IE";
}
else {
b.value = "Running IE 3";
}
}
}
function msieversion()
{
var ua = window.navigator.userAgent
var msie = ua.indexOf ( "MSIE " )
if ( msie > 0 )
return parseInt ( ua.substring ( msie+5, ua.indexOf ( ".", msie ) ) )
else
return 0
}
</script>
</BODY>
</HTML>
This example checks to make sure that you're running Internet Explorer 4.0. You can use this code to make sure that only browsers which understand Dynamic HTML see your page. The rest can be shunted to another site.
We'll start from the top. The first tag you see is one which has been around for quite some time, the Input tag. When you click on the button it creates, the function 1e4button is called with one parameter; this. 'This' is a word that should be familiar to most people. Under C++ and Java it is a pointer to the memory location where all the variables of an object are stored. A similar concept is also implemented here through the parameter this. Using this, or b as it is called in the function, we can dynamically change the text displayed in the button. We could have used a line of text to do this, but it looks more impressive this way!
Depending on the value of window.RunningIE4 and window.IEversion we display different messages in the button. These values are decided in the next script tag. When we say window.IEversion, the function window.IEversion is executed. It in turn calls the function window.msieversion which does all the work. window.msieversion saves the location of window.navigator.userAgent (which holds an array of values) in the variable ua and then saves the version number of the browser in the variable msie. If the value of msie is greater than zero, then using parseInt, we go to an array in window.navigator.userAgent which is called msie and then on to it's fifth character which is the version number. This is the answer we return. In case msie is smaller than or equal to zero, we return a zero.
All that we end up doing here is change some text in a button, but you can write the code to send the browser to another site depending on it's version number.
<HTML>
<BODY>
<DIV ID="LayoutRegion" style="width: 100; height:70">
<img id="bbb" Src="images\fball_w.jpg">
</DIV>
<OBJECT ID=flipv
CLASSID="CLSID:DA9E9D23-3661-11D0-BDC2-00A0C908DB96">
<PARAM name="Effect0.clsid" value="{67741683-547D-11d0-8236-00A0C908DB96">
</OBJECT>
<OBJECT ID=gray
CLASSID="CLSID:DA9E9D23-3661-11D0-BDC2-00A0C908DB96">
<PARAM name="Effect0.clsid" value="{73F2B3A3-5474-11d0-8236-00A0C908DB96}">
</OBJECT>
<script language="VBS">
Sub bbb_onMouseOver
bbb.Filter=flipv
End Sub
Sub bbb_OnMouseDown(button,shift,x,y)
bbb.filter=gray
End Sub
Sub bbb_OnMouseOut
bbb.Filter=nothing
End Sub
</script>
</BODY>
</HTML>
This is a cute little example which demonstrates the enormous power ActiveX objects wield under IE4. Although we have two Object tags in the code, if you compare the CLSIDS (The true names of an ActiveX object), you'll notice that we're actually calling the same ActiveX object twice. This object then calls two other objects whose CLSID's are mentioned as the values of the param name Effect0.clsid. These are the objects that actually do all the work.
When you pass the mouse over the image, the function bbb_OnMouseOver is called and this in turn sets the filter of the image to flipv which is the ID of the first Object. As soon as the mouse passes over the image, it is flipped vertically. All of this is done using ActiveX objects.
When you press the left mouse button, the filter gray is called which is the ID of the second object tag and this grays out the image. When your mouse is out of the image boundaries, then the filter is set to nothing, so you see the original image.
We decided to use this object to make one point clear. ActiveX can do things under IE4 that Java can as yet only dream about. There is no way you can directly affect screen elements through Java as you can using ActiveX.
Microsoft wins... Again!
<HTML>
<SCRIPT LANGUAGE="VBScript">
function document_onmousemove(button, shift, x,y)
dim newleft, newtop, srcElement, heightOffset, widthOffset
if (button = 1) then
set srcElement = window.event.srcElement
newleft=x-document.all.OuterDiv.docLeft-(srcElement.docWidth/2)
if newleft<0 then newleft=0
srcElement.style.pixelLeft= newleft
newtop=y-document.all.OuterDiv.docTop-(srcElement.docHeight/2)
if newtop<0 then newtop=0
srcElement.style.pixelTop= newtop
window.event.returnValue = false
window.event.cancelBubble = true
end if
end function
</SCRIPT>
<DIV id=OuterDiv style="position:relative;width:100%;height:400px">
<img ID="hair1" STYLE="container:positioned;position:absolute;TOP:8pt;LEFT:0pt;WIDTH:63pt;HEIGHT:38pt;ZINDEX:22;" src="images/hair1.gif">
<DIV style="position:absolute;top:400;left:10"></DIV>
</DIV>
</HTML>
This example demonstrates how event bubbling can be used to your advantage. Here we have an image which can be dragged anywhere on the screen. As we move all over the document, document_onmousemove is called constantly. Each time it's called we check to see if the left mouse button is down. If it is, we jump into the if statement and start executing the statements one after another.
srcElement holds the ID of the object we've clicked on and newlft and newtop hold the new x and y coordinates. We perform a couple of error check to make sure we're not going out of the window and then set the coordinates of the object we're clicked on to the new values of x and y. That's about it!
This example seems a bit strange at first because there's no mention of the image which we end up moving. There's no onclick = "<function>" in hair1 or a hair1_onmouseover, yet everything works! The answer lies in Event Bubbling. Through event bubbling an object passes the responsibility of handling events like a mouse click to another object. Here the image hands over it's responsibilities to the document. When you click on the object, instead of it handling the event itself, it bubbles it up to the document level and lets someone else handle it. It's a little difficult to grasp he concept at first, but you'll get it. Eventually.
<HTML>
<SCRIPT LANGUAGE="VBScript">
Sub Document_onClick()
Path.TickInterval = 3
path.rewind
Path.X(1) = int(LeftFish.Style.PosLeft)
Path.X(50)= window.Event.X - 50
Path.Y(1)= int(LeftFish.Style.PosTop)
Path.Y(50) = window.Event.Y - int(LeftFish.Style.posHeight) / 2
LeftFish.Play
Path.Target = LeftFish.Style
Path.Play
END SUB
</SCRIPT>
<BODY BGCOLOR=##3F33C8 TEXT=yellow>
<OBJECT ID=Path CLASSID = "clsid:E0E3CC60-6A80-11D0-9B40-00A0C903AA7F">
</OBJECT>
<OBJECT ID="LeftFish" WIDTH = 250 Height = 250 STYLE="Position:absolute;LEFT: 700; TOP: 200; visibility:visible" CLASSID =
"clsid:4592C741-11AF-11d0-BAD9-00A0C9034BE0">
<PARAM name="Iterations" value=30000>
<PARAM NAME="PlayRate" VALUE=.5>
<PARAM NAME="Sfs(1)._clsid" VALUE="{4592C750-11AF-11D0-BAD9-00A0C9034BE0}">
<PARAM NAME="Sfs(1).NumFrames" VALUE=12>
<PARAM NAME="Sfs(1).NumFramesAcross" VALUE=1>
<PARAM NAME="Sfs(1).NumFramesDown" VALUE=12>
<PARAM NAME="Sfs(1).URL" VALUE="ot.png">
</OBJECT>
</BODY>
</HTML>
This is an extremely simple example which show how we can use an ActiveX object to add animation to our web pages. When you click on the document, a fish will swim towards your mouse pointer.
Most of the code is made up of the object tag and all the parameters the object has to be passed. The rest is a script which handles the mouse click and calls the ActiveX object. It's all quite simple really, all you do is pass the correct parameters to the ActiveX object and the animation works. Just make sure the animation file ot.png is present in the same directory as the code.
Dynamic Databases...
<HTML> <object id="quotelist" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"> <param name="DataURL" value="q3.txt"> <param name="UseHeader" value="True"> </object> <INPUT TYPE=BUTTON ID=forward VALUE=" > "> <INPUT id=change TYPE=text DATASRC=#quotelist DATAFLD="Change"> <INPUT id=volume TYPE=text DATASRC=#quotelist DATAFLD="Volume"> <SCRIPT LANGUAGE=VBSCRIPT> function forward_onclick() quotelist.recordset.MoveNext end function </SCRIPT> </HTML>q3.txt Change:FLOAT,Volume:INT .01875,2057300 -.25,1397600 .125,267900
This is an extremely simple html page which uses an ActiveX object to display the information in a database. The object accepts certain parameters and acts upon them. For example, the DataUrl is simply the same of the file where the information is to be found. The two text Input tags at the button display the result on the screen. The # in front of quotelist in DATASRC means that the value to be placed here will come from the Object called quotelist. The DATAFLD specifies the type of data to be displayed. Refer to q3.txt and all should be clear.
<HTML> <SCRIPT FOR=RADIOS EVENT=onclick> catdata.FilterValue=window.event.srcElement.id; catdata.Reset(); </SCRIPT> <OBJECT ID="catdata" WIDTH=0 HEIGHT=0 CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83"> <PARAM NAME="TextQualifier" VALUE=""> <PARAM NAME="FieldDelim" VALUE="|"> <PARAM NAME="FilterValue" VALUE="business"> <PARAM NAME="FilterCriterion" VALUE="="> <PARAM NAME="FilterColumn" VALUE="category"> <PARAM NAME="UseHeader" VALUE="True"> <PARAM NAME="DataURL" VALUE="categories.txt"> </OBJECT> <IMG DATASRC=#catdata DATAFLD=image BORDER=0> <IMG DATASRC=#catdata DATAFLD=bowhead BORDER=0> <DIV ID=RADIOS ALIGN=LEFT> <INPUT TYPE=RADIO ID=business CHECKED> <INPUT TYPE=RADIO ID=computer> </DIV> </HTML>categories.txt category|bowhead|image business|bow-business-head.gif|harley.jpg computer|bow-computer-head.gif|windows95.gif
This example is very similar to the previous one explained above. As usual, the ActiveX object is the workhorse of the page. It accepts certain parameters and returns others. As before, a short script calls the code. This time, whenever you click on the radio buttons, FilterValue stores the id of the element clicked upon. The reset in Catdata is then called and that re-activates the object. The object looks at it's parameters and displays an image, the information about which it found in the file catagories.txt.
<HTML>
<object id="quotelist"
classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"
align="baseline" border="0" width="0" height="0"><param
name="DataURL" value="quotes.txt"><param name="UseHeader"
value="True"></object></p>
<table border="1" id="elemtbl" datasrc="#quotelist">
<THEAD> <tr>
<td><font color="#0000FF"><b><u><DIV id=symbol>Symbol</DIV></u></b></font></td>
<td><font color="#0000FF"><b><u><DIV id=quote>Quote</DIV></u></b></font></td>
<td><font color="#0000FF"><b><u><DIV id=change>Change</DIV></u></b></font></td>
<td><font color="#0000FF"><b><u><DIV id=volume>Volume</DIV></u></b></font></td>
</tr>
</THEAD>
<TBODY>
<tr>
<td><SPAN DATAFLD="Symbol"></SPAN></td>
<td><DIV DATAFLD="Quote"></DIV></td>
<td><SPAN DATAFLD="Change"></SPAN></td>
<td><DIV DATAFLD="Volume"></DIV></td>
</tr>
</TBODY></table>
<script language="VBSCRIPT">
function symbol_onclick()
quotelist.SortColumn = "Symbol"
quotelist.Reset()
end function
function quote_onclick()
quotelist.SortColumn = "Quote"
quotelist.Reset()
end function
function change_onclick()
quotelist.SortColumn = "Change"
quotelist.Reset()
end function
function volume_onclick()
quotelist.SortColumn = "Volume"
quotelist.Reset()
end function
</script>
</HTML>
quotes.txt
Symbol,Company,Quote:FLOAT,Change:FLOAT,Volume:INT
AAPL,Apple Computer,16.5625,.01875,2057300
AOL,America Online,43.75,-.25,1397600
BORL,Borland,8.00,.125,267900
HWP,Hewlett-Packard,55.375,-.25,2552200
IBM,International Business Machines,143.625,.75,2005800
MSFT,Microsoft,99.00,-.625,7665900
NSCP,Netscape,27.00,-.375,1466100
The first thing you should notice are the new tags, THEAD and TBODY. They're not very important and are meant to be used in tables.
The code itself is very simple. Every time you click on a heading, the corresponding function is called. This function then changes the value of SortColumn and then calls reset in quotelist. This restarts the object and the screen is redrawn.
ActiveX, Dynamic HTML and IE4
IE4 was loads of fun, but the novelty wears off after a while. Once that happens, the only thing that can keep a product going is quality and mark my words, IE4 is the future. It's the next step in computing ease and the advances demonstrated in it are going to find their way into bread and butter applications like spreadsheets and word processors.
Dynamic HTML also holds promise and if accepted by the Internet community, it'll change the face of the Internet. Pages will be more interactive, more entertaining and more alive.
IE4 is also Microsoft's showcase for the latest in computer technology, especially ActiveX. Go back to the opening page and read our tutorial, ActiveX and IE4.
See you at the next Beta!
Mr. Vijay Mukhi
Mr. Arsalan Zaidi
Ms. Sonal Kotecha
Vijay Mukhi's Computer
Institute
VMCI, B-13, Everest Building, Tardeo, Mumbai 400 034, India
Tel : 91-22-496 4335 /6/7/8/9
Fax : 91-22-307 28 59
e-mail : vmukhi@giasbm01.vsnl.net.in
http://www.vijaymukhi.com