Java Script

  • Thread starter Thread starter HomeNews
  • Start date Start date
H

HomeNews

Hi all, if this question is not appropriate for this group, kick me out :-)

I snagged a freebie java script for images and I can't for the life of me
get it centered on this page http://www.natesnursery.com/Album.htm

Can someone review this and tell me where to put the center code?

thanks in advance

great group !! !!
 
Put it in a table and center the table.
--
===
Tom "Pepper" Willett
Microsoft MVP - FrontPage
---
FrontPage Support:
http://www.frontpagemvps.com/
About FrontPage 2003:
http://office.microsoft.com/home/office.aspx?assetid=FX01085802
===
|
| Hi all, if this question is not appropriate for this group, kick me out
:-)
|
| I snagged a freebie java script for images and I can't for the life of me
| get it centered on this page http://www.natesnursery.com/Album.htm
|
| Can someone review this and tell me where to put the center code?
|
| thanks in advance
|
| great group !! !!
|
|
 
Hi HomeNews,

Well, you're lucky I'm not charging you by the hour!

Here's your fixed HTML. Note that this centers the book in the page, but it
will remain at the top, unless the script and page are further edited. But
you only asked for it to be centered, so it is.

Also note that the image URLs are now absolute. I had to change them so I
could edit the page locally and see the images in it. If you like, you can
change them back to relative.

If you ever *do* decode you want to postition the book somewhere down the
page, you'll have to compare the HTML I modified with the original, and
figure it out for youself! ;-)

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title></title>
</head>

<body onload="ImageBook()" background="bg.jpg; width:100%">

<div id="Book" style="width: 100%; height: 235">
<img id="placeHolder" src="http://www.natesnursery.com/placeholder.gif"
width="176" height="197">
</div>


<script type="text/javascript">

/***********************************************
* Book Flip slideshow script- © Ger Versluis 2003
* Permission granted to DynamicDrive.com to feature script
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

/********************************************************
Create a div with transparent place holder in your html
<div id="Book" style="position:relative">
<img src="placeholder.gif" width="239" height="238">
</div>
width = 2*book image width +4 height = book image height+2

Insert onload in body tag
<body onload="ImageBook()">
*********************************************************/

// 7 variables to control behavior
var Book_Image_Width=239;
var Book_Image_Height=238;
var Book_Left;
var Book_Border=true;
var Book_Border_Color="gray";
var Book_Speed=15;
var Book_NextPage_Delay=1500; //1 second=1000
var Book_Vertical_Turn=0;
var ph;
if(document.getElementById){
Book_Div=document.getElementById("Book");
Book_Left = Book_Div.offsetWidth / 2 - Book_Image_Width;
ph = document.getElementById("placeholder");
ph.style.left = Book_Left;
}

// array to specify images and optional links. At least 4
// If Link is not needed keep it ""

Book_Image_Sources=new Array(
"http://www.natesnursery.com/small1.jpg","",
"http://www.natesnursery.com/small2.jpg","",
"http://www.natesnursery.com/small3.jpg","",
"http://www.natesnursery.com/small4.jpg","",
"http://www.natesnursery.com/small5.jpg","",
"http://www.natesnursery.com/small6.jpg","",
"http://www.natesnursery.com/small7.jpg","",
"http://www.natesnursery.com/small8.jpg","",
"http://www.natesnursery.com/small9.jpg","",
"http://www.natesnursery.com/small10.jpg","",
"http://www.natesnursery.com/small11.jpg","",
"http://www.natesnursery.com/small12.jpg","",
"http://www.natesnursery.com/small13.jpg","",
"http://www.natesnursery.com/small14.jpg","",
"http://www.natesnursery.com/small15.jpg","",
"http://www.natesnursery.com/small16.jpg","",
"http://www.natesnursery.com/small17.jpg","",
"http://www.natesnursery.com/small18.jpg","",
"http://www.natesnursery.com/small19.jpg","",
"http://www.natesnursery.com/small20.jpg","" // NOTE No comma after last
line
);

