Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

help with Firefox rendering problem(works in IE)

Status
Not open for further replies.
netooi25

netooi25

Programmer
Jul 30, 2004
25
US
I made this a very generic sample of the problem I'm having...
I have select boxes that contain month/day/year... There is a javascript function that reloads the correct number of days based on what month or what year is selected...

It works fine in IE, but in firefox, whenever the javascript code is executed it resizes the screen pushing things further and further to the left.

Could someone tell me why it pushes things to the left when you change the date in Firefox and maybe give a solution?

Thanks a bunch...
Here's the code...


<script language="javascript">

var maxDayArray = new Array;
maxDayArray[0]=0
maxDayArray[1]=31
maxDayArray[2]=28;
maxDayArray[3]=31;
maxDayArray[4]=30;
maxDayArray[5]=31;
maxDayArray[6]=30;
maxDayArray[7]=31;
maxDayArray[8]=31;
maxDayArray[9]=30;
maxDayArray[10]=31;
maxDayArray[11]=30;
maxDayArray[12]=31;


function resetDaysInMonth(months, days, years) {
selectDay=days.selectedIndex;
numDayOptions=days.length;

//Clear out the current day options
for(i=numDayOptions;i>0;i--) {
days.options=null;
}

// Get the number of days in the month and check for leap year
selectMonth=parseInt(months[months.selectedIndex].value, 10);
availDays = maxDayArray[selectMonth];
addDay = 0;
if(selectMonth == 2) {
year=parseInt(years.options[years.selectedIndex].value);

if (year % 4 != 0 || year % 100 == 0 )
addDay=0;
else
if (year % 400 == 0)
addDay=1;
else
addDay=1;
}

// Reset the number of days available
availDays = availDays + addDay;

for(x=1; x <= availDays; x++) {
if (x < 10)
days.options[x-1]=new Option("0" + x);
else
days.options[x-1]=new Option(x);
}

// If still valid, set the same day as being selected
if (selectDay == -1 || selectDay > availDays)
days.options[0].selected=true;
else
days.options[selectDay].selected=true;
}


</script>


<form name="ProductForm" method="POST">
<input type=hidden name=page value=prodDetail>
<input type="hidden" name="submitCount" value="0">

<table align="left" width="100%">
<tr>
<td>

<table class="formTable" cellpadding="0" colspan="4" width="100%">
<!-- Label Product Information -->
<tr>
<th class="dataHeading" colspan="4" width="100%" height="16">
Product Information
</th>
</tr>
<!-- Name, Date -->
<tr>
<td colspan="2">
<table align="left" cellpadding="0" width="100%">
<tr>
<td class="dataLabelLeftCenter" width="50%">Customer Name<span class="dataLabelRed">*</span></td>
<td class="dataLabelLeftCenter" width="50%"><input type="text" name="productDetail.customerProduct.productName" value="TempName" size="25" maxlength="50"/></td>
</tr>
</table>
</td>
<td colspan="2">
<table align="left" cellpadding="0" width="100%">
<tr>
<td class="dataLabelLeftCenter" width="50%">Date<span class="dataLabelRed">*</span></td>
<td class="dataValue" width="50%">

<select name="effMonth" size=1 onChange="resetDaysInMonth(this.form.effMonth, this.form.effDay, this.form.effYear)">
<option selected value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>

<select name="effDay" size=1>
<option selected value="1">1</option>
<option selected value="2">2</option>
<option selected value="3">3</option>
<option selected value="4">4</option>
<option selected value="5">5</option>
<option selected value="6">6</option>
<option selected value="7">7</option>
<option selected value="8">8</option>
<option selected value="9">9</option>
<option selected value="10">10</option>
</select>

<select name="effYear" size=1 onChange="resetDaysInMonth(this.form.effMonth, this.form.effDay, this.form.effYear)">
<option selected value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
</select>
</td>

</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
 
