home *** CD-ROM | disk | FTP | other *** search
/ Huis - Ons wonderlike wereld / WWE.BIN / animate.js < prev    next >
Text File  |  2004-02-29  |  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(!outEffect)
  360.                 outString += "<SPAN ID=\"" +  fpanimationPrefix + anim + "FP\" style=\"position: relative; visibility: hidden;\">"
  361.             else
  362.                 outString += "<SPAN SRCID=\"" + srcID + "\"ID=\"" +  fpanimationPrefix + anim + "FP\" style=\"position: relative;\">"
  363.         outString += ih.substring(i1, i2)
  364.         if(dyn)
  365.             outString += "</SPAN>"
  366.     }
  367.     function outWordAlt(ih, i1, i2, dyn, anim, altcnt)
  368.     {
  369.         if(dyn)
  370.         {
  371.             if(altcnt%2)
  372.                 outString += "<SPAN ID=\"" +  fpanimationPrefix + anim + "LFP\" style=\"position: relative;  visibility: hidden;\">"
  373.             else
  374.                 outString += "<SPAN ID=\"" +  fpanimationPrefix + anim + "RFP\" style=\"position: relative;  visibility: hidden;\">"
  375.         }
  376.             
  377.         outString += ih.substring(i1, i2)
  378.         if(dyn)
  379.             outString += "</SPAN>"
  380.     }
  381.     function animate(animOut)
  382.     {
  383.         el = animateElements[currentElement]
  384.         if(animOut)
  385.             animationId = el.id.substring(9,el.id.length);
  386.         else
  387.             animationId = el.id.substring(6,el.id.length);
  388.         animation=remSuffix(animationId)
  389.         if (ie4)
  390.             elprops=el.style
  391.         else
  392.             elprops=el
  393.  
  394.         if(!step && !animOut)
  395.             elprops.visibility="visible"
  396.         step++
  397.         if(animation == "spiral")
  398.         {
  399.             steps = stepsSpiral
  400.             v = step/steps
  401.             rf = 1.0 - v
  402.             t = v * 2.0*Math.PI
  403.             rx = Math.max(Math.abs(el.initLeft), 200)
  404.             ry = Math.max(Math.abs(el.initTop),  200)
  405.             elprops.posLeft = Math.ceil(-rf*Math.cos(t)*rx)
  406.             elprops.posTop  = Math.ceil(-rf*Math.sin(t)*ry)
  407.         }
  408.         else if(animation == "waveWordsL" || animation=="hopWords" || animation == "waveWords")
  409.         {
  410.             steps = stepsSpiralWord
  411.             v = step/steps
  412.             rf = (1.0 - v)
  413.             t = v * 1.0*Math.PI
  414.             elprops.posLeft = Math.ceil(-rf*Math.cos(t)*elprops.r)
  415.             elprops.posTop  = Math.ceil(-rf*Math.sin(t)*elprops.r)
  416.         }
  417.         else if(animation == "waveWordsR")
  418.         {
  419.             steps = stepsSpiralWord
  420.             v = step/steps
  421.             rf = (1.0 - v)
  422.             t = v * 1.0*Math.PI
  423.             elprops.posLeft = Math.ceil(-rf*Math.cos(t)*elprops.r)
  424.             elprops.posTop  = Math.ceil( rf*Math.sin(t)*elprops.r)
  425.         }
  426.         else if(animation == "zoomIn")
  427.         {
  428.             steps = stepsZoom
  429.             elprops.fontSize = Math.ceil(50+50*step/steps) + "%"
  430.             elprops.posLeft = 0
  431.         }
  432.         else if(animation == "zoomOut")
  433.         {
  434.             steps = stepsZoom
  435.             fontSz=Math.ceil(100+200*(steps-step)/steps) + "%"
  436.             elprops.fontSize = fontSz
  437.             elprops.posLeft = 0
  438.         }
  439.         else if(animation == "elasticRight")
  440.         {
  441.             steps = stepsElastic
  442.             v = step/steps
  443.             rf=Math.exp(-v*7)
  444.             t = v * 1.5*Math.PI
  445.             rx =Math.abs(el.initLeft)
  446.             elprops.posLeft = rf*Math.cos(t)*rx
  447.             elprops.posTop  = 0
  448.         }
  449.         else if(animation == "elasticBottom")
  450.         {
  451.             steps = stepsElastic
  452.             v = step/steps
  453.             rf=Math.exp(-v*7)
  454.             t = v * 2.5*Math.PI
  455.             ry =Math.abs(el.initTop)
  456.             elprops.posLeft = 0
  457.             elprops.posTop  = rf*Math.cos(t)*ry
  458.         }
  459.         else if(animation == "wipeLR")
  460.         {
  461.             steps = stepsElastic
  462.             if(ie4 && elprops.position=="absolute")
  463.                 elprops.clip = "rect(0 "+ step/steps*100 +"% 100% 0)"
  464.             else if (!ie4)
  465.             {
  466.                 elprops.clip.right=step/steps*el.sizeW
  467.             }
  468.         }
  469.         else if(animation == "wipeTB")
  470.         {
  471.             steps = stepsElastic
  472.             if(ie4 && elprops.position=="absolute")
  473.                 elprops.clip = "rect(0 100% "+step/steps*el.offsetHeight+"px 0)"
  474.             else
  475.                 elprops.clip.bottom=step/steps*el.sizeH
  476.         }
  477.         else if(animation == "wipeMID")
  478.         {
  479.             steps = stepsElastic
  480.             if(ie4 && elprops.position=="absolute")
  481.             {
  482.                 elprops.clip = "rect(0 "+el.sizeW/2*(1+step/steps)+"px 100% "+el.sizeW/2*(1-step/steps)+")"
  483.             }
  484.             else if(!ie4)
  485.             {
  486.                 elprops.clip.right=el.sizeW/2*(1+step/steps)
  487.                 elprops.clip.left=el.sizeW/2*(1-step/steps)
  488.             }
  489.         }
  490.         else if(animation == "flyCorner")
  491.         {
  492.             if(!cornerPhase)
  493.             {
  494.                 steps = stepsElastic/2
  495.                 v = step/steps
  496.                 rf=Math.exp(-v*7)
  497.                 t = v * 2.5*Math.PI
  498.                 ry =Math.abs(el.initTop)
  499.                 elprops.posTop  = rf*Math.cos(t)*ry
  500.             }
  501.             else
  502.             {
  503.                 steps = stepsFly
  504.                 dl = el.initLeft / steps
  505.                 elprops.posLeft = elprops.posLeft - dl
  506.                 elprops.posTop = 0
  507.             }
  508.         }
  509.         else
  510.         {
  511.             steps = stepsFly
  512.             if(animation == "dropWord" || animation == "flyTopRightWord" || animation == "flyBottomRightWord")
  513.                 steps = stepsWord
  514.             dl = (el.endLeft - el.initLeft) / steps
  515.             dt = (el.endTop  - el.initTop)  / steps
  516.             elprops.posLeft = elprops.posLeft + dl
  517.             elprops.posTop = elprops.posTop + dt
  518.         }
  519.         if (step >= steps) 
  520.         {
  521.             if(!(animation == "wipeLR"    ||
  522.                 animation  == "wipeTB"    ||
  523.                 animation  == "wipeMID"    ||
  524.                 (animation == "flyCorner" && !cornerPhase)))
  525.             {
  526.                 elprops.posLeft = el.endLeft
  527.                 elprops.posTop = el.endTop
  528.             }
  529.             if(animOut)
  530.             {
  531.                 elprops.visibility="hidden"
  532.             }
  533.  
  534.             step = 0
  535.             if(animation=="flyCorner" && !cornerPhase)
  536.                 cornerPhase=1
  537.             else
  538.             {
  539.                 cornerPhase=0
  540.                 currentElement++
  541.             }
  542.  
  543.         }
  544.         if(!ie4)
  545.         {
  546.             elprops.left=elprops.posLeft
  547.             elprops.top =elprops.posTop
  548.         }
  549.         if(currentElement < animateElements.length)
  550.         {
  551.             if(animOut)
  552.                 window.setTimeout("animate(1);", speed, "Javascript")
  553.             else
  554.                 window.setTimeout("animate(0);", speed, "Javascript")
  555.         }
  556.         else
  557.             currentElement=0
  558.     }
  559.     function rollIn(el)
  560.     {
  561.         var ms = navigator.appVersion.indexOf("MSIE")
  562.         ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4)
  563.         if(ie4)
  564.         {
  565.             el.initstyle=el.style.cssText;el.style.cssText=el.fprolloverstyle
  566.         }
  567.     }
  568.     function rollOut(el)
  569.     {
  570.         var ms = navigator.appVersion.indexOf("MSIE")
  571.         ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4)
  572.         if(ie4)
  573.         {
  574.             el.style.cssText=el.initstyle
  575.         }
  576.     }
  577.     function clickSwapStyle(el)
  578.     {
  579.         var ms = navigator.appVersion.indexOf("MSIE")
  580.         ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4)
  581.         if(ie4)
  582.         {
  583.             ts=el.style.cssText
  584.             el.style.cssText=el.fprolloverstyle
  585.             el.fprolloverstyle=ts
  586.         }
  587.     }
  588.     function clickSwapImg(el)
  589.     {
  590.         if(document.all || document.layers)
  591.         {
  592.             ts=el.src
  593.             el.src=el.lowsrc
  594.             el.lowsrc=ts
  595.         }
  596.     }
  597. //-->
  598.  
  599.  
  600.