/***************** DO NOT EDIT BELOW **********************************/
var B_LI,B_MI,B_RI,B_TI,B_Angle=0,B_CrImg=6,B_MaxW,B_Direction=1;
var B_MSz,B_Stppd=false;B_Pre_Img=new Array(Book_Image_Sources.length);

function ImageBook(){
if(document.getElementById){
Book_Div=document.getElementById("Book");
Book_Left = Book_Div.offsetWidth / 2 - Book_Image_Width;
for(i=0;i<Book_Image_Sources.length;i+=2){
B_Pre_Img=new Image();B_Pre_Img.src=Book_Image_Sources}
B_LI=document.createElement("img");Book_Div.appendChild(B_LI);
B_RI=document.createElement("img");Book_Div.appendChild(B_RI);
B_MI=document.createElement("img");Book_Div.appendChild(B_MI);
B_LI.style.position=B_MI.style.position=B_RI.style.position="absolute";
B_LI.style.zIndex=B_RI.style.zIndex=0;B_MI.style.zIndex=1;
B_LI.style.top=(Book_Vertical_Turn?Book_Image_Height+1:0)+"px";
B_LI.style.left=Book_Left+"px";
B_MI.style.top=0+"px";
B_MI.style.left=(Book_Vertical_Turn?Book_Left:Book_Left+Book_Image_Width+1)+"px";
B_RI.style.top=0+"px";
B_RI.style.left=(Book_Vertical_Turn?Book_Left:Book_Left+Book_Image_Width+1)+"px";
B_LI.style.height=Book_Image_Height+"px";
B_MI.style.height=Book_Image_Height+"px";
B_RI.style.height=Book_Image_Height+"px";
B_LI.style.width=Book_Image_Width+"px";
B_MI.style.width=Book_Image_Width+"px";
B_RI.style.width=Book_Image_Width+"px";
if(Book_Border){
B_LI.style.borderStyle=B_MI.style.borderStyle=B_RI.style.borderStyle="solid";
B_LI.style.borderWidth=1+"px";
B_MI.style.borderWidth=1+"px";
B_RI.style.borderWidth=1+"px";
B_LI.style.borderColor=B_MI.style.borderColor=B_RI.style.borderColor=Book_Border_Color}
B_LI.src=B_Pre_Img[0].src;
B_LI.lnk=Book_Image_Sources[1];
B_MI.src=B_Pre_Img[2].src;
B_MI.lnk=Book_Image_Sources[3];
B_RI.src=B_Pre_Img[4].src;
B_RI.lnk=Book_Image_Sources[5];
B_LI.onclick=B_MI.onclick=B_RI.onclick=B_LdLnk;
B_LI.onmouseover=B_MI.onmouseover=B_RI.onmouseover=B_Stp;
B_LI.onmouseout=B_MI.onmouseout=B_RI.onmouseout=B_Rstrt;
BookImages()}}

function BookImages(){
if(!B_Stppd){
if(Book_Vertical_Turn){
B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Height));
MidOffset=!B_Direction?Book_Image_Height+1:Book_Image_Height-B_MSz;
B_MI.style.top=MidOffset+"px";
B_MI.style.height=B_MSz+"px"}
else{ B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Width));
MidOffset=B_Direction?Book_Image_Width+1:Book_Image_Width-B_MSz;
B_MI.style.left=Book_Left+MidOffset+"px";
B_MI.style.width=B_MSz+"px"}
B_Angle+=Book_Speed/720*Math.PI;
if(B_Angle>=Math.PI/2&&B_Direction){
B_Direction=0;
if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
B_MI.src=B_Pre_Img[B_CrImg].src;
B_MI.lnk=Book_Image_Sources[B_CrImg+1];
B_CrImg+=2}
if(B_Angle>=Math.PI){
B_Direction=1;
B_TI=B_LI;
B_LI=B_MI;
B_MI=B_TI;
if(Book_Vertical_Turn)B_MI.style.top=0+"px";
else B_MI.style.left=Book_Left+Book_Image_Width+1+"px";
B_MI.src=B_RI.src;
B_MI.lnk=B_RI.lnk;

setTimeout("Book_Next_Delay()",Book_NextPage_Delay)}
else setTimeout("BookImages()",50)}
else setTimeout("BookImages()",50)}

