Drop down (popup layer) Menu has become unreliable

Hi

Having had a lot of help from TG members in updating my website "Songs of the Inland Waterways" and feeling rather pleased to have 'finished' the job - bar a little tweaking - I've discovered that the drop down/popup menu on the Song Menu page

https://www.waterwaysongs.info/songmenu.htm

is behaving erratically and doesn't appear to work at all on Microsoft Edge. This is a rather important menu which is key to functioning of the website.

Basically, having caused the popup menu to be selected with the beefburger icon, selection of one of the four button images with links to Home, Reference, Introduction or Updates just closes the popup player rather than moving to the linked page. Sometimes the link works as intended but at the moment I'm struggling to see any pattern in when it does and doesn't work so any help would be appreciated.

Ian

I can only confirm this is the case Ian. Things work as expected in FF & Chrome too initially but then they to get the non responsive menu links after a while.

I also find your menu structure a bit confusing. You appear to have 5 main pages but often your menu only shows 4 such that the menu is not consistant across all pages. How about:

Here's an example of the way I'm thinking:

LINK

Thanks Egg, your comments are very useful.

I was thinking of simplifying the menu but was concerned that the menu was taking up too much space at the top of the screen and that's why I had a drop-down menu. Your example shows me that it can be done without looking too cluttered so I'll set about changing the relevant pages. Simplifying things is definitely a good idea.

That may still leave the problem on the mobile variant pages but I'll cross that bridge later.

Thanks again,
Ian

I've made your suggested changes Egg and the appearance and usability is much improved. The problem I had will have disappeared along with the popup menu layer and I'm a happy bunny. Much unnecessary work has been discarded but we learn by our mistakes.

It just shows how easy it is to make a wrong design decision when you are working on your own so I am very grateful for the help and support (and critical eye) this forum provides.

Now to look at the mobile variant and discover the next problem!

Many many thanks
Ian

Glad to hear your initial problem is solved. The sites navigation looks much simpler now. ;)

Quote:

---

It just shows how easy it is to make a wrong design decision when you are working on your own

---

The trouble is you're working on the site full time and it's often very easy to overlook things. I do it all the time.

Nice site and easy to navigate! Very responsive too. It seems that you've solved the hamburger issue, right? One thing I noticed is that when in the Song Menu with one of the songs selected, the hamburger menu only shows three buttons, the one with Introduction missing.

Thanks for the comments Boy.

You are right about the three options rather than five. I haven't got round to changing all the song pages yet (It's quite a job as the songs are in different alphabetical Xara files).

As I considered the Introduction and Updates to be non-essential options as you go further into the site (I would think most people would access them from one of the early landing pages) I dropped them from some of the mobile variation pages and the song pages as well. Now Egg has shown that I can get five good sized buttons on one line I will probably add them back onto the Song pages where they once were.

I can see the argument that all five sections should be accessible from every page and it would be nice to get more consistency across the site.

Stay safe everyone.
Ian

Quote:

---

Originally Posted by IanB

I can see the argument that all five sections should be accessible from every page and it would be nice to get more consistence across the site.

---

That would be my p.o.v.

With the mobile variants I often prefer to have a seperate mobile menu, like so:

Example

Quote:

---

Originally Posted by Egg Bramhill

With the mobile variants I often prefer to have a seperate mobile menu, like so:

Example

---

That's thrown another iron into the pot - and it may well come into play - particularly if the drop-down menu/popup layer on the mobile version starts misbehaving. Surely this would need an additional mobile page so presumably I'd have to have an equivalent main page which I suppose could be the same as the mobile version? I'm going to have to think about this!

Wouldn't life be boring if these problems didn't keep cropping up?

At the moment I'm redesigning the mobile song pages (A section) but I won't be putting anything on-line until I've done all the songs. I'm spending some time trying to get the design right as I've learnt from experience that going back and changing things later can be very time consuming. I'll be checking out the drop-down/popup layer behavior thoroughly. If I could keep this drop down menu on the mobile variant I'd be happy as it is quite neat. On the other hand a simpler approach may be needed - particularly if I can't rely on the coding.

Thanks again for all the help.
Ian

Yes, the main and mobile would need a menu page but nothing points to it on main site, so it remains unseen.

Quote:

---

Originally Posted by Egg Bramhill

Yes, the main and mobile would need a menu page but nothing points to it on main site, so it remains unseen.

---

Thanks. It's clear now.

Quote:

---

Originally Posted by Egg Bramhill

