Year: 1998

Categories
Web Writing

Dynamic Web Publishing Unleashed: Chapter 37 – the Future of Web Publishing

Recovered from the Wayback Machine.

IN THIS CHAPTER

  • The Chaos of Change
  • The Current Technology Platform
  • A Summary Review of the Technologies Covered in the Book–Where Will They Be in a Year?
  • Client Scripting and CSS1 Positioning

With an industry that seems to go through a new revolutionary change at least four times a year, it’s hard to predict where Web publishing will be in four months, much less the next couple of years. However, taking a look at existing technologies and their state and at some new technologies can give us a peek through the door to the future, even though the crack we are peeking through might be pretty small.

First, many of the technologies covered in this book existed two years ago and will continue to be around two years from now. That means Java, which was introduced in 1995, HTML, the scripting techniques, and the basic Web page, which will continue to consist mainly of text and an occasional image. It’s hard to say if some new and incredibly different Web page development technique or tool will appear in the next two years, but regardless, people will also continue to use what is available now. In fact, the technologies introduced this year, such as Dynamic HTML and CSS1, will begin to become more familiar in 1998, and only begin to become mainstream technology in mid- to late 1998.

Web servers don’t seem to increase in technical capability exponentially the way Web page technology does. The real key to server technology is fast, reliable, and secure Web content access. The servers will become faster, hopefully more reliable, and the security should grow to meet the increasing demands placed on these servers to support commercial transactions. Additionally, there are new methods–particularly in the realm of commerce–that will work with existing server technology. Those are discussed in this chapter.

There are new technologies that have barely begun being explored this year. Channels and push technology started out with a bang and nearly ended with a whimper. Web consumers just didn’t buy into the new technology. However, with the built-in channel capability Netscape Navigator and Microsoft’s Internet Explorer have now, and with simpler channel development processes, channels can be considered down, but not out.

The real key to the future rests with standards as much as with implementation. The Document Object Model (DOM) working group of the W3C should present a first working draft of DOM by the end of 1997. DOM covers which HTML elements are exposed, and to an extent, in what way these same elements are exposed, what standard properties and events are, and how these elements relate to each other. If HTML doesn’t meet your needs, just wait–XML describes how to extend any markup language, to create an element such as <BUTCHER> or <BAKER> or, yes, even <CANDLESTICK_MAKER>. This chapter closes with a review of the new technologies currently under review and design.

The Chaos of Change

Sometimes you might feel you have to spend 24 hours a day just to keep up with the technology being released. Needless to say, this is both frustrating and discouraging, all at the same time.

Web development does seem, most of the time, as if it undergoes a revolution in technology every three months; many times one specific aspect of the technology undergoes a change only about once per year. However, preceding the release of the changed technology is a period when the technology is being reviewed, or the product is being beta-tested, or some form of pre-release activity is occurring. Then, the release of the standard or technology or product occurs, and there is a period of comparing it with its older version, or with other products. Then, you have to spend some time learning how the new technology works, how to migrate older pages or applications, or checking to see if existing pages or applications break with the new release. Finally, just when you think you are starting to become comfortable with the new or modified technology, the company or organization announces the new release of whatever the product or standard is.

Consider also that Web development is made up of several different technologies, including browsers, standards, embedded object technology, and server technology. Putting all of these aspects in one category–“Web Development”–and considering the multiple-phase delivery of most Web technology, provides what seems to be continuous change.

As an example, in 1997 it probably seemed as if a new browser were being released every quarter. Well, what actually happened is that there were minor bug fix releases of Netscape Navigator 3.x and Internet Explorer 3.x in the year’s beginning, and Netscape also released several different beta versions of Navigator 4.0 before it actually released Navigator 4.0. After the release, there have been several enhancement and bug fix releases of Navigator 4.0.

Microsoft also released two major beta releases of Internet Explorer and released the final version about the time this book went to editing. There will likely be enhancement and bug fix releases for IE 4.0 before the year is out.

Add the international releases with these other releases, and you have a browser release on the average of about every three weeks, not months.

Also consider that browser manufacturers themselves are at the mercy of the release of new standards or new versions of existing standards. The year 1997 saw the beginning of the DOM effort, a new version of the HTML specification, HTML 4.0, the rise in interest in XML, the passage of the ECMA standard for scripting, ECMAScript, and the recommendation of CSS1 for Web page presentation. And these are only some of the standards that impact browsers.

So, how do the browser manufacturers cope with the changing standards? The same way you can cope with all of the other changing technology: First, you define your Web development and Web client platforms. You determine what technologies make up each, including versions, and concentrate on these technologies, complete the effort you determine to complete with the defined platform, and then, and only then, begin to plan your next Web platforms.

The Current Technology Platform

For many companies and individual users, the current technology platform consists of Netscape Navigator 3.x or Internet Explorer 3.x for the browser, Apache 1.2, Netscape Enterprise Server 2.0 or 3.0, O’Reilly’s WebSite Pro, or Microsoft’s Internet Information Server 2.0 or 3.0.

Most Web pages contain a combination of text and images, and most of the images are static. Many sites use some form of scripting for page interaction, most likely a form of JavaScript. HTML tables are used to handle the layout of HTML elements, as shown in Figure 37.1.

As you can see from the figure, you can actually create a fairly organized page using HTML tables. The page also uses the font element to color the sidebar text white; the color attributes of the table header and contents are used to set the header to red and the contents to yellow.

Animation in a page occurs through the use of Java applets, animated GIFs, Netscape style plug-ins, or ActiveX controls.

The version of Java used with most applets is based on the first release of the JDK–JDK 1.0.

Server-side applications are used to create dynamic Web pages, to present database information, or to process information returned from the Web page reader.

A Summary Review of the Technologies Covered in the Book–Where Will They Be in a Year?