function Book_Next_Delay(){
if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
B_RI.src=B_Pre_Img[B_CrImg].src;
B_RI.lnk=Book_Image_Sources[B_CrImg+1];
B_MI.style.zIndex=2;
B_LI.style.zIndex=1;
B_Angle=0;
B_CrImg+=2;
setTimeout("BookImages()",50)}

function B_LdLnk(){if(this.lnk)window.location.href=this.lnk}
function
B_Stp(){B_Stppd=true;this.style.cursor=this.lnk?"pointer":"default"}
function B_Rstrt(){B_Stppd=false}
</script>


<p><b>NATE'S PHOTO ALBUM</b></p>


<p><b><a href="Photos.htm">HOME</a></b></p>


</body>




</html>

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
A watched clock never boils.
 
Hi Tom,

That wouldn't work with his script. It is using absolute positioning via
style. I had to modify the script to determine the center of the page via a
div of 100% width, and then feed it the offset from that.

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
A watched clock never boils.
 
Tom's suggestion of placing everything inside a table and centering seems
like the best idea.
 
Hi HomeNews,

I have never liked the <body onload="..."... method of starting a JavaScript
when the document loads. It is unreliable, as the body may or may not be
fully loaded when the function is called, and if the function is in the
body, it may fail (as it did here). When I debugged it, it gave me a null
reference exception.

Interesting thing is, it didn't misbehave when I tested it locally. Probably
due to the increased speed in the "download" time from my local hard drive.

The fix is easy this time. Remove the call to "ImageBoook()" from the body
tag, so that it looks like this:

body background="bg.jpg; width:100%">

Then, add the call to the function at the very bottom of your script:

....
function Book_Next_Delay(){
if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
B_RI.src=B_Pre_Img[B_CrImg].src;
B_RI.lnk=Book_Image_Sources[B_CrImg+1];
B_MI.style.zIndex=2;
B_LI.style.zIndex=1;
B_Angle=0;
B_CrImg+=2;
setTimeout("BookImages()",50)}

function B_LdLnk(){if(this.lnk)window.location.href=this.lnk}
function
B_Stp(){B_Stppd=true;this.style.cursor=this.lnk?"pointer":"default"}
function B_Rstrt(){B_Stppd=false}
ImageBook();
</script>


<p><b>NATE'S PHOTO ALBUM</b></p>
....

It should work perfectly.

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
A watched clock never boils.
 
Tom's suggestion would not work in this case. The JavaScript, as I already
mentioned, uses CSS styles, and absolute positioning, which means it doesn't
matter where the div is located; the image will be positioned where it is
told to be positioned by the script.

I have sent him the correction that will cause the page to work on the
Internet. You can read my reply if you're interested.

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
A watched clock never boils.
 
Here's the full text from my machine (again, it has absoute paths in it):


<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title></title>
</head>

<body background="bg.jpg; width:100%">

<div id="Book" style="width: 100%; height: 235">
<img id="placeHolder" src="http://www.natesnursery.com/placeholder.gif"
width="176" height="197">
</div>


<script type="text/javascript">

/***********************************************
* Book Flip slideshow script- © Ger Versluis 2003
* Permission granted to DynamicDrive.com to feature script
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

/********************************************************
Create a div with transparent place holder in your html
<div id="Book" style="position:relative">
<img src="placeholder.gif" width="239" height="238">
</div>
width = 2*book image width +4 height = book image height+2

Insert onload in body tag
<body onload="ImageBook()">
*********************************************************/

// 7 variables to control behavior
var Book_Image_Width=239;
var Book_Image_Height=238;
var Book_Left;
var Book_Border=true;
var Book_Border_Color="gray";
var Book_Speed=15;
var Book_NextPage_Delay=1500; //1 second=1000
var Book_Vertical_Turn=0;
var ph;
if(document.getElementById){
Book_Div=document.getElementById("Book");
Book_Left = Book_Div.offsetWidth / 2 - Book_Image_Width;
ph = document.getElementById("placeholder");
ph.style.left = Book_Left;
}

