Dynamic Drive DHTML code library!

spacer.gif (807 bytes)


Search DD
Recommend DD
Help Forums New
DHTML books

Featured Script
Rollover buttons 

Turn regular form buttons into rollover menus with this script!


Free JavaScripts

Link to DD

Do you use scripts from Dynamic Drive? Please give something back by linking to us...
spacer.gif (807 bytes)

Dynamic Drive DHTML Newsletter!
September 23rd, 1999 Issue #11
Dynamic Drive URL: http://dynamicdrive.com

Welcome to the Dynamicdrive.com DHTML newsletter, the DHTML newsletter that keeps you informed on the latest updates to Dynamicdrive.com, and news, tips, and tutorials on the DHTML technology!

------------------Newsletter begins here-----------

1) New DHTML scripts added to Dynamic Drive
2) DHTML Book Review: Teach yourself Dynamic HTML in a week
(Publisher: Sams.net)

3) DHTML Tip- Adding Drop Caps to your text
4) DHTML news- Bugs in IE leave it vulnerable to hacker attacks


Before anything else, we'd like to apologize for the delay in getting this issue out to you. It's been a busy two weeks here at Dynamic Drive, and thus the delay.

1) New DHTML scripts added to Dynamic Drive

-Phong [IE] (http://dynamicdrive.com/dynamicindex12/pong/index.htm)

This script proves DHTML can be fun too. Created by Michael Sigle, it's a ping-pong game where you play against the computer. As impressive as the interface of this game is, what really caught us by surprise was the intelligence of the AI (artificial intelligence). Let's just say it's not going down without a tough fight. P.S: It is beatable, though, so don't even think about wiggling yourself out of this one.

-DHTML game- Brick [NS] (http://dynamicdrive.com/dynamicindex12/brick/index.htm)

Another great DHTML game, Bricks reminds us of an old computer game called "Jumping Jack." The idea is this: Keep a ball from falling to the ground while at the same time knock off all of the bricks from above. Sounds like fun! Oh yes, while you're busy bouncing off balls and dodging falling debris, try making this game cross-browser functional, and get a shot at winning a retail copy of Allaire Homesite 4.0. See script page for details...

-Sine Scrolling Text script [IE] (http://dynamicdrive.com/dynamicindex10/sinescroll.htm)

This script, besides being cool, proves why Trigonometry may still be worth learning (as your teacher had insisted all along). It's a sine scrolling text effect that animates a line of text according to the sine curve. Cool!

-Context menu script [IE 5] (http://dynamicdrive.com/dynamicindex1/contextmenu.htm)

A not so visible- but important- update has been added to our context menu script. The menu now intelligently repositions itself to fit within the viewable browser window when activated too close to any of the window's four corners.

2) DHTML Book Review: Teach yourself Dynamic HTML in a week (Publisher: Sams.net)

We are always fascinated with books that claim to be able to teach you something in a week (or less), especially when it comes to technology stuff. In a week? Come on! Dunno about you, but I can hardly get myself to finish reading a book in that time span, let alone learn what's in it! So we thought we'd put "Teach Yourself Dynamic HTML in a week" to the test (for a week, of course), and see what comes out of it. Well, it turned out that the good old saying "If it sounds too good to be true, it probably is" most definitely is true in this case, if not in all.

Like any "in-a-week" book, "Teach Yourself Dynamic HTML In A Week" is divided into 7 sections, one to be read a day. Right from day one, you know this is not going to be a good week. The author hastily explains what DHTML is, then wonders off to discuss other technologies such as CGI and Java. When a book starts losing focus this early on in it's teaching, that can only mean more trouble ahead.

As the book progresses, you realize two things- 1) The author is at most a mediocre JavaScript programmer who could hardly program in DHTML himself, let alone teach it, 2) For what he is able to teach, the author conveys it in such a poor and confusing manner, with even worse supporting examples, that you probably won't be able to grasp it anyways. The book's amateur scripting techniques, along with blatant disregard for cross-browser functionality and repetitive, redundant examples make you feel as if you're reading a book your 2-year old wrote. In a nutshell, "Teach Yourself DHTML In A Week" is a 100 page HTML (NOT DHTML) reference padded with 450 pages of gibberish.

Rarely is a book worth less than the paper it's printed on. I believe we have a winner in this case, though. If you haven't yet purchased this book- do us all DHTML programmers a favor, and don't. You most certainly won't learn DHTML here, although you might pick up a few things about Squids along the way (don't ask).

The only place on the net we could find any technical specs for this book is actually on Amazon. Visit http://www.amazon.com/exec/obidos/ASIN/1575213354/002-1458510-1382809

3) DHTML Tip- Adding Drop Caps to your text

Print documents have long enjoyed considerably more freedom over it's web counterpart when it comes to the styling and formatting of content. Among those luxuries is the ability to "drop caps" the first letter of the paragraph (so it's larger, and fits snuggly into the rest of the text). It's a simple effect, yet can dramatically spice up an otherwise dull chunk of text.

