Float keeps getting converted to string by concatenation when I add?

A float (to set the opacity) keeps getting converted to a string and I'm pretty sure it's because JavaScript keeps interpreting addition as concatenation instead. If you comment out line 102 the script fails...I don't think I should use the parseFloat method because that's cheap and I prefer affordable. ;)

With parseFloat (as the code is below) the script works correctly (except for in IE which does not correctly set the final opacity setting of 100 at the end though that's a secondary concern). So instead of calling it draw I'm willing to figure out what I'm doing that is converting the float to a string, thoughts please?

- John

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>DHTML</title>
<script type="text/javascript">
//<![CDATA[
function sidebar(a,b,o)
{
 var c = document.getElementById('content');
 var s = document.getElementById('side');

 if (typeof dhtml.a=='undefined')
 {
 dhtml.a = 0;
 dhtml.c = c.clientWidth;
 dhtml.s = s.clientWidth;
 dhtml.w = dhtml.c+dhtml.s;
 document.getElementById('status').value='dhtml.c = '+dhtml.c+'\ndhtml.s = '+dhtml.s+'\ndhtml.w = '+dhtml.w;
 }

 if (o==undefined)
 {
 if (a=='hide')
 {
 if (s.style.opacity!=undefined) {o = 1.0;}
 else {o = 100;}
 }
 else if (a=='show')
 {
 if (s.style.opacity!=undefined) {o = 0.0;}
 else {o = 0;}
 }
 }

 if (dhtml.a==0 && typeof b=='undefined' || dhtml.a==1 && b==1)
 {
 dhtml.a=1;

 if (typeof dhtml.side=='undefined') {dhtml.side = s.clientWidth;}

 if (a=='hide')
 {
 if (s.clientWidth>0)
 {
 if (s.clientWidth-10>0)
 {


 if (o!=0.00)
 {
 //document.getElementById('status').value=document.getElementById('status').value+'\n'+o;

 if (s.style.opacity!=undefined)
 {
 o = o-.05;
 var oo = o.toFixed(2);
 s.style.opacity=oo;
 }
 else
 {
 oo = o-5;
 s.style.filter='alpha(opacity='+oo+')';
 }
 }
 else
 {
 //s.style.display='none';
 oo = 0;
 }

 s.style.width = s.clientWidth-10+'px';
 c.style.width = c.clientWidth+10+'px'
 setTimeout(function() {sidebar('hide',1,oo);},25);
 }
 else
 {
 c.style.width = c.clientWidth+s.clientWidth+'px';
 s.style.width = '0px';
 dhtml.a = 0;
 }
 }
 }
 else if (a=='show')
 {
 if (s.clientWidth<=dhtml.side)
 {
 if (s.clientWidth+10<dhtml.s)
 {
 //document.getElementById('status').value=document.getElementById('status').value+'\n'+o;


 var t1 = s.clientWidth;
 var t2 = dhtml.s/2;
 if (t1>t2)
 {
 if (s.style.opacity!=undefined)
 {
 if (s.clientWidth!=dhtml.s)
 {
 document.getElementById('status').value=document.getElementById('status').value+'\ntypeof o ='+typeof o+' = '+o;
 if (typeof o!='number') {o = parseFloat(o);}//alert('CONVERT!');
 //alert(typeof o+'\n\no= '+o);
 var o1 = o + .05;
 //alert(typeof o1+'\n\no1= '+o1);
 var oo = o1.toFixed(2);

 //var oo = o+.05;//o.toFixed(2);
 s.style.opacity=oo;
 }
 else {s.style.opacity=1.0;}
 }
 else
 {
 oo = o+5;
 s.style.filter='alpha(opacity='+oo+')';
 }
 document.getElementById('status').value=document.getElementById('status').value+'\n === '+o;
 }
 //else {document.getElementById('status').value=document.getElementById('status').value+'\n === '+t1+' = '+dhtml.s+' /2 = '+t2;}


 s.style.width = s.clientWidth+10+'px';
 c.style.width = c.clientWidth-10+'px';
 setTimeout(function() {sidebar('show',1,oo);},25);
 }
 else
 {
 s.style.width = dhtml.s+'px';
 c.style.width = dhtml.c+'px';
 if (s.style.opacity) {s.style.opacity=1.0;}
 else {s.style.filter='alpha(opacity=100)';}

 document.getElementById('status').value=document.getElementById('status').value+'\n\nc = '+c.clientWidth+'\ns = '+s.clientWidth;
 dhtml.a = 0;
 }
 }
 }
 }
}

var dhtml = new function() {this.name = '';}

window.onload = function() {/*sidebar();*/}
//]]>
</script>
<style type="text/css">
textarea {height: 373px; width: 732px;}
#content {background-color: #bbf; float: left; width: 80%;}
#side {background-color: #fbb; float: left; overflow: hidden; width: 20%;}
</style>
</head>

<body>

<div id="content"><p>Content</p></div>
<div id="side"><p>Sidebar</p></div>

<div><a href="javascript:sidebar('hide');">Hide Sidebar</a></div>
<div><a href="javascript:sidebar('show');">Show Sidebar</a></div>

<div><textarea id="status"></textarea></div>

</body>
</html>

Float keeps getting converted to string by concatenation when I add?

JAB Creations

Fotiman

JAB Creations

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week