Full screen mobile menu

[andywalmsley]

1) DD script: Full screen mobile menu

2) URL: http://www.dynamicdrive.com/dynamici...creenmenu.htm:

3) Problem: The script works fine, but when running Google's PageSpeed Insights analysis program there's a recommendation to run the scripts asynchronously.
I've tried adding async to the relevant parts of the Head statements but when added to <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> the menu doesn't work at all, and when added to <script src="http://www.sgclean.co.uk/mobile-menus/fullscreenmenu.js" > there's no impact on PageSpeed Insights scores.
I guess the scripts are not meant to be run asynchronously (are they)? but can anybody please advise whether there's a work-round.
Thanks in anticipation.

[ddadmin]

The async attribute should only be added inside SCRIPT tags referencing an external .js file. The mobile menu's initialization code by default is added inline on the page:

jQuery(function(){ // on DOM load
 menu1 = new fullscreenmenu({ // initialize menu
  source: 'menucontent.htm'
 })
})

Move the above block to the end of fullscreenmenu.js, and then add the async to the script reference:

<script src="fullscreenmenu.js" async>

[andywalmsley]

Thanks, I've done that and it works fine.
I wonder, though, can anything be done with <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> to make this operate asynchronously? (Apart from moving the menu definition inline).

[Beverleyh]

Applying "async" to external scripts will mean that they load as soon as they are available, regardless of what is happening around them. Unfortunately this means they will not necessarily honour the order that they appear in the HTML. It's like a "first come, first served" logic, meaning a small JQuery plugin will most likely load before the much larger jQuery library. And as you know, the main jQuery library MUST load before any dependants, hence your broken menu - you just can't guarantee that the asynced jQuery library will load before the asynced plugin (especially when loaded from different domains).

If you want to async jQuery, I would suggest downloading it and serving it from your own domain. Additionally, combine any plugins and initialisation scripts into the same file - at the bottom to guarantee correct load order.

[andywalmsley]

Hi Beverley.
Thanks for that.
I have to admit, though, to not being familiar with JS at all. Does your comment mean that the first suggestion by ddadmin will consistently work ok but there's little that can be done simply with the ajax script? (It does seem, incidentally, that the ajax script is the more significant problem as far as PageSpeed Insights is concerned).
The documentation implies that if the menu definition is moved inline, the ajax script is not needed, although this doesn't seem to be the case.
I have tried to move the menu definition inline (into the Body and the Head section) with no success. The DD example given works fine when I use that, and so does adding a small number of my own 'li' entries, but adding more entries causes the menu links to be ignored even though the menu is correctly displayed.
Any further advice would be much appreciated.

[Beverleyh]

My suggestion is in addition to what ddadmin says in his post. ddadmin says to paste the initialisation code into the external fullscreenmenu.js file (at the bottom). I suggested to go one step further and paste in the whole jQuery library too. It doesn't really matter what the js file is called but to async everything, and guarentee load order, you should have one file that contains, in this order;

1. jQuery library
2. Contents of fullscreenmenu.js
3. Initialisation code for the menu

Then you can async the one external javascript reference;

<script src="all-scripts-combined.js" async>

[andywalmsley]

Hi Beverley.
Thanks again, but where is the JQuery library for me to copy in?
And do I still need the ajax link?
Andrew

[Beverleyh]

where is the JQuery library for me to copy in?

at the location specified in your first two posts - just download that file or go to the official jQuery website.

And do I still need the ajax link?

if you have your menu in an external file, yes. Or inline it instead. The choice is yours.

[andywalmsley]

Beverley,
Sorry to be a pain.
I've tried inlining the menu without success.
Do I put the <nav>my menu</nav> in the body section?
When I tried it, I used the DD menu example given in the documentation and it worked fine. But as soon as I introduced my own menu it stopped working - my menu had worked ok when in an external file.
I could introduce a few lines from my menu into the DD example and they worked ok, but if more lines from my menu were introduced, the links stopped working. And even with the DD example, the ajax script still seemed to be needed.
I'd be really grateful for further help.
Andrew

[Beverleyh]

I've tried inlining the menu without success. Do I put the <nav>my menu</nav> in the body section?

yes, but with the "fullscreenmenu" class and unique id of your choice, and then initialise it with that id, as detailed in the demo page.

If your menu isn't working, maybe your markup is off? Try setting up a reduced test case and post a link so we can see what the problem is.