Up until this point, the only thing web developers could do to mimic this effect is by creating an alphabet image in place of the first letter, and have it aligned left. This can be a tedious and often unpractical procedure, especially if you wish to apply drop caps to multiple paragraphs. In this DHTML Tip segment, we'll show you two CSS (Cascading Style Sheets) techniques you can use to create drop caps, in place of those bulky images. Before you jump up and down with glee, however, it's important to mention that both techniques currently do not work cross-browser. The idea here is to simply learn them, and wait for the day when the next version of both browsers release (IE 6, NS 5), which supposedly will embrace everything discussed below.

The "official" way to create drop caps, as proposed by the WWW Consortium's CSS2 specification, is to use the following style declaration in the <head> section of your page:

font-size: 200%;
float: left;

The above is called a puesdo-class, a new type of class which, in this case, changes the first letter of a paragraph to 2 times the size of the rest, and floats it to the left. In other words, a drop caps effect. As elegant and simplistic as this technique is, there's just one very small problem (minute, actually). No major browsers currently support it! CSS2 is the latest version of CSS, and apparently, not even IE 5 got a chance to add support for all of its' features- including the P:first-letter style- when it was released. At the moment, only a select few, obscure browsers such as Opera 3.6 (http://www.opera.com/) support this particular style declaration.

So, now what? We get the feeling that if we were to simply leave the matter at that, we'd probably get a few hundred screaming emails from you guys. "Show me something I can use right NOW, not when my grandson is born!" might be among the protests. So, out of coercion, allow us to present another drop caps technique, which, while not perfect, DOES work in IE 4 and above (and simply ignored by all other browsers). It involves wrapping the first letter of the paragraph inside a SPAN tag, and setting the alignment of the SPAN to FLOAT. Take a look at the following example:

<span style="font-size:200%;float:left">O</span>nce a upon a time....

The key here is the "float:left" style setting inside the SPAN tag, which causes the "O" to be taken out of context, and other content to wrap around it. The effect is essentially the same as the Drop Caps effect.

We've prepared a few live examples on drop caps online. Use them to help inspire yourself to creating and implementing your own "fancy letter" effect! http://dynamicdrive.com/newsletter/example_issue11.htm

4) DHTML news- Bugs in IE leave it vulnerable to hacker attacks

With all the good things that have been said about Microsoft's Internet Explorer 4 and 5, it's time well-due for a little IE bashing! The popular browser has been criticized by some as being less secure than it's arch rival, Netscape, mainly due to it's support for one key technology- Active X. While Active X does have it's own unique charm, what it doesn't have is a sandbox, which Java does. Without switching over to geek mode, this essentially means IE (with Active X turned on) is more vulnerable to invasions than NS. Recently, two IE-specific bugs were uncovered that could allow hackers potential entrance and access to your entire computer, through the Active X component. Guess no browser is perfect. So what can you do to protect yourself from these security breaches? Simple. Microsoft, as unresponsive as they could be, usually do come up with patches almost immediately when a bug is identified in one of their products. The trick is to know where to find them. Many people are unaware that Microsoft operates a site that provides free tune-up on many of their products-including IE. The service automatically determines what needs to be updated, and downloads/installs the update to your computer. Quite neat, actually. Visit http://windowsupdate.microsoft.com for the free tune-up (and to patch up those IE bugs!).

-Dynamic Drive is searchable!

Can't find that particular script you saw two weeks ago on our site? Point your browser to our internal search engine, at http://dynamicdrive.com/search.htm, and fret no more!

-Tips for adding more than one DHTML script to a page

Theoretically, you can have as many DHTML scripts on one page as you like. So why is it that so often, two fully functional scripts suddenly do not work anymore when thrown together on one page? The reason is simple- script conflict. Check out a great article on the WWW that explains exactly what script conflicts are, and how to resolve them: http://wsabstract.com/javatutors/multiplejava.shtml

- Give something back...link to Dynamicdrive.com!

As a user of Dynamic Drive, the most important thing you can do for us is probably to help us grow by letting others know about DD. One simple way to do that is by linking to us on your web site. Simply go to http://dynamicdrive.com/link.htm for attractive graphics to use. And thanks in advanced for your show of support!

Recommend Us!
-If you like Dynamic Drive, please recommend us to a friend...

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

Copyright 1998-2004 Dynamic Drive. Please read Terms Of Use here before using any of the scripts.
Partners: JavaScript Tutorials | JavaScript Reference