www.webdeveloper.com
+ Reply to Thread
Results 1 to 4 of 4
  1. 03-19-2009 12:00 PM #1
    Natdrip
    Natdrip is offline Registered User
    Join Date
    Jan 2004
    Posts
    484

    variable not being passed in onload

    Why is the variable not being passed or set
    only the last variable in the array is being passed

    the "tg" dosn't pass

    Code:
    // JavaScript Document
// this function hides the multiple office
// and sets an on click handler 

	var runCol ={
		counterId:'',
		target:'',
		maxPos:400,
		minPos:18,
		pos:18,
		run:function(mo){
			runCol.target = mo
			var mil = document.getElementById(runCol.target);	
			clearInterval(runCol.counterId);
			if(mil.className=='multiple_offices_off'){
				runCol.counterId = setInterval('runCol.expand()',10);
			}else{
				runCol.counterId = setInterval('runCol.contract()',10);				
			}			
				
			
		},
		expand:function(){
			var mil = document.getElementById(runCol.target);
				runCol.pos = runCol.pos + (.07 * runCol.pos);
				if(runCol.pos < runCol.maxPos ){
					mil.style.height = runCol.pos+"px";
				}else{
				    runCol.pos = runCol.maxPos;
					mil.className = 'multiple_offices_on';
					clearInterval(runCol.counterId);
				}
		},
		contract:function(){
			var mil = document.getElementById(runCol.target);
				runCol.pos = runCol.pos - (.07 * runCol.pos);
				if(runCol.pos > runCol.minPos ){
					mil.style.height = runCol.pos+"px";
				}else{
				    runCol.pos = runCol.minPos;
					mil.className = 'multiple_offices_off';
					clearInterval(runCol.counterId);
				}
		}
	}
	
	window.onload = function(){
	//this sets the click handler for a multiple 
	    var moArr = ['mo_controller','mo_controller1','mo_controller2','mo_controller3','mo_controller4'];
		var targetArr = ['multiple_offices','multiple_offices1','multiple_offices2','multiple_offices3','multiple_offices4'];
		for(i=0;i<moArr.length;i++){
			var mo = document.getElementById(moArr[i]);
			var tg = targetArr[i];
			mo.onclick = function(){
				runCol.run(tg);	
			}
			mo.onmouseover = function(){
				this.style.cursor = 'pointer';		
			}
		}
	}

    here is the html

    Code:
          <div class="div_hr">&nbsp;</div>
        <div id="multiple_offices" class="multiple_offices_off" >
        	<div id="mo_controller" class="hdr"><font>MULTIPLE OFFICES</font> <font class="alert">(click to add multiple offices)</font></div>
            <div class="des_txt">To list Multiple office locations, please fill out the following information:</div>
            <span><div class="txt_hdl">Practice/Group Name</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span> 
            <span><div class="txt_hdl">Preferred FAD display name</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
            <span><div class="txt_hdl">Street Address</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
            <span><div class="txt_hdl">Unit/Suite</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
            <span><div class="txt_hdl">City</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
            <span><div class="txt_hdl">State</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
            <span><div class="txt_hdl">Zip Code</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
            <span><div class="txt_hdl">Telephone #</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
            <span><div class="txt_hdl">Fax #</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
            <span><div class="txt_hdl">Website</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
            <span><div class="txt_hdl">E-mail address</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
             <span><div class="txt_hdl">Office hours</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" style="width:40px;" /> to <input type="text" name="" class="inpt_gen" style="width:40px;" /></div></span>
            <div class="btm_txt" style="clear:both">
            Please contact customer service at 1-800-XXX-XXXX if you need to update any of this information.
            </div>
      	</div>
      
      
      
      
        <div class="div_hr">&nbsp;</div>
        <div id="multiple_offices1" class="multiple_offices_off" >
        	<div id="mo_controller1" class="hdr"><font>MULTIPLE OFFICES</font> <font class="alert">(click to add multiple offices)</font></div>
            <div class="des_txt">To list Multiple office locations, please fill out the following information:</div>
            <span><div class="txt_hdl">Practice/Group Name</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span> 
            <span><div class="txt_hdl">Preferred FAD display name</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
            <span><div class="txt_hdl">Street Address</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
            <span><div class="txt_hdl">Unit/Suite</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
            <span><div class="txt_hdl">City</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
            <span><div class="txt_hdl">State</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
            <span><div class="txt_hdl">Zip Code</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
            <span><div class="txt_hdl">Telephone #</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
            <span><div class="txt_hdl">Fax #</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
            <span><div class="txt_hdl">Website</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
            <span><div class="txt_hdl">E-mail address</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
             <span><div class="txt_hdl">Office hours</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" style="width:40px;" /> to <input type="text" name="" class="inpt_gen" style="width:40px;" /></div></span>
            <div class="btm_txt" style="clear:both">
            Please contact customer service at 1-800-XXX-XXXX if you need to update any of this information.
            </div>
      	</div>
        
        <div class="div_hr">&nbsp;</div>
        <div id="multiple_offices2" class="multiple_offices_off" >
        	<div id="mo_controller2" class="hdr"><font>MULTIPLE OFFICES</font> <font class="alert">(click to add multiple offices)</font></div>
            <div class="des_txt">To list Multiple office locations, please fill out the following information:</div>
            <span><div class="txt_hdl">Practice/Group Name</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span> 
            <span><div class="txt_hdl">Preferred FAD display name</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
            <span><div class="txt_hdl">Street Address</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
            <span><div class="txt_hdl">Unit/Suite</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
            <span><div class="txt_hdl">City</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
            <span><div class="txt_hdl">State</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
            <span><div class="txt_hdl">Zip Code</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
            <span><div class="txt_hdl">Telephone #</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
            <span><div class="txt_hdl">Fax #</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
            <span><div class="txt_hdl">Website</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
            <span><div class="txt_hdl">E-mail address</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" /></div></span>
             <span><div class="txt_hdl">Office hours</div><div class="inpt_hdl"><input type="text" name="" class="inpt_gen" style="width:40px;" /> to <input type="text" name="" class="inpt_gen" style="width:40px;" /></div></span>
            <div class="btm_txt" style="clear:both">
            Please contact customer service at 1-800-XXX-XXXX if you need to update any of this information.
            </div>
      	</div>
    here is the css

    Code:
    #multiple_offices{padding:10px;text-align:left;}
