Drop down (popup layer) Menu has become unreliable

[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

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

[Egg Bramhill]

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

[Acorn]

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

Acorn

[IanB]

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

[Initiostar]

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).



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.



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

[IanB]

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

[IanB]

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.




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

[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

[Acorn]

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.

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:

<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

[IanB]

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