// array to specify images and optional links. At least 4
// If Link is not needed keep it ""

Book_Image_Sources=new Array(
"http://www.natesnursery.com/small1.jpg","",
"http://www.natesnursery.com/small2.jpg","",
"http://www.natesnursery.com/small3.jpg","",
"http://www.natesnursery.com/small4.jpg","",
"http://www.natesnursery.com/small5.jpg","",
"http://www.natesnursery.com/small6.jpg","",
"http://www.natesnursery.com/small7.jpg","",
"http://www.natesnursery.com/small8.jpg","",
"http://www.natesnursery.com/small9.jpg","",
"http://www.natesnursery.com/small10.jpg","",
"http://www.natesnursery.com/small11.jpg","",
"http://www.natesnursery.com/small12.jpg","",
"http://www.natesnursery.com/small13.jpg","",
"http://www.natesnursery.com/small14.jpg","",
"http://www.natesnursery.com/small15.jpg","",
"http://www.natesnursery.com/small16.jpg","",
"http://www.natesnursery.com/small17.jpg","",
"http://www.natesnursery.com/small18.jpg","",
"http://www.natesnursery.com/small19.jpg","",
"http://www.natesnursery.com/small20.jpg","" // NOTE No comma after last
line
);

/***************** DO NOT EDIT BELOW **********************************/
var B_LI,B_MI,B_RI,B_TI,B_Angle=0,B_CrImg=6,B_MaxW,B_Direction=1;
var B_MSz,B_Stppd=false;B_Pre_Img=new Array(Book_Image_Sources.length);

function ImageBook(){
if(document.getElementById){
Book_Div=document.getElementById("Book");
Book_Left = Book_Div.offsetWidth / 2 - Book_Image_Width;
for(i=0;i<Book_Image_Sources.length;i+=2){
B_Pre_Img=new Image();B_Pre_Img.src=Book_Image_Sources}
B_LI=document.createElement("img");Book_Div.appendChild(B_LI);
B_RI=document.createElement("img");Book_Div.appendChild(B_RI);
B_MI=document.createElement("img");Book_Div.appendChild(B_MI);
B_LI.style.position=B_MI.style.position=B_RI.style.position="absolute";
B_LI.style.zIndex=B_RI.style.zIndex=0;B_MI.style.zIndex=1;
B_LI.style.top=(Book_Vertical_Turn?Book_Image_Height+1:0)+"px";
B_LI.style.left=Book_Left+"px";
B_MI.style.top=0+"px";
B_MI.style.left=(Book_Vertical_Turn?Book_Left:Book_Left+Book_Image_Width+1)+"px";
B_RI.style.top=0+"px";
B_RI.style.left=(Book_Vertical_Turn?Book_Left:Book_Left+Book_Image_Width+1)+"px";
B_LI.style.height=Book_Image_Height+"px";
B_MI.style.height=Book_Image_Height+"px";
B_RI.style.height=Book_Image_Height+"px";
B_LI.style.width=Book_Image_Width+"px";
B_MI.style.width=Book_Image_Width+"px";
B_RI.style.width=Book_Image_Width+"px";
if(Book_Border){
B_LI.style.borderStyle=B_MI.style.borderStyle=B_RI.style.borderStyle="solid";
B_LI.style.borderWidth=1+"px";
B_MI.style.borderWidth=1+"px";
B_RI.style.borderWidth=1+"px";
B_LI.style.borderColor=B_MI.style.borderColor=B_RI.style.borderColor=Book_Border_Color}
B_LI.src=B_Pre_Img[0].src;
B_LI.lnk=Book_Image_Sources[1];
B_MI.src=B_Pre_Img[2].src;
B_MI.lnk=Book_Image_Sources[3];
B_RI.src=B_Pre_Img[4].src;
B_RI.lnk=Book_Image_Sources[5];
B_LI.onclick=B_MI.onclick=B_RI.onclick=B_LdLnk;
B_LI.onmouseover=B_MI.onmouseover=B_RI.onmouseover=B_Stp;
B_LI.onmouseout=B_MI.onmouseout=B_RI.onmouseout=B_Rstrt;
BookImages()}}