#multiple_offices1{padding:10px;text-align:left;}
#multiple_offices2{padding:10px;text-align:left;}
#multiple_offices3{padding:10px;text-align:left;}
#multiple_offices4{padding:10px;text-align:left;}
	
#multiple_offices span{display:block;padding:3px;clear:both;}
#multiple_offices1 span{display:block;padding:3px;clear:both;}
#multiple_offices2 span{display:block;padding:3px;clear:both;}
#multiple_offices3 span{display:block;padding:3px;clear:both;}
#multiple_offices4 span{display:block;padding:3px;clear:both;}
	



.multiple_offices_off{
	height:18px;
	overflow:hidden;
}
.multiple_offices_on{
	height:400px;
	overflow:hidden;
	/*overflow:visible;
	display:block;*/
}
    Last edited by Natdrip; 03-19-2009 at 12:08 PM.
    Natdrip :P
    "water go down the hole" - plucky duck
    Reply With Quote Reply With Quote
  2. 03-19-2009 12:15 PM #2
    gil davis's Avatar
    gil davis
    gil davis is offline Nobody important
    Join Date
    Nov 2002
    Posts
    4,473
    A VAR declared inside a FUNCTION block is a local variable visible only to the function where it is declared. It does not exist anywhere else, and once the function finishes, it is destroyed.

    "Variable go down the hole - flush!"
    Reply With Quote Reply With Quote
  3. 03-19-2009 12:42 PM #3
    ZeroKilled's Avatar
    ZeroKilled
    ZeroKilled is offline Alternative sequence
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    A VAR declared inside a FUNCTION block is a local variable visible only to the function where it is declared.
    that is entirely true. however, there still a way to access local variable, closure. actually, that is what Natdrip code does but it always refer to the last element because every closure refer to the same variable. what you need is to retain the value on an unique closure for each event. you can do that with a function that return another function:
    Code:
    mo.onclick = function(val){
return function(){runCol.run(val);	}
}(tg);
    closure and infamous loop
    Last edited by ZeroKilled; 03-19-2009 at 12:45 PM.
    my mom is javascript, dad is javascripter, granpa is javascriptor, and my little sister is javasRidiculous.
    my nature language is javascript, then come spanish and english -- me
    Reply With Quote Reply With Quote
  4. 03-19-2009 01:02 PM #4
    Natdrip
    Natdrip is offline Registered User
    Join Date
    Jan 2004
    Posts
    484
    That is an awsome answer ZeroKilled you are ROXer

    Thanx
    Natdrip :P
    "water go down the hole" - plucky duck
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

     

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

Forum Rules

 HTML5 Development Center



Recent Articles