dhtml
dhtml
(OP)
Hi,
I really need some help with this little problem. I used FP2000 to create some DHTML effects and they work perfectly fine on IE but don't show at all with Mozilla Firefox. Any help please.
very much appreciated.
Thanks,
JJ
RE: dhtml
Also, is the generated code in vbscript or javascript. If it is vbscript, it will only work in IE. If it is javascript, it should work in both.
RE: dhtml
it is javascript. here is the code in my animate.js:
<!--
// See KB article about changing this dynamic HTML
dynamicanimAttr = "dynamicanimation"
animCancel = "skipanim"
fpanimationPrefix = "fpAnim"
animateElements = new Array()
currentElement = 0
speed = 1
stepsZoom = 8
stepsWord = 8
stepsFly = 17
stepsSpiral = 16
stepsSpiralWord = 19
stepsElastic = 32
steps = stepsZoom
step = 0
cornerPhase=0
outEffect=0
function remSuffix(str)
{
ind=str.indexOf("FP")
str = str.substring(0,ind)
return str
}
function dynAnimOut(el)
{
outEffect=1
dynAnimation(el)
outEffect=0
}
function dynAnimation(obj)
{
animateElements = new Array()
var ms = navigator.appVersion.indexOf("MSIE")
ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4)
if(!ie4)
{
if((navigator.appName == "Netscape") &&
(parseInt(navigator.appVersion.substring(0, 1)) >= 4))
doc_els=document.layers
else
return
}
else
doc_els=document.all
if(outEffect && !ie4)
return
if(ie4)
{
for (index=document.all.length-1; index >= document.body.sourceIndex; index--)
{
el = document.all[index]
if(outEffect && el != obj)
continue
if(outEffect)
animationId = el.id.substring(9,el.id.length)
else
animationId = el.id.substring(6,el.id.length)
animation=remSuffix(animationId)
if(null != animation)
{
altcnt=0
if( animation == "dropWord" ||
animation == "flyTopRightWord" ||
animation == "flyBottomRightWord" ||
animation == "waveWords" ||
animation == "hopWords")
{
ih = el.innerHTML
outString = ""
i1 = 0
iend = ih.length
while(true)
{
i2 = startWord(ih, i1)
if(i2 == -1)
i2 = iend
outWord(ih, i1, i2, false, "", outEffect ? obj.id : el.id)
if(i2 == iend)
break
i1 = i2
i2 = endWord(ih, i1)
if(i2 == -1)
i2 = iend
if (animation == "waveWords")
outWordAlt(ih, i1, i2, true, animation, altcnt)
else
outWord(ih, i1, i2, true, (outEffect ? "Out" : "") + animation,
outEffect ? obj.id : el.id)
if(i2 == iend)
break
i1 = i2
altcnt++
}
document.all[index].innerHTML = outString
document.all[index].style.posLeft = 0
document.all[index].setAttribute(animCancel, true)
document.all[index].style.visibility="visible"
}
}
}
}
i = 0
for (index=0; index < doc_els.length; index++)
{
el = doc_els[index]
if(0 != el.id.indexOf(fpanimationPrefix))
continue
if (ie4)
{
elprops=el.style
scrollOffsetTop=document.body.scrollTop
docHeight=document.body.offsetHeight
docWidth=document.body.offsetWidth
elW=100
elH=el.offsetHeight
}
else
{
elprops=el
scrollOffsetTop=window.pageYOffset
docHeight=window.innerHeight
docWidth=window.innerWidth
elW=el.clip.width
elH=el.clip.height
}
if(outEffect)
animationId = el.id.substring(9,el.id.length)
else
animationId = el.id.substring(6,el.id.length)
animation=remSuffix(animationId)
if(outEffect && (obj != el))
{
if(el.SRCID != obj.id)
continue
}
if (null != animation )
{
if(ie4 && null!=el.getAttribute(animCancel, false))
continue
if(!ie4)
{
elprops.posLeft=elprops.left
elprops.posTop=elprops.top
}
el.startL=offsetLeft(el)
if(animation == "flyLeft")
{
elprops.posLeft = -offsetLeft(el)-elW
elprops.posTop = 0
}
else if(animation == "flyRight" || animation=="elasticRight")
{
elprops.posLeft = -offsetLeft(el)+docWidth
elprops.posTop = 0
}
else if(animation == "flyTop" || animation == "dropWord")
{
elprops.posLeft = 0
elprops.posTop = scrollOffsetTop-offsetTop(el)-elH
}
else if(animation == "flyBottom" || animation == "elasticBottom")
{
elprops.posLeft = 0
elprops.posTop = scrollOffsetTop-offsetTop(el)+docHeight
}
else if(animation == "flyTopLeft")
{
elprops.posLeft = -offsetLeft(el)-elW
elprops.posTop = scrollOffsetTop-offsetTop(el)-elH
}
else if(animation == "flyTopRight" || animation == "flyTopRightWord")
{
elprops.posLeft = -offsetLeft(el)+docWidth
elprops.posTop = scrollOffsetTop-offsetTop(el)-elH
}
else if(animation == "flyCorner")
{
elprops.posLeft = docWidth*0.2-offsetLeft(el)
elprops.posTop = scrollOffsetTop-offsetTop(el)+docHeight
}
else if(animation == "flyBottomLeft")
{
elprops.posLeft = -offsetLeft(el)-elW
elprops.posTop = scrollOffsetTop-offsetTop(el)+docHeight
}
else if(animation == "flyBottomRight" || animation == "flyBottomRightWord")
{
elprops.posLeft = -offsetLeft(el)+docWidth
elprops.posTop = scrollOffsetTop-offsetTop(el)+docHeight
}
else if(animation == "spiral")
{
elprops.posLeft = -offsetLeft(el)+docWidth
elprops.posTop = scrollOffsetTop-offsetTop(el)+docHeight
}
else if((animation.indexOf("waveWords") != -1) || animation=="hopWords")
{
if(i)
{
prevEl=animateElements[i-1]
elprops.r = offsetLeft(el)-prevEl.startL
}
else
elprops.r = offsetLeft(el)
}
else if(animation == "wipeLR" || animation == "wipeMID")
{
if (ie4 && elprops.position=="absolute")
{
el.sizeW=el.offsetWidth
elprops.clip="rect(0 0 0 0)"
}
else if (!ie4)
{
el.sizeW=el.clip.width
el.clip.width=0
}
}
else if(animation == "wipeTB")
{
if (ie4 && elprops.position=="absolute")
{
elprops.clip="rect(0 0 0 0)"
}
else if(!ie4)
{
el.sizeH=el.clip.height
el.clip.height=0
}
}
else if(animation == "zoomIn")
{
elprops.posLeft = 0
elprops.posTop = 0
}
else if(animation == "zoomOut")
{
elprops.posLeft = 0
elprops.posTop = 0
}
else
{
continue
}
if(!outEffect)
{
el.initLeft = elprops.posLeft
el.initTop = elprops.posTop
el.endLeft = 0
el.endTop = 0
elprops.visibility = "hidden"
}
else
{
el.initLeft = 0
el.initTop = 0
el.endLeft = elprops.posLeft
el.endTop = elprops.posTop
elprops.posTop = 0
elprops.posLeft = 0
}
if(!ie4)
{
elprops.left=elprops.initLeft
elprops.top =elprops.initTop
}
animateElements[i++] = el
}
}
if(animateElements.length > 0)
{
if(outEffect)
window.setTimeout("animate(1);", speed, "Javascript")
else
window.setTimeout("animate(0);", speed, "Javascript")
}
}
function offsetLeft(el)
{
if(ie4)
{
x = el.offsetLeft
for (e = el.offsetParent; e; e = e.offsetParent)
x += e.offsetLeft
return x
}
else
{
x = el.pageX
return x
}
}
function offsetTop(el)
{
if(ie4)
{
y = el.offsetTop
for (e = el.offsetParent; e; e = e.offsetParent)
y += e.offsetTop;
return y
}
else
{
y = el.pageY
return y
}
}
function startWord(ih, i)
{
for(tag = false; i < ih.length; i++)
{
c = ih.charAt(i)
if(c == '<')
{
if(ih.substring(i+1, i+4) == "IMG")
return i;
tag = true
}
if(!tag)
return i
if(c == '>')
tag = false
}
return -1
}
function endWord(ih, i)
{
nonSpace = false
space = false
img = false
if(ih.charAt(i) == '<')
{
img = true
i++;
}
while(i < ih.length)
{
c = ih.charAt(i)
if(c != ' ')
nonSpace = true
if(img && c == '>')
img = false;
if(nonSpace && !img && c == ' ')
space = true
if(c == '<')
return i
if(space && c != ' ')
return i
i++
}
return -1
}
function outWord(ih, i1, i2, dyn, anim, srcID)
{
if(dyn)
if(!outEffect)
outString += "<SPAN ID=\"" + fpanimationPrefix + anim + "FP\" style=\"position: relative; visibility: hidden;\">"
else
outString += "<SPAN SRCID=\"" + srcID + "\"ID=\"" + fpanimationPrefix + anim + "FP\" style=\"position: relative;\">"
outString += ih.substring(i1, i2)
if(dyn)
outString += "</SPAN>"
}
function outWordAlt(ih, i1, i2, dyn, anim, altcnt)
{
if(dyn)
{
if(altcnt%2)
outString += "<SPAN ID=\"" + fpanimationPrefix + anim + "LFP\" style=\"position: relative; visibility: hidden;\">"
else
outString += "<SPAN ID=\"" + fpanimationPrefix + anim + "RFP\" style=\"position: relative; visibility: hidden;\">"
}
outString += ih.substring(i1, i2)
if(dyn)
outString += "</SPAN>"
}
function animate(animOut)
{
el = animateElements[currentElement]
if(animOut)
animationId = el.id.substring(9,el.id.length);
else
animationId = el.id.substring(6,el.id.length);
animation=remSuffix(animationId)
if (ie4)
elprops=el.style
else
elprops=el
if(!step && !animOut)
elprops.visibility="visible"
step++
if(animation == "spiral")
{
steps = stepsSpiral
v = step/steps
rf = 1.0 - v
t = v * 2.0*Math.PI
rx = Math.max(Math.abs(el.initLeft), 200)
ry = Math.max(Math.abs(el.initTop), 200)
elprops.posLeft = Math.ceil(-rf*Math.cos(t)*rx)
elprops.posTop = Math.ceil(-rf*Math.sin(t)*ry)
}
else if(animation == "waveWordsL" || animation=="hopWords" || animation == "waveWords")
{
steps = stepsSpiralWord
v = step/steps
rf = (1.0 - v)
t = v * 1.0*Math.PI
elprops.posLeft = Math.ceil(-rf*Math.cos(t)*elprops.r)
elprops.posTop = Math.ceil(-rf*Math.sin(t)*elprops.r)
}
else if(animation == "waveWordsR")
{
steps = stepsSpiralWord
v = step/steps
rf = (1.0 - v)
t = v * 1.0*Math.PI
elprops.posLeft = Math.ceil(-rf*Math.cos(t)*elprops.r)
elprops.posTop = Math.ceil( rf*Math.sin(t)*elprops.r)
}
else if(animation == "zoomIn")
{
steps = stepsZoom
elprops.fontSize = Math.ceil(50+50*step/steps) + "%"
elprops.posLeft = 0
}
else if(animation == "zoomOut")
{
steps = stepsZoom
fontSz=Math.ceil(100+200*(steps-step)/steps) + "%"
elprops.fontSize = fontSz
elprops.posLeft = 0
}
else if(animation == "elasticRight")
{
steps = stepsElastic
v = step/steps
rf=Math.exp(-v*7)
t = v * 1.5*Math.PI
rx =Math.abs(el.initLeft)
elprops.posLeft = rf*Math.cos(t)*rx
elprops.posTop = 0
}
else if(animation == "elasticBottom")
{
steps = stepsElastic
v = step/steps
rf=Math.exp(-v*7)
t = v * 2.5*Math.PI
ry =Math.abs(el.initTop)
elprops.posLeft = 0
elprops.posTop = rf*Math.cos(t)*ry
}
else if(animation == "wipeLR")
{
steps = stepsElastic
if(ie4 && elprops.position=="absolute")
elprops.clip = "rect(0 "+ step/steps*100 +"% 100% 0)"
else if (!ie4)
{
elprops.clip.right=step/steps*el.sizeW
}
}
else if(animation == "wipeTB")
{
steps = stepsElastic
if(ie4 && elprops.position=="absolute")
elprops.clip = "rect(0 100% "+step/steps*el.offsetHeight+"px 0)"
else
elprops.clip.bottom=step/steps*el.sizeH
}
else if(animation == "wipeMID")
{
steps = stepsElastic
if(ie4 && elprops.position=="absolute")
{
elprops.clip = "rect(0 "+el.sizeW/2*(1+step/steps)+"px 100% "+el.sizeW/2*(1-step/steps)+")"
}
else if(!ie4)
{
elprops.clip.right=el.sizeW/2*(1+step/steps)
elprops.clip.left=el.sizeW/2*(1-step/steps)
}
}
else if(animation == "flyCorner")
{
if(!cornerPhase)
{
steps = stepsElastic/2
v = step/steps
rf=Math.exp(-v*7)
t = v * 2.5*Math.PI
ry =Math.abs(el.initTop)
elprops.posTop = rf*Math.cos(t)*ry
}
else
{
steps = stepsFly
dl = el.initLeft / steps
elprops.posLeft = elprops.posLeft - dl
elprops.posTop = 0
}
}
else
{
steps = stepsFly
if(animation == "dropWord" || animation == "flyTopRightWord" || animation == "flyBottomRightWord")
steps = stepsWord
dl = (el.endLeft - el.initLeft) / steps
dt = (el.endTop - el.initTop) / steps
elprops.posLeft = elprops.posLeft + dl
elprops.posTop = elprops.posTop + dt
}
if (step >= steps)
{
if(!(animation == "wipeLR" ||
animation == "wipeTB" ||
animation == "wipeMID" ||
(animation == "flyCorner" && !cornerPhase)))
{
elprops.posLeft = el.endLeft
elprops.posTop = el.endTop
}
if(animOut)
{
elprops.visibility="hidden"
}
step = 0
if(animation=="flyCorner" && !cornerPhase)
cornerPhase=1
else
{
cornerPhase=0
currentElement++
}
}
if(!ie4)
{
elprops.left=elprops.posLeft
elprops.top =elprops.posTop
}
if(currentElement < animateElements.length)
{
if(animOut)
window.setTimeout("animate(1);", speed, "Javascript")
else
window.setTimeout("animate(0);", speed, "Javascript")
}
else
currentElement=0
}
function rollIn(el)
{
var ms = navigator.appVersion.indexOf("MSIE")
ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4)
if(ie4)
{
el.initstyle=el.style.cssText;el.style.cssText=el.fprolloverstyle
}
}
function rollOut(el)
{
var ms = navigator.appVersion.indexOf("MSIE")
ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4)
if(ie4)
{
el.style.cssText=el.initstyle
}
}
function clickSwapStyle(el)
{
var ms = navigator.appVersion.indexOf("MSIE")
ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4)
if(ie4)
{
ts=el.style.cssText
el.style.cssText=el.fprolloverstyle
el.fprolloverstyle=ts
}
}
function clickSwapImg(el)
{
if(document.all || document.layers)
{
ts=el.src
el.src=el.lowsrc
el.lowsrc=ts
}
}
//-->
It gives me a completetly blank page in mozilla & doesn't do anything.
please help.
thanks,
jj
RE: dhtml
You can pop up an alert at the start, open the script debugger and attach to the process to see what is happening.
RE: dhtml
"doc_els has no properties"
Please help becuase this the homepage of my website and I need people to at least see my homepage to get in. :)
thanks,
jj
RE: dhtml
RE: dhtml
You are right, it should work but it gives me the error:
"doc_els has no properties"
Please help.
Thanks,
JJ
RE: dhtml
Anybody here that can help me? I'm still getting the same error. Anybody please.
Thanks,
JJ
RE: dhtml
RE: dhtml