home *** CD-ROM | disk | FTP | other *** search
/ Computer Music Magazine 2001 August / CM036-Computer_Music-Aug-01 / CM036-Computer_Music-Aug-01.iso / Samples / E-Lab / HTML_code / animate.js < prev    next >
Text File  |  2000-11-13  |  14KB  |  600 lines
  1. <!--
  2.     // See KB article about changing this dynamic HTML
  3.     dynamicanimAttr = "dynamicanimation"
  4.     animCancel = "skipanim"
  5.     fpanimationPrefix = "fpAnim"
  6.     animateElements = new Array()
  7.     currentElement = 0
  8.     speed = 1
  9.     stepsZoom = 8
  10.     stepsWord = 8
  11.     stepsFly = 17
  12.     stepsSpiral = 16
  13.     stepsSpiralWord = 19
  14.     stepsElastic = 32
  15.     steps = stepsZoom
  16.     step = 0
  17.     cornerPhase=0
  18.     outEffect=0
  19.     function remSuffix(str)
  20.     {
  21.         ind=str.indexOf("FP")
  22.         str = str.substring(0,ind)
  23.         return str
  24.     }
  25.     function dynAnimOut(el)
  26.     {
  27.         outEffect=1
  28.         dynAnimation(el)
  29.         outEffect=0
  30.     }
  31.     function dynAnimation(obj)
  32.     {
  33.         animateElements = new Array()
  34.         var ms = navigator.appVersion.indexOf("MSIE")
  35.         ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4)
  36.         if(!ie4)
  37.         {
  38.             if((navigator.appName == "Netscape") &&
  39.                 (parseInt(navigator.appVersion.substring(0, 1)) >= 4))
  40.                 doc_els=document.layers
  41.             else
  42.                 return
  43.         }
  44.         else
  45.             doc_els=document.all
  46.         if(outEffect && !ie4)
  47.             return
  48.         if(ie4)
  49.         {
  50.             for (index=document.all.length-1; index >= document.body.sourceIndex; index--)
  51.             {
  52.                 el = document.all[index]
  53.                 if(outEffect && el != obj)
  54.                     continue
  55.                 if(outEffect)
  56.                     animationId = el.id.substring(9,el.id.length)
  57.                 else
  58.                     animationId = el.id.substring(6,el.id.length)
  59.                 animation=remSuffix(animationId)
  60.                 if(null != animation)
  61.                 {
  62.                     altcnt=0
  63.                     if(    animation == "dropWord"                ||
  64.                         animation == "flyTopRightWord"            ||
  65.                         animation == "flyBottomRightWord"        ||
  66.                         animation == "waveWords"            ||
  67.                         animation == "hopWords")
  68.                     {
  69.                         ih = el.innerHTML
  70.                         outString = ""
  71.                         i1 = 0
  72.                         iend = ih.length
  73.                         while(true)
  74.                         {
  75.                             i2 = startWord(ih, i1)
  76.                             if(i2 == -1)
  77.                             i2 = iend
  78.                             outWord(ih, i1, i2, false, "", outEffect ? obj.id : el.id)
  79.                             if(i2 == iend)
  80.                                 break
  81.                             i1 = i2
  82.                             i2 = endWord(ih, i1)
  83.                             if(i2 == -1)
  84.                                 i2 = iend
  85.                             if (animation == "waveWords")
  86.                                 outWordAlt(ih, i1, i2, true, animation, altcnt)
  87.                             else
  88.                                 outWord(ih, i1, i2, true, (outEffect ? "Out" : "") + animation,
  89.                                     outEffect ?  obj.id : el.id)
  90.  
  91.                             if(i2 == iend)
  92.                                 break
  93.                             i1 = i2
  94.                             altcnt++
  95.                         }
  96.                         document.all[index].innerHTML = outString
  97.                         document.all[index].style.posLeft = 0
  98.                         document.all[index].setAttribute(animCancel, true)
  99.                         document.all[index].style.visibility="visible"
  100.                     }
  101.                 }
  102.             }
  103.         }
  104.         i = 0
  105.         for (index=0; index < doc_els.length; index++)
  106.         {
  107.             el = doc_els[index]
  108.             if(0 != el.id.indexOf(fpanimationPrefix))
  109.                 continue
  110.             if (ie4)
  111.             {
  112.                 elprops=el.style
  113.                 scrollOffsetTop=document.body.scrollTop
  114.                 docHeight=document.body.offsetHeight
  115.                 docWidth=document.body.offsetWidth
  116.                 elW=100
  117.                 elH=el.offsetHeight
  118.             }
  119.             else
  120.             {
  121.                 elprops=el
  122.                 scrollOffsetTop=window.pageYOffset
  123.                 docHeight=window.innerHeight
  124.                 docWidth=window.innerWidth
  125.                 elW=el.clip.width
  126.                 elH=el.clip.height
  127.             }
  128.             if(outEffect)
  129.                 animationId = el.id.substring(9,el.id.length)
  130.             else
  131.                 animationId = el.id.substring(6,el.id.length)
  132.             animation=remSuffix(animationId)
  133.             if(outEffect && (obj != el))
  134.             {
  135.                 if(el.SRCID != obj.id)
  136.                     continue
  137.             }
  138.             if (null != animation )
  139.             {
  140.                 if(ie4 && null!=el.getAttribute(animCancel, false))
  141.                     continue
  142.                 if(!ie4)
  143.                 {
  144.                     elprops.posLeft=elprops.left
  145.                     elprops.posTop=elprops.top
  146.                 }
  147.                 el.startL=offsetLeft(el)
  148.                 if(animation == "flyLeft")
  149.                 {
  150.                     elprops.posLeft = -offsetLeft(el)-elW
  151.                     elprops.posTop = 0
  152.                 }
  153.                 else if(animation == "flyRight" || animation=="elasticRight")
  154.                 {
  155.                     elprops.posLeft = -offsetLeft(el)+docWidth
  156.                     elprops.posTop = 0
  157.                 }
  158.                 else if(animation == "flyTop" || animation == "dropWord")
  159.                 {
  160.                     elprops.posLeft = 0
  161.                     elprops.posTop = scrollOffsetTop-offsetTop(el)-elH
  162.                 }
  163.                 else if(animation == "flyBottom" || animation == "elasticBottom")
  164.                 {
  165.                     elprops.posLeft = 0
  166.                     elprops.posTop = scrollOffsetTop-offsetTop(el)+docHeight 
  167.                 }
  168.                 else if(animation == "flyTopLeft")
  169.                 {
  170.                     elprops.posLeft = -offsetLeft(el)-elW
  171.                     elprops.posTop = scrollOffsetTop-offsetTop(el)-elH
  172.                 }
  173.                 else if(animation == "flyTopRight" || animation == "flyTopRightWord")
  174.                 {
  175.                     elprops.posLeft = -offsetLeft(el)+docWidth
  176.                     elprops.posTop = scrollOffsetTop-offsetTop(el)-elH
  177.                 }
  178.                 else if(animation == "flyCorner")
  179.                 {
  180.                     elprops.posLeft = docWidth*0.2-offsetLeft(el)
  181.                     
  182.                     elprops.posTop = scrollOffsetTop-offsetTop(el)+docHeight 
  183.                 }
  184.                 else if(animation == "flyBottomLeft")
  185.                 {
  186.                     elprops.posLeft = -offsetLeft(el)-elW
  187.                     elprops.posTop = scrollOffsetTop-offsetTop(el)+docHeight
  188.                 }
  189.                 else if(animation == "flyBottomRight" || animation == "flyBottomRightWord")
  190.                 {
  191.                     elprops.posLeft = -offsetLeft(el)+docWidth
  192.                     elprops.posTop = scrollOffsetTop-offsetTop(el)+docHeight
  193.                 }
  194.                 else if(animation == "spiral")
  195.                 {
  196.                     elprops.posLeft = -offsetLeft(el)+docWidth
  197.                     elprops.posTop = scrollOffsetTop-offsetTop(el)+docHeight
  198.                 }
  199.                 else if((animation.indexOf("waveWords") != -1) || animation=="hopWords")
  200.                 {
  201.                     if(i)
  202.                     {
  203.                         prevEl=animateElements[i-1]
  204.                         elprops.r = offsetLeft(el)-prevEl.startL
  205.                     }
  206.                     else
  207.                         elprops.r = offsetLeft(el)
  208.                 }
  209.                 else if(animation == "wipeLR" || animation == "wipeMID")
  210.                 {
  211.                     if (ie4 && elprops.position=="absolute")
  212.                     {
  213.                         el.sizeW=el.offsetWidth
  214.                         elprops.clip="rect(0 0 0 0)"
  215.                     }
  216.                     else if (!ie4)
  217.                     {
  218.                         el.sizeW=el.clip.width
  219.                         el.clip.width=0
  220.                     }
  221.                 }
  222.                 else if(animation == "wipeTB")
  223.                 {
  224.                     if (ie4 && elprops.position=="absolute")
  225.                     {
  226.                         elprops.clip="rect(0 0 0 0)"
  227.                     }
  228.                     else if(!ie4)
  229.                     {
  230.                         el.sizeH=el.clip.height
  231.                         el.clip.height=0
  232.                     }
  233.                 }
  234.                 else if(animation == "zoomIn")
  235.                 {
  236.                     elprops.posLeft = 0
  237.                     elprops.posTop = 0
  238.                 }
  239.                 else if(animation == "zoomOut")
  240.                 {
  241.                     elprops.posLeft = 0
  242.                     elprops.posTop = 0
  243.                 }
  244.                 else
  245.                 {
  246.                     continue
  247.                 }
  248.                 if(!outEffect)
  249.                 {
  250.                     el.initLeft = elprops.posLeft
  251.                     el.initTop  = elprops.posTop
  252.                     el.endLeft  = 0
  253.                     el.endTop   = 0
  254.                     elprops.visibility = "hidden"
  255.                 }
  256.                 else
  257.                 {
  258.                     el.initLeft = 0
  259.                     el.initTop  = 0
  260.                     el.endLeft = elprops.posLeft
  261.                     el.endTop  = elprops.posTop
  262.                     elprops.posTop = 0
  263.                     elprops.posLeft = 0
  264.                 }
  265.                 if(!ie4)
  266.                 {
  267.                     elprops.left=elprops.initLeft
  268.                     elprops.top =elprops.initTop
  269.                 }
  270.                 animateElements[i++] = el
  271.             }
  272.         }
  273.         if(animateElements.length > 0)
  274.         {
  275.             if(outEffect)
  276.                 window.setTimeout("animate(1);", speed, "Javascript")
  277.             else
  278.                 window.setTimeout("animate(0);", speed, "Javascript")
  279.         }
  280.     }
  281.     function offsetLeft(el)
  282.     {
  283.         if(ie4)
  284.         {
  285.             x = el.offsetLeft
  286.             for (e = el.offsetParent; e; e = e.offsetParent)
  287.                 x += e.offsetLeft
  288.             return x
  289.         }
  290.         else
  291.         {
  292.             x = el.pageX
  293.             return x
  294.         }
  295.     } 
  296.     function offsetTop(el)
  297.     {
  298.         if(ie4)
  299.         {
  300.             y = el.offsetTop
  301.             for (e = el.offsetParent; e; e = e.offsetParent)
  302.                 y += e.offsetTop;
  303.             return y
  304.         }
  305.         else
  306.         {
  307.             y = el.pageY
  308.             return y    
  309.         }
  310.     }
  311.     function startWord(ih, i)
  312.     {
  313.         for(tag = false; i < ih.length; i++)
  314.         {
  315.             c = ih.charAt(i)
  316.             if(c == '<')
  317.             {
  318.                 if(ih.substring(i+1, i+4) == "IMG")
  319.                 return i;
  320.                 tag = true
  321.             }
  322.             if(!tag)
  323.                 return i
  324.             if(c == '>')
  325.                 tag = false
  326.         }
  327.         return -1
  328.     }
  329.     function endWord(ih, i)
  330.     {
  331.         nonSpace = false
  332.         space = false
  333.         img = false
  334.         if(ih.charAt(i) == '<')
  335.         {
  336.             img = true
  337.             i++;
  338.         }
  339.         while(i < ih.length)
  340.         {
  341.             c = ih.charAt(i)
  342.             if(c != ' ')
  343.                 nonSpace = true
  344.             if(img && c == '>')
  345.                 img = false;
  346.             if(nonSpace && !img && c == ' ')
  347.                 space = true
  348.             if(c == '<')
  349.                 return i
  350.             if(space && c != ' ')
  351.                 return i
  352.             i++
  353.         }
  354.         return -1
  355.     }
  356.     function outWord(ih, i1, i2, dyn, anim, srcID)
  357.     {
  358.         if(dyn)
  359.             if(!