With the mobile variants I often prefer to have a seperate mobile menu, like so:

Example

---

I've spent some time trying to track down the reason for the failure of the drop-down/popup layer menu and have, so far, not deduced the reason.

I'm thinking that a separate mobile menu may be the best option but before I go down that route I have a question. Is it possible to add a button to the menu to take you back to the page the menu was loaded from?

It can be done using placeholder script:

Quote:

---

<button onclick="goBack()">Go Back</button>

<script>
function goBack() {
window.history.back();
}
</script>

---

Quote:

---

Originally Posted by Egg Bramhill

Yes, the main and mobile would need a menu page but nothing points to it on main site, so it remains unseen.

---

As Xara does not allow different pages to exist on Main and Variant, if you create a Variant page then there is always a Main page. If you leave it blank and the viewer changes from Portrait to Landscape or widens their viewpoint, they will get a blank page.

I do not see the problem with a Hamburger icon opening a menu layer with the 5 page links in a vertical show.

Acorn

Quote:

---

Originally Posted by Acorn

As Xara does not allow different pages to exist on Main and Variant, if you create a Variant page then there is always a Main page. If you leave it blank and the viewer changes from Portrait to Landscape or widens their viewpoint, they will get a blank page.

I do not see the problem with a Hamburger icon opening a menu layer with the 5 page links in a vertical show.

Acorn

---

The theory of a menu layer with links is fine but on my songmenu page it was unreliable in Chrome and wouldn't work at all in Edge. I generally use Firefox. It seemed to be OK on Android phones. The drop-down layer was over a large block of linked menu items which may have had something to do with the problem but I can't see how. The hamburger drop down menu was my preferred option but I'm coming round to the separate mobile menu page idea.

https://www.waterwaysongs.info/songmenu.htm

I've eventually got such a page working. Though Egg's code was fine I wanted to click an image that fitted the site design to return to the previous page. I found some code which I modified and used in a placeholder :

<a href="#" onclick="history.back();return false"><img SRC="https://www.waterwaysongs.info/images/buttons/previous.png" BORDER=0 height=38 width=38></a>

After a lot of problems I seem to have it working. So far only the mobile Song Menu page and any mobile song page beginning with 'A' is linked. Other mobile song pages have the hamburgers linked to a menu layer which may or may not work. I'll be leaving it like that for a while until I've thoroughly checked it.

https://www.waterwaysongs.info/mobmenu.htm

I am appreciative of all the help I've been given - I wouldn't have got this far without it.

Ian

Quote:

---

Originally Posted by IanB

The theory of a menu layer with links is fine but on my songmenu page it was unreliable in Chrome and wouldn't work at all in Edge. I generally use Firefox. It seemed to be OK on Android phones. The drop-down layer was over a large block of linked menu items which may have had something to do with the problem but I can't see how. The hamburger drop down menu was my preferred option but I'm coming round to the separate mobile menu page idea.

https://www.waterwaysongs.info/songmenu.htm

I've eventually got such a page working. Though Egg's code was fine I wanted to click an image that fitted the site design to return to the previous page. I found some code which I modified and used in a placeholder :

<a href="#" onclick="history.back();return false"><img SRC="https://www.waterwaysongs.info/images/buttons/previous.png" BORDER=0 height=38 width=38></a>

After a lot of problems I seem to have it working. So far only the mobile Song Menu page and any mobile song page beginning with 'A' is linked. Other mobile song pages have the hamburgers linked to a menu layer which may or may not work. I'll be leaving it like that for a while until I've thoroughly checked it.

https://www.waterwaysongs.info/mobmenu.htm

I am appreciative of all the help I've been given - I wouldn't have got this far without it.

Ian

---

Ian, your code is round the buoy twice.
Drop your Return/Back icon onto the page and for its Link use: javascript: history.back();
The "Return to Previous Page" pop-up text goes in Web Properties > MouseOver > Show pop-up text.

Where you have complicated matters is the Songmenu page has the 0-9, A-Z showing with a Hamburger icon Menu.
The same Hamburger Menu needs to be on all mobile web pages. There is no need for a separate Menu page. Chrome, FF & Edge all work for me.

I don't think you need a Hamburger icon and separate Menu Layer or page.

Here are two ideas. The first is a Hamburger icon and Menu layer. The second is just straight links.

Attachment 130630

Acorn

Before I get into Acorns dislike of my seperate menu page I've adjusted my earlier mobile example to include a 'Back' button (though I don't really see a need for this)