function BookImages(){
if(!B_Stppd){
if(Book_Vertical_Turn){
B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Height));
MidOffset=!B_Direction?Book_Image_Height+1:Book_Image_Height-B_MSz;
B_MI.style.top=MidOffset+"px";
B_MI.style.height=B_MSz+"px"}
else{ B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Width));
MidOffset=B_Direction?Book_Image_Width+1:Book_Image_Width-B_MSz;
B_MI.style.left=Book_Left+MidOffset+"px";
B_MI.style.width=B_MSz+"px"}
B_Angle+=Book_Speed/720*Math.PI;
if(B_Angle>=Math.PI/2&&B_Direction){
B_Direction=0;
if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
B_MI.src=B_Pre_Img[B_CrImg].src;
B_MI.lnk=Book_Image_Sources[B_CrImg+1];
B_CrImg+=2}
if(B_Angle>=Math.PI){
B_Direction=1;
B_TI=B_LI;
B_LI=B_MI;
B_MI=B_TI;
if(Book_Vertical_Turn)B_MI.style.top=0+"px";
else B_MI.style.left=Book_Left+Book_Image_Width+1+"px";
B_MI.src=B_RI.src;
B_MI.lnk=B_RI.lnk;

setTimeout("Book_Next_Delay()",Book_NextPage_Delay)}
else setTimeout("BookImages()",50)}
else setTimeout("BookImages()",50)}

function Book_Next_Delay(){
if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
B_RI.src=B_Pre_Img[B_CrImg].src;
B_RI.lnk=Book_Image_Sources[B_CrImg+1];
B_MI.style.zIndex=2;
B_LI.style.zIndex=1;
B_Angle=0;
B_CrImg+=2;
setTimeout("BookImages()",50)}

function B_LdLnk(){if(this.lnk)window.location.href=this.lnk}
function
B_Stp(){B_Stppd=true;this.style.cursor=this.lnk?"pointer":"default"}
function B_Rstrt(){B_Stppd=false}
ImageBook();
</script>


<p><b>NATE'S PHOTO ALBUM</b></p>


<p><b><a href="Photos.htm">HOME</a></b></p>


</body>




</html>

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
A watched clock never boils.
 
Kevin said:
Hi HomeNews,

I have never liked the <body onload="..."... method of starting a
JavaScript when the document loads. It is unreliable, as the body may
or may not be fully loaded when the function is called, and if the
function is in the body, it may fail (as it did here). When I
debugged it, it gave me a null reference exception.

Kevin,
This is interesting as I have a lot of pages with <body
onload="fn1();fn2();........ ">
(Of course they aren't actually named fn1, fn2, That is just an example.)

Is there some way to ensure that the page is fully loaded before the
functions are called?

I can see that you have suggested placing the functions at the bottom of the
HTML in <script></script> tags, but this makes the page larger. I prefer to
have the functions in a separate .js file which is called
 
All your efforts and time and advise is greatly appreciated. Its just
me....I can't get it to work. I can live with it the way it is.

ty again

-C
 
Hi Trevor,

If you look at my message carefully, and the code revision I gave you, you
will see that I only advised moving the function *call* to the bottom of the
*script* (that would be a single line of code just before the </script>
tag), and nothing else. Heck, I even sent you another copy of the full page!

As to moving scripting code around making the page larger, if you were to
move the furniture in your living room around, would you have more
furniture? A bigger living room? As a matter of fact, the scripting code and
it's location in the HTML makes no difference whatsoever in the way the page
looks in the browser, and moving characters in text doesn't make the text
any larger.

Tell you what. I live in Chesapeake, VA. If you want to come over I'll show
you the page as I developed it using FrontPage 2003 personally, explain how
I did it, show you how to debug JavaScript, and maybe teach you some
programming. But you'll have to bring your own coffee. I don't want to seem
like a total doormat!

--
;-),

