Menu
hi,
i have created a function to change the border or a div in a nice easing manner, i have got my code to do this, the only problem is if the function is called again by another div calling the same function, its all seems to go pear shaped.
see my code below save it to a new html file and it should work on I.E, FF and SAFAFI but the same issue is also present.
[code=php]
<html>
<head>
<script language=”javascript”>
function bIn(idName,bStart,bEnd){
var aCtual = parseInt(document.getElementById(idName).style.borderWidth);
function doIt(){
var aCtual = parseInt(document.getElementById(idName).style.borderWidth);
var diff=bEnd-aCtual;
var tChange=aCtual+Math.round(diff/2);
document.getElementById(idName).style.border= “red “+tChange+”px solid”;
if(tChange==bEnd){
clearInterval(time);
}
}
time = setInterval(doIt,25);
}
function bOut(idName,bStart,bEnd){
var aCtual = parseInt(document.getElementById(idName).style.borderWidth);
function doNot(){
var aCtual = parseInt(document.getElementById(idName).style.borderWidth);
var diff=aCtual-bStart;
var tChange=aCtual-Math.round(diff/2);
document.getElementById(idName).style.border= “red “+tChange+”px solid”;
if(tChange==bStart){
clearInterval(time);
}
}
if(aCtual==bEnd){
clearInterval(time);
time = setInterval(doNot,25);
}
}
</script>
<style>
body{
margin-top:2px;
}
div.container{
position:relative;
margin-left:auto;
margin-right:auto;
cursor:hand;
}
div.box{
width:50px;
height:50px;
background:#000666;
float:left;
color:#FFFFFF;
font-size:20px;
font-weight:bold;
font-family:arial;
text-align:center;
vertical-align:bottom;
}
div.motion{
clear:both;
width:50px;
height:50px;
background:#000666;
position:absolute;
color:#FFFFFF;
font-size:20px;
font-weight:bold;
font-family:arial;
cursor:hand;
}
</style>
</head>
<body>
<div class=”container”>
<div class=”box” style=”border:0px solid red;” id=”smelly” onMouseOver=”bIn(this.id,0,10)”
onMouseOut=”bOut(this.id,0,10)”>one</div>
<div class=”box” style=”border:0px solid red;” id=”smelly1″ onMouseOver=”bIn(this.id,0,10)”
onMouseOut=”bOut(this.id,0,10)”>two</div>
<div class=”box” style=”border:0px solid red;” id=”smelly2″ onMouseOver=”bIn(this.id,0,10)”
onMouseOut=”bOut(this.id,0,10)”>three</div>
<div class=”box” style=”border:0px solid red;” id=”smelly3″ onMouseOver=”bIn(this.id,0,10)”
onMouseOut=”bOut(this.id,0,10)”>four</div>
<div class=”box” style=”border:0px solid red;” id=”smelly4″ onMouseOver=”bIn(this.id,0,10)”
onMouseOut=”bOut(this.id,0,10)”>five</div>
</div>
</body>
</html>
hope the answer is a simple one, if you want me to try and break down the code further i shall, but im asuming the code will be easy to follow for you gurus.