Multiple Onload function errors (I think!)

[GrahamT]

Please assume that I know very, very little Javascript, and it is only with the help of others that I have certain things working so far!!

I have implemented a sliding menu (thanks to mortimer in this thread) that uses the following .js file:

startList=function() {
	if(document.getElementById) {
		navRoot = document.getElementById('menu');
		for(i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if(node.nodeName=='LI') {
				node.className='over';
				node.onclick=function() {
					if(this.className!='over')
						this.className='over';
					else
						this.className='';
				}
			}
		}
	}
}
window.onload=startList;

var Nav = {
       Init : function(){
               navRoot = document.getElementById('menu').getElementsByTagName('LI');
               for(i=0; i<navRoot.length; i++){
                       //Check if the cookie value matches current id if so don't hide
                       if(Cookie.Read('section') != navRoot[i].id){
                               navRoot[i].className = 'over'; //Set default class
                       };
                       navRoot[i].onclick = Nav.Click; //Add Click event
               };
       },
       Click : function(){
               //Close all menus
               for(i=0; i<navRoot.length; i++){
                       navRoot[i].className='over';
               };
               //Open clicked menu
               this.className = '';
               Cookie.Create('section', this.id, 5); //create open menu cookie save for 5 days
               return false;
       }
};

/*
       General cookie function based on quirksmode examples
       http://www.quirksmode.org/js/cookies.html
*/
var Cookie = {
       Create : function(name, value, days){
               if (days) {
                       var date = new Date();
                       date.setTime(date.getTime()+(days*24*60*60*1000));
                       var expires = "; expires="+date.toGMTString();
               }
               else var expires = "";
               document.cookie = name+"="+value+expires+"; path=/";
       },
       Read : function(name){
               var nameEQ = name.toLowerCase() + "=";
               var ca = document.cookie.split(';');
               for(var i=0;i < ca.length;i++) {
                       var c = ca[i].toLowerCase();
                       while (c.charAt(0)==' ') c = c.substring(1,c.length);
                       if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
               }
               return null;
       },
       Erase : function(){
               this.Create(name, "", -1);
       }
};
window.onload=Nav.Init;

If I am reading this correctly, it calls two functions in the Onload event? This works fine.

However, I have added a search box, which uses some javascript, and now both the menu and the search will not work together. The search uses the following:

//----------------------------------------------------------
		
	if (!applesearch)	var applesearch = {};

//----------------------------------------------------------

	applesearch.init = function ()
	{
		var srchform = document.getElementById('searchform');
		
		// Paranoia! Make sure we can get the search form before trying anything
		if(srchform) {
			
			var srchinput = document.getElementById('query');
			labelText = applesearch.getLabelText();
			
			// add applesearch css for non-safari, dom-capable browsers
			if ( navigator.userAgent.toLowerCase().indexOf('safari') < 0  && document.getElementById ) {
				this.clearBtn = false;
		
				// add style sheet if not safari
				var dummy = document.getElementById("dummy_css");
				if (dummy)	dummy.href = "includes/applesearch.css";

				//------------------
				
				// create and attach the span
				var r_crnr = document.createElement('span');
				r_crnr.className = 'sbox_r'; // IE win doesn't like setAttribute in this case
				r_crnr.setAttribute('id','srch_clear');
		
				var fieldsets = srchform.getElementsByTagName('fieldset');
				if (fieldsets) {
					fieldsets[0].appendChild(r_crnr);
				}
		
				// Create and attach a clearing div, keeps Opera happy
				var d_clr = document.createElement('div');
				d_clr.setAttribute('class','clear');
				srchform.appendChild(d_clr);
		
				//------------------
				
				// set our text colors
				var labels = srchform.getElementsByTagName('label');
	
				if (labels) {			
					if (labels[0].currentStyle) {
						// must be using IE
						labelColor = labels[0].currentStyle.color;
						inputColor = srchinput.currentStyle.color;
					} else if (document.defaultView.getComputedStyle) {
						labelColor = document.defaultView.getComputedStyle(labels[0], null).getPropertyValue('color');
						inputColor = document.defaultView.getComputedStyle(srchinput, null).getPropertyValue('color');
					}
				}
				
				//------------------
				
				// Paranoia again! Make sure the search field exist
				if(srchinput) {
					// set the placeholder text based off the label
					srchinput.value = labelText;
					srchinput.style.color = labelColor;
	
					// add some events to the input field
					srchinput.onkeyup = function () {
							applesearch.onChange('query','srch_clear');
						}
					srchinput.onfocus = function () {
							if (this.value == labelText) {
								this.value = '';
								this.style.color = inputColor;	
							}
						}
					srchinput.onblur = function () {
							if (this.value == '') {
								this.value = labelText;
								this.style.color = labelColor;
							}
						}
				}
				
				// prevent the form being submitted if the input's value is the placeholder (label) text
				srchform.onsubmit = function()
				{
					if(srchinput && srchinput != labelText) {
						return true;
					} else {
						return false;
					}
				}
			} else {
				// Paranoia again! Make sure the search field exist
				if(srchinput) {
					// Using Safari so change some attributes to get the Apple Search field
					srchinput.type = 'search';
					srchinput.setAttribute('placeholder',labelText);
					srchinput.setAttribute('autosave','bsn_srch');
					srchinput.setAttribute('results','5');
				}
			}
		}
	}

