JavaScript
  Home arrow JavaScript arrow Page 4 - Create Your Own DHTML Slideshow With a Fad...
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Mobile Linux 
App Generation ROI 
IBM® developerWorks 
Sun Developer Network 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
JAVASCRIPT

Create Your Own DHTML Slideshow With a Fading Effect
By: Martin Tsachev
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 4 stars4 stars4 stars4 stars4 stars / 34
    2002-12-14

    Table of Contents:
  • Create Your Own DHTML Slideshow With a Fading Effect
  • The Script
  • The Slideshow Script
  • The Slideshow Script (contd.)
  • Conclusion

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    ADVERTISEMENT


    Create Your Own DHTML Slideshow With a Fading Effect - The Slideshow Script (contd.)


    (Page 4 of 5 )

    When all browser and DHTML compatibility calculations have been made, we actually apply the settings to the layer. In NN 4 it’s through the clip.top/right/bottom/left properties and we also set it's visibility to show (Netscape's proprietary value).

    After that, we have finished with the NN 4 code and we check for DOM 1 or IE 4 support. The task is easier here, because no matter what clipping is set, we can always get the image height/width. We then make the same test for fade in or fade out, and at the end of the test we apply the settings as a string to the clip property.

    I made my first version of this slideshow with the units specified as pixels (px), but I didn't like it at all because I couldn't get it to work in NN 4 and Opera 5. I then found this layer scroll script and I got the feeling for the different browsers compatability and decided to make a version in which the fading can be switched off.

    function fadeLayer(layername, amt, tim) {
    if (!DHTML) return;
    thelayer = new getObj( layername );
    if (!thelayer) return;
    amount = amt;
    theTime = tim;
    realFade();
    }

    function stopFade() {
    if (time) clearTimeout(time);
    }


    The fadeLayer function is used to set the global variables to the parameters passed to it and then invoke the realFade function to do the hard work.

    The only thing that the stopFade function does is check the timer ID and if the timer is running, it stops it.

    function realFade() {
    clipTop += amount;
    clipBottom -= amount;
    if (clipTop < 0 || clipBottom > lyrheight || clipTop > middle) {
    if ( clipTop > middle ) thelayer.style.visibility = 'hidden';
    if ( firstFade ) nextFade();
    return;
    }
    if (document.getElementById || document.all) {
    clipstring = 'rect('+clipTop+' '+clipWidth+' '+clipBottom+' 0)'
    thelayer.style.clip = clipstring;
    } else
    if (document.layers) {
    thelayer.style.clip.top = clipTop;
    thelayer.style.clip.bottom = clipBottom;
    }
    time = setTimeout('realFade()',theTime);
    }

    var firstFade = true;
    function nextFade() {
    firstFade = false;
    prepLyr(slides[curImg], false);
    fadeLayer(slides[curImg], -10, 50);
    }


    The realFade function adds the amount to the clipTop and subtracts it from the clipBottom. We then check whether the clipping is off the image. If it is, then we check whether it is faded out. If so, then we hide the slide.

    If the firstFade variable is true, then we execute the nextFade function, which fades in the next slide. In both case of fading we end the function, preventing the setTimeout invocation which would result in an infinite loop. The next thing to do is to actually apply the calculated clipping area to the layer. There are differences in the DOM 1 / IE 4 way and the NN 4 (described above in the prepLyr function explanation). After this, we set a timeout that executes the same function again.

    The nextFade function then sets the fisrtFade variable to false, which prevents looping and invokes the prepLyr function with parameters for the next slide and false to initialize the image to fade in (clipping top and bottom to the middle). The realFade function is then invoked, passing it the current slide and a change amount of -10 pixels, which means that the clipping area should get bigger. We also pass a delay of 50 milliseconds to widen the area.

    More JavaScript Articles
    More By Martin Tsachev


     

    JAVASCRIPT ARTICLES

    - More on JavaScript Array Objects
    - Methods of the DOM Location Object
    - The DOM Location Object Properties
    - Handling Remote Files with JavaScript Click ...
    - Using Click Interceptions with a Database-Dr...
    - Using JavaScript Click Interceptions in an I...
    - Using Click Interceptions with JavaScript
    - QuickSort in Action
    - Quicksort
    - Using Mod_Security to Protect Your Server
    - Detecting and Countering Server Intrusions
    - Securing Your Web Server
    - Building a Secure Web Server
    - Protecting the Server
    - Book Review: Learning the Yahoo! User Interf...


     
    Best Practices for Windows Vista Migration Presentation
    Dell and Microsoft recently held a series of face-to-face seminars entitled, &qu....

     
    Creating a Culture for Code Reuse
    If you oversee development teams you know that like it or not proprietary and ex....

     
    Keys to Web Application Acceleration: Advances in Delivery Systems
    Accelerate Web apps by up to 5x. Ensure significantly faster access to the Web a....

     
    Optimizing Application Monitoring
    Tired of finding out from your customers that you're offline? This white paper e....

     
    Solaris to Solaris Migration -- Migrating applications from Sun SPARC to Dell PowerEdge R900
    This comprehensive Migration Guide reviews the approach that Principled Technolo....

     





    © 2003-2009 by Developer Shed. All rights reserved. DS Cluster 5 hosted by Hostway
    Stay green...Green IT