/    Sign up×
Community /Pin to ProfileBookmark

having trouble with a textarea in FireFox

I have been designing a small table that has a calculation box in it. In IE it works great. In Firefox it doesn’t.

I want the height of the textarea to be 100% of the content within the textarea. In IE it is a matter of putting an overflow:visible; However, in Firefox it is automatically scrolling the textarea.

Could someone check it out in IE and then in FireFox and let me know how to get the overflow:visible; working in FF.

[code]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Untitled Document</title>
<style type=”text/css”>
.showtextbox {border:1px solid #505050; overflow:visible; width:95%;
font-style:normal; font-weight:normal; font-size:8pt; color:#505050;
background-color:#FFFFFF; display:block;}
.subheadings {text-align:center; font-weight:bold; font-size:8pt; color:#FFDF56; background-color:#222380;}
.tablecontent {text-align:left; padding:10px 5px 10px 5px; color:#505050; background-color:#FFFFFF; border:1px solid #222380;}
</style>

<script language=”javascript” type=”text/javascript”>
function RoundDollar(amt, decimals)
{
var result1 = amt * Math.pow(10, decimals)
var result2 = Math.round(result1)
var result3 = result2 / Math.pow(10, decimals)

return (result3)
}

function CalculateTax(income, show)
{
// declare arrays for data from tax table
var taxrate = new Array(11)
var basictax = new Array(10)
var incomelevel = new Array(10)
var cnt, bracket

taxrate[0] = 0.00; incomelevel[0] = 8012; basictax[0] = 0
taxrate[1] = 0.16; incomelevel[1] = 11118; basictax[1] = 496.96
taxrate[2] = 0.281; incomelevel[2] = 14193; basictax[2] = 1361.04
taxrate[3] = 0.2205; incomelevel[3] = 33375; basictax[3] = 5590.67
taxrate[4] = 0.2515; incomelevel[4] = 35000; basictax[4] = 5999.36
taxrate[5] = 0.3115; incomelevel[5] = 58768; basictax[5] = 13403.09
taxrate[6] = 0.3298; incomelevel[6] = 66752; basictax[6] = 16036.21
taxrate[7] = 0.3539; incomelevel[7] = 69238; basictax[7] = 16916.01
taxrate[8] = 0.3941; incomelevel[8] = 70000; basictax[8] = 17216.31
taxrate[9] = 0.4341; incomelevel[9] = 113804; basictax[9] = 36231.63
taxrate[10] = 0.4641;

// reset counter
cnt = 0
bracket = 0

if(show){
document.TaxBox.TaxTextBox.value = “Income Tax Calculation:nn”

// if income is higher than exempt limit then determine which income level they are at
if(income > incomelevel[0]){
// write the beginning bracket tax info
document.TaxBox.TaxTextBox.value = document.TaxBox.TaxTextBox.value + “$0″ + ” – $” + incomelevel[0] + “n”
document.TaxBox.TaxTextBox.value = document.TaxBox.TaxTextBox.value + “Tax Due: Exempt” + “nn”

// loop through all tax brackets and write income bracket & tax info
for(cnt = 1; cnt < incomelevel.length; cnt++){
// if income is higher then previous bracket
if(income > incomelevel[cnt-1]){
// if income is within the current bracket write info
if(income <= incomelevel[cnt]){
document.TaxBox.TaxTextBox.value = document.TaxBox.TaxTextBox.value + “$” + (incomelevel[cnt-1]+1) + ” – $” + income + “n”
document.TaxBox.TaxTextBox.value = document.TaxBox.TaxTextBox.value + “Tax Due: $” + RoundDollar((income – incomelevel[cnt-1]) * taxrate[cnt], 2) + “nn”

// set bracket to the right bracket number
bracket = cnt
} // end if

// if income is higher then current bracket write basic tax info
if(income > incomelevel[cnt]){
document.TaxBox.TaxTextBox.value = document.TaxBox.TaxTextBox.value + “$” + (incomelevel[cnt-1]+1) + ” – $” + incomelevel[cnt] + “n”
document.TaxBox.TaxTextBox.value = document.TaxBox.TaxTextBox.value + “Tax Due: $” + RoundDollar(basictax[cnt]-basictax[cnt-1], 2) + “nn”
} // end if
} // end if
} // end for

// if income is higher than the highest bracket write that bracket info
// if not return the current value.
if(income > incomelevel[incomelevel.length-1]){
document.TaxBox.TaxTextBox.value = document.TaxBox.TaxTextBox.value + “$” + (incomelevel[incomelevel.length-1]+1) + ” – $” + income + “n”
document.TaxBox.TaxTextBox.value = document.TaxBox.TaxTextBox.value + “Tax Due: $” + RoundDollar((income – incomelevel[incomelevel.length-1]) * taxrate[taxrate.length-1], 2) + “nn”
bracket = incomelevel.length-1
}

document.TaxBox.TaxTextBox.value = document.TaxBox.TaxTextBox.value + “nTotal Tax Due: $” + RoundDollar(((income – incomelevel[bracket-1]) * taxrate[bracket]) + basictax[bracket-1], 2)
}else{ // else if the income is tax exempt return 0 tax payable
document.TaxBox.TaxTextBox.value = document.TaxBox.TaxTextBox.value + “$0″ + ” – $” + income + “n”
document.TaxBox.TaxTextBox.value = document.TaxBox.TaxTextBox.value + “Tax Due: Exempt” + “nn”
return (0)
} // end else
}else{ // else if you don’t want to show calculations
for(cnt = 1; cnt < incomelevel.length; cnt++){
// if income is higher then previous bracket
if((income > incomelevel[cnt-1]) && (income <= incomelevel[cnt])){
// set bracket to the right bracket number
bracket = cnt
} // end if
} // end for

if(income > incomelevel[incomelevel.length-1]){ bracket = incomelevel.length-1}

return (RoundDollar(((income – incomelevel[bracket-1]) * taxrate[bracket]) + basictax[bracket-1], 2))
} // end else(show)
} // end function
</script>
</head>

<body style=”font-family:Arial, Helvetica, sans-serif; font-size:8pt;”>
<center><table cellspacing=”0″ width=”150″>
<!– open 1st row for heading –>
<tr>
<!– open the cell –>
<td class=”subheadings” style=”background-color:#960014;”>
Example Calculation:
</td><!– closes the cell –>
</tr> <!– closes the 1 row for heading –>

<!– opens second row for the data blurb –>
<tr>
<!– opens cell with Term Insurance blub & button to quote –>
<td class=”tablecontent” style=”border-color:#960014;”>
To calculate your income tax enter your income in the box below:<br>
<form name=”TaxBox” class=”text8″>
<center>Income: &nbsp;&nbsp;<input type=”text” size=”8″ name=”UserIncome” /></center>
<br>
<center><input class=”buttons” type=”button” value=”Calculate Tax” onClick=”if(document.TaxBox.UserIncome.value > 0){CalculateTax(document.TaxBox.UserIncome.value, true)}else{document.TaxBox.TaxTextBox.value = ‘Im sorry please enter a valid income.’}”></center>
<br>
<br>
<center><textarea name=”TaxTextBox” rows=”3″ class=”showtextbox” readonly>Your calculations will show here.</textarea>
</form>
</td><!– closes the cell with Term Insurance –>
</tr> <!– closes the 2nd row for Term Insurance –>
</table></center> <!– closes the table for Term Insurance –>

</body>
</html>
[/code]

to post a comment
HTML

9 Comments(s)

Copy linkTweet thisAlerts:
@MstrBobDec 19.2004 — If you don't want scrolling, and the textarea is readonly anyway, why not use a <p> or <div> tag instead?
Copy linkTweet thisAlerts:
@zincoxideauthorDec 19.2004 — I tried to use the DIV tag but I don't know how to update the value of that.

This needs to update dynamically as the income is entered and the Calculate tax button is pressed.

Is it possible to change the text in a Div tag as you click the button??
Copy linkTweet thisAlerts:
@ray326Dec 19.2004 — If you ID the output cell then you can use its innerHTML to set the content.
Copy linkTweet thisAlerts:
@MstrBobDec 19.2004 — I'm not all that knowledgeable with Javascript, but this here should work:

[SIZE=1]<i>
</i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
&lt;meta name="Content-Style-Type" content="text/css" /&gt;
&lt;meta http-equiv="content-script-type" content="text/javascript" /&gt;
&lt;title&gt;Calculate Tax&lt;/title&gt;
&lt;style type="text/css"&gt;
&lt;!--
#TaxForm {
font-family:Arial, Helvetica, sans-serif;
border:1px solid #960014;
padding:0;
margin:0 auto 0 auto;
width:150px;
font-size:0.7em;
color:#505050;
text-align:center;
}

#TaxForm h1 {
margin:0;
padding:1px;
width:100%;
background:#960014;
color:#FFDF56;
text-align:center;
font-size:1em;
}

#TaxForm p {padding:2px;text-align:left;}

#TaxForm label {
text-align:center;
display:block;
width:100%;
}

