 |
 |
 |
|
|
|
|
|
|
|
|
|
|
|
|
||||||
| New |
| |
Revised | Hot | FAQ | Submit | M Zone | ||||||||||||||
|
||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||
| . | ||||||||||||||||||||||||||||||
|
|
Dynamic Drive DHTML Newsletter! August 17th, 1999 Issue #9 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 on the DHTML technology! ------------------Newsletter begins here----------- 1) New DHTML scripts added to Dynamic Drive 2) DHTML Tip #1: Conditional comments Part II 3) DHTML Tip #2: More on customizing the favorites icon in IE 5 4) Dynamic Drive Link-Back Sweepstakes- we have our first winner! ---------------------------------------------------- 1) New DHTML scripts added to Dynamic Drive -Conveyor Belt slideshow script (http://dynamicdrive.com/dynamicindex4/leftrightslide.htm) This cross browser image slideshow scrolls the containing images in a "conveyor belt" fashion. Images can be set to click through to various URLs, and when the mouse moves over the "belt", it pauses for the visitor to interact. Cool! -Tip of the day dialog (http://dynamicdrive.com/dynamicindex11/tod/tod.htm) Provide daily tidbits of interesting information to your visitors, in an even more interesting way, with this ultimate tip of the day script! -Title time script (http://dynamicdrive.com/dynamicindex6/titletime.htm) This script displays the live time in the title of your surfer's browser, updated every second. It does not erase the default title of the document, but rather, simply appends the time to it. Browsers other than IE 4+ simply won't see the time at all. -Static top menu bar (http://dynamicdrive.com/dynamicindex1/sm/index.htm) Constantin, a talented Dynamic Drive surfer, has just updated his awesome two-level menu bar script for cross browser functionality. Now BOTH IE 4+ and NS 4+ users can enjoy this useful and cool DHTML application! 2) DHTML Tip: Conditional comments Part II Continuing on with our discussion on conditional comments (Conditional comments Part I can be found here: http://dynamicdrive.com/newsletter/issue8.htm), we'll now discuss how to implement this great DHTML feature in NS 4+. Just to refresh our memories, conditional comments (CC) is supported by IE 5 and NS 4+, and is a cool feature that allows one to conditionally "comment out" actual portions of a webpage, so only certain browsers render and display them. While CC in IE 5 is well documented and publicized, and is known by a good number of DHTML developers and enthusiasts, it's another story for CC in NS 4. Trying to find any documentation on conditional comments for NS 4 is like trying to locate Waldo when he's in the mood for a game of hide and seek- next to impossible. We know Netscape has been caught up lately on it's Gecko project, but come on, how long does it take to document and publicize a bit such an important feature, so DHTML developers at least know of it's existence? In this tutorial, we thought we would help Netscape redeem itself, and discuss how to implement conditional comments in NS 4+. The basic syntax for CC in NS 4+ is as follows: <!--&{JAVASCRIPT EXPRESSION}; HTML codes here... --> Where "JAVASCRIPT EXPRESSION" is any expression that, if evaluated to true, causes NS to render the containing content. An example is worth a thousand words, so let's see the classic one of using CC to manipulate content so it's rendered and seen ONLY by NS 4 or above: <!--&{document.layers!=null}; You are using NS 4 or above! --> Copy the above chunk of code into your webpage, and view it using NS 4 and another browser. The former will display "You are using NS 4 or above", while all other browers won't even know of the content's existance. Note that "document.layers!=null" is the expression we used to detect NS 4+ browsers, since only these browsers support the document.layers object. Here's another example that is a little more discriminating, and displays the content inside the comment only for NS 4+ browsers that is run under the Win95 platform: <!--&{navigator.platform=="win95"}; You are using the Win 95 version of NS 4 or above! --> While in theory, you can embed any JavaScript expression for use as the "decision factor", we find that quirks in the conditional comments technology in NS 4 (what else is new?) causes some expressions to not work. Due to this, don't rely simply on your knowledge of scripting when implementing CC in NS 4- always test out the page in your browsers to see if everything's in order. Hopefully, the bugs will be fixed in Gecko (NS 5). You now know how to implement CC in both IE 5 and NS 4. Use it carefully, use it wisely, and it will prove itself to be very useful! 3) DHTML Tip #2: More on customizing the favorites icon in IE 5 Two issues back, we discussed in detail how to customize the favorites image icon in IE 5 (http://dynamicdrive.com/newsletter/issue7.htm). Many people have emailed us since asking for more information on accomplishing this on sites with no root access (without it's own domain name), such as http://www.geocities.com/SiliconValley/Orchard/1/. While we did touch base on this issue then, it obviously wasn't comprehensive enough for many. So, here we are, at it again. We asked John Krutsch, a long time friend of ours, and someone who actually has a site on Geocities, and successfully customized the icon image for his site, for a definitive answer on this matter. We got it. So, without further adieu, here's exactly how to customize the favorites icon in IE 5 for sites WITHOUT root access: 1. Create the icon image. The image should be 16x16 in pixel dimension, and use only a 16 color palette. 2. Save the image as a regular .gif file (instead of .ico). 3. Upload this image into the directory where you index page is located. 4. Add the code: <LINK REL="SHORTCUT ICON" href="http://www.geocities.com/Area51/Shuttle/1765/imageName.gif"> to your index page, where href points to the complete URL where the icon image is located. Note how the above steps differ from that for customizing the icon for sites with root access. First of all, you do NOT save the icon as "favicon.ico", but rather, simply as a normal gif file. Secondly, you need to add the extra <link> code to your index page. As mentioned, this technique is provided by John Krutsch. You can check out his site at http://www.geocities.com/Area51/Shuttle/1765 using IE 5 to see an example of icon customization at work. 4) Dynamic Drive Link-Back Sweepstakes- we have our first winner! A simple link back to Dynamic Drive is still one of the best ways to show your support for us, and helps Dynamic Drive grow in many ways. To thank and encourage our users to link back to Dynamic Drive on their sites, we've put together a special sweepstakes- the link-back sweepstakes! Simply provide a link back to Dynamic Drive somewhere on your site, fill out the entry form at http://dynamicdrive.com/winlink.htm, and you're instantly entered to win 1 of 3 retail copies of Allaire Homesite 4.0, one of the "absolute best HTML editors ever built." We've just picked out our first winner- Ryan Gravener of New Jersey. Congrats Ryan, the prize is being air shipped to you as we speak. For the rest of ya, what are you waiting for? Point your browser to http://dynamicdrive.com/winlink.htm, and enter yourself today for YOUR chance to win! This concludes the 9th edition of the Dynamic Drive DHTML newsletter. If you have a moment, please forward this newsletter to your friends and co-workers who may be interested in receiving it. See you again in issue 10! And while you're waiting, be sure to swing by http://wsabstract.com for the best stuff JavaScript. -----------------------------------------------------------------
Recommend Us! Legend Copyright © 1998-2004 Dynamic Drive. Please read Terms Of Use here before using any of the scripts. Partners: JavaScript Tutorials | JavaScript Reference |