I've revised my earlier demo so you'll need to refresh each page to ensure you're seeing the updated version.

UPDATE

Quote:

---

Originally Posted by Egg Bramhill

Before I get into Acorns dislike of my seperate menu page I've adjusted my earlier mobile example to include a 'Back' button (though I don't really see a need for this)
I've revised my earlier demo so you'll need to refresh each page to ensure you're seeing the updated version.
UPDATE

---

Egg, i didn't dislike you approach, it is just a Hamburger method is tedious to use: select a new page and you have to open the menu to go to another, ...

If you can always display the links to pages then do so.
Avoid Xara Buttons and NavBars, unless really vital.

Acorn

Quote:

---

Egg, i didn't dislike you approach, it is just a Hamburger method is tedious to use: select a new page and you have to open the menu to go to another, ...

---

Not sure I'm following here Acorn, I'm not using Xara's navbars at all, I avoid them like the plague, they create far to many image files, whilst small they create far to many calls on the server to download these image files.

In fact since the mobile prodominance mouse-over buttons are almost obselete. Mobiles don't do mouse overs.

So create rectangles as buttons. They remain rectangles within the DOM, not images as in Xara's navbars. Text remains as text within the html document. All remain crisp and clear.

As for the menu page, whilst I agree that changing from portrait to landscape MAY cause an issue, creating a web page in the Main variant easily overcomes this.

However today I've had a good day in Wetherspoons so disregard all of the above :cool:

Egg, my Avoid statement was not directed at you; it's my mantra to all who care to listen.

Acorn

Hi Acorn and Egg

Your comments, as always, have been very helpful and I've learnt quite a bit in this process.

I now have to choose between two alternative approaches to linking the mobile pages. The drop-down layer menu which I invested some considerable time in, does now appear to be working on Firefox, Chrome and Edge. Just what was causing the problem who knows, but it may have been on a menu layer that got deleted in recent amendments. In each Xara file that creates the alphabetical song files (each in a separate directory) I've now decided to give the drop down menu layer a unique name rather than the same one each time. I wouldn't have thought this would have caused the problem but don't know enough to be sure. Introducing the new menu layers may take a little while but that's what I plan to do.

I feel I'm reliant on the vagaries of the web-browsers and Xara to maintain compatibility but I suppose that's the cloud every web developer lives under. I wouldn't call myself a web developer, just a tinkerer or magpie, with definite limitations who six months ago thought my website was fine - until technology moved on and forced me into changes.

I don't feel that I'm putting all my eggs in one basket (sorry about that) however as the approach of a separate menu page has got an appeal. It's simple enough for me to understand and changing just one page rather than a layer in 30+ Xara files is obviously attractive. So I'll be putting a mobile specific menu on the site in reserve and will be able to switch this method of navigation on just by changing the links in the 30+ files.

It really is a hard call to decide between the two alternative methods suggested but I think I can now move on to alter all the pages knowing I've a workable backup plan should there be problems.

Thanks again for taking so much time to help me.

Ian

Ian,

I gave the site a quick tour on my mobile: That you don't have Intro and Update tabs on every Song page, for me at least, this is not a problem and certainly IMO, not worth the effort of changing 30+ Xara docs (for each letter).

Attachment 130640 Attachment 130641

What you have works, but you do have some lurking gremlin links that do not do whatever you intended: The link on this page and some others goes to a popup that just repeats the first paragraph of the song.

Attachment 130642

With your site (and all its separate Xara docs), short term, I would retest all the links before you embark on changing what works OK ATM.

Egg's single page for a mobile menu works, as long as you have the menu on the desktop variant too (e.g.https://www.dstiling.co.uk/ ) - stretch the mobile variant and you see a hidden menu page, which of course you can add anything to.

Acorn is right in that one would not normally do this and a menu layer on each page works well, but changing 30+ Xara letter-based Song docs is an opportunity for a lot of hassle.

Personally, I'd leave as is for now, but ruthlessly check all the links.

Gary

Quote:

---

Originally Posted by Initiostar

Ian,

Personally, I'd leave as is for now, but ruthlessly check all the links.

Gary

---

Too late! I'm a glutton for inflicting repetitive, boring, time-consuming tasks upon myself and have already started changing the song page files. I've uploaded a couple but I won't upload the rest until they're all changed and checked.

It's certainly helpful to have errors pointed out so thanks for that. There have been so many changes of late that I'm bound to have made a few(?) errors.