#TaxBox fieldset {
border:0;
margin:0;
padding:0;
}

#TaxTextBox {
border:1px solid #505050;
padding:1px;
margin:5px 5px 25px 5px;
}
--&gt;
&lt;/style&gt;
&lt;script type="text/javascript"&gt;
&lt;!--//&lt;![CDATA[
var taxtext;
window.onload=function() {taxtext=document.getElementById('TaxTextBox').innerHTML;}
function RoundDollar(amt, decimals)
{
var result1 = amt * Math.pow(10, decimals)
var result2 = Math.round(result1)
var result3 = result2 / Math.pow(10, decimals)

<i> </i>return (result3)
}

function CalculateTax(income, show)
{
// declare arrays for data from tax table
var taxrate = new Array(11)
var basictax = new Array(10)
var incomelevel = new Array(10)
var cnt, bracket

<i> </i>taxrate[0] = 0.00; incomelevel[0] = 8012; basictax[0] = 0
<i> </i>taxrate[1] = 0.16; incomelevel[1] = 11118; basictax[1] = 496.96
<i> </i>taxrate[2] = 0.281; incomelevel[2] = 14193; basictax[2] = 1361.04
<i> </i>taxrate[3] = 0.2205; incomelevel[3] = 33375; basictax[3] = 5590.67
<i> </i>taxrate[4] = 0.2515; incomelevel[4] = 35000; basictax[4] = 5999.36
<i> </i>taxrate[5] = 0.3115; incomelevel[5] = 58768; basictax[5] = 13403.09
<i> </i>taxrate[6] = 0.3298; incomelevel[6] = 66752; basictax[6] = 16036.21
<i> </i>taxrate[7] = 0.3539; incomelevel[7] = 69238; basictax[7] = 16916.01
<i> </i>taxrate[8] = 0.3941; incomelevel[8] = 70000; basictax[8] = 17216.31
<i> </i>taxrate[9] = 0.4341; incomelevel[9] = 113804; basictax[9] = 36231.63
<i> </i>taxrate[10] = 0.4641;

<i> </i>// reset counter
<i> </i>cnt = 0
<i> </i>bracket = 0

<i> </i>if(show){
<i> </i> taxtext = "Income Tax Calculation:&lt;br /&gt;&lt;br /&gt;"

<i> </i> // if income is higher than exempt limit then determine which income level they are at
<i> </i> if(income &gt; incomelevel[0]){
<i> </i> // write the beginning bracket tax info
<i> </i> taxtext = taxtext + "$0" + " - $" + incomelevel[0] + "&lt;br /&gt;"
<i> </i> taxtext = taxtext + "Tax Due: Exempt" + "&lt;br /&gt;&lt;br /&gt;"

<i> </i> // loop through all tax brackets and write income bracket &amp; tax info
<i> </i> for(cnt = 1; cnt &lt; incomelevel.length; cnt++){
<i> </i> // if income is higher then previous bracket
<i> </i> if(income &gt; incomelevel[cnt-1]){
<i> </i> // if income is within the current bracket write info
<i> </i> if(income &lt;= incomelevel[cnt]){
<i> </i> taxtext = taxtext + "$" + (incomelevel[cnt-1]+1) + " - $" + income + "&lt;br /&gt;"
<i> </i> taxtext = taxtext + "Tax Due: $" + RoundDollar((income - incomelevel[cnt-1]) * taxrate[cnt], 2) + "&lt;br /&gt;&lt;br /&gt;"

<i> </i> // set bracket to the right bracket number
<i> </i> bracket = cnt
<i> </i> } // end if

<i> </i> // if income is higher then current bracket write basic tax info
<i> </i> if(income &gt; incomelevel[cnt]){
<i> </i> taxtext = taxtext + "$" + (incomelevel[cnt-1]+1) + " - $" + incomelevel[cnt] + "&lt;br /&gt;"
<i> </i> taxtext = taxtext + "Tax Due: $" + RoundDollar(basictax[cnt]-basictax[cnt-1], 2) + "&lt;br /&gt;&lt;br /&gt;"
<i> </i> } // end if
<i> </i> } // end if
<i> </i> } // end for

<i> </i> // if income is higher than the highest bracket write that bracket info
<i> </i> // if not return the current value.
<i> </i> if(income &gt; incomelevel[incomelevel.length-1]){
<i> </i> taxtext = taxtext + "$" + (incomelevel[incomelevel.length-1]+1) + " - $" + income + "&lt;br /&gt;"
<i> </i> taxtext = taxtext + "Tax Due: $" + RoundDollar((income - incomelevel[incomelevel.length-1]) * taxrate[taxrate.length-1], 2) + "&lt;br /&gt;&lt;br /&gt;"
<i> </i> bracket = incomelevel.length-1
<i> </i> }

<i> </i> document.getElementById('TaxTextBox').innerHTML = taxtext + "&lt;br /&gt;Total Tax Due: $" + RoundDollar(((income - incomelevel[bracket-1]) * taxrate[bracket]) + basictax[bracket-1], 2)
<i> </i> }else{ // else if the income is tax exempt return 0 tax payable
<i> </i> document.getElementById('TaxTextBox').innerHTML = taxtext + "$0" + " - $" + income + "&lt;br /&gt;"
<i> </i> document.getElementById('TaxTextBox').innerHTML = taxtext + "Tax Due: Exempt" + "&lt;br /&gt;&lt;br /&gt;"
<i> </i> return (0)
<i> </i> } // end else
<i> </i>}else{ // else if you don't want to show calculations
<i> </i> for(cnt = 1; cnt &lt; incomelevel.length; cnt++){
<i> </i> // if income is higher then previous bracket
<i> </i> if((income &gt; incomelevel[cnt-1]) &amp;&amp; (income &lt;= incomelevel[cnt])){
<i> </i> // set bracket to the right bracket number
<i> </i> bracket = cnt
<i> </i> } // end if
<i> </i> } // end for

<i> </i> if(income &gt; incomelevel[incomelevel.length-1]){ bracket = incomelevel.length-1}
<i> </i>return (RoundDollar(((income - incomelevel[bracket-1]) * taxrate[bracket]) + basictax[bracket-1], 2))
} // end else(show)
} // end function
//]]&gt;--&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="TaxForm"&gt;
&lt;h1&gt;Example Calculation:&lt;/h1&gt;
&lt;p&gt;To calculate your income tax, enter your income in the box below:&lt;/p&gt;
&lt;form action="" id="TaxBox" onsubmit="if(document.getElementById('UserIncome').value &gt; 0){CalculateTax(document.getElementById('UserIncome').value, true)}else{document.getElementById('TaxTextBox').innerHTML = 'Im sorry please enter a valid income.'}return false;"&gt;
&lt;fieldset&gt;
&lt;label&gt;Income: &lt;input type="text" size="8" name="UserIncome" id="UserIncome" /&gt;&lt;/label&gt;
&lt;input type="submit" value="Calculate Tax" alt="Calculate Tax" /&gt;
&lt;/fieldset&gt;
&lt;/form&gt;
&lt;div id="TaxTextBox"&gt;
Your calculations will show here.
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
[/SIZE]
Copy linkTweet thisAlerts:
@zincoxideauthorDec 20.2004 — Thank you for your suggestion however it isn't exactly what I am looking for. The way that I set it up with the textarea, every time the user input the income and then click calculate tax it would re-calculate and re-display the calculations.