A good rule of thumb when working with content for multiple versions of a tool is to support the currently released product in addition to one previous release. Based on this, you can count on supporting pages that work with Netscape Navigator 3.x and 4.x, and Internet Explorer 3.x and 4.x. As both browser companies begin the rounds of creating version 5.0 of their respective products, the business world will be cautiously upgrading pages to work with the new 4.0 technologies, particularly CSS1, HTML 4.0, and Dynamic HTML. By the time they have made the move to 4.0 technology, the 5.0 release of the browsers should be close to hitting the street.

The browser companies themselves probably follow a similar reasoning in that they support a specific number of versions of a standard, such as HTML, before they begin to drop deprecated content from earlier releases of HTML.

Standards organizations rarely release more than one recommended version of a standard each year. Sometimes they might go longer than a year before a new release, rarely less than a year.

Based on this, the technology you read about in this book should be viable for two years after publication of the book, which takes the Web into the year 2000.

The following sections look at each of the discussed technologies, with an eye on where each is likely to be on the eve of 2000.

HTML 4.0, CSS1

To start with the basics, the foundation of Web publishing is HTML, and this technology was explored in the first part of the book. Additionally, the first part of the book also looked at Cascading Style Sheets (CSS1) and Dynamic HTML. Dynamic HTML’s future is covered in the next section.

As this book goes to press, HTML 4.0 is the version of HTML currently under draft review. This version provides for increased form and table support, deprecates several existing elements, and adds a few new element types and several new attributes, such as intrinsic events.

HTML 4.0 should become a recommended specification at the end of 1997. Currently, Microsoft has incorporated the HTML 4.0 draft specifications into the first release of IE 4.0, and Netscape has promised to adhere to the standard after it becomes a recommendation. Based on this, any changes to the HTML 4.0 draft will probably result in a minor revision release for IE 4.0. However, the HTML 4.0 changes for Netscape Navigator will probably be extensive enough for the company to incorporate these changes in the next release of Navigator, version 5.0. Following the Navigator 4.0 release schedule, you should begin to see the early beta releases of Navigator 5.0 in the spring of 1998.

No new activity is occurring with the CSS1 standard at this time, at least not in its impact on Web page presentation. Additional style sheet specifications are underway for speech synthesizers (ACSS, which is Aural Cascading Style Sheets), and a printing extension is underway for CSS, allowing for accurate page printing. This is in addition to the CSS-P, or Cascading Style Sheet Positioning.