Thanks for looking at the site and making your comments. I will check the internal links thoroughly. The external ones are checked for me by PRO-Sitemaps.com who insist on sending me new sitemaps daily. Overkill methinks for a site that doesn't change much from month to month.

Regards
Ian

Quote:

---

Originally Posted by Initiostar

Ian,


What you have works, but you do have some lurking gremlin links that do not do whatever you intended: The link on this page and some others goes to a popup that just repeats the first paragraph of the song.

Attachment 130642


Gary

---

The 'faulty' link you describe appears to be working as it should. On the Main variant the first verse should appear with a yellow background when you click the Chords symbol. The guitar chords should appear as square-bracketed letters (in red) within the text.

I don't have the Chords option available on the Mobile variant at the moment as the addition of the chords was making the lines of text too long to be displayed without wrapping around. I may revisit this aspect of the site when I've updated everything else.

Ian

After many hours converting the Song pages to have five menu buttons on the main variant and what appeared to be a working drop-down menu/popup layer on the mobile variant I sensed success. Foolish me!

The mobile variant appears to work on all the pages I've tested using Edge, Chrome and Firefox until I get to the song 'Lass of Coventry' whose popup layer works but with the next song 'Leave Him in the Meadows' and subsequent songs beginning with L the popup doesn't work. When you get to songs beginning with M the popup works again.

If this observation can be confirmed then the problem must lie within the Xara file which generates the songs beginning with L and I've a chance of tracking it down. If anyone is able to check on this behaviour of the mobile variant then I'd be most grateful.

If I don't find the problem then I'll be changing to the separate mobile menu page.

Thanks in advance
Ian

Quote:

---

Originally Posted by IanB

After many hours converting the Song pages to have five menu buttons on the main variant and what appeared to be a working drop-down menu/popup layer on the mobile variant I sensed success. Foolish me!

The mobile variant appears to work on all the pages I've tested using Edge, Chrome and Firefox until I get to the song 'Lass of Coventry' whose popup layer works but with the next song 'Leave Him in the Meadows' and subsequent songs beginning with L the popup doesn't work. When you get to songs beginning with M the popup works again.

If this observation can be confirmed then the problem must lie within the Xara file which generates the songs beginning with L and I've a chance of tracking it down. If anyone is able to check on this behaviour of the mobile variant then I'd be most grateful.

If I don't find the problem then I'll be changing to the separate mobile menu page.

Thanks in advance
Ian

---

Ian, it is a case that the browser is blocking some content as it is coming across as insecure.

Quote:

---

lass_of_coventry.htm:1 Mixed Content: The page at 'https://www.waterwaysongs.info/Songs/L/lass_of_coventry.htm' was loaded over HTTPS, but requested an insecure element 'http://www.waterwaysongs.info/sounds/coventry.mp3'. This request was automatically upgraded to HTTPS, For more information see https://blog.chromium.org/2019/10/no...out-https.html

---

All you have to do is change the http://... to https://...
Your browser thinks you have an insecure audio file. Simple housekeeping first off.

For the Hamburger, do check that the pop-up layer is actually there.

There is a more serious alert but this is across all pages, Main and Variant:

Quote:

---

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-44097428-1"></script>

---

I think this might be my configuration so focus on the audio files first off.

Acorn

Quote:

---

Originally Posted by Acorn

Ian, it is a case that the browser is blocking some content as it is coming across as insecure.

All you have to do is change the http://... to https://...
Your browser thinks you have an insecure audio file. Simple housekeeping first off.

For the Hamburger, do check that the pop-up layer is actually there.

There is a more serious alert but this is across all pages, Main and Variant:

I think this might be my configuration so focus on the audio files first off.

Acorn

---

Thanks Acorn

I don't know where you're finding this information but it's definitely useful. I may not be making many changes today as I've a radiator half-removed from the wall atm and will need to sort that out.

Cheers
Ian

The failure of the drop-down/popup layer menus to work was my fault. I had done a lot of copying and pasting and applying repetition to the menu items in each of the 30 or so alphabetical song files and had obviously failed to apply the repetition in this case. The popup layer menu_L1 was present for every song but it took me a while to realise that all these layers were empty except for the first one.

Apologies to anyone whose time I've wasted but I don't think the original problem could be put down to the same reason. A popup would work sometimes and not others.

I've learnt some useful stuff from members on this thread so I'm off now to change all the audio files - I may be some time.

Many thanks for all the help.
Ian

Ian, you have established your worth through your doggedness and patience.
Especially when you are willing to admit even a small mistake that will have claimed many more, unheard.

Acorn