Kevin Spencer
Microsoft MVP
..Net Developer
A watched clock never boils.
 
Kevin, can I come over too? I've been working on this script all day and
could use a cup of coffee to get it right!!

Carol
 
Sorry about that, Kevin

I have deleted the original post but I thought there was quite a lot of
stuff in the <script></script> tag.
I guess there were a lot of parameters to the function call.

As it wasn't my problem, I didn't read the post too closely, just the
comment that I quoted back. (I guess I should have paid more attention). I
didn't read the whole page of code either.

So what you are saying is that, instead of:
<body onload = "fn1();fn2();">
........
</body>

I write:
<body>
........
<script>
fn1() ; fn2()
</script>
</body>

It sure ain't a lot more code (just the <script></script> tags) :-))

If this guarantees that the code isn't executed until the end of the page,
then it is worth it.

As a matter of interest, why can't one be sure that onload = " " doesn't
wait until the load is complete? Is this a bug?

P.S. It's a long way from beautiful Canberra, Australia to Chesapeake, VA so
I'll pass on the offer to visit.
 
Sure, what the heck. Bring the whole crew!

--
:-D,

Kevin Spencer
Microsoft MVP
..Net Developer
A watched clock never boils.
 
Hi Trevor,
So what you are saying is that, instead of:
<body onload = "fn1();fn2();">
.......

That would work, although in the code I sent you I just appended it to the
As a matter of interest, why can't one be sure that onload = " " doesn't
wait until the load is complete? Is this a bug?

Not really. It's fairly common in browsers. It comes as a result of the HTTP
environment, and the HTML medium. HyperText Transfer Protocol is a layer on
top of TCP/IP, which sends data in "packets." As a result, not necessarily
an entire HTML document is transmitted in a single packet. As there is
network latency involved, and packets are not guaranteed to reach their
intended destination, most browsers tend to try to parse the packets as
they come in. In the case of HTML markup, this generally does not present a
problem, as the opening tag of an HTML element, and/or the style sheet used,
generally determines the way the element will look in the page (Other than
the height, and what it may contain). However, with JavaScript, this can be
a problem. If the browser starts parsing some JavaScript at the top of a
document that references JavaScript variables or functions declared further
down in the page, and those pieces of script have not been received as of
yet, well, they don't exist, and this causes a null reference exception to
occur.

Typically, and especially in the past, JavaScript functions are/were often
declared in the <head> section of the page, which "pre-loaded" them, and I
considered this. However, in this case, the JavaScript was dependent upon an
HTML div element to get the width of the browser window (by virtue of being
set to "style:100%"), for calculating the absolute center in pixels. As
browsers can be on machines having different resolution, and the browser
window may be sized, the dimensions of the window are not known until the
document renders. In fact, the window object itself does not expose its own
width and height in all browsers. But the "offsetWidth" property of HTML
elements is part of the W3C standard, and can always be counted on.

So, the JavaScript had to be below the div element, and therefore, below the
opening <body> tag.

P.S. I have always wanted to visit your beautiful country. One of these
days, when the pace of my professional life slows down, in another 20 years
or so, perhaps I will!

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
A watched clock never boils.
 
Kevin,
Many thanks for that comprehensive answer. I'll file it for future
reference.

Although I was a professional programmer in a past life (now retired), web
software is still a bit of mystery to me at times.
Still, I am learning and I have the time to do so. I do appreciate the help
given on this and other MS newsgroups. It is good to know that people will
share their knowledge. I also find the w3schools site valuable, although
sometimes terse. What I think learners need is more tutorial type sites. (I
have found a few.)

Yes, there's a lot to see in good old OZ. I must post some more pictures on
my site (and my linked sites at fotopic.net). Our mutual NG contributor
Eleanor Culling has been here and taken some great photos.
 