//----------------------------------------------------------

	applesearch.getLabelText = function()
	{
		var srchform = document.getElementById('searchform');
		if(srchform) {
			var labels = srchform.getElementsByTagName('label');
	
			if (labels) {
				var labelFor = labels[0].getAttribute('for');
				var labelText = labels[0].firstChild.nodeValue;
			} else {
				// just in case, set default text
				var labelText = 'Search';
			}
		} else {
			// just in case, set default text
			var labelText = 'Search';
		}
		return labelText;
	}

//----------------------------------------------------------

	// called when on user input - toggles clear fld btn
	applesearch.onChange = function (fldID, btnID)
	{
		// check whether to show delete button
		var fld = document.getElementById( fldID );
		var btn = document.getElementById( btnID );

		if (fld.value.length > 0 && fld.value != labelText && !this.clearBtn) {
			btn.className = 'sbox_r_f2';
			btn.fldID = fldID; // btn remembers it's field
			btn.onclick = this.clearBtnClick;
			this.clearBtn = true;
		} else if (fld.value.length == 0 && this.clearBtn) {
			btn.className = 'sbox_r';
			btn.onclick = null;
			this.clearBtn = false;
			// reset the field's placeholder text
			fld.value = labelText;
			fld.style.color = labelColor;
		}
	}

//----------------------------------------------------------

	applesearch.clearFld = function (fldID,btnID)
	{
		var fld = document.getElementById( fldID );
		fld.value = '';
		this.onChange(fldID,btnID);
	}


//----------------------------------------------------------

	applesearch.clearBtnClick = function ()
	{
		applesearch.clearFld(this.fldID, this.id);
	}
	
//----------------------------------------------------------

	window.onload = function () { applesearch.init(); }

//----------------------------------------------------------

I presume again, that this calls the applesearch.init in the body onload event.

How can I get these two functionalities to work together, with the best approach.

TIA

Graham

[mortimer]

Hi Graham

your right the problem is because off multiple onload calls this can be solved by moving all the calls to one onload function the script below should solve your problem.

<script language="JavaScript" type="text/javascript">
var Nav = {
	Init : function(){
		navRoot = document.getElementById('menu').getElementsByTagName('LI');
		for(i=0; i<navRoot.length; i++){
			//Check if the cookie value matches current id if so don't hide
			if(Cookie.Read('section') != navRoot[i].id){
				navRoot[i].className = 'over'; //Set default class
			};
			navRoot[i].onclick = Nav.Click; //Add Click event
		};
	},
	Click : function(){
		//Close all menus
		for(i=0; i<navRoot.length; i++){
			navRoot[i].className='over';
		};
		//Open clicked menu
		this.className = '';
		Cookie.Create('section', this.id, 5); //create open menu cookie save for 5 days
		return false;
	}
};

/* 
	General cookie function based on quirksmode examples
	http://www.quirksmode.org/js/cookies.html 
*/
var Cookie = {
	Create : function(name, value, days){
		if (days) {
			var date = new Date();
			date.setTime(date.getTime()+(days*24*60*60*1000));
			var expires = "; expires="+date.toGMTString();
		}
		else var expires = "";
		document.cookie = name+"="+value+expires+"; path=/";
	},
	Read : function(name){
		var nameEQ = name.toLowerCase() + "=";
		var ca = document.cookie.split(';');
		for(var i=0;i < ca.length;i++) {
			var c = ca[i].toLowerCase();
			while (c.charAt(0)==' ') c = c.substring(1,c.length);
			if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
		}
		return null;
	},
	Erase : function(){
		this.Create(name, "", -1);
	}
};

//----------------------------------------------------------	
	if (!applesearch)	var applesearch = {};
