Page 1 of 1
Javascript: Change Style/Visiblity/Position
Posted: Tue Jun 06, 2006 8:32 pm
by tecktalkcm0391
So far I have
Code: Select all
<select tabindex="1" name="sq"
onchange="sq=this.options[this.selectedIndex].value;
csq=document.getElementById('csq');
if(sq=='create'){
csq.style.visibility='visible';
csq.style.position='fixed';
} else {
csq.style.visibility='hidden';
csq.style.position='absolute';}">
<option selected="selected">Select One:</option>
<option value="What is my school's name?">What is my house's color?</option>
<option value="What is my mom's name?">What is my mom's name?</option>
<option value="blank1">-------------------------------------------</option>
<option value="create">Create My Own:</option>
<option value="blank">--------------------------------------------</option>
</select>
I want it do change the style of the div 'csq' to visible and fixed when only create is selected:
Code: Select all
<div id="csq" style="position:absolute; visibility:hidden;"><input tabindex="1" name="csq" type="text" id="csq" size="30 " maxlength="100" class="input_disabled" onkeyup="this.className='input2';" onselect="this.className='input2';" onblur="this.className='input1'"/></div>
Can this be done?
Posted: Tue Jun 06, 2006 9:00 pm
by feyd
yes, it can.
Posted: Tue Jun 06, 2006 9:11 pm
by tecktalkcm0391
ok then why do i get an error that says 'Object doesn't support this property or method'?
Posted: Thu Jun 08, 2006 8:50 pm
by tecktalkcm0391
HELLO? Anybody got any ideas / help?
Posted: Fri Jun 09, 2006 10:00 am
by pickle
I'd move your onChange code out into a Javascript function. That way when you try this in Firefox, you'll get a line error number and you can debug it easier.
Posted: Mon Jun 12, 2006 6:22 pm
by tecktalkcm0391
I've done that but I still can't figure out the problem!
Posted: Tue Jun 13, 2006 9:55 am
by pickle
What line number is giving you the error? If you've moved it out into a Javascript function & are testing in Firefox, you should get the line number that generates the error.
Posted: Tue Jun 13, 2006 10:28 pm
by tecktalkcm0391
I got it fixed. I pretty much rewrote a lot, and worked for 2 hours... thanks anyways.
Posted: Thu Jun 15, 2006 3:54 pm
by tecktalkcm0391
Now working again... I got to get the code, its almost the same as the one before, if anyone can find an error in the old one that would be awsome.
Posted: Thu Jun 15, 2006 5:45 pm
by Chris Corbyn
What does Firefox tell you about the error in it's JavaScript console??
Posted: Thu Jun 15, 2006 7:54 pm
by tecktalkcm0391
It doesn't give me an error... but this is what is weird in IE I have the same exact code setup somewhere else and it doesn't give an error look:
Not error code:
Code: Select all
<select tabindex="1"
class="input_list" onchange="
sc=this.options[this.selectedIndex].value;
us=document.signup.us_state;
os=document.signup.state;
div_us=document.getElementById('US');
div_other=document.getElementById('Other');
if(sc=='US'){
us.disabled=false;
os.disabled=true;
os.readonly=true;
os.style.background='#E9E9E9';
div_other.style.visibility='hidden';
div_other.style.position='absolute';
div_us.style.visibility='visible';
div_us.style.position='fixed';
}else{
us.disabled=true;
os.disabled=false;
os.readonly=false;
us.selectedIndex=0;
os.style.background='white';
div_other.style.visibility='visible';
div_other.style.position='fixed';
div_us.style.visibility='hidden';
div_us.style.position='absolute';
}" name="country">
<option value="0" selected="selected">Country</option>
<option value="US">United States</option><option value="ZW">Zimbabwe</option>
</select> </td>
</tr>
<tr>
<td colspan="2"></span></td>
</tr>
<tr id="US" style="position:absolute; visibility:hidden;">
<td align="top"><strong>US State</strong></td>
<td><select tabindex="1" name="us_state" class="list" >
<option selected="selected" value="0">Choose:</option>
<option value="AL">Alabama</option> <option value="WY">Wyoming</option>
</select>
(US Only)</td>
</tr>
<tr id="Other" style="position:absolute; visibility:hidden;">
<td valign="top" ><strong>State/Province</strong></td>
<td valign="top" ><input name="state" class="input_1" id="MVLstate" tabindex="1" onblur="this.className='input_1';" onselect="this.className='input_2';" onclick="this.className='input_2';" ondblclick="this.className='input_2';" onkeyup="this.className='input_2';" value="<?php print($_GET['state_province']); ?>" size="30"/>
<br />
(If you live outside of United States) </td>
</tr>
<tr>
Errored Code:
Code: Select all
<tr id="Q_List">
<td align="left" bgcolor="#FFFFCC"><b>Security Question </b></td>
<td align="left" bgcolor="#FFFFCC"><select tabindex="1" name="sq" onchange="sq=this.options[this.selectedIndex].value;
create=document.signup.csq;
csq=document.getElementById('csq_row');
if(sq=='create'){
create.disabled=false;
create.readonly=false;
csq.style.visibility='visible';
csq.style.position='fixed';
create.className='input_1';
}else{
create.disabled=true;
create.readonly=true;
csq.style.visibility='hidden';
csq.style.position='absolute';
create.className='disabled';
}"
>
<option selected="selected">Select One:</option>
<option value="1">What is my house's color?</option>
<option value="2?">What is my mom's name?</option>
<option value="create">Create My Own:</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="left" ></td>
</tr>
<tr id="csq_div" style="position:absolute; visibility:hidden;">
<td align="left" >Create Your Security Question: </td>
<td align="left" ><input tabindex="1" name="csq" type="text" id="csq" size="20 " maxlength="50" class="disabled" onkeyup="this.className='input_2';" onselect="this.className='input_2';" onblur="this.className='input_1'"/></td>
</tr>
Can anybody tell me whats wrong