|
|
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:
<style>
P:first-letter{
font-size: 200%;
float: left;
}
</style>
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...
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
|
