|
|
Hi guys,
I'm having trouble with a effect I'm trying to produce, making a box change size overtime using setInterval.
The example code;
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<style type="text/css">
body{padding:0px;margin:0px;margin:auto;}
#box{margin:100px auto;width:400px;height:100px;border:1px solid red;text-align:center;padding:50px;}
</style>
<script type="text/javascript">
steps = 2;
oInterval = "";
function changeMainBoxWidth(oldHeight,newHeight){
oInterval = window.setInterval(
function(){
oldHeight=oldHeight-steps;
if(oldHeight==newHeight)window.clearInterval(oInterval);
document.getElementById("box").style.height = oldHeight;
},steps);
}
</script>
<BODY>
<div id="box">
<a href="#" onClick="changeMainBoxWidth(100,10);">make me small</a>
</div>
</BODY>
</HTML>
|
|
Now the problem is the doctype if I use a strict doctype;
The effect renders in IE perfectly, however it doesn't work in Firefox, if I use a loose or no doctype, so effectively rendering in quirks mode Firefox works perfectly but IE doesn't;
Is there anyway to get a middle ground without writing browser detection and forcing a doctype?
|
|
|
|
Ok I know no one else has replied to this, but I was delving into some sites, and found lots of information about how under a strict doctype Firefox doesn't render Javascript properly. I've got the point where I can extract the current width, but still Firefox refuses to render the height change.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<style type="text/css">
body{padding:0px;margin:0px;margin:auto;}
#box{margin:100px auto;width:400px;height:100px;border:1px solid red;text-align:center;padding:50px;}
</style>
<script type="text/javascript">
frameRate = 10;
oInterval = "";
currHeight = 0;
newHeight = 0;
//returns a property value in IE and NS6 Format
function getProperty(el, cssproperty, csspropertyNS){
if (el.currentStyle)
return el.currentStyle[cssproperty]
else if (window.getComputedStyle){
var elstyle=window.getComputedStyle(el, "")
return elstyle.getPropertyValue(csspropertyNS)
}
}
function changeMainBoxWidth(nH){
newHight = nH;
currHeightString = getProperty(document.getElementById("box"),"height","height");
currHeight = parseInt(currHeightString.split("p")[0]);
alert(currHeight);
oInterval = self.setInterval("animate()",frameRate);
}
function animate(){
currHeight--;
if(currHeight==newHeight){
window.clearInterval(oInterval);
}else{
document.getElementById("box").style.height = currHeight;
}
}
</script>
<BODY>
<div id="box">
<a href="#" onClick="changeMainBoxWidth(10);">make me small</a>
</div>
</BODY>
</HTML>
|
|
|
|
|
|
Ok although no one helped me I found a solution, and it works in both IE and Firefox using strict xhtml;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<style type="text/css">
body{padding:0px;margin:0px;margin:auto;}
#box{margin:100px auto;width:400px;height:100px;border:1px solid red;text-align:center;padding:50px;}
</style>
<script type="text/javascript">
frameRate = 10;
oInterval = "";
currHeight = 0;
newHeight = 0;
//returns a property value in IE and NS6 Format
function getProperty(el, cssproperty, csspropertyNS){
if (el.currentStyle)
return el.currentStyle[cssproperty]
else if (window.getComputedStyle){
var elstyle=window.getComputedStyle(el, "")
return elstyle.getPropertyValue(csspropertyNS)
}
}
function changeMainBoxWidth(nH){
newHight = nH;
currHeightString = getProperty(document.getElementById("box"),"height","height");
currHeight = parseInt(currHeightString.split("p")[0]);
alert(currHeight);
oInterval = self.setInterval("animate()",frameRate);
}
function animate(){
currHeight--;
if(currHeight==newHeight){
window.clearInterval(oInterval);
}else{
document.getElementById("box").style.height = currHeight + "px";
}
}
</script>
<BODY>
<div id="box">
<a href="#" onClick="changeMainBoxWidth(10);">make me small</a>
</div>
</BODY>
</HTML>
|
|
The problems that arose, was because when IE and Firefox are in strict mode, style declaration setting and getting elements is vastly different from the loose modes. Also it needed "px" at the end of currHeight for it to work at Firefox.
Hope this helps someone, as it took me ages to find this out.
|
|
|
|
|
|
|
|
greppinfunk
