Two javascript onloan conflict

Discussion in 'JavaScript' started by levani, Sep 27, 2009.

  1. #1
    Hi everyone,

    Can anyone help me combine these two javascripts to avoid onload conflict?

    var kmrSimpleTabs = {
    
    	sbContainerClass: "simpleTabs",
    	sbNavClass: "simpleTabsNavigation",
    	sbContentClass: "simpleTabsContent",
    	sbCurrentNavClass: "current",
    	sbCurrentTabClass: "currentTab",
    	sbIdPrefix: "tabber",	
    
    	init: function(){
    		if(!document.getElementsByTagName) return false;
    		if(!document.getElementById) return false;
    		
    		var containerDiv = document.getElementsByTagName("div");
    	
    		for(var i=0; i<containerDiv.length; i++){
    			if (containerDiv[i].className == kmrSimpleTabs.sbContainerClass) {
    				
    				// assign a unique ID for this tab block and then grab it
    				containerDiv[i].setAttribute("id",kmrSimpleTabs.sbIdPrefix+[i]);		
    				var containerDivId = containerDiv[i].getAttribute("id");
    	
    				// Navigation
    				var ul = containerDiv[i].getElementsByTagName("ul");
    				
    				for(var j=0; j<ul.length; j++){
    					if (ul[j].className == kmrSimpleTabs.sbNavClass) {
    	
    						var a = ul[j].getElementsByTagName("a");
    						for(var k=0; k<a.length; k++){
    							a[k].setAttribute("id",containerDivId+"_a_"+k);
    							// get current
    							if(kmrSimpleTabs.readCookie('simpleTabsCookie')){
    								var cookieElements = kmrSimpleTabs.readCookie('simpleTabsCookie').split("_");
    								var curTabCont = cookieElements[1];
    								var curAnchor = cookieElements[2];
    								if(a[k].parentNode.parentNode.parentNode.getAttribute("id")==kmrSimpleTabs.sbIdPrefix+curTabCont){
    									if(a[k].getAttribute("id")==kmrSimpleTabs.sbIdPrefix+curTabCont+"_a_"+curAnchor){
    										a[k].className = kmrSimpleTabs.sbCurrentNavClass;
    									} else {
    										a[k].className = "";
    									}
    								} else {
    									a[0].className = kmrSimpleTabs.sbCurrentNavClass;
    								}
    							} else {
    								a[0].className = kmrSimpleTabs.sbCurrentNavClass;
    							}
    							
    							a[k].onclick = function(){
    								kmrSimpleTabs.setCurrent(this,'simpleTabsCookie');
    								return false;
    							}
    						}
    					}
    				}
    	
    				// Tab Content
    				var div = containerDiv[i].getElementsByTagName("div");
    				var countDivs = 0;
    				for(var l=0; l<div.length; l++){
    					if (div[l].className == kmrSimpleTabs.sbContentClass) {
    						div[l].setAttribute("id",containerDivId+"_div_"+[countDivs]);	
    						if(kmrSimpleTabs.readCookie('simpleTabsCookie')){
    							var cookieElements = kmrSimpleTabs.readCookie('simpleTabsCookie').split("_");
    							var curTabCont = cookieElements[1];
    							var curAnchor = cookieElements[2];		
    							if(div[l].parentNode.getAttribute("id")==kmrSimpleTabs.sbIdPrefix+curTabCont){
    								if(div[l].getAttribute("id")==kmrSimpleTabs.sbIdPrefix+curTabCont+"_div_"+curAnchor){
    									div[l].className = kmrSimpleTabs.sbContentClass+" "+kmrSimpleTabs.sbCurrentTabClass;
    								} else {
    									div[l].className = kmrSimpleTabs.sbContentClass;
    								}
    							} else {
    								div[0].className = kmrSimpleTabs.sbContentClass+" "+kmrSimpleTabs.sbCurrentTabClass;
    							}
    						} else {
    							div[0].className = kmrSimpleTabs.sbContentClass+" "+kmrSimpleTabs.sbCurrentTabClass;
    						}
    						countDivs++;
    					}
    				}	
    	
    				// End navigation and content block handling	
    			}
    		}
    	},
    	
    	// Function to set the current tab
    	setCurrent: function(elm,cookie){
    		
    		this.eraseCookie(cookie);
    		
    		//get container ID
    		var thisContainerID = elm.parentNode.parentNode.parentNode.getAttribute("id");
    	
    		// get current anchor position
    		var regExpAnchor = thisContainerID+"_a_";
    		var thisLinkPosition = elm.getAttribute("id").replace(regExpAnchor,"");
    	
    		// change to clicked anchor
    		var otherLinks = elm.parentNode.parentNode.getElementsByTagName("a");
    		for(var n=0; n<otherLinks.length; n++){
    			otherLinks[n].className = "";
    		}
    		elm.className = kmrSimpleTabs.sbCurrentNavClass;
    		
    		// change to associated div
    		var otherDivs = document.getElementById(thisContainerID).getElementsByTagName("div");
    		var RegExpForContentClass = new RegExp(kmrSimpleTabs.sbContentClass);
    		for(var i=0; i<otherDivs.length; i++){
    			if ( RegExpForContentClass.test(otherDivs[i].className) ) {
    				otherDivs[i].className = kmrSimpleTabs.sbContentClass;
    			}
    		}
    		document.getElementById(thisContainerID+"_div_"+thisLinkPosition).className = kmrSimpleTabs.sbContentClass+" "+kmrSimpleTabs.sbCurrentTabClass;
    	
    		// get Tabs container ID
    		var RegExpForPrefix = new RegExp(kmrSimpleTabs.sbIdPrefix);
    		var thisContainerPosition = thisContainerID.replace(RegExpForPrefix,"");
    		
    		// set cookie
    		this.createCookie(cookie,'simpleTabsCookie_'+thisContainerPosition+'_'+thisLinkPosition,1);
    	},
    	
    	// Cookies
    	createCookie: 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=/";
    	},
    	
    	readCookie: function(name) {
    		var nameEQ = name + "=";
    		var ca = document.cookie.split(';');
    		for(var i=0;i < ca.length;i++) {
    			var c = ca[i];
    			while (c.charAt(0)==' ') c = c.substring(1,c.length);
    			if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    		}
    		return null;
    	},
    	
    	eraseCookie: function(name) {
    		this.createCookie(name,"",-1);
    	},
    
    	// Loader
    	addLoadEvent: function(func) {
    		var oldonload = window.onload;
    		if (typeof window.onload != 'function') {
    			window.onload = func;
    		} else {
    			window.onload = function() {
    				if (oldonload) {
    					oldonload();
    				}
    				func();
    			}
    		}
    	}
    	
    	// END
    };
    
    // Load SimpleTabs
    kmrSimpleTabs.addLoadEvent(kmrSimpleTabs.init);
    Code (markup):
    function hideMessage() {
    document.getElementById("thanks").style.display="none"; 
    }
    
    function startTimer() {
    var tim = window.setTimeout("hideMessage()", 5000);  // 5000 milliseconds = 5 seconds
    }
    Code (markup):
    I know about the http://simonwillison.net/2004/May/26/addLoadEvent/ solution, the first code uses this function, but I don't know how to add the second one to the loader.

    Can anyone please help?
     
    levani, Sep 27, 2009 IP
  2. Jj delc

    Jj delc Peon

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Have you tried using JQuery (or any js framework)? it solves the problem allowing you to add several callbacks, on document loaded and also allows you to bind more than ona action to other handlers such as clicks, onchange, etc.
     
    Jj delc, Sep 27, 2009 IP
  3. camjohnson95

    camjohnson95 Active Member

    Messages:
    737
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    60
    #3
    i'm not exactly sure what you mean, but i'd say just add:
    startTimer();

    at the beginning of the init function. e.g:
    
    	init: function(){
    		startTimer();
                              .............
    
    Code (markup):
    there is other ways that you could achieve the same result... without having to use jquery.
     
    Last edited: Sep 28, 2009
    camjohnson95, Sep 28, 2009 IP
  4. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #4
    or better yet.
    
    kmrSimpleTabs.addLoadEvent(startTimer());
    PHP:
     
    dimitar christoff, Sep 28, 2009 IP
  5. levani

    levani Peon

    Messages:
    61
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    After adding this code at the very bottom of the first script, both script work but the second one no more waits for the full page load!

    Any ideas?
     
    levani, Sep 28, 2009 IP