//----------------------------------------------------------
applesearch.init = function (){
	var srchform = document.getElementById('searchform');
	
	// Paranoia! Make sure we can get the search form before trying anything
	if(srchform) {
		
		var srchinput = document.getElementById('query');
		labelText = applesearch.getLabelText();
		
		// add applesearch css for non-safari, dom-capable browsers
		if ( navigator.userAgent.toLowerCase().indexOf('safari') < 0  && document.getElementById ) {
			this.clearBtn = false;
	
			// add style sheet if not safari
			var dummy = document.getElementById("dummy_css");
			if (dummy)	dummy.href = "includes/applesearch.css";

			//------------------
			
			// create and attach the span
			var r_crnr = document.createElement('span');
			r_crnr.className = 'sbox_r'; // IE win doesn't like setAttribute in this case
			r_crnr.setAttribute('id','srch_clear');
	
			var fieldsets = srchform.getElementsByTagName('fieldset');
			if (fieldsets) {
				fieldsets[0].appendChild(r_crnr);
			}
	
			// Create and attach a clearing div, keeps Opera happy
			var d_clr = document.createElement('div');
			d_clr.setAttribute('class','clear');
			srchform.appendChild(d_clr);
	
			//------------------
			
			// set our text colors
			var labels = srchform.getElementsByTagName('label');

			if (labels) {			
				if (labels[0].currentStyle) {
					// must be using IE
					labelColor = labels[0].currentStyle.color;
					inputColor = srchinput.currentStyle.color;
				} else if (document.defaultView.getComputedStyle) {
					labelColor = document.defaultView.getComputedStyle(labels[0], null).getPropertyValue('color');
					inputColor = document.defaultView.getComputedStyle(srchinput, null).getPropertyValue('color');
				}
			}
						
			// Paranoia again! Make sure the search field exist
			if(srchinput) {
				// set the placeholder text based off the label
				srchinput.value = labelText;
				srchinput.style.color = labelColor;

				// add some events to the input field
				srchinput.onkeyup = function () {
						applesearch.onChange('query','srch_clear');
					}
				srchinput.onfocus = function () {
						if (this.value == labelText) {
							this.value = '';
							this.style.color = inputColor;	
						}
					}
				srchinput.onblur = function () {
						if (this.value == '') {
							this.value = labelText;
							this.style.color = labelColor;
						}
					}
			}
			
			// prevent the form being submitted if the input's value is the placeholder (label) text
			srchform.onsubmit = function(){
				if(srchinput && srchinput != labelText) {
					return true;
				} else {
					return false;
				}
			}
		} else {
			// Paranoia again! Make sure the search field exist
			if(srchinput) {
				// Using Safari so change some attributes to get the Apple Search field
				srchinput.type = 'search';
				srchinput.setAttribute('placeholder',labelText);
				srchinput.setAttribute('autosave','bsn_srch');
				srchinput.setAttribute('results','5');
			}
		}
	}
}

applesearch.getLabelText = function(){
	var srchform = document.getElementById('searchform');
	if(srchform) {
		var labels = srchform.getElementsByTagName('label');

		if (labels) {
			var labelFor = labels[0].getAttribute('for');
			var labelText = labels[0].firstChild.nodeValue;
		} else {
			// just in case, set default text
			var labelText = 'Search';
		}
	} else {
		// just in case, set default text
		var labelText = 'Search';
	}
	return labelText;
}

// called when on user input - toggles clear fld btn
applesearch.onChange = function (fldID, btnID){
	// check whether to show delete button
	var fld = document.getElementById( fldID );
	var btn = document.getElementById( btnID );

	if (fld.value.length > 0 && fld.value != labelText && !this.clearBtn) {
		btn.className = 'sbox_r_f2';
		btn.fldID = fldID; // btn remembers it's field
		btn.onclick = this.clearBtnClick;
		this.clearBtn = true;
	} else if (fld.value.length == 0 && this.clearBtn) {
		btn.className = 'sbox_r';
		btn.onclick = null;
		this.clearBtn = false;
		// reset the field's placeholder text
		fld.value = labelText;
		fld.style.color = labelColor;
	}
}

applesearch.clearFld = function (fldID,btnID){
	var fld = document.getElementById( fldID );
	fld.value = '';
	this.onChange(fldID,btnID);
}

applesearch.clearBtnClick = function (){
	applesearch.clearFld(this.fldID, this.id);
}

//Call all functions that need to run on page load
window.onload = function pageloader(){
	Nav.Init();
	applesearch.init();
};
</script>

[GrahamT]

mortimer

Thanks for stepping in again, appreciate the help.

If I paste the code provided into the <head> tag on the page then it will work no problem.

If I create a new .js file, and paste all the code you provided (minus the script tags) and then add a link to the external script i.e.

<script language="JavaScript" type="text/javascript" src="js/meun_n_search.js"></script>

then it doesn't seem to work!

Obviously my mistake I presume!

Cheers

Graham

[mortimer]

Hi Graham

No probs not sure why the code is not working when you add it as an external file, if you can give me url off the site your testing this on i'll have a look see if i can work out the problem with it. If you dont want to post the url on here then PM me.