Sort by date Sort by votes
Try this layout approach. Minimizing the number of nexted tables will greatly reduce overhead on your browser and improve rendering compatibitlity accross different browsers, as well as rendering speed.
Code: 
<script language="javascript">

   var maxDayArray = new Array;
   maxDayArray[0]=0
   maxDayArray[1]=31
   maxDayArray[2]=28;
   maxDayArray[3]=31;
   maxDayArray[4]=30;
   maxDayArray[5]=31;
   maxDayArray[6]=30;
   maxDayArray[7]=31;
   maxDayArray[8]=31;
   maxDayArray[9]=30;
   maxDayArray[10]=31;
   maxDayArray[11]=30;
   maxDayArray[12]=31;


function resetDaysInMonth(months, days, years) {
   selectDay=days.selectedIndex;
   numDayOptions=days.length;

   //Clear out the current day options
   for(i=numDayOptions;i>0;i--) {
      days.options[i]=null;
   }

   // Get the number of days in the month and check for leap year
   selectMonth=parseInt(months[months.selectedIndex].value, 10);
   availDays = maxDayArray[selectMonth];
   addDay = 0;
   if(selectMonth == 2) {
      year=parseInt(years.options[years.selectedIndex].value);

      if (year % 4 != 0 || year % 100 == 0 )
         addDay=0;
      else
         if (year % 400 == 0)
            addDay=1;
         else
            addDay=1;
   }

   // Reset the number of days available
   availDays = availDays + addDay;

   for(x=1; x <= availDays; x++) {
      if (x < 10)
         days.options[x-1]=new Option("0" + x);
      else
         days.options[x-1]=new Option(x);
   }

   // If still valid, set the same day as being selected
   if (selectDay == -1 || selectDay > availDays)
      days.options[0].selected=true;
   else
      days.options[selectDay].selected=true;
}


</script>


		<form name="ProductForm" method="POST">
			<input type=hidden name=page value=prodDetail>
			<input type="hidden" name="submitCount" value="0">
			<table class="formTable"  cellpadding="0" colspan="4" width="100%" border="1">
				<tr>
					<th class="dataHeading"  colspan="4" width="100%" height="16">Product Information</th>
				</tr>
				<tr>
					<td class="dataLabelLeftCenter">Customer Name<span class="dataLabelRed">*</span></td>
					<td class="dataValue"><input type="text" name="productDetail.customerProduct.productName" value="TempName" size="25" maxlength="50"/></td>
					<td class="dataLabelLeftCenter">Date<span class="dataLabelRed">*</span></td>
					<td class="dataValue" nowrap="true">
						<select name="effMonth" size=1 onChange="resetDaysInMonth(this.form.effMonth, this.form.effDay, this.form.effYear)">
							<option selected value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>
							<option value="4">4</option>
							<option value="5">5</option>
							<option value="6">6</option>
							<option value="7">7</option>
							<option value="8">8</option>
							<option value="9">9</option>
							<option value="10">10</option>
							<option value="11">11</option>
							<option value="12">12</option>
						</select>
						<select name="effDay" size=1>
							<option selected value="1">1</option>
							<option selected value="2">2</option>
							<option selected value="3">3</option>
							<option selected value="4">4</option>
							<option selected value="5">5</option>
							<option selected value="6">6</option>
							<option selected value="7">7</option>
							<option selected value="8">8</option>
							<option selected value="9">9</option>
							<option selected value="10">10</option>
						</select>
						<select name="effYear" size=1 onChange="resetDaysInMonth(this.form.effMonth, this.form.effDay, this.form.effYear)">
							<option selected value="2000">2000</option>
							<option value="2001">2001</option>
							<option value="2002">2002</option>
							<option value="2003">2003</option>
							<option value="2004">2004</option>
							<option value="2005">2005</option>
							<option value="2006">2006</option>
						</select>
					</td>
				</tr>
			</table>
		</form>
I'm fairly certain the problem of resizing had something to do with the nested tables (unfortunately I can't put my finger on the exact underlying issue).

Take Care,
Mike
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
718
3esolar
3
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
783
spamjim
spamjim
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top