Oh good heavens, Trevor. And you let me think you were a total newbie. :-P

Yes, web development is a whole 'nuther ball of wax. HTML in itself is
incredibly complex, due to the history of it, and the HTTP transport
protocol. It started out simple, but not very strict, or very extensible. It
was an extension of SGML (Standard Graphic Markup Language). It was designed
originally to present pure text documents in a formatted manner, not a very
ambitious goal. It became popular in a very short time. And before you know
it, everyone wanted it to do more. So, people started extending it. And it
swiftly grew into a mangled, tangled mess of complex rules that were
followed to a different extent in one way or another by different browser
manufacturers.

Standards organizations like the W3C quickly attempted to gain control of
the situation and provide some kind of order that people could count on. But
HTML was fatally flawed from the start. After all, it was designed as a
markup language for *static* documents, and now people wanted it to do every
conceivable sort of computer trick available. As various software vendors
and the W3C worked together, and came up with ways of satisfying the public
appetite, the situation became both better and worse. JavaScript was added
to the mix fairly early on, but it depended on the Document Object Model,
which, while established fairly early on, was constantly being upgraded and
modified. We are now working with HTML 4.01.

Cascading Style Sheets (CSS) was an attempt to at least separate some of the
ever-expanding set of attributes and properties into some extensible set of
features that could be separated from the HTML markup, making it easier to
work with, extend, and modify. CSS is much more extensible than HTML. It
also provides the ability to apply layout and behavior styles across an
entire web site with a single set of code.

But it was the development of XML that will prove to be the ultimate
solution to the problem. After all, the "X" in XML stands for "eXtensible."
A new extension of SGML, XML is simple, but it is strict. While a <br> tag
if just as good as the more correct <br/> tag in HTML, it won't fly with
XML. The trade-off is in the simplicity of the rules. XML has very few,
perhaps a page or 2, whereas the rules for HTML have grown to the size of a
proverbial "Library of Congress." But while HTML is lax, complex, and
difficult to extend, XML is strict, simple, and easily extensible.

Let's say that someone wanted to add a new layout item to the HTML
specification. How about, for example, a slider control element? Well,
there's no <slider> tag in the HTML specification, and if a browser saw one,
it wouldn't know what to do with it. It would require an endless procession
of meetings, debates, RFCs, and various kinds of disputes about the nature
of the <slider> element before the W3C would incorporate it, and years
before all the browser manufacturers got around to accomodating it. Even
longer before they all treated it in the same way.

But with XML, a <slider> element doesn't have to be adopted, discussed, or
accomodated. There is no <slider> element in XML. There is no element of any
kind in XML, other than a root element, and a few others. Instead, there is
a DTD (Document Type Defintion) file (also XML) that describes it. Create an
XML element, define it in a DTD. Tell the client where to find the DTD. End
of story.

And XML can be much more than just markup. It is infinitely extensible, due
to its nature and design. As of this writing, I can think of a half-dozen
uses for it without even thinking too hard. It is in use now to store and
transmit data, at least dozens of different document types other then HTML,
to manipulate data, for cross-network programming (via SOAP, for example),
and is the UI code for the next generation of Windows (XAML).

Oh yes. And for the next generation of HTML, which is XHTML. No doubt, by
now you can see the possibilities of that.

If you ever decide to get into server-based web applications (ASP, ASP.Net,
etc), be ready for another set of issues. HTTP is stateless. State and
Session management in a server-based HTTP web application has presented
complexity for the developer since its inception with CGI. How *do* you
maintain state is a stateless environment? How do you keep track of which
client is which? How do you manage memory on the server? Now combine these
issues with the issues of HTML and browser compatibility, and you find
yourself never wanting to write another HTTP network application again, just
nice, relatively simple desktop apps and services. I know I do! But that's
not the future of things. And the future is where its at these days.

Let us know when you get some more pics up on the site! Australia has always
been one of my dream vacations, along with New Zealand and Hawaii. At least
I can look at the pictures for now!

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
A watched clock never boils.
 
Back
Top