Jack
asked on
Javascript tab menu loading after Google Ads
I utilized a tab menu written in HTML and CSS and running with javascript. The tab menu can be seen working here as DD Tab Menu. Everything works great except one issue: when I add Google Ads, it will not load until Google ads is loaded. The Google Ads is set 'async' so it is supposed to load last.
Usually one doesn't notice, however some times when there is a problem with the Google ads network, the tab menu will not load. I could not figure out why. The javascript for the tab menu is:
Any assistance is appreciated. Thanks in advance.
Usually one doesn't notice, however some times when there is a problem with the Google ads network, the tab menu will not load. I could not figure out why. The javascript for the tab menu is:
var tabmenu={
disabletablinks: true,
snap2original: [false, 300],
currentpageurl: window.location.href.replace("http://"+window.location.hostname, "").replace(/^\//, ""),
definemenu:function(tabid, dselected){
this[tabid+"-menuitems"]=null
this[tabid+"-dselected"]=-1
this.addEvent(window, function(){tabmenu.init(tabid, dselected)}, "load")
},
showsubmenu:function(tabid, targetitem){
var menuitems=this[tabid+"-menuitems"]
this.clearrevert2default(tabid)
for (i=0; i<menuitems.length; i++){
menuitems[i].className=""
if (typeof menuitems[i].hasSubContent!="undefined")
document.getElementById(menuitems[i].getAttribute("rel")).style.display="none"
}
targetitem.className="current"
if (typeof targetitem.hasSubContent!="undefined")
document.getElementById(targetitem.getAttribute("rel")).style.display="block"
},
isSelected:function(menuurl){
var menuurl=menuurl.replace("http://"+menuurl.hostname, "").replace(/^\//, "")
return (tabmenu.currentpageurl==menuurl)
},
isContained:function(m, e){
var e=window.event || e
var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
if (c==m)
return true
else
return false
},
revert2default:function(outobj, tabid, e){
if (!tabmenu.isContained(outobj, tabid, e)){
window["hidetimer_"+tabid]=setTimeout(function(){
tabmenu.showsubmenu(tabid, tabmenu[tabid+"-dselected"])
}, tabmenu.snap2original[1])
}
},
clearrevert2default:function(tabid){
if (typeof window["hidetimer_"+tabid]!="undefined")
clearTimeout(window["hidetimer_"+tabid])
},
addEvent:function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
},
init:function(tabid, dselected){
var menuitems=document.getElementById(tabid).getElementsByTagName("a")
this[tabid+"-menuitems"]=menuitems
for (var x=0; x<menuitems.length; x++){
if (menuitems[x].getAttribute("rel")){
this[tabid+"-menuitems"][x].hasSubContent=true
if (tabmenu.disabletablinks)
menuitems[x].onclick=function(){return false}
if (tabmenu.snap2original[0]==true){
var submenu=document.getElementById(menuitems[x].getAttribute("rel"))
menuitems[x].onmouseout=function(e){tabmenu.revert2default(submenu, tabid, e)}
submenu.onmouseover=function(){tabmenu.clearrevert2default(tabid)}
submenu.onmouseout=function(e){tabmenu.revert2default(this, tabid, e)}
}
}
else //for items without a submenu, add onMouseout effect
menuitems[x].onmouseout=function(e){this.className=""; if (tabmenu.snap2original[0]==true) tabmenu.revert2default(this, tabid, e)}
menuitems[x].onmouseover=function(){tabmenu.showsubmenu(tabid, this)}
if (dselected=="auto" && typeof setalready=="undefined" && this.isSelected(menuitems[x].href)){
tabmenu.showsubmenu(tabid, menuitems[x])
this[tabid+"-dselected"]=menuitems[x]
var setalready=true
}
else if (parseInt(dselected)==x){
tabmenu.showsubmenu(tabid, menuitems[x])
this[tabid+"-dselected"]=menuitems[x]
}
}
}
}
Any assistance is appreciated. Thanks in advance.
ASKER
H Julian, if you check http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm you will see that only the first two lines of the javascript is for configuration. I know javascript is supposed to load last. But Google's ads should be after it with a 'async", I believe.
I have sent you a private message on where to access the development site where the tab menu is on every page.
I have sent you a private message on where to access the development site where the tab menu is on every page.
I know javascript is supposed to load last.JavaScript loads when it is encountered.
There is a difference between loading and when it is executed.
Raw JavaScript will execute when it is encountered - JavaScript that runs after page load is encapsulated in a windows.load event handler.
I will take a look and see what I can see.
I am trying to see what the problem is here.
Your tab menu is the last script being loaded - right at the bottom of the page which means it is the last javascript to execute.
All your google ads code comes before this.
Move the following into your head.
Your tab menu is the last script being loaded - right at the bottom of the page which means it is the last javascript to execute.
All your google ads code comes before this.
Move the following into your head.
<script type="text/javascript" src="js/tabmenu.js"></script>
<script type="text/javascript">
tabmenu.definemenu("tabs", 0)
tabmenu.definemenu("tabs2", 0)
</script>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Change the "load" to "DOMContentLoaded" in line 10 of the tabmenu.js
.... which makes it execute only after DOM has loaded - which will have exactly the same effect as moving your tab menu script before Google - as suggested in my last post.
In this case Google provides for the option to run on DOM loaded - but other scripts may not in which case ordering the scripts correctly is what is required to solve the problem
ASKER
Solution from Google's tech support externally.
What you have posted just looks like a configuration structure. Where is it actually used?