main | computers| links

DHTML notes

no guarantee

Last change Jan 26, 2005 AD

Index

Introduction

This page is devoted to DHTML (under this term I mean HTML, JavaScript and style sheets) and especially cross-browser dhtml (the one that works at least under IE and NS). Its intended audience are people who have already experience with DHTML and its purpose is to make them aware of some common (or not so common) problems, as well as give them a number of useful links.

Tips & Tricks, examples

I used to play with DHTML too and, as a result, I've discovered some tricks, created few .js files and started (though not finished) several 'DHTML projects'. I hope you will find at least some of them useful.

Add search to your web

Add the following form to your page to search with Google for keywords at site "http://gcc.gnu.org/onlinedocs/libstdc++/latest-doxygen/". Note: sometimes you must add there more quotes to prevent the default keywords (/onlinedocs/...) from being misinterpreted.

<FORM method=GET action="http://www.google.com/search" name="google_search" onsubmit="document.google_search.q.value=document.google_search.q.value+' /onlinedocs/libstdc++/latest-doxygen site:gcc.gnu.org'" > <INPUT TYPE=text name=q size=25 maxlength=255 value=""> <INPUT type=submit name=btnG VALUE="Google" > </FORM>

Netscape 4x

General

W3C standard

This section mentiones some 'standard' features, that are already implemented in some of the latest browsers (IE5 and, perhaps, Netscape Gecko)

QuickRef

Glossary

NN, NS
 means Netscape; if it's followed by a number, the number is its version; 'x' is any number.
IE
Internet Explorer. Regarding numbers, the same as for NS holds.
block
is any 'block element', for instance <div></div>

Testing & Debugging (with Mozilla)

See the article "Using Mozilla in Testing and Debugging Web Sites". See "Debugging JavaScript Using Venkman". 

Mozilla: Tools->Web development->DOM inspector
display dom tree of [generated] html + style, id and classes of elements, also inspects JavaScript (methods, variables) and CSS (classes etc. + their def.)
Display generated HTML (written by JavaScript)
In browser, select the part of the page you're interested in, right-clik->View Selection Source

Using Venkman:

  1. Open the page to debug Mozilla/Netscape browser.
  2. Tools->Web Development->JavaScript Debugger starts Venkman
    The page will be loaded into Venkman: in the view Load Scripts you shall see the name of the page (e.g. "mypage.html) among others. Click on it twice to display it in the Source Code view (if opened).
    (Change layout of views: left mouse click on the small square in the top left corner of a view and drag it around; look for a thin black line that appears on sides of near views - there it will be placed if you drop it.)
  3. Start debugging: open the view "Open Windows" (View->Show/Hide->...). There shall be 1 item: "Navigator Window". Click on it and you shall see the name of your page. Right-click on it and select "Set as Evaluation Object"
    Now you can check various objects (type e.g. document.images in the Interactive Session command line)
  4. Set a breakpoint or hit the Stop button (= Debug->Stop; F4) to stop at each line.
  5. Go to the browser window and reload the page (or do anything else to trigger the script(s)).
  6. Debug! (Use the buttons Continue, etc.Step over, Step into,and Step out and breakpoints.)
  7. It's still a bit buggy so be ready for anything :-) (version 0.9.79).

Various notes

CSS: Position and  Display

Keywords: position (relative x absolute x static x fixed x inherit ), display (block x none [x inline x inherit x ...])
Position relative: The element does occupy a space in the normal text flow, i.e. effects layout/formatting structure (=> elements below it are moved according to its size). The space is fixed and: A) is not influenced by offset (setting left, top) of the element thus if you offset it by height/2 down, 1 half of it will be hidden (covered by the following element); B) is not influenced by visibility == hidden, i.e. instead of the element you will see an empty space of its size => you can't use visiility: hidden to hide the element completely.
Position absolute: The element does not ccupy a space in the normal text flow, doesn't effect layout at all  => A) If you set top&left the element is above whatever was at that position or is hidden below it (w.r.t. z axis) and other elements are not influenced by it at all; B) If you don't set top&left it will be placed at where the element in the html source is but will not effect the layout of neighbouring elements.
Position static: as relative but top&left properties are ignored. Position fixed: as absolute + the element is fixed w.r.t. to some reference.

To hide an element so that it does't influence layout of other elements we may use either position:absolute + visibility:hidden or better display:none. To show again: display: block (or inline or ...).

Center a box element

"If both 'margin-left' and 'margin-right' are 'auto', their computed values are equal."

A <LABEL> that fills all the space available

If you click the light-green area (label's background) the radio becomes checked.

Code of the long label: <label style="display: block;width: 100%" for="fp3">a full-row label</label>.

Table for page layout

Using tables to layout a page is strongly discouraged. Tables were not meant for it so user of a special software would get confused etc. Use rather CSS.

If you indeed want to use table and you want a fixed-size column left and occupy-the-rest column rigt you've got a problem. You can set td width=150px but there is no way to say to the other column "occupy all minus 150px". So I did this which seems to work under IE6 and Mozilla 1.5 (other browsers not tested):

  Before div....

Here is DIV with width:150px;

 ... after. (<P> inside the div must have margin:0 for Mozilla sets bottom+top to 1em)

Instead of DIV, which is somehow troublesome under NS4.x , we could use an image with width 150px (e.g. 1x150 transparent gif).

BookmarkLets

  1. Insert page's url at its beginning - useful befor saving the page so you know where it have been downloaded from; tested under IE6, Mozilla Firebird 0.7. Here we go:
    <A href='javascript:(function(){var b,u;b=document.getElementsByTagName("body")[0]; u=document.createTextNode("Saved from "+document.URL); if(b.hasChildNodes()){b.insertBefore(u,b.firstChild);}else{b.appendChild(u);}})();'>
    insert "saved from"</A>

Links

Content: cross-browser | netscape | microsoft | w3c & various | demos | articles | JavaScript | Discussion of Techniques
Jakub Holy 2002 AD