PDA

View Full Version : Full screen mobile menu



andywalmsley
01-28-2015, 05:56 PM
1) DD script: Full screen mobile menu

2) URL: http://www.dynamicdrive.com/dynamicindex1/fullscreenmenu.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
01-28-2015, 10:18 PM
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
01-29-2015, 08:18 AM
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
01-29-2015, 09:03 AM
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
01-29-2015, 10:25 AM
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
01-29-2015, 11:20 AM
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
01-29-2015, 12:50 PM
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
01-29-2015, 01:32 PM
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
01-29-2015, 01:43 PM
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
01-29-2015, 01:59 PM
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.

andywalmsley
01-29-2015, 02:50 PM
Hi Beverley,
The code is here: http://www.newforestexplorersguide.co.uk/common-rights/introduction.html.
(It's in the Head section. I've tried it in the Body section but that makes no difference.
It's only activated via the animated drawer on screens up to 600px wide).
The following are now the last five lines of fullscreenmenu.js:
jQuery(function(){ // on DOM load
toplevelmenu = new fullscreenmenu({ // initialize menu
source: '#my-menu'
})
})
If I completely remove the line that references ajax, the menu does not open at all.
I've not made any other changes.
Andrew

Beverleyh
01-29-2015, 03:09 PM
Firstly, I don't see any code relating to the fullscreenmenu in the page you linked to - no link to the jQuery library and no fullscreenmenu JS or CSS files.

Secondly, there is no navigation markup with the "fullscreenmenu" class or "my-menu" id

Thirdly, there is no mobile/device-width meta tag which would display your page in a mobile view on my iPhone (how I'm currently viewing) so I don't see any front-end indication of a mobile menu or icon.

Please provide a link to a reduced test page - in other words, a page that only contains your implementation of the menu (no other markup or distractions) to make it easier to see where you're going wrong.

To clarify any confusion with the Ajax line in the initialisation code; it isn't needed when the menu markup is inlined in the page markup with a unique id. The id is used to initialise the menu instead.

andywalmsley
01-29-2015, 03:16 PM
Beverley,
I'm sorry - wrong URL.
It should be:
http://www.sgclean.co.uk/common-rights/introduction.html
Can you manage with this?
Andrew

andywalmsley
01-29-2015, 03:48 PM
Hi Beverley,
I've put together a page just containing the menu.
It's here: http://www.sgclean.co.uk/mobile-menus/menu-test.html
Andrew

Beverleyh
01-29-2015, 04:01 PM
Looks like you've sorted it. It seems to be working fine now.

andywalmsley
01-29-2015, 04:48 PM
Hi Beverley.
If only!
The menu is showing ok but nothing happens when the links are tapped.
And if I remove the ajax link, which if possible I want to, nothing happens at all.
Andrew

Beverleyh
01-29-2015, 06:30 PM
I really am confused with why you're formatting the web page structure like you are. Why are you putting the navigation HTML markup in the <head> section of your web page? You already asked if it should go in the <body> and I answered you here http://www.dynamicdrive.com/forums/showthread.php?77914-Full-screen-mobile-menu&p=310768#post310768. Something must have got lost across the wire - can you help me understand how you interpreted the demo instructions that way? Or why you would stray from the structure of a basic web page - here's a refresher to explain what goes where http://www.sitepoint.com/web-foundations/basic-structure-of-a-web-page/

Also, can you just clarify what you mean by the "Ajax link". You aren't using the Ajax initialisation method (the line that references, or "links to", the external menu markup) so what are you referring to?

andywalmsley
01-29-2015, 07:51 PM
Hi Beverley.
Sorry about that. I missed your response re. whether head or body. The navigation is in the body section now, with the same result as before. Re. ajax: I'm referring to this line which I understand has to go in the head section - <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Andrew

Beverleyh
01-29-2015, 08:12 PM
That's the jQuery library and is required for this menu - going back to your first post, this is the JavaScript file that I suggested downloading and serving from your own domain then combining with the other menu scripts for asyncing.

When the fullscreenmenu demo page talks about Ajax, it's referring to the way it can reference the external file that contains the menu markup.

You are not using the Ajax method now and are instead using the id initialisation method, with the menu markup placed in the <body>. That part is correct.

The thing that looks off now is your lack of valid doctype. Hopefully once one is inserted, your script will work properly http://www.sitepoint.com/web-foundations/doctypes/

andywalmsley
01-29-2015, 09:02 PM
Hi Beverley,
I've tried a range of doc types and it makes no difference.
What I have established, though, is that if I copy in the 7 <li>s from the DD example, it works fine, but as soon as I enter an 8th - a repeat copy of a DD <li> - it stops working.
I've done the same with my <li>s with the same result - it stops working when there is an 8th entry.
(It does not work at all with my <li>s when the menu items span more than one line when displayed on a phone).
It seems, therefore, as though there's a problem with more than 7 entries and with entries that span more than one line.
A working example is loaded now.
However, given that it seems as though I'll have to leave the <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> line in, moving my menu inline will not benefit as far as PageSpeed Insight tests are concerned, so I think I'll just go back to holding the menu in a separate file.
(Doing what you suggest with the JS library does not seem to work for me - it's probably a bit beyond my level of expertise, so for now I'll revert back to a separate menu file).
Thanks for your help.
Andrew

Beverleyh
01-29-2015, 11:23 PM
I see what you mean. There looks to be a bug so I have reported it here http://www.dynamicdrive.com/forums/showthread.php?77920-Full-Screen-Mobile-Menu-links-don-t-work-when-drag-activated&p=310785#post310785

andywalmsley
01-30-2015, 11:41 AM
Thanks Beverley. I thought I was imagining things. Kept going round and round in circles until I couldn't see wood for trees. Hope it gets sorted. (Am away from home today, hence delayed response). Andrew