Porting BlendTrans functionality to other browsers

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • wheelhouse5
    New Member
    • Aug 2007
    • 2

    Porting BlendTrans functionality to other browsers

    I've got a file that uses the blendTrans style for a photo slideshow. It works fine with Internet Explorer, but not with any other browsers. What do I need??? Thanks, here's my slideshow code...

    [code=javascript]
    // Set the slideshow speed (in milliseconds)
    var SlideShowSpeed = 3000;

    // Set the duration of crossfade (in seconds)
    var CrossFadeDurati on = 3;

    function runSlideShow(){
    if (document.form1 .automatic.chec ked){
    if (currentIndx<im agesPreloaded.l ength){
    currentIndx=cur rentIndx
    }
    else {
    currentIndx=1
    }
    document.getEle mentById('photo ').style.filter ="blendTrans(du ration=2)";
    document.getEle mentById('photo ').style.filter ="blendTrans(du ration=CrossFad eDuration)";
    document.getEle mentById('photo ').filters.blen dTrans.Apply(); }
    document.getEle mentById('photo ').src = imagesPreloaded[currentIndx].src
    document.getEle mentById('numbe r').innerHTML=n umber[currentIndx];
    if (document.form1 .automatic.chec ked) document.getEle mentById('photo ').filters.blen dTrans.Play();
    currentIndx = currentIndx + 1;
    if (currentIndx > (imagesPreloade d.length)) currentIndx=1;
    var delay2 = setTimeout('run SlideShow()', SlideShowSpeed) ;
    }
    [/code]

    LINKS

    HTML: http://njn.net/edtest/photogalleryFADE.html
    EXTERNAL JS: http://njn.net/edtest/pgfade.js
  • pbmods
    Recognized Expert Expert
    • Apr 2007
    • 5821

    #2
    Heya, Wheelhouse. Welcome to TSDN!

    Please use CODE tags when posting source code. See the REPLY GUIDELINES on the right side of the page next time you post.

    Changed thread title to better describe the problem (did you know that threads whose titles contain phrases such as, 'need help' actually get FEWER responses?).

    Comment

    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032

      #3
      Originally posted by wheelhouse5
      I've got a file that uses the blendTrans style for a photo slideshow. It works fine with Internet Explorer, but not with any other browsers. What do I need???
      Use the opacity property. This will work in newer browsers. For older Mozilla browsers, you can use moz-opacity (mozOpacity in Javascript).

      Use setTimeout or setInterval to control the blending effect by either decreasing or increasing the opacity value.

      Comment

      • wheelhouse5
        New Member
        • Aug 2007
        • 2

        #4
        Does this mean I need all new coding for the slideshow, or is it something that can just be added. Sorry, I'm a Javascript novice!

        Comment

        • gits
          Recognized Expert Moderator Expert
          • May 2007
          • 5390

          #5
          hi ...

          yep ... unfortunately you have to test/find out what css is supported by all browsers you want to support ;) ... an other way would be to use a better effect-lib that does the job for you ... otherwise you have to adapt all for yourself ... but it is not that much ... usually you only need to add that other style-settings to the script since the different browsers only support one of them and ignore the others ... or you set the styles conditionally dependend to the browser, that would be much cleaner because you avoid parse errors due to the ignoring or better the none ignoring parsing of 'wrong' css-rules that might be implemented in the future

          kind regards

          Comment

          Working...