?
Solved

Javascript tab menu loading after Google Ads

Posted on 2016-09-15
7
Medium Priority
?
68 Views
Last Modified: 2016-09-22
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:

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]
        }
    }
}
}

Open in new window


Any assistance is appreciated. Thanks in advance.
0
Comment
Question by:Jack
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41800414
Where is the tab menu structure being used?
What you have posted just looks like a configuration structure. Where is it actually used?
0
 

Author Comment

by:Jack
ID: 41800433
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.
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41800991
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.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41801135
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.
<script type="text/javascript" src="js/tabmenu.js"></script>
<script type="text/javascript">
tabmenu.definemenu("tabs", 0)
tabmenu.definemenu("tabs2", 0)
</script>

Open in new window

0
 

Accepted Solution

by:
Jack earned 0 total points
ID: 41802388
Thanks Julian.  Google has finally suggested a solution for me and I tried it and it worked.

Change the "load" to "DOMContentLoaded" in line 10 of the tabmenu.js
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41803533
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
1
 

Author Closing Comment

by:Jack
ID: 41810370
Solution from Google's tech support externally.
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question