Using the cross-browser objects...A test page
February 1st 1998
To test the object, I created a page that has two DIV blocks. The first block contains a
form with buttons and is not to be included into the cross-browser object array, so the
ID attribute is not used:
<DIV style="position:absolute; left:10; top:10;
background-color: yellow;
layer-background-color: yellow; padding-top: 20px;
width: 500; height:150; clip: rect(0,500,150,0)">
<form action="">
<center>
<INPUT type = "button"
value = "Move Block Left"
onclick = "move_left(-1)">
<INPUT type = "button"
value = "Move Block right"
onclick = "move_left(1)"><p>
<INPUT type = "button"
value = "Move Block Up"
onclick ="move_up(-1)">
<INPUT type = "button"
value = "Move Block Down"
onclick = "move_up(1)"><p>
<INPUT type = "button"
value = "Hide Block"
onclick = "hide()">
<INPUT type = "button"
value = "Show Block"
onclick = "show()"
>
</center>
</FORM>
</DIV>
Each of the buttons within the form calls a function when the button is clicked. The
functions will alter the positioning and visibility of another DIV block, created
next.
The second DIV block contains a header and a paragraph and is positioned just below the
form:
<DIV id ="info"
style ="position:absolute;
left: 250;
top: 180;
width: 300;
height: 200;
background-color:red;
layer-background-color: red; clip: rect(0,300,200,0)"
>
<H1>Block with info</H1>
<p>
This is a block that contains two HTML elements:
a header and a paragraph
</p>
</DIV>
After the page contents have been created, the test functions are created.
I created a JavaScript block just below the two included source code files,
and coded each of the functions called from the form buttons.
The first function, move_left has one
parameter, which is a value that is used to determine the direction that the target DIV block
is moving. A negative value moves the element to the page's left, which becomes the reader's
right. A positive value moves the element to the page's right, which becomes the reader's left.
The same technique is used for the function which moves the block up and down the page,
move_top. The last two functions hide and show the element:
<SCRIPT LANGUAGE = "JAVASCRIPT">
<!--
// move element right and left
function move_left(sign) {
var lft = wdvlObjs["info"].objGetLeft();
lft+= 10 * sign;
wdvlObjs["info"].objSetLeft(lft);
}
// move element up and down
function move_up(sign) {
var top = wdvlObjs["info"].objGetTop();
top+= 10 * sign;
wdvlObjs["info"].objSetTop(top);
}
// hide element
function hide() {
wdvlObjs["info"].objHide();
}
// show element
function show() {
wdvlObjs["info"].objShow();
}
//-->
</script>
You can actually try this page yourself, using either
Navigator 4.x or Internet Explorer 4.x. Click the buttons and
move the target DIV block around the page, show it, or hide it.
Summary
This article created two simple cross-browser objects that hid the browser specific code
for several DHTML actions. The article also presented a simple test case using the objects.
What are the advantages to using cross-browser objects to compensate for browser differences?
- Cross-browser objects centralize all browser-specific code in one place,
simplifying maintenance.
- Cross-browser objects can be created once, and used many times.
- Cross-browser objects actually simplify code, making the code easy to read and modify.
- New cross-browser objects can be created for new versions of a browser, or even
new browsers. All that is required is creating a new CB-object and including the object within
the page. No application code changes need to be made. Based on this CB objects are highly extensible.
- Cross-browser objects are a natural split in the code, making it very simple for
one developer to work on the code for one browser, while someone else works on the code for
the other browser.
- Cross-browser objects can be used in higher level objects, performing more complex
actions and animations. This simplifies the code for the higher level objects.
- Cross-browser objects are easily transported, and easily incorporated into a new Web page.
In the next two articles, the cross-browser objects are used to create index card like
applications, using two very different techniques.
Resources
About the Author. Shelley Powers has authored and co-authored several books
on Web development and other technology,
including books on Dynamic HTML, ASP, LiveWire, Perl, CGI, Java, JavaScript, PowerBuilder 5, and
others. In addition she has been a contributor to several online magazines such as
NetscapeWorld (now Netscape Enterprise Developer), Web Review (http://www.webreview.com),
and Digital Cats (http://www.javacats.com/). Shelley has her own consulting company, located
in Vermont. Her web site can be seen at http://www.yasd.com, and
she can be reached at shelleyp@yasd.com.
|