I just tried the same code and it only works the first time, it doesn't clear the box and then re-display the new income.

Zinc.
Copy linkTweet thisAlerts:
@MstrBobDec 20.2004 — Want it to clear each time? Sorry. Put this at the very beginning of the CalculateTax function:

document.getElementById('TaxTextBox').innerHTML='';

And you should be all set.
Copy linkTweet thisAlerts:
@zincoxideauthorDec 20.2004 — PROBLEM:

I adjusted the code to what you suggested and it didn't work in Opera/Mozilla FF or a MAC again.

Does the innerHTML not work in these browsers??

Zinc.
Copy linkTweet thisAlerts:
@MstrBobDec 20.2004 — Eh? I tested it and it works fine in:

Internet Explorer 6

Mozilla Firefox 1.0 Final

Mozilla 1.3

Opera 7.5

So, I don't know what the issue is.
Copy linkTweet thisAlerts:
@zincoxideauthorDec 21.2004 — Well,

I converted my document wrong. For some reason when I made all the changes to my actual page I made a mistake somewhere. I deleted all my changes, posted that message and I figured it out after. It was a syntax error.

Thank you very much, I now have your suggestions implemented and it is working exactly how I wanted.

Thanks again.

Zinc.
×

Success!

Help @zincoxide spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...