Javascript: Change Style/Visiblity/Position

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
tecktalkcm0391
DevNet Resident
Posts: 1030
Joined: Fri May 26, 2006 9:25 am
Location: Florida

Javascript: Change Style/Visiblity/Position

Post 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?
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

yes, it can.
User avatar
tecktalkcm0391
DevNet Resident
Posts: 1030
Joined: Fri May 26, 2006 9:25 am
Location: Florida

Post by tecktalkcm0391 »

ok then why do i get an error that says 'Object doesn't support this property or method'?
User avatar
tecktalkcm0391
DevNet Resident
Posts: 1030
Joined: Fri May 26, 2006 9:25 am
Location: Florida

Post by tecktalkcm0391 »

HELLO? Anybody got any ideas / help?
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
tecktalkcm0391
DevNet Resident
Posts: 1030
Joined: Fri May 26, 2006 9:25 am
Location: Florida

Post by tecktalkcm0391 »

I've done that but I still can't figure out the problem!
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
tecktalkcm0391
DevNet Resident
Posts: 1030
Joined: Fri May 26, 2006 9:25 am
Location: Florida

Post by tecktalkcm0391 »

I got it fixed. I pretty much rewrote a lot, and worked for 2 hours... thanks anyways.
User avatar
tecktalkcm0391
DevNet Resident
Posts: 1030
Joined: Fri May 26, 2006 9:25 am
Location: Florida

Post 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.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

What does Firefox tell you about the error in it's JavaScript console??
User avatar
tecktalkcm0391
DevNet Resident
Posts: 1030
Joined: Fri May 26, 2006 9:25 am
Location: Florida

Post 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
Post Reply