At this time, tools that process, generate, or incorporate CSS1 in some form include HoTMetaL Pro 4.0 from SoftQuad (http://www.softquad.com), Microsoft’s FrontPage 98, Xanthus Internet Writer (http://www.xanthus.se/), Symposia Doc+ 3.0 from GRIF (http://www.grif.fr/prod/symposia/docplus.html), PageSpinner for the Mac (http://www.algonet.se/~optima/pagespinner.html), and others.

In the next year or two, Web pages will begin to incorporate CSS1 and HTML 4.0, though Netscape Navigator 3.x has a base of users wide enough to prevent most companies from using only CSS1 and HTML 4.0 to create Web pages. However, both of the major browser vendors have promised support of these standards, and many of the Web generation’s tools will integrate them into the new versions of their tools. As these new tools are appearing as beta releases now, they should all be released as products in 1998. By the year 1999, most companies that want to control the presentation of their Web pages should be using at least some form of CSS1, and begin the process of removing deprecated HTML elements from their pages.

You can keep up with the standards for HTML at http://www.w3.org/TR/WD-html40/. The standard for CSS1 can be found at http://www.w3.org/Style/.

Dynamic HTML and DOM

In 1997, with the release of version 4 of their browsers, both Netscape and Microsoft provided support for the first time for Dynamic HTML. Dynamic HTML is the dynamic modification and positioning of HTML elements after a Web page loads.

Dynamic HTML is a great concept and badly needed for Web development. With this new technology you can layer HTML elements, hide them, change their colors, their sizes, even change the elements’ contents. That’s the good news. The bad news is that Netscape and Microsoft have implemented different versions of Dynamic HTML–differences that are a little awkward to work with at best, and conflicting at worst.

Neither Netscape nor Microsoft has implemented broken versions of Dynamic HTML. When Netscape published Navigator 3.0 and exposed HTML images to scripting access, there was a great deal of discussion about Microsoft’s “broken” implementation of JavaScript 1.1, the version of JavaScript also published with Navigator 3.0. However, Internet Explorer 3.x was not broken, but the browser did not implement the same scripting object model as Navigator 3.x. Now, with IE 4.0 and Navigator 4.x, the scripting object models are even more disparate, making it difficult to create Dynamic HTML effects that work equally well with both browsers.

The solution to this problem could be found with the Document Object Model standardization effort currently underway with the W3C.

According to the W3C, the DOM defines an interface that exposes content, structure, and document style to processing, regardless of either the language used or the platform on which the DOM application resides. The functionality of Internet Explorer 3.0 and Netscape Navigator 3.0 is defined by the W3C to be level “zero” of the standard. You might assume it is that functionality that both of these browsers support, which means they would not include images.

At this time, the DOM working group has produced a requirements document, which includes items such as those in the following list:

  • All document content, elements, and element attributes are programmatically accessible and can be manipulated. This means that you can use script to alter the color of header text, or dynamically alter the margins of the document.
  • All document content can be queried, with built-in functions such as get first or get next.
  • Elements can be removed or added dynamically.
  • All elements can generate events, and user interactions can be trapped and handled within the event model.
  • Style sheets can be dynamically added or removed from a page, and style sheet rules can be added, deleted, or modified.

This list is just a sampling of the requirements for the DOM specification, but it is enough to see that when the DOM specification becomes a recommendation, the days of the static and unchanging Web page will soon be over.

To see more about DOM, check out the DOM working page at http://www.w3.org/ MarkUp/DOM/.

Client Scripting and CSS1 Positioning

Excluding the objects exposed to scripting access as members of each browser’s scripting object model, there aren’t that many differences between Netscape’s implementation of JavaScript and Microsoft’s implementation of JavaScript.

Scripting will continue to be used in the years to come, and, hopefully, the language will not get too complicated, or the ease of use of scripting languages will begin to diminish.

Again, the major impact on scripting occurs with the elements that become exposed by the DOM effort. However, this is not a guarantee that the same script block written for Netscape’s Navigator will work with Microsoft’s Internet Explorer.

Consider each browser’s implementation of dynamic CSS1 positioning. First, both companies support CSS1 positioning, a draft recommendation actually created by both companies. This standard provides style sheet attributes that control an element’s width, height, z-order (the element’s position in the stack if elements are layered), the location of the left side and top side of the element. The standard also provides an attribute to control the visibility of the object and the clipping area.

Figure 37.2 shows how well CSS1 positioning works by showing a Web page using this technology, opened in both IE 4.0 and Navigator 4.0. Note how the text aligns directly on top of the image (yes, the text and images are separate elements), and that the images are aligned in a vertical line along the left side of the page, without using an HTML table for layout control.

The example in Figure 37.2 is discussed in Chapter 8, “Advanced Layout and Positioning with Style Sheets,” and is located in the file images3.htm at this book’s Companion Web Site.

Using CSS1 positioning to control the layout of text and images.

If statically positioning elements using CSS1 positioning works equally well with both browsers, dynamic positioning does not. Both browsers create the same effects but use different techniques. Considering that standards usually define an effect or behavior but don’t necessarily define a specific technique, you probably won’t be seeing consistent scripting of HTML elements in the next couple of years.

Java

As this is being written, Sun is on the verge of releasing JDK 1.2, Netscape just created a minor release to cover most of the classes released with the JDK 1.1, and Microsoft also supports JDK 1.1 in its release of IE 4.0.

The use of JavaBeans–Java components that can be packaged, distributed, and used and reused in applications–is among the technologies supported with JDK 1.1. It’s a very good idea and one that has already achieved popularity among Java developers.

However, not all is positive in Java’s future, particularly when used with browsers. The browser companies are usually one version release behind the current Java class releases. That is not a problem. What is a problem is a situation that may make creating cross-browser applets virtually impossible.

The difficulties with the original release of Java had to do with the Advanced Windowing Toolkit or AWT classes. For the most part, interface development in Java was difficult and lacked sophistication. To resolve this, both Microsoft and Netscape began work with interface classes, called Application Framework Classes (AFC) by Microsoft and Interface Framework Classes (IFC) by Netscape.

Netscape joined Sun and combined Sun’s current efforts with its own IFC library to create the basis for the Java Framework Classes (JFC), due to be released with JDK 1.2. However, Microsoft had also spent considerable time with its own framework classes. At this time, the end result is Netscape and Sun supporting one set of classes and Microsoft supporting another.

To add to the problem, Sun also submitted Java to ISO (the International Standards Organization), to become a standardized language. They also asked to be designated a Publicly Available Submitter (PAS), or the group responsible for developing and maintaining the specification. At this time, the ISO working group, JTC 1, has voted against the Sun recommendation, with comments. Sun’s response, in effect, is that they will pull the language from ISO and treat it as a de jure standard, meaning that the company will retain control.

This is not a situation that is guaranteed to increase business confidence in the language. Add this to the difficulty of creating applets using any kind of framework, having the applet work with both IE and Navigator, and the increased sophistication of Dynamic HTML, and you may be in for a future decline of Java use for applets.

ActiveX

The new and exciting technology addition to ActiveX is DirectAnimation, DirectX technology extended for use with Java applets, controls, or scripting.

Being able to create ActiveX controls fairly easily using a variety of tools should lead to an increased popularity of these controls with companies whose intranets use Internet Explorer. The downside with the technology is that it is proprietary.

However, Microsoft also released several new filters that were originally ActiveX controls, but then were built in as style attributes. These controls can change the transparency of a Web page element, have a line of text become wavy, or add pinlights to a page. This technology is so fun and simple to use that the demand may likely be to add these to the DOM once it is released.

With this technology you can create rollover effects for menu images without the extra download of the rollover effect image.

CGI and Server-Side Applications

Server-side applicability is already at a point where most companies’ programming needs are met. CGI is still an effective server application technique and still works with most Web servers. If your company uses Internet Information Server, Active Server Pages is still a viable application option, just as LiveWire is for Netscape’s Enterprise Server.

One change you may see more of is the use of CORBA/COM technology and distributed processing, with Web servers acting as one hub within a distributed network. Browsers might become “interface containers” rather than Web page processing tools. With the increased sophistication of Dynamic HTML, it won’t be long before you might be creating a Web page as the front end for a company application, in addition to using tools such as Visual Basic or PowerBuilder.

VRML

VRML is a wonderful idea that’s still looking for that killer application to take it out of the artist’s realm and plunk it directly into business.

Consider VRML’s concept, which is that you send a simple text file to a VRML-capable reader, which then renders the text contents into incredible, interactive 3D “worlds.” This is Internet technology at its best, as you have seen already with HTML, and will probably see with XML.

With VRML 2.0, the living world specification and the capability to integrate Web page scripting and VRML worlds, you are going to see more of this technology in use, for store catalogs, Web site maps, educational tools, and yes, even to play games and have a little fun.

XML and Channels

Neither XML nor channel technology, which are related, has found a niche yet, but with the release of CDF technology from Microsoft and Netcaster from Netscape, this should change.

The concept of push technology started with a bang at PointCast’s release, and almost disappeared without even a whimper–a case of too much hype and not enough efficient technology. In addition, the channel content just wasn’t there.

The entry of Netscape and Microsoft into the channel technology can only boost the use of this technology. Already, there is an increased number of companies providing channels. Add in those companies that are using the Marimba Castanet technology, and you should see an increased number of channels from diverse Web sites in the next year.

XML is the Extended Markup Language standard that basically adds the concept of extending Web page HTML to include new objects–objects related to the company’s business, based on some topic, or even packaged for reuse.

Microsoft and Marimba have proposed the use of CDF (Channel Definition Format) with the use of XML for use with channel technology. Apple has used a precursor of XML to create 3D Web site maps that are generated automatically; your reader can traverse to determine which page to access.

You can read more about XML at the W3C site at http://www.w3.org/XML/. You can read more about Microsoft and Netscape’s implementation at their respective sites or in Chapter 34, “XML.”

Summary

Where will you be in the future of Web development? Not all that far from where you are now. New technologies seem as if they are popping up all the time–but they need time to get absorbed into the mainstream of Web sites.

One technique to begin incorporating the new technologies is to create a special set of pages for your Web site–not your main pages, but those that can demonstrate a product or idea and use the new technologies. A set of pages for the Web site shown in Figures 37.3, Figure 37.4, and Figure 37.5 are viewable only by Netscape Navigator 4.0 and Internet Explorer 4.0; these are additional pages to a Web site, but the sites themselves use mostly mainstream technology, meaning some use of CSS1, scripting, some CSS1 positioning, HTML tables, and just plain text.

The Web pages use Dynamic HTML to hide and display content, as well as hide and display the menu. The page also uses CSS1 positioning to lay out the HTML elements.

The technologies discussed in this book are effective today, and will be effective into the year 2000. Best of all, they won’t break on New Year’s Day, 2000.

Categories
JavaScript

Adding Persistence to DHTML Effects

Originally published at Netscape Enterprise Developer, now archived at the Wayback Machine

Dynamic HTML (DHTML), implemented in Netscape Navigator 4.x and Microsoft Internet Explorer 4.x, gives the Web page visitor the ability to alter the position, format, or visibility of an HTML element. However, the effects that are created with DHTML are transitory in that the next time the page is refreshed, the current DHTML state is not maintained and the page opens showing the same content layout as when the page is first loaded. Any changes to the content based on DHTML are not maintained. Sometimes this isn’t a problem, but other times this is irritating to the reader. This article covers how to add persistence to a DHTML page. Examples should work with all forms of Netscape Navigator 4.x and Internet Explorer 4.x, but have only been tested with IE 4.x and Netscape Navigator 4.04 in Windows 95.With DHTML, developers can provide functionality that hides or shows whichever layer the Web page reader wants to view. Developers can also add functionality that lets readers move content. The problem is that DHTML effects are not session persistent, which means that they aren’t maintained between page reloads. Following a link to another site and returning to the page can trigger a reload, which wipes out the effect and annoys the user,. especially if he or she has spent considerable effort achieving the current DHTML state.

For example, you can use DHTML to let your reader position your page contents for maximum visibility in her browser and get the page look just right. If she decides to leave your site to check Yahoo’s news for a few minutes and then comes back, her settings will have been erased.

So, what’s the solution to these problems? It’s relatively simple — add document persistence using Netscape-style cookies.

Using cookies 
Despite the name, you won’t find Netscape-style cookies at your local bakery. Cookies are bits of information in the form of name-value pairs that are stored on the client’s machine for a set period of time or until the browser is closed. For security, cookies are created and accessed using specific syntax, are limited to 300 cookies total within the cookie database at 4K per cookie, and are limited to 20 cookies per domain (the URL where cookie was set).

Cookie syntax consists of a string with URL characters encoded, and may include an expiration date in the format:

Wdy, DD-Mon-YY HH:MM:SS GMT

Netscape has a complete writeup on cookies (see our Resource section at the end), including functions that can be copied and used to set and get cookies. I created modified versions of these functions to support my DHTML effects. As I don’t want to add to overly burdened cookie files, I don’t set the expiration date, which means the cookie does not get stored in the persistent cookie database or file. This also means that the DHTML effect only lasts for the browser session. However, this fits my needs of maintaining a persistent DHTML state in those cases where the reader moves to another site or hits the reload button.

DHTML state cookie functions
I created a JavaScript source code file called cookies.js that has two functions. One function sets the cookie by assigning the value to the document.cookie object. More than one cookie can be set in this manner, as cookie storage is not destructive — setting another cookie does not overwrite existing cookies, it only adds to the existing cookie storage for the URL. The cookie setting function is shown in the following code block:

// Set cookie name/value
//
function set_cookie(name, value) {
   document.cookie = name + "=" + escape(value);
}

Next, the function to get the cookie accesses the document.cookie object and checks for a cookie with a given name. If found, the value associated with the cookie name is returned, otherwise an empty string is returned. The code for this function is:

// Get cookie given name
//
function get_cookie(Name) {
  var search = Name + "="
  var returnvalue = "";
  if (document.cookie.length > 0) {
    offset = document.cookie.indexOf(search)
    if (offset != -1) { // if cookie exists
      offset += search.length
      // set index of beginning of value
      end = document.cookie.indexOf(";", offset);
      // set index of end of cookie value
      if (end == -1)
         end = document.cookie.length;
      returnvalue=unescape(document.cookie.substring(offset, end))
      }
   }
  return returnvalue;
}

That’s it to set and get cookie values. The next section shows how to create two Web pages with simple, cross-browser DHTML effects. Then each page is modified to include the use of cookies to maintain DHTML state.

_BREAK1 Creating the DHTML Web pages
To demonstrate how to add persistence to DHTML pages, I created two Web pages implementing simple DHTML effects. The first page layers content and then hides and shows the layers based on Web-page reader mouse clicks. The second page has a form with two fields, one for setting an element’s top position and one for setting an element’s left position. Changing the value in either field and clicking an associated button changes the position of a specific HTML element.

Adding DHTML persistence for layered content
For the first demonstration page, a style sheet was added to the top of the page that defines positioning for all DIV blocks, formatting for an H1 header nested within a DIV block, and three named style sheet classes. The complete style sheet is shown here:

<STYLE type="text/css">
        DIV { position:absolute; left: 50; top: 100; width: 600 }
        DIV H1 { font-size: 48pt; font-family: Arial }
        .layer1 { color: blue }
        .layer2 { color: red }
        .layer3 { color: green }
</STYLE>

Next, three DIV blocks are used to enclose three layers, each given the same position within the Web page. Each block also contains a header (H1), with each header given a different style-sheet style class. The HTML for these objects is:

<DIV id="layer1">
<H1 class="layer1">LAYER--BLUE</H1>
</DIV>
<DIV id="layer2" style="visibility:hidden">
<H1 class="layer2">LAYER--RED</H1>
</DIV>
<DIV id="layer3" style="visibility:hidden">
<H1 class="layer3">LAYER--GREEN</H1>
</DIV>

That’s it for the page contents. To animate the page, I created a JavaScript block that contains a global variable and two functions. The global variable maintains the number of the layer currently visible. The first function is called cycle_layer; this function determines which layer is to be hidden and which is shown next, and then calls a function that performs the DHTML effect:

<SCRIPT language="javascript1.2">
<!--

// current layer counter
current_layer = 1;

// assign document clicks to function pointer
document.onclick = cycle_layer;

// cycle through layers
function cycle_layer() {
   var next_layer;
   if (current_layer == 3)
        next_layer = 1;
   else
        next_layer = current_layer + 1;
   switch_layers(current_layer, next_layer);
   current_layer = next_layer;
}

The scripting block also assigns the function cycle_layer as the event handler function for all mouse clicks that occur within the document page. By doing this, clicking any where in the page document area that doesn’t include any other content results in a call to the function to change the layer.

The switch_layers function is the DHTML effects function, and it uses the most uncomplicated technique to handle cross-browser differences: it checks for browser type and then runs code specific to the browser. Other techniques can be used to handle cross-browser differences, but these are outside of the scope of this article. All that the function does is hide the current layer and show the next layer in the cycle, as shown here:

// hide old layer, show new
function switch_layers(oldlayer, newlayer) {
   if (navigator.appName == "Microsoft Internet Explorer") {
        document.all.item("layer" + oldlayer).style.visibility="hidden";

        document.all.item("layer" +
newlayer).style.visibility="inherit";
        }
   else {
        document.layers["layer" + oldlayer].visibility="hidden";
        document.layers["layer" + newlayer].visibility="inherit";
        }
}

Try out the first sample page. Clicking on the document background, not the text, changes the layer. Try setting the layer to the green or red layer, accessing another site using the same browser window, and returning to the sample page. When you return, the page is reset to the beginning DHTML effect, showing the blue layer.

To correct the loss of the DHTML effect, we can add persistence to the page by storing which layer is showing when the page unloads. This information is captured in a function called when the onUnLoad event fires.

To add persistence, I added the cookies Javascript source code file to the page, using an external source code reference:

<!-- add in cookie functions -->
<SCRIPT language="javascript" src="cookie.js">
</SCRIPT>

Next, I added the function to capture the DHTML state:

// onunload event handler, capture "state" of page (article)
function capture_state() {
   set_cookie("current_layer",current_layer);
}

When the page reloads, the onLoad event is fired, and a function is called from this event to “redraw” the DHTML effect. The function is called start_page, and it pulls in the cookie containing which layer should be shown:

function start_page() {
// get cookie, if any, and restore DHTML state
  current_layer = get_cookie("current_layer");
  if (current_layer == "")
        current_layer = 1;
  else
        switch_layers(1, current_layer);
}

Finally, the two event handlers, onUnLoad and onLoad, are added to the BODY HTML tag:

<BODY onload="start_page()" onunload="capture_state()">

You can try out the second sample page, which has DHTML persistence — again, change the layer, open some other site and then return to the sample page. This time, the DHTML effect persists during a page reload.

Sometimes an effect requires more than one cookie, as the next example demonstrates.

_BREAK2 Adding DHTML Persistence for Positioned Content
In the next example, I used a style sheet again to define CSS1 and CSS-P formatting for the DIV block that is going to be moved in the page:

<STYLE type="text/css">
        DIV { position:absolute; left: 50; top: 100; width: 600 }
        DIV H1 { font-size: 48pt; font-family: Arial }
        .layer1 { color: blue }
</STYLE>

Next, I created a form that has two text elements and associated buttons. One text and button element pair is used to change the DIV block’s top position, one pair is used to change the DIV block’s left position. The entire form is shown here:

<DIV id="first" style="position:absolute; left: 10; top: 10; z-index:2">
<form name="form1">
Set new Left Value: <input type="text" name="newx" value="50">
<input type="button" onclick="newleft(newx.value)" value="Set New
Left"><p>
Set new Top Value: <input type="text" name="newy" value="100">
<input type="button" onclick="newtop(newy.value)" value="Set New Top">
</form>
</DIV>

Next, the positioned DIV block is created:

<DIV id="layer1" style="z-index: 1">
<H1 class="layer1">LAYER--BLUE</H1>
</DIV>

Once the page contents have been created, you can add code to animate the DIV block based on whether the top or left position is changed. The function to change the top position is:

// change top value
function newtop(newvalue) {
   if (navigator.appName == "Microsoft Internet Explorer")
        layer1.style.pixelTop = parseInt(newvalue);
   else
        document.layer1.top = newvalue;
}

Again, the least complex technique to handle cross-browser differences is used, which is to check for the browser being used and run the appropriate code. The function to change the left position is identical to the top position function, except the CSS-P attribute “left” is changed rather than the CSS-P attribute “top”:

// change left value
function newleft(newvalue) {
   if (navigator.appName == "Microsoft Internet Explorer")
        layer1.style.pixelLeft = parseInt(newvalue);
   else
        document.layer1.left = newvalue;
}

That’s it for this page. You can try it out on the third sample page, where you can change the position of the DIV block by changing the left position, the top position, or both. Again, open another site in the browser and then return to the example page. Notice how the position of the DIV block does not persist between page reloadings.

Adding persistence to this page is very similar to adding persistence to the layered example page, except two values are maintained: the top and left values. The start_page and capture_state functions for this DHMTL effect are:

function start_page() {
// get cookie, if any, and restore DHTML state
  var tmpleft;
  tmpleft = get_cookie("currentleft");
  if (tmpleft != "") {
        currentleft = parseInt(tmpleft);
        currenttop = parseInt(get_cookie("currenttop"));
        newtop(currenttop);
        newleft(currentleft);
        if (navigator.appName == "Microsoft Internet Explorer") {
           document.forms[0].newx.value=currentleft;
           document.forms[0].newy.value=currenttop;
           }
        else {
           document.first.document.forms[0].newx.value = currentleft;
           document.first.document.forms[0].newy.value = currenttop;
           }
        }
}

function capture_state() {
        set_cookie("currentleft", currentleft);
        set_cookie("currenttop", currenttop);
}

To see how it works, try out the fourth sample page, move the DIV block, open another Web site in the browser and return to the example page. This time the DHTML effect does persist between page reloadings.

Summing up
In a nutshell, the steps to add persistence to a page are:

  1. Create the DHTML page
  2. Determine the values that must be maintained to re-create an existing effect
  3. Add the Netscape-style functions to the page
  4. Capture the onUnLoad event and call a function to capture the DHTML effect persistence values
  5. Capture the onLoad event and call a function to restore the DHTML effect from the persisted values

Using Netscape-style cookies to maintain DHTML effects won’t help with some DHTML persistence problems. For example, DHTML effects can be lost when a page is resized. In addition, if a page is resized between the time the DHTML persistence values are stored and the page is reloaded, the values may no longer work well with current page dimensions. However, for most effects and for most uses, the use of Netscape-style cookies is a terrific approach to DHTML persistence.

Categories
JavaScript

A cross-browser text rollover

You may or may not have seen image rollovers. Rollovers are effects that provide visual feedback to the reader when his or her mouse is over an item. Well, you can also create text rollovers. This cheap page trick shows just one technique that you can use to create a text rollover.

First, I create a page with two menu items. Each menu item consists of two different layers, created using DIV blocks. One set of layers contains the original menu text, and the “highlighted” text that shows when the reader’s mouse is over the text. I created a style sheet then that has a style setting for the “normal” text and one for the “highlighted” text:

<STYLE type="text/css">
	BODY { background-color: white }
	DIV { position: absolute }
      .highlight { text-decoration: none; font-size: 12pt; font-family: 
			Arial; font-weight: bold; color: green }
      .normal { text-decoration: none; font-size: 10pt; color: black }
</STYLE>

Next, I create two menu items and each item’s associated highlighted text. As Navigator does not currently generate mouse events that can be captured on general DIV blocks, at least general DIV blocks, I enclose the text within links (“A”), and assign the styles to the A tags:

<BODY>

<!-- menu item one -->
<DIV id="one" style="postion:absolute; left: 150; top: 150">
<a href="" class="normal" onclick="return false" onmouseover="switch_state('one','oneb')">
Menu Item One
</a>
</DIV>
<DIV id="oneb" style="postion:absolute; left: 150; top: 150; visibility:hidden">
<a href="" class="highlight" onclick="return false" onmouseout="switch_state('oneb','one')">
Menu Item One
</a>
</DIV>

<!-- menu item two -->
<DIV id="two" style="postion:absolute; left: 150; top: 180">
<a href="" class="normal" onclick="return false" onmouseover="switch_state('two','twob')">
Menu Item Two
</a>
</DIV>
<DIV id="twob" style="postion:absolute; left: 150; top: 180; visibility:hidden">
<a href="" class="highlight" onclick="return false" onmouseout="switch_state('twob','two')">
Menu Item Two
</a>
</DIV>

Notice that the onmouseover event is trapped and handled for the “normal” text, but the onmouseout event is handled for the highlighted text. Each event handler calls one function, switch_state, and passes to this function which object is hidden and which is shown. The order that the objects are passed is different based on which event and for which object.

Next, I created two functions, switch_state and SetObjectVisibility. If I had used the cross-browser objects (see the DHTML section for these), I wouldn’t need the SetObjectVisibility function. The switch_state object does nothing more than hide and show the appropriate text block.

That’s it for this Cheap Page Trick. Try it out for yourself. What’s the cost for the trick? Less than 1K. Now, that’s Cheap!

Categories
Web

YASD Code Byte presents: Relative and Absolute Positioning – Part II Tables

Note: Navigator 4.x and up and IE 4.x and up

Prior to Navigator 4.x and Internet Explorer 4.x, one of the most commonly used HTML elements was the HTML table. With tables, you could position content in the middle of a page, create columns of data, position images.

With the introduction of CSS-P tables are not the only method used to position content, but they are still being used. Why is this? One main reason is that tables are still the best technique to use for positioning content for older browsers, and they are still one of the better techniques to use when it comes to “flowing” content into a specific section of a page, not just a single section of the page.

The best of all worlds might be the ability to use CSS-P with tables, but this is easier said then done. This second part to relative and absolute positioning demonstrates the ins and the outs of using CSS-P with tables.

First up, one thing a person might think of doing is using a table to position all content, and then use CSS-P to position content within the table. So, I created two tables, each with a text block enclosed within DIV blocks. Both DIV blocks are positioned relative to the enclosing table cell, with one set to a relative position of (0,0), and the second set to a relative position of (50,50). The code for the page is:

<table width=90% border=3>
<tr><td>
<DIV style="position:relative; color: blue">
Relative, 0, 0, Parent is table
</DIV>
</td></tr>
</table>	
<p>
<table width=90% border=3>
<tr><td>
<DIV style="position:relative; left: 50; top: 50; color: red">
Relative, 50, 50, Parent is table
</DIV>
</td></tr>
</table>

You can see the surprising results of using relative positioning within a table by checking out the page. Notice that both text blocks are positioned relative to the tables they are enclosed within, but also notice that the relative positioning of the second DIV block actually moved it “outsite” the table parameters.

I decided to try something else. This time, I positioned the table within a DIV block that has been absolutely positioned, set the width and height of the table’s cell using CSS1, and then used relative positioning with a DIV block contained IN the table. The code for this is:

<DIV style="position:absolute; left: 50; top: 150">
<table width=90% border=3>
<tr><td style="width:90%; height:100">
<DIV style="position:relative; left: 50; top: 50; color: lime">
Relative, 50, 50, Parent is table
</DIV>
</td></tr></table>
</DIV>

Well, interesting results here, as you can see by looking at the page and results that differ between Navigator and IE. For IE, the contents are positioned relative to the table, and the table height is set to 100 pixels in height a width of 90% page size. However, the height style attribute is not used within Navigator, and additionally, the font style applied to all DIV blocks is not applied to the inner DIV block. The latter happens because the DIV block style is applied to all DIV blocks at the document level, and the inner DIV block is now contained within a table which is contained within another DIV block. The only style that is applied to the inner block is the one applied as an inline style.

What other damage can I do? Well I created an absolutely positioned DIV block containing a table containing another absolutely positioned DIV block, and the results are even more interesting as you can see from the new page. What happened with this example, for both IE and Navigator, is that absolute positioning of an element removes the element’s height and width considerations when other content is placed on the page. Since the table is picking up its height from its contents, and the contents themselves are not participating in normal page layout, you get a squished table row. The table is wide enough only because its width has been set using the old style “width” attribute:

<DIV style="position:absolute; left: 50; top: 50">
<table width=90% border=3>
<tr><td >
<DIV style="position:absolute; left: 50; top: 50; color: magenta">
absolute, 50, 50, Parent is table
</DIV>
</td></tr></table>
</DIV>

Wait, wait! I’m not done twisting this one around. What happens if I remove the width attribute of the table. Take a look at the results with this page. Now, this is really interesing. First, for Navigator the contents do show, with a little bitty table above and to the left. However, try the page with IE 4.x. The contents don’t show either, but they do if you click the bottom scroll bar to move the page to the left a wee bit. The results are really strange, and note that I am using IE 4.01 on Windows 95 when I get them.

I have a little trick for handling sizing of tables when the contents are absolutely positioned, and I wrote about an article about this trick for Netscape Enterprise Developer’s February issue. What I do is use a transparent 1-pixel GIF placed into the table, and set to the size I want the table cell to occupy. If I want the cell to be 200 x 200, I set the image’s width and height to 200 each, as can be seen from the next example. The code to create this is:

<table border=3>
<tr><td >
<img src="blank.gif" height=200 width=200>
<DIV style="position:absolute; left: 50; top: 50; color: firebrick">
absolute, 50, 50, Parent is table
</DIV>
</td></tr></table>

Note also that IE wraps the contents to fit the table cell, but Navigator doesn’t. To get both to wrap, the DIV block should be set to the same width as the cell, adding for positioning to the left. In this case the width is set to 150, 50 for the left positioning and 150 to make a cell width of 200.

Want to see some other techniques? Well, try the page from the following code, which sets up the table separate from the table contents and uses the transparent GIF to size the table:

<table border=3 cols=4 width=400>
<tr>
<td >
<img src="blank.gif" height=100 width=100>
</td>
<td >
<img src="blank.gif" height=100 width=100>
</td>
<td >
<img src="blank.gif" height=100 width=100>
</td>
<td >
<img src="blank.gif" height=100 width=100>
</td>
</tr>
</table>

<DIV class=fonts style="position:absolute; left: 20; top: 20; width: 100; color: firebrick">
absolute, 20, 20, Parent is table
</DIV>
<DIV class=fonts style="position:absolute; left: 130; top: 20; width: 100; color: gray">
absolute, 20, 20, Parent is table
</DIV>
<DIV class=fonts style="position:absolute; left: 235; top: 20; width: 100; color: navy">
absolute, 20, 20, Parent is table
</DIV>
<DIV class=fonts style="position:absolute; left: 340; top: 20; width: 100; color: goldenrod">
absolute, 20, 20, Parent is table
</DIV>

Another page shows the results of a table with individually positioned DIV blocks, and using the transparent GIF to size and space the table cells. The results are actually pretty good, and the code for this effect is:

<table  cols=4 >
<tr>
<td height=100 width=100>
<DIV style="position: absolute; left: 0; top: 0; width: 100">
<img src="blank.gif" height=100 width=100 align=top>
</DIV>
<DIV class=fonts style="position:absolute; left: 20; top: 20; width: 100; color: firebrick">
Cell One
</DIV>
</td>
<td height=100 width=100>
<DIV style="position: absolute; left: 110; top: 0; width: 100">
<img src="blank.gif" height=100 width=100 align=top>
</DIV>
<DIV class=fonts style="position:absolute; left: 130; top: 20; width: 100; color: gray">
Cell Two
</DIV>
</td>
<td height=100 width=100>
<DIV style="position: absolute; left: 215; top: 0; width: 100">
<img src="blank.gif" height=100 width=100>
</DIV>
<DIV class=fonts style="position:absolute; left: 235; top: 20; width: 100; color: navy">
Cell Three
</DIV>
</td>
<td height=100 width=100>
<DIV style="position: absolute; left: 320; top: 0; width: 100">
<img src="blank.gif" height=100 width=100>
</DIV>
<DIV class=fonts style="position:absolute; left: 340; top: 20; width: 100; color: goldenrod">
Cell Four
</DIV>
</td>
</tr>
</table>

Best of all with this effect, is that the table itself can be included within an absolutely positioned DIV block, positioning the entire contents, as shown in the next example page. However, view this page with Navigator and the table is not positioned. Big Heavy Sigh.

One thing I was able to get working, with both browser, and in a way I actually planned (gasp), was the example shown in this Page. In this, I created a table with two images that are positioned using DIV blocks. The positioning is relative, and I set the top position of the second image to a negative value so it would overlap the first image. The code to create this effect is:

<table width=50% border=3 align=center>
<tr><td>
<DIV style="position:relative;top: 100; left: 40%">
<img src="yasd.gif">
</DIV>
<DIV style="position:relative; left: 40%; top: -30">
<img src="yasd.gif">
</DIV>
</td></tr></table>

Notice the white space around the images? That’s because the table height is equal to the height of the two images as they are positioned in page layout terms one after the other. The use of the negative top value makes no difference with page layout, the rest of the HTML content, including the table, “sees” these two images as layered one after the other, hence the row height.

And I think that’s a good place to stop…with an example that works the way I expect, and I even know the reason why.

That’s it for Part II of absolute and relative positioning.

Categories
Technology

Using Old Page layout tricks with new technology

Originally published at Netscape Enterprise Developer, now archived at the Wayback Machine

Prior to the release of Netscape Navigator 4.0 and Microsoft Internet Explorer 4.0, Web developers had to use a lot of tricks to control the layout and looks of a Web page. There was no easy way to control the positioning of elements on the page — the two photos that lined up perfectly over the text on your browser when you laid out your page could be completely askew when someone else downloaded them.

To counteract this non-standard display problem, Web authors tended to develop an arsenal of “tricks” that made layout easier. Among the more common tricks were the use of HTML tables to control page layout and a one-pixel transparent GIF to control the placement of content within a line or within a page.

With the newer 4.0 browsers, however, site developers have new, fewer roundabout techniques to control element placement and page layout. For instance, the Cascading Style Sheet Positioning (CSS-P) specification (now incorporated into the CSS2 working effort) and the original CSS1 specification add layout capabilities to HTML development. (See the page listed in our Resources section below for detailed Cascading Style Sheet information.) In addition, the rise of dynamic HTML technology means that authors not only have control of the static placement of HTML elements on a page, they can also move elements and hide or show them after a page is displayed.

Even with these new techniques, however, I find myself using old standbys — specifically, HTML tables and the one-pixel transparent GIF — but now I’m using them in combination with the new technologies to create interesting and useful effects. You too can combine the best of the old and new for more control over your page layout.

The one-pixel transparent GIF

Prior to the release of Navigator 4.0 and IE 4.0 and the development of the Cascading Style Sheet Positioning spec, Web page authors were severely limited in how much we could control the placement of Web page elements. One element that you could use to provide some placement control was the image element, defined with the <IMG> tag. Using the image element, an author could specify a vspace or hspace (vertical or horizontal spacing) value, as well as a vertical or horizontal alignment (right or left, top or bottom).

In addition to the image element, some older browsers supported the use of the transparent GIF. Using a transparent GIF, the specific color you identify within the image is transparent when loaded into a browser.

David Seigal of Killer Web Site fame combined the two ideas and came up with the image element that happened to be a small one-pixel transparent GIF. Since it’s tiny and transparent, it can be easily added to a layout without disrupting the underlying content; by using the specific spacing value capability of the image element on the one-pixel transparent GIF, you could add white space or position content in a specific location.

Beginning with Navigator 4.0 and followed by Internet Explorer 4.0, however, Web authors began using CSS-P for specific element positioning and CSS1 for adding margins or padding to a page (or even within an element). There was no longer a need for the little one-pixel transparent GIF. But an odd thing happened when I was about ready to delete my trusty little GIF file: I actually found a new use for it.

I wanted to create a page for my Dynamic Earth Web site that showed several different minerals and included a moveable “frame” that positioned itself over each image based on some event. When the frame was over the image, the image was activated — if the user clicked on it, information about the mineral would appear. Of course I knew I could use CSS1 to create a frame around content, then use CSS-P to move the frame, but I wanted the interior of the frame to be transparent.

The solution I came up with was to create the frame using a one-pixel transparent GIF for the interior, setting its width and height to be the exact size of the frame I wanted. Using CSS-P, I could then move this GIF around from image to image. I also created two separate layers for each image: one that had the original image, which didn’t do anything when the reader clicked it, and another that had a framed, transparent GIF, which showed the mineral information layer when clicked. Figure 1 shows a snapshot of this page:

 


Figure 1

The one-pixel transparent GIF turned out to be much more than a simple placement and whitespace tool; it’s a handy tool that can be stretched and shrunk as needed and reused as often as necessary.

Positioning a menu for both old browsers and new
I soon found other uses for my newly rediscovered little GIF file, including a solution for a new Web page authoring problem I encountered.

I used to have a menu along the top of my pages that contained four separate images and text-based links just below the images. I used an HTML table to control the placement of images and text, ensuring that the images were placed directly next to each other and were aligned along the top of the page. One thing I never liked about this approach was that I preferred that menu text be layered over the images rather than displayed below them.

With CSS-P, I could position the images at the top of the page and use absolute positioning to place the menu text over the images. The problem I encountered, though, is that the page didn’t look very good when viewed with a pre-Navigator or IE 4.0 browser.

Instead, I used an HTML table along the top of the page, including the four images and their associated text in the table cells. However, I included these images and text in blocks delimited by <DIV> tags (these allow formatting to span multiple elements) and then used CSS-P to position the images and text so they overlapped. With this approach, older browsers see the page as they always have, as shown in Figure 2, but in the newer browsers the page has the new overlapped look, as shown in Figure 3.

 

Image Missing
Figure 2

 


Figure 3

There was one last problem with this approach, though. The thing with absolute positioning is that if you have it on content within a table element, the contents do not influence the table row’s height or the table cell’s width. This means that any other content on the page gets placed after the table, but overlaps the images and text because the table is not sized correctly.

I found that a simple solution for this was to use my trusty one-pixel transparent GIF as the first table cell and set it to the height I wanted the table to occupy. This sized the entire row to the height I needed to cover the positioned content — once again, a successful blend of the old and new.