|
|
Dynamic
Drive DHTML Newsletter!
January 26th, 2000 Issue #14
Dynamic Drive URL: http://dynamicdrive.com
Welcome to the Dynamicdrive.com monthly newsletter, the DHTML newsletter that keeps you
informed on the latest updates to Dynamicdrive.com, and news, tips, and tutorials on the
DHTML technology!
After taking a hiatus away from the newsletter, we're back with issue 14. Sorry for
getting a little lost while on the way back from vacation...
------------------Newsletter begins here-----------
1) New DHTML scripts added to Dynamic Drive
2) IE 5.5 beta- new goodies for developers!
3) Adding more than one JavaScript to a page (Guest Tutorial)
4) Sweepstakes- Win a copy of IE 5 Dynamic HTML Programmer's
Reference
----------------------------------------------------
1) New DHTML scripts added to Dynamic Drive
-Top Navigational Bar II [ALL]
http://dynamicdrive.com/dynamicindex1/topnavbar.htm
You've searched high and low for a navigational script as seen on the top pages of
Microsoft.com. Where else did you expect to find it but on Dynamic Drive? Thanks to Mike
Hall for his wonderful, cross browser creation!
-Flying Message II [IE5]
http://dynamicdrive.com/dynamicindex10/flymessage.htm
Embed any external HTML document onto the page and fly it across the screen, with this
cool DHTML script! Since the content to animate is a separate document, the job of
updating and modifying it becomes a breeze. Use this script to display site announcements,
news, featured content etc. The possibilities are endless...
-DHTML Adjust Bars [IE]
http://dynamicdrive.com/dynamicindex11/dhtmladjust.htm
This is a demonstration of using DHTML to create "adjust" bars, similar in
interface to a volume control bar of Windows. In the demo, the bars function as color
adjusters, though, through modification, can be set to do virtually anything.
-Preload Image (with progress bar) script [ALL] http://dynamicdrive.com/dynamicindex4/preloadit.htm
Use this script to not only preload any number of images before displaying them, but also,
get a live update on it's progress through an update bar. Once the preloadiing is
complete, the surfer is then directed to the page containing the preloaded images.
Superbly useful and cool a creation!
Be sure to check out http://dynamicdrive.com/new.htm
for the complete list of new scripts recently added to the archive.
2) IE 5.5 beta- new goodies for developers!
While Netscape is still trying to punch out it's first 5th generation browser, last month
(Dec, 1999), Microsoft debuted IE 5.5 beta, and with it, threw another punch in the battle
for browser supremacy. The newly updated browser (still in beta, we remind you), packs in
several new features for developers to get their hands dirty with, some of which we'll
talk about here:
I) Colored Scrollbars
A first in any browser, IE 5.5 allows you to customize the color of scrollbars in your
webpage! The color of any scrollbar, such as the default browser bar, form bars, and bars
generated using the overflow:scroll attribute of CSS, are all changeable. Many developers
have asked for such an ability when IE 5.0 was initially released, and it seems the guys
at Redmond are listening. Got a site on the environment? Give that scrollbar a greenish
color! Aviation? How does blue sound? Colored scrollbars bring to your site a more
integrated look/feel, and starting in IE 5.5, this is now possible.
Since the browser is still in beta, there's little point in going into detail the exact
syntax to accomplishing this (that's something reserve for the future). We will say,
however, that scrollbar coloring is done via CSS attributes. For example, the below CSS
declaration inside the BODY colors the browser's scrollbar green:
<body style="scrollbar-face-color: green">
II) "Zoom In" feature of elements
Are you ready for this? Most elements under IE 5.5 support "zooming in", which
allows you to enlarge or contract an element programmatically (either by % or scale, with
the rest of the page automatically reflowing to accommodate). Think of it as the magnify
feature commonly found in graphic programs, only that this magnification can be applied to
not just images, but paragraphs, tables, and any other "display" element. Take a
look at the following code, which expands an image upon mouse over in IE 5.5:
<IMG src="test.gif" onmouseover="this.style.zoom='300%'"
onmouseout="this.style.zoom='normal'">
100 bucks says this will be the next big "abused" feature among scripters.
III) Cross-frame menus
A third significant enhancement in IE 5.5 is the support for cross-frame menus. Thanks to
a new window method of IE 5.5 (window.createPopup()), your custom created menus can now
extend beyond one frame and into another. Developers have long whined about their DHTML
menus essentially becoming useless when used in a frame environment, due to the browser
clipping whatever ventures into the bordering frame. Now, using this method, problem
solved. Window.createPopup() can also be used to render rich dialog and window boxes.
Impressive...
IV) Enhanced CSS support- first-letter, first-line pseudo-element
We knew it was coming, just not this soon. IE 5.5 now supports two text pseudo attributes
of CSS2: first-letter and first line. As first mentioned in issue 11 of our newsletter
(http://dynamicdrive.com/newsletter/issue11.htm#3), these two attributes allow you to to
easily apply a "drop caps effect" to the first letter, and first sentence,
respectively, of a paragraph. We had thought it would at least be version 6 before IE
recognizes them, but obviously, things progressed a little faster then expected, and for
the better. Here's a Stylesheet using first-letter to fancy up the first letter of ALL
paragraphs on a page:
<style>
P:first-letter{
font-size: 200%;
color:blue;
float: left;
}
</style>
Something tells us this too will be very popular among webmasters...
V) Enhanced iframes
Final thing we'll mention here, in IE 5.5, the popular iframe element has been enhanced in
two significant ways: 1) the element now supports transparent background, so the main
document's background can be set to show through 2) z-indexing is now possible with the
element, allowing it to be hidden beneath other elements on the page.
As you can see, IE 5.5 beta brings to the table more than mere bug fixes and
"invisible" upgrades, but rather, some seriously fun and kick-ass features for
us developers to indulge our pathetic lives in. Expect to see scripts ultilizing these
great features on Dynamic Drive in the near future!
Note: For full technical information on IE 5.5, including download link, visit http://msdn.microsoft.com/downloads/webtechnology/ie/iepreview.asp
3) Guest Tutorial- Y2K and your scripts
George Chiang (http://wsabstract.com)
One of the top five scripting questions I get asked on a daily basis is not what functions
are, how to dynamically change the background color of a document, or why JavaScript is
the most popular language on the WWW. Oh no, these don't even come close to being on my
Top Five List. A question that does keep popping up in my mailbox, however, is how to add
multiple scripts- should they be scripts from our own archive
(http://wsabstract.com/cutpastejava.shtml) or otherwise- to one page. Many people complain
that, while a script works as it should alone on the page, when a second (or more) one is
added, all of a sudden, things take an unpleasant twist, and either one or both of the
scripts no longer work. In this feature article, I'll discuss and address this
"problem" now frustrating many JavaScript lovers.
First of all, there is no limit as to the number of scripts a page can contain (other than
the "physical" limit), just like there isn't any cap on how much text a page can
supposedly hold. Moving on...
The reason why two working scripts may mysteriously not work when put together is simple-
script conflict. You see, any duplication in variable declaration, function name, or
event-handler access in two scripts can cause at least one, if not both scripts to become
inoperative. However, while the possibilities are great, the chances are not. The fact is,
95% of script conflicts I've looked over are the result of one type of conflict-
duplication in event-handler access; in particular, the body ONLOAD event handler. Allow
me to explain just what that means, and how you can go about getting a cease-fire, so both
scripts co-exist merrily together on one page.
Many scripts are set to run after an "event" has occurred, such as the moving of
the mouse over a link or the completed loading of the document. The later is the most
common, and takes the following two forms:
I) <body ONLOAD="runscript()">
II) window.onload=runscript //appears inside the <script> tag
Just for ease of reference, let's call the first form "delta", and the second,
"beta" from hereon. If you see one of the above two lines in your page (where
"runscript" varies depending on the script), you know the containing script is
set to run after the document has loaded. If you have two or more scripts that EACH
contain either delta or beta, you have a conflict on your hand.
The way to go about solving this conflict is simple, though not quite the same to explain.
Essentially, what you want is to end up with only ONE delta for both scripts, with that
delta calling the two scripts. Let's list some possible scenarios now, and their
resolutions:
EXAMPLE #1:
SCRIPT 1: <body onload="dothis()">
SCRIPT 2: <body onload="dothat()">
RESOLUTION: <body onload="dothis();dothat()">
EXAMPLE #2:
SCRIPT 1: <body onload="dothis()">
SCRIPT 2: window.onload=dothat()
RESOLUTION: <body onload="dothis();dothat()">
EXAMPLE #3:
SCRIPT 1: window.onload=dothis
SCRIPT 2: window.onload=dothat
RESOLUTION: <body onload="dothis();dothat()">
As you can see, regardless of whether the two scripts contain "delta" or
"beta", the resolution is the same- remove BOTH lines, and call the scripts
directly within the <body> tag, each separated by a semicolon. If you wish to
combine three scripts, the procedure is the exact same.
By using the above technique, both scripts are called and executed, as opposed to just
one- or neither. In other words, conflict avoided! Check out http://www.wsabstract.com/javatutors/eventaction4.shtml
for some additional information on resolving script conflicts. Good luck!
------------------------------------
Visit http://wsabstract.com for JavaScript tutorials
and free scripts!
4) Sweepstakes- Win a copy of IE 5 Dynamic
HTML Programmer's Reference
In issue 13 of our newsletter (http://dynamicdrive.com/newsletter/issue13.htm), we
reviewed Wrox's popular DHTML book "IE 5 Dynamic HTML Programmer's Reference."
Well, in this issue, we're back with four copies of the book in our hands to give away
(better late than never). For any developer wanting to get the lowdown on the new DHTML
features of IE 5, this is the book to get...from us, that is! To enter for a chance to
win, simply do nothing. That's right, nothing. We set up this sweepstakes to show our
appreciation for your subscription to our newsletter, and all subscribers are instantly
entered. Just be sure to check out http://dynamicdrive.com/contest.htm
to view complete sweepstakes details and rules (and for those who are reading this as a
forward from a friend or co-worker, a chance to join in the fun). Good luck!
-Link to Dynamic Drive!
Show your support for Dynamic Drive by linking to us. Visit http://dynamicdrive.com/link.htm for cool
graphics to use. Thanks!
Click
here to read back issues of the Dynamic Drive newsletter
Recommend Us!
-If
you like Dynamic Drive, please recommend us to a friend...
Legend
All- Script works with Netscape 4 AND Internet Explorer
4+
NS- Indicates script works with Netscape 4
(NOT NS 6 yet)
IE- Indicates script works with Internet Explorer 4
and above
NS6!- Temporary
index set up on script category pages to indicate script works in NS6
|
