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