SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jan 2006
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multiple Onload function errors (I think!)

    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:

    Code:
    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:

    Code:
    //----------------------------------------------------------
    		
    	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

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    <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>

  3. #3
    SitePoint Member
    Join Date
    Jan 2006
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code:
    <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

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


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
  •