http://tc.eserver.org/dir/Design/Web-Design/DHTML A listing of the most recently indexed works about Design and Web Design and DHTML in the field of technical communication. en-us Copyright (c) 2005-08 by the EServer. All rights reserved. tclib-editorial@eserver.org (TC Library Editorial Board) webmaster@eserver.org (Geoffrey Sauer) http://tc.eserver.org/images/newlogo.gif http://tc.eserver.org/dir/Design/Web-Design/DHTML http://tc.eserver.org/34153.html http://tc.eserver.org/34153.html We will experiment embedding jQuery in DOJO 123's Accordion widget and try to identify if there exists any cross-code interactions. The code is also tested for cross-browser suitability. http://tc.eserver.org/32650.html http://tc.eserver.org/32650.html The important things to address are page weight and load time. Both of these factors have a negative impact on the user, and we should be working towards minimizing it. http://tc.eserver.org/32496.html http://tc.eserver.org/32496.html A website’s navigation should, in my opinion, be visible and straightforward, not hidden away like this or in flyout/dropdown menus. But... http://tc.eserver.org/32414.html http://tc.eserver.org/32414.html Attractive dropdown menus have long been the realm of Flash developers and advanced JavaScript gurus. But that needn’t be the case. This tutorial will walk you through developing a clean, semantic dropdown menu using XHTML and CSS that works in all modern browsers! http://tc.eserver.org/32416.html http://tc.eserver.org/32416.html Earlier this week I talked a bit about message boxes – how to style them and position them on your page to get them noticed. But a message that pops up every single time your website is loaded could get annoying. It’d be useful to give your users the ability to close those messages. For that, we’ll turn to our friend JavaScript. http://tc.eserver.org/32418.html http://tc.eserver.org/32418.html Last week, CSSnewbie reader Andrea Pluhar wrote in with an interesting problem: she wanted to use CSS dropdown menus like the ones we featured last week on a website that she was building, but the design called for the submenu to be arranged horizontally, not vertically. She sent me a mockup of what she was after (excerpted above) and wondered if there was a way to accomplish this effect using CSS. http://tc.eserver.org/32419.html http://tc.eserver.org/32419.html I’ve developed a trick over the years that I’ve used on a number of websites now for making my sites’ navigation bars “intelligent” or “self-aware.” By that, I mean that the navigation bar automatically knows which tab/button/whatever should be considered the currently active link, without having to manually specify a class or ID on either the body tag or on the links themselves. http://tc.eserver.org/32420.html http://tc.eserver.org/32420.html Navigation bars are the signposts of the web world: we take them for granted because of their ubiquity, but we’d all have a much harder time getting around without them. On most websites, nav bars hold a position of honor near the very top of the page, meaning they’re one of the first things your users see upon entering your site. As such, there’s a lot of pressure on navigation bars to look clean, act sophisticated, and ply the client’s wife with small talk and Manhattans while you close the deal. http://tc.eserver.org/32141.html http://tc.eserver.org/32141.html In 2004, Dave Shea took the CSS rollover where it had never gone before. Now he takes it further still—with a little help from jQuery. Say hello to hover animations that respond to a user’s behavior in ways standards-based sites never could before. http://tc.eserver.org/30675.html http://tc.eserver.org/30675.html Web 2.0 is well known for the fact that it's not built on breathtaking new inventions, but rather on renewed emphasis on age-old Web technologies. One of those age-old technologies that is enjoying a revival in Web 2.0 is bookmarklets. A bookmarklet is essentially a Web application shoehorned into a regular browser bookmark. This article includes a fully functioning bookmarklet and installation instructions you can use to highlight text on any Web page and search IBM developerWorks for that text. http://tc.eserver.org/29991.html http://tc.eserver.org/29991.html Dynamic HTML can be used inventively in many ways. Here's a simple way in which tables and DHTML can be used together to provide a menu function. The technique may be used in a frameset, but to keep things simple, we are going to use the table to control 'targets' in an inline frame (or IFRAME). http://tc.eserver.org/29980.html http://tc.eserver.org/29980.html Dynamic HTML is not another HTML standard, but is a term used to describe techniques by which Web pages can be made dynamic using JavaScript, Cascading Style Sheets (CSS), and the Document Object Model (DOM). It works on the more recent versions of Internet Explorer and Netscape. http://tc.eserver.org/29982.html http://tc.eserver.org/29982.html One of the little known features of DHTML, at least within Internet Explorer 5.5 or above, is an attribute known as contentEditable. This attribute can be used to make areas of text within a Web page editable by the user. This is very different from a form element, such as a text box, as contentEditable can make a table cell, or a standard paragraph editable. http://tc.eserver.org/29389.html http://tc.eserver.org/29389.html Learn how to use unobtrusive JavaScript to automatically open all PDFs in a new window. http://tc.eserver.org/29372.html http://tc.eserver.org/29372.html DHTML coders have had to overcome many obstacles to writing clean, portable code, including specific browser requirements. See how some straightforward coding tenets can help you sidestep such challenges. http://tc.eserver.org/28705.html http://tc.eserver.org/28705.html While building a browser slideshow object for a demonstration on dynamically pulling image information from a web server, I ran into difficulty with the DOM-compliant approach I had envisioned. A two-day journey into the world of XML DOM support for web browsers lay between me and a satisfactory solution. http://tc.eserver.org/28652.html http://tc.eserver.org/28652.html Find our how to use unobtrusive JavaScript to make striped tables with different backgrounds on each row. http://tc.eserver.org/28485.html http://tc.eserver.org/28485.html JavaScript is often ridiculed as the black sheep of programming languages. The development tools, a complicated and inconsistent document object model for HTML pages, and inconsistent implementation in browsers contributes to that sentiment. But JavaScript is much more than a toy. In this article, Bruce Tate explores JavaScript's language features. http://tc.eserver.org/28467.html http://tc.eserver.org/28467.html Discover why and how you should use unobtrusive JavaScript to validate forms. http://tc.eserver.org/28468.html http://tc.eserver.org/28468.html It's easy to increase the usability of forms using JavaScript - find out how. http://tc.eserver.org/28466.html http://tc.eserver.org/28466.html Learn about JavaScript and how it can be used to progressively enhance your site. http://tc.eserver.org/28449.html http://tc.eserver.org/28449.html This worked example creates a compact form with multiple similar records, with the familiar appearance of a datasheet. http://tc.eserver.org/28444.html http://tc.eserver.org/28444.html The three main technologies used to create modern web pages (HTML, CSS and JavaScript) each do different jobs. HTML should be used only for structuring content. Cascading Style Sheets should be used for applying all visual styles. JavaScript should be used for (almost) all interactive functionality, and should always be referenced in separate files, never written into HTML. http://tc.eserver.org/28450.html http://tc.eserver.org/28450.html This worked example applies styling and functionality to a basic grid of data to produce a simple form control that's a pleasure to use. http://tc.eserver.org/27684.html http://tc.eserver.org/27684.html Goes over a few techniques and approaches we use to create the foundation of every prototype--wireframes. In addition to serving as documentation for those working with the markup, wireframes are a great way to create screenshots and debug rendering problems that are happening during DOM manipulation. Whenever we find something looking funny during the development process, we always refer back to our wireframes to see if it’s a markup / presentation problem. If it renders right in the browser statically, then we know to look for the problem in the JavaScript or server side programming. http://tc.eserver.org/27623.html http://tc.eserver.org/27623.html Many sites that present tabular data use alternating background colors to increase the readability of that data. And as I developed a site, I realised I wanted to do that, too. The problem? In my case the table was not generated by a server side application or script of which you can find numerous examples on the Web. http://tc.eserver.org/27619.html http://tc.eserver.org/27619.html One of the most important aspects of web design is getting information from the viewer to the webmaster. This is where HTML forms are used. If you have been on the internet, you have seen forms before. Google uses them for search queries, Amazon uses them for shipping and credit card information, your bank uses them for you to login. Almost every site on the web has a type of form somewhere. We can't live without forms. How about changing the forms based on input by the viewer? This is where interactive forms using Javascript and HTML can help. http://tc.eserver.org/27628.html http://tc.eserver.org/27628.html One of the most common tasks Web developers face every day is to change the content of a Web page, without additional requests to the Web server. The easiest way to accomplish this assignment is through the use of layers. http://tc.eserver.org/27625.html http://tc.eserver.org/27625.html One of the great pitfalls of using client side techniques, such as JavaScript, to display content on demand is the prerequisite that everything be contained in variables. This makes adding and updating the content very cumbersome. http://tc.eserver.org/27629.html http://tc.eserver.org/27629.html In two parts, this series introduces the Document Object Model, explaining its benefits, and exploring its implementation. http://tc.eserver.org/27627.html http://tc.eserver.org/27627.html It’s no secret that over the last few years DHTML has been used almost exclusively for evil purposes. Users associate the technology with intrusive advertisements and error-prone pages, while developers associate it with browser detection and hideous hacks. http://tc.eserver.org/27416.html http://tc.eserver.org/27416.html This is a Greasemonkey user script to enable heading navigation in Firefox. Headings can either be navigated by the heading level, for example, all h2 elements, or by any level. http://tc.eserver.org/27410.html http://tc.eserver.org/27410.html Prototype is an object oriented JavaScript library (written by Sam Stephenson and friends) that makes JavaScript fun. So it says on the site, anyway. Those of you who are familiar with the open source community's latest and greatest application framework, Rails, may recognise Prototype as it actually forms the backbone of Rails' JavaScript helper. However, Prototype can be used independently of Rails to aid the coding of many JavaScript doodads and Web 2.0 thingy wangles. http://tc.eserver.org/27409.html http://tc.eserver.org/27409.html JavaScript is an amazingly useful language that offers many unique benefits. With a little consideration for how scripted functionality degrades, you can use JavaScript to bring a whole range of functional, design and usability improvements to your web sites. http://tc.eserver.org/27355.html http://tc.eserver.org/27355.html Asynchronous JavaScript And XML, or its acronym, Ajax (Pronounced A-jacks), is a Web development technique for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire Web page does not have to be reloaded each time the user makes a change. This is meant to increase the Web page's interactivity, speed, and usability. http://tc.eserver.org/27292.html http://tc.eserver.org/27292.html Dynamic HTML (DHTML) provides a new range of ways to animate a page. DHTML can animate both text and images and animations can move throughout the browser window, instead of being anchored in one spot. Unfortunately, DHTML can be tricky because of differences between browsers. This article will cover the basics of cross-browser animation. You’ll learn how to animate text and images. Plus you’ll see how to move HTML elements around the screen. After you’ve finished reading this article, you should be able to add cross-browser compatible DHTML animations to your web pages. http://tc.eserver.org/27293.html http://tc.eserver.org/27293.html This approach uses Dynamic HTML (DHTML), which has several benefits over using IFRAMES to make life a bit easier for the users of your site. First, DHTML allows for more flexible formatting than IFRAMEs permit. You can apply background images, borders, fonts, and all the other features you’ve learned to expect from HTML and Cascading Style Sheets to DHTML objects. In contrast, IFRAMES have almost no configurable features. Second, if someone fills out one form, switches to another, then switches back, there’s a good chance that the browser will lose the information that was initially entered. This problem doesn’t exist in the DHTML solution. Third, with DHTML you can do tricky things like clipping and moving the form around the page. You could do these things by combining IFRAMES and DHTML, but you might as well just use DHTML in the first place. http://tc.eserver.org/27309.html http://tc.eserver.org/27309.html As deployment of XML data and web services becomes more widespread, you may occasionally find it convenient to connect an HTML presentation directly to XML data for interim updates without reloading the page. Thanks to the little-known XMLHttpRequest object, an increasing range of web clients can retrieve and submit XML data directly, all in the background. To convert retrieved XML data into renderable HTML content, rely on the client-side Document Object Model (DOM) to read the XML document node tree and compose HTML elements that the user sees. http://tc.eserver.org/27299.html http://tc.eserver.org/27299.html Any sort of interactive site is going to have form inputs — a place where your users input who they are, what they want to buy, where they live, and so forth. This data is passed to whatever handles your back end — a Perl CGI script, a PHP engine, a database like Oracle, or some other technology you’ve invested in. Whatever system is back there, you can bet that it doesn’t appreciate having its time wasted with bogus information, and chances are the user doesn’t appreciate it either. If the data the user submits to the CGI contains an error, there will be a noticeable lag — typically several seconds — before the information travels over the Internet to the server, is examined on the server, and then returns to the user along with an irritating error message. If you run a little preliminary validation of the user’s form input before the form is submitted, there will be no wait time. Client-side validation is instantaneous because it doesn’t have to transmit any data. JavaScript catches any erroneous data the user enters before it goes anywhere. http://tc.eserver.org/27302.html http://tc.eserver.org/27302.html This script uses dynamic HTML (DHTML) to pop open a box with info in it when you click on a link. In my demo I’ve used this to pop up contextual help about filling in a form. It could also be used, for example, to give pop-up definitions for terms in an article. In both cases, it makes sense to give the information in context, modelessly. Likewise, this solution avoids the problems of statelessness and latency. http://tc.eserver.org/27307.html http://tc.eserver.org/27307.html With the release of W3 compliant browsers however, we now have the ability to change styles on the fly from JavaScript, using the W3C DOM. Unfortunately, due to a distinction between the way that embedded and remote stylesheet properties are exposed as opposed to the way that inline STYLE properties are exposed, this can be tricky. http://tc.eserver.org/27295.html http://tc.eserver.org/27295.html The pace of new browser releases may be slower than it was in the early days, but developers must still confront a bemusing array of browser versions and brands that support some JavaScript features but not others. To combat the problem, scripters commonly provide two or more code branches so that a browser follows an execution path containing statements that it supports. Browser sniffing — the task of inspecting navigator object properties for version information — has become largely unmanageable given the browser version permutations available today. This article presents details on an alternative solution — object detection — that frees JavaScript developers from most of this versioning mess. http://tc.eserver.org/27306.html http://tc.eserver.org/27306.html Since there are clearly times when it makes sense to use a plug-in, the question arises of how to deal with those who don’t have the required plug-in installed. As Web developers, we have several choices. One option is to do nothing, simply serving the plug-in-dependent content. The trouble is that those that don’t have the required plug-in will get a rather disturbing page with a broken plug-in icon where your beautiful multimedia should be. Another option is to give visitors a choice between the plug-in version and the static HTML version of each page. Sometimes this may be the best choice, since it gives your visitors control over their experience. There are two problems, however. First of all, the choice itself interrupts a visitor’s experience of the site. Second, it requires them to know what plug-ins they have installed. But why should they need to know? Many users don’t know a plug-in from a spark plug? The final and often best option, the one this script is designed to help with, is to check to see if each visitor has a given plug-in. If they do, you can go ahead and serve them the page with the plug-in embedded. http://tc.eserver.org/27296.html http://tc.eserver.org/27296.html Events make the client-side JavaScript world go ‘round. After a Web page loads, the only way a script can run is in response to a system or user action. While simple events have been part of the JavaScript vocabulary since the first scriptable browsers, more recent browsers implement robust event models that allow scripts to process events more intelligently. The problem, however, is that in order to support a wide range of browsers you must contend with multiple advanced event models. Three, to be exact. http://tc.eserver.org/27162.html http://tc.eserver.org/27162.html This article shows how you can access an array of HTML form elements using JavaScript. http://tc.eserver.org/27163.html http://tc.eserver.org/27163.html A form-based interface to generate 80x15-pixel buttons, like those often used to identify RSS feeds. http://tc.eserver.org/27047.html http://tc.eserver.org/27047.html In simple terms, Ajax is an approach to rendering web pages that improves a web site's appeal and usability. It enhances user interaction by targeting updates from the server to specific areas of a web page. It allows information to be changed without long delays or frustrating page refreshes. http://tc.eserver.org/26907.html http://tc.eserver.org/26907.html Ajax is an awesome technology that is driving a new generation of web apps, from maps.google.com to colr.org to backpackit.com. But Ajax is also a dangerous technology for web developers, its power introduces a huge amount of UI problems as well as server side state problems and server load problems. http://tc.eserver.org/26891.html http://tc.eserver.org/26891.html For many Web developers, making simple requests and receiving simple responses is all they'll ever need, but for developers who want to master Ajax, a complete understanding of HTTP status codes, ready states, and the XMLHttpRequest object is required. In this article, Brett McLaughlin will show you the different status codes and demonstrate how browsers handle each and he will showcase the lesser-used HTTP requests that you can make with Ajax. http://tc.eserver.org/26882.html http://tc.eserver.org/26882.html The great divide between programmers (who work with back-end applications) and Web programmers (who spend their time writing HTML, CSS, and JavaScript) is long standing. However, the Document Object Model (DOM) bridges the chasm and makes working with both XML on the back end and HTML on the front end possible and an effective tool. In this article, Brett McLaughlin introduces the Document Object Model, explains its use in Web pages, and starts to explore its usage from JavaScript. http://tc.eserver.org/26893.html http://tc.eserver.org/26893.html The ability to add notes and comments to your Web site can be a powerful and attractive feature for users. This tutorial demonstrates how to implement an Asynchronous JavaScript and XML (AJAX)-based user annotation system in the form of yellow sticky notes that sit on top of regular Web page content. The only additional, required configuration is a back-end Perl script that stores the annotations. http://tc.eserver.org/26822.html http://tc.eserver.org/26822.html Cross-browser JavaScript grid control for displaying tabular data in DHTML based table. Comprehensive features include fast-loading (enabled by AJAX), client-side sorting, columns resizing, multiple cell control types and keyboard navigation. http://tc.eserver.org/26801.html http://tc.eserver.org/26801.html The start of 2005 saw the rise of a relatively new technology, dubbed 'Ajax' by Jesse James Garrett of Adaptive Path. Ajax stands for Asynchronous JavaScript and XML. In a nutshell, it is the use of the nonstandard XMLHttpRequest() object to communicate with server-side scripts. It can send as well as receive information in a variety of formats, including XML, HTML, and even text files. Ajax’s most appealing characteristic, however, is its 'asynchronous' nature, which means it can do all of this without having to refresh the page. This allows you to update portions of a page based upon user events and provides one of the cornerstones of Rich Internet Applications (RIA) referred to in discussions of 'Web 2.0.' http://tc.eserver.org/25968.html http://tc.eserver.org/25968.html Describes an alternative to automatic page refresh in HTML. Automatic page refresh can confuse users with cognitive disabilities when a page reloads without the user's request. This article provides you with instructions on how to apply explicit manual control of page refreshing. http://tc.eserver.org/25918.html http://tc.eserver.org/25918.html Efficient layout is a key to a good website. When you've got a lot of links one option that can help is a pop-up menu. You can use a ULR popup menu in its generic form or you can use CSS to customize its look. This tutorial shows a simplified use. http://tc.eserver.org/25731.html http://tc.eserver.org/25731.html In this tutorial I want to show up the differences between DOM-Scripting and the 'traditional' JavaScript technique using event-handlers embedded into the HTML-code. I’ll show a way to have accessible popups, and by showing how to do those, I’ll explain the propper use of DOM-scripting. http://tc.eserver.org/25728.html http://tc.eserver.org/25728.html How to use the powerful dynamic features of XSLT for sorting and displaying table-data. http://tc.eserver.org/25696.html http://tc.eserver.org/25696.html Help your site’s visitors reach their goals quickly with a dynamic menu that takes its cue from the Mac OS X Finder. http://tc.eserver.org/25549.html http://tc.eserver.org/25549.html Making an online gallery of pictures should be a quick process. The gap between snapping some pictures and publishing them on the web ought to be a short one. Here’s a quick and easy way of making a one-page gallery that uses JavaScript to load images and their captions on the fly. http://tc.eserver.org/25547.html http://tc.eserver.org/25547.html Teach your smart little menus to do the DHTML dropdown dance without sacrificing semantics, accessibility, or standards compliance or writing clunky code. http://tc.eserver.org/25501.html http://tc.eserver.org/25501.html Anyone who has created drop-down menus will be familiar with the large quantities of scripting such menus typically require. But, using structured HTML and simple CSS, it is possible to create visually appealing drop-downs that are easy to edit and update, and that work across a multitude of browsers, including Internet Explorer. Better still, for code-wary designers, no JavaScript is required! http://tc.eserver.org/25504.html http://tc.eserver.org/25504.html Fahrner Image Replacement (FIR), a technique developed to allow designers to use image-based typesetting while meeting accessibility requirements, only serves its intended purpose when screen readers misbehave. By using JavaScript, we have an opportunity none of these solutions give us. http://tc.eserver.org/25451.html http://tc.eserver.org/25451.html Hybrid CSS dropdowns allow access to all pages, keep the user aware of where she is within the site, and are clean and light to boot. http://tc.eserver.org/25408.html http://tc.eserver.org/25408.html So you've built a beautiful, standards-compliant site utilizing the latest and greatest CSS techniques. You've mastered control of styling every element, but in the back of your mind, a little voice is nagging you about how ugly your SELECTs are. Well, today we're going to explore a way to silence that little voice and truly complete our designs. With a little DOM scripting and some creative CSS, you too can make your SELECTs beautiful… and you won't have to sacrifice accessibility, usability or graceful degradation. http://tc.eserver.org/25360.html http://tc.eserver.org/25360.html There are many different button-rollover tutorials available on the web, some JavaScript and some CSS, but none of the ones I have seen yet match that of the Trifecta button. Let's start with what makes the CSS rollover Trifecta button different from the many other rollovers you may have already seen. Alternative sites are locatable with the key phrase: "Trifecta Button" in any search engine. http://tc.eserver.org/25259.html http://tc.eserver.org/25259.html Now that you've separated your website’s (XHTML) structure from its (CSS) presentation, wouldn’t it be great to similarly abstract the behavioral (JavaScript) layer from the others? ALA prodigal Peter-Paul Koch shows how to use JavaScript Triggers to do just that. http://tc.eserver.org/24836.html http://tc.eserver.org/24836.html About a year ago, I wrote an article, introducing a method for displaying a random image every time someone visits a web page. Administration was simple: just add or remove images from a folder on the server, and they would appear (or disappear, respectively) from the pool of random images being displayed on that page. http://tc.eserver.org/24373.html http://tc.eserver.org/24373.html Java™ and JavaScript™ are two of the newest 'kids on the block' when it comes to the latest developments for the computing and Internet world. Already, many are predicting that within a very few years Java will be the programming language of choice. Already, JavaScripts are nearly ubiquitous on the World Wide Web, largely because of their cross-platform nature and ease of use. And already, many technical communicators are beginning to consider what impact these new tools will have on their careers. While relatively few technical communicators will deal directly with JavaScripts and even fewer with Java programming, those involved in Web page development and online (HTML) documentation will find them valuable to learn and use. http://tc.eserver.org/23323.html http://tc.eserver.org/23323.html Got content? Got pages and pages of content? Wouldn’t it be nice if you could offer your readers a drop-down menu providing instant access to any page, without having to sit down and program the darned thing? By marrying a seemingly forgotten XHTML element to simple, drop-in JavaScript, Christian Heilmann shows how to do just that. There’s even a PHP backup for those whose browsers lack access to JavaScript. Turn on, tune in, drop-down. http://tc.eserver.org/22962.html http://tc.eserver.org/22962.html JavaScript is available on the Web to allow programming type processes that are not allowed with static HTML. In most cases, JavaScript does not overtly affect accessibility. Most browsers and screen readers are capable of accessing JavaScript items. You should, however, teach that many people cannot or choose not to allow JavaScript within their Web browsers or assistive technologies. Important content or functionality should not rely on JavaScript alone. JavaScript should usually be used to supplement content. http://tc.eserver.org/22460.html http://tc.eserver.org/22460.html After working hard on a design, image or article you may want to protect it by using a JavaScript that disables right-click while optionally warning a visitor that the content is copyrighted. http://tc.eserver.org/22426.html http://tc.eserver.org/22426.html In this article, I am going to build upon HTML+TIME markup to make my slideshow into an interactive gallery. One of the big selling points behind HTML+TIME is that it offers scripting-like interactivity without having to use scripting. With a few additions to our existing HTML markup, our presentation is ready for user interaction. http://tc.eserver.org/22373.html http://tc.eserver.org/22373.html Drill-down menus make interaction more difficult, destroy the user's overview, and poor wording make users give up using the site. http://tc.eserver.org/21558.html http://tc.eserver.org/21558.html I have been playing around with scripting for about six months now. I would by no means call myself a programmer yet, but I have successfully added many scripts to various Web sites. How did I do it without attending any programming classes or immersing myself with programming books? I used free scripts from Web sites. I have found many Web sites that offer scripts for just about anything you can imagine. http://tc.eserver.org/21220.html http://tc.eserver.org/21220.html The Webmonkey code library is our own collection of code fragments, function packages, and Web editor extensions - a resource containing generalized code, specific workarounds, and good ideas that you can use to enhance your pages in ways you may not know how (or may not want to bother) to program. http://tc.eserver.org/21177.html http://tc.eserver.org/21177.html One of the most common DHTML requests I get is for a Windows Explorer-style hierarchical menu, where there's a list of topics or 'folders' that a user can click on to reveal subtopics, or 'files,' within that folder. It's a common desktop metaphor that seems ever more necessary on the Web, especially as we see navigation bars incorporating larger and more complex content while still trying to fit on the screen. Hierarchical menus are a solution to the common problem of having too many links in too small a space. http://tc.eserver.org/21167.html http://tc.eserver.org/21167.html Most people who do even a little bit of JavaScript programming, even those who are simply tweaking somebody else’s code, are familiar with the rudimentary JavaScript debugger in the recent versions of Internet Explorer. Click on the yellow warning icon in your browser, and you get a listing of various JavaScript errors in your code. It is simple, and for many people it is enough, but it’s not really the type of fully-fledged debugging environment with features programmers have come to expect in other development languages. If you find yourself doing a lot of JavaScript programming or tweaking and you are concerned with cross-browser support for your scripts, then Venkman is worth checking out. http://tc.eserver.org/21169.html http://tc.eserver.org/21169.html Most developers don't surf the web with JavaScript turned off on purpose. Fortunately, there are rarely instances where this lack of respect for the non-JavaScript users is necessary. http://tc.eserver.org/20996.html http://tc.eserver.org/20996.html This site offers a unique approach to contextual navigation, and one that has gotten the attention of many reviewers. From the site: 'ArtandCulture.com is a dynamic destination that delivers unique access to the best arts and cultural content and related products available on the web today....focused on creating the context that makes information truly meaningful.' In this review, I'll focus on some of the interesting navigation strategies the site presents. http://tc.eserver.org/20370.html http://tc.eserver.org/20370.html Dynamic Drive is a directory of free, original DHTML scripts and components to enhance your web site. http://tc.eserver.org/20369.html http://tc.eserver.org/20369.html Readers return to sites that appear fresh and new on each visit. On a news site, magazine, or blog, stories or headlines will be updated frequently. But how can static sites keep that fresh feeling? Dan Benjamin’s free image randomizer may do the trick, and you needn’t be a programmer to install it. http://tc.eserver.org/20368.html http://tc.eserver.org/20368.html Image-driven, visually compelling user interfaces. Text-based, semantic markup. Now you can have both! Douglas Bowman’s sliding doors method of CSS design offers sophisticated graphics that squash and stretch while delivering meaningful XHTML text. Have your cake and eat it, too! http://tc.eserver.org/20288.html http://tc.eserver.org/20288.html Have you been frustrated by the limitations of HTML as you have struggled to present information attractively on a Web page? Have you used common work-around methods such as setting up complex tables for text layout and creating special text effects with a graphics package? Cascading Style Sheets offers a way to produce desired layout effects through HTML. If we are programmatically inclined, we can use Dynamic HTML to increase interactivity. We will demonstrate methods for using Cascading Style Sheets and Dynamic HTML to design Web pages and point out design limitations we still need to be aware of. http://tc.eserver.org/20257.html http://tc.eserver.org/20257.html Be a code wizard … or, just look like one. In Part 3 of the DOM Design Tricks tutorial series, Eisenberg shows us how to dynamically change text on a page. The theory, examples, and scripts will work in Mozilla and IE5. http://tc.eserver.org/20225.html http://tc.eserver.org/20225.html You asked for it, you’ve got it: an Open Source alternate Style Sheet switcher that even works in Netscape Navigator 4. http://tc.eserver.org/20212.html http://tc.eserver.org/20212.html It's actually a little tough to get a handle on DHTML because it's beginning to mean different things to a few different people. The actual term stands for Dynamic Hypertext Mark-Up Language. That's obvious. The essence of the term stands for almost any coding that creates movement or interactivity by employing the standards of the 4.0 level Netscape and MSIE browsers. http://tc.eserver.org/20185.html http://tc.eserver.org/20185.html This paper introduces neophytes to Java. It starts with Java’'s beginnings as a programming language for interactive cable TV boxes and continues through the features of optimization, platform-independence, and object-orientation that make it unique. Next, it dispels the myths surrounding Java, presents solid guidelines for when and when not to use Java, and finally examines today’s practical uses of Java, including enhancing Web pages, managing a business, and delivering sophisticated training modules capable of advanced interactions. http://tc.eserver.org/20183.html http://tc.eserver.org/20183.html Java and JavaScript are two of the newest 'kids on the block' when it comes to the latest developments for the computing and Internet world. Already, many are predicting that within a very few years Java will be the programming language of choice. Already, JavaScripts are nearly ubiquitous on the World Wide Web, largely because of their cross-platform nature and ease of use. And already, many technical communicators are beginning to consider what impact these new tools will have on their careers. While relatively few technical communicators will deal directly with JavaScripts and even fewer with Java programming, those involved in Web page development and online (HTML) documentation will find them valuable to learn and use. http://tc.eserver.org/20172.html http://tc.eserver.org/20172.html Describes how to create a type of DHTML interactivity using Adobe GoLive. http://tc.eserver.org/20173.html http://tc.eserver.org/20173.html In this tutorial, you'll see how to create text that's invisible as the page loads and appears only when a user rolls the mouse over a specific graphic, i.e., text appears on 'mouseover'and disappears when the mouse is no longer over the graphic. http://tc.eserver.org/20171.html http://tc.eserver.org/20171.html A more sophisticated method for denoting an active page or section of a site is to make your buttons 'sticky'–having a button remain 'stuck' in its clicked state even after it's been clicked. Two ways of setting up sticky or locking buttons are shown here. http://tc.eserver.org/19208.html http://tc.eserver.org/19208.html On this page I give a short introduction to the accessibility issues surrounding the use of JavaScript. It is by no means a complete tutorial; I just want to offer a few rough guidelines and some bits of information. Nonetheless the information on this page seems to be clearer and more complete than the average 'JavaScript and accessibility' page on the WWW. http://tc.eserver.org/18877.html http://tc.eserver.org/18877.html Bienvenido a DHTML en castellano. A lo largo de estas páginas podrás acceder a un extenso tutorial sobre Html Dinámico en español totalmente gratuito. http://tc.eserver.org/18727.html http://tc.eserver.org/18727.html Para la mayoría de las personas resulta confuso que, al hacer click en un link o botón, la página responda lanzando una nueva ventana del navegador. Añade otra dimensión a la complejidad de la navegación. Sin embargo, muchas veces nuestro cliente necesita un pop-up, o nosotros mismos decidimos que el visitante de la página podrá manejarlo. Más allá de las discusiones acerca de usar o no un pop-up, hay un problema que los corrompe sistemáticamente, que los hace perversos, que agrede a usuarios avanzados y principiantes en su navegación, confunde a los buscadores, y genera ruido en el código. Este problema es que, existiendo varias formas de lanzar un pop-up con código Javascript, las más usadas son las incorrectas. http://tc.eserver.org/14632.html http://tc.eserver.org/14632.html Wilkinson offers tips on adding free JavaScript subroutines to Web sites. She lists several Web sites that give away free scripts. http://tc.eserver.org/13785.html http://tc.eserver.org/13785.html The reference material accessed through the following links will help you to create compelling Dynamic HTML (DHTML) Web pages. http://tc.eserver.org/13638.html http://tc.eserver.org/13638.html I like Opera--the browser, not the musical spectacle. I like that it puts small demands on your hardware. I like that it displays Web pages quickly and accurately. I like that it has always been close to the standards suggested by the W3C, especially for CSS styles. It is always worthwhile to preview pages in Opera. Opera is a little weak in event handling, and it has been slow to adopt the document object model. But in terms of page presentation, Opera shows a Web page the way it oughta look. It displays a great looking page, and it loads fast. And everybody likes the little guy. The troubles I have with Opera, as a code writer, are all derived from a single bad habit of the browser. Opera is a little loose with the truth. http://tc.eserver.org/13546.html http://tc.eserver.org/13546.html For years we’ve been preloading our on–state images to assist the browser in its rollover presentation. Preloading increases the weight of the initial download, but adds to usability by decreasing the wait time for an on–state image to appear. Decreases, but may not eliminate. Even when preloaded, some browsers present momentary pauses prior to rendering the image. Besides being annoying, this momentary pause can cause problems when a visitor mouses over an element in passing or too rapidly. If the mouse movement is too fast, the browser does not have time to render the image and, worst–case scenario, can present you with a broken image icon. http://tc.eserver.org/13349.html http://tc.eserver.org/13349.html This article shows you how to make cookies (Mmmmm), and you'll learn fancy string handling and associative arrays along the way. Give your JavaScript a sense of history and time (by setting timelines on your pages so that different events occur at different times), and then learn how to sense which browser your visitors are using. http://tc.eserver.org/13350.html http://tc.eserver.org/13350.html The series starts off with a look at JavaScript fundamentals, including variables, if-then statements, link events, and image swaps. Keep following along as Thau gets down and dirty with the JavaScript Document Object Model, windows and frames, JavaScript syntax with loops, arrays, and functions, and forms. This all sound like a bunch of gobbledygook? Well, dig in and learn! http://tc.eserver.org/11723.html http://tc.eserver.org/11723.html While experimenting with DHTML you may have ended up with a situation where you'd wanted to possibly have an element that has a width that's always the same as another element's height. On the other hand, you may have wanted to center an element in the middle of the page no matter what the width of the page was. All this is possible with the DHTML methods you've learned previously, but you will find that these scripts end up being unnecessarily long or complicated. That's why Dynamic Properties were introduced in IE 5.0. Dynamic Properties, as the name may indicate, means the ability to assign non-static dynamic values to properties. http://tc.eserver.org/11725.html http://tc.eserver.org/11725.html The intranet and Internet is an ever evolving environment, and Web pages themselves are steadily blooming from static displays of data to interactive applications. 'Dynamic HTML' is an umbrella term encompassing several ways in which Web developers can breathe life into pages which have traditionally been still portraits of information. http://tc.eserver.org/11722.html http://tc.eserver.org/11722.html In this article we will look at several techniques, some general, some specific, for constructing Dynamic HTML code which bridges the gap between Microsoft's Internet Explorer and Netscape's Navigator-- specifically, the gap between Netscape 4.x and Microsoft Internet Explorer 4 and 5. http://tc.eserver.org/10683.html http://tc.eserver.org/10683.html Prior to the 4.0 browsers, Internet Explorer and Netscape Navigator exposed very similar but very limited object models for manipulating the page. The primary difference was the lack of an images collection in Internet Explorer 3.x. With the 4.0 browsers, Netscape's and Microsoft's implementations diverged. Netscape's model evolved to allow a little more control over the page by allowing positioned elements to be manipulated. Microsoft, on the other hand, expanded to provide control to every element on the page. To further confuse matters, both companies called their new implementations Dynamic HTML. We have created DHTMLLib to help you design cross-browser DHTML pages without requiring you to understand the complete details of the different object models.