iframe problem. Can I load page at _top of iframe?

[IanB]

Hi

Just to complete the story - the 'Songs of the Inland Waterways' website has now had all its pages redesigned and should now be more mobile friendly. There just remains the 'snagging'.

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

The site now has its new menu based on just one page of links.

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

I'm a little concerned about the time it takes to load and the 'readjusting' that happens.

Comments and suggestions are welcome.

Thanks in advance,
Ian

[Initiostar]

Hi

Just to complete the story - the 'Songs of the Inland Waterways' website has now had all its pages redesigned and should now be more mobile friendly. There just remains the 'snagging'.

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

The site now has its new menu based on just one page of links.

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

I'm a little concerned about the time it takes to load and the 'readjusting' that happens.

Comments and suggestions are welcome.

Thanks in advance,
Ian

Ian,

Initilally the site takes circa 4-5 seconds to load on my Android mobile, the song menu re-adjusts to the device width, but thereafter it seems OK.

There are some issues that are flagged up (using F12 or Google Inspect and you can test the performace using Lighthouse as an indicator). The X and Z labels don't point anywhere; I assume becuase there are not any songs that start with X & Z?

Gary

[Acorn]

Ian, you have picked up a lot of dead wood in your trips.
The son list has unused ClassNames, XX-95Listing-95Author XX-95Listing-95Song, which have no CSS or JavaScript coding.
I think them can all be purged.

Remove the link you have added to the songwriter.
This will save a lot of computation time.

The background to the songs is no long an image, which is great.
You can speed up this rendering by changing these to a ClassName (I've used "blob") so that the browser only computes the background once rather than 100s of times.

Website HTML Code (head):
<style>
.blob {
width: 490px !important;
height: 25px !important;
padding: 10px 10px 0 10px;
background: linear-gradient(180deg, #DCE000 -0%, #F7E300 22%, #FAEBA6 45%, #FEFCE6 53%, #F29A00 74%, #F18D00 100%);
</style>
I think the numbers are about right for you.

A demo file: CSS - Songlist.xar

Your Google Search is still http:// and so fails.
As the songlist is now all one page you can use Ctrl+F for search in Page instead.

The other delays are down to Scale to fit Width being applied.
The changes above will lessen this but not fully.

Acorn

[IanB]

Thanks Gary and Acorn

I think I'm getting there (with a lot of help from members of this site) and will take note of your suggestions.

Your help has been invaluable.

Ian

[Acorn]

Ian, rocking the boat again.

This is not the final solution but I felt it needed to be demonstrated to show how powerful, and quick, a table solution might be for you.

I have built this around the xara Table Widget and in doing to uncovered more of it issues.
e.g., a song title with comma needs the comma to be replace with ,.
CSS styling is harder than it ought to be.
Links are a right pain.
Searching across paged data is not as cleaver as it should be.

Al I have done with your data is separate the index, song and writer into a CSV table; the other columns are blank.

CSS - Songlist Search.xar

You type the index, a fragment of a song title or writer and the rows are restricted down quite quickly.
You click on any column and the row are ordered by the data in the column selected.
A second click reverses the order.

Type V and you can see you have only 2 songs starting with V.
Type BAL to find you have four Ballads.
Type MEE and you have all of Graeme Meek's songs.
Click Writer and you order the songs by writer.

The better delivery is to use a jQuery plug-in called DataTables where you can better format your songs and get paging to properly work.
The final trick is to make the data external so it is easy to update without republishing everything and then it all becomes very fast.

Acorn

[Initiostar]

Acorn,

I liked your background idea in post #13 - very useful and thanks for sharing - good for lists.

Never really explored Xara tables, but the jQuery idea looks good, Are you talking about https://datatables.net/?

Gary

[Acorn]

Acorn,
I liked your background idea in post #13 - very useful and thanks for sharing - good for lists.
Never really explored Xara tables, but the jQuery idea looks good, Are you talking about https://datatables.net/?
Gary

Gary, thanks

Yes, it is. I have created a few Threads on datatables already. Very comprehensive.

Acorn

[IanB]

Acorn,

The Song List Search is indeed impressive and I may look into using it in the future. At the moment I'm suffering repetitive strain injury of the wrist after the mouse movements of the last week when I converted all the pages.

I modified the Song Menu using the technique outlined in post #13 and, after some experimenting with padding values, got it to look much like it had previously. Your data for the graduated fill was invaluable and well beyond my capabilities. The Song Menu page seems to load faster now.

Now I'm just snagging and will look to see what else I can learn from all the invaluable suggestions made. Thanks for taking the time to give so much help.

Ian

[Acorn]

@IanB, sad about your RSI. If you PM me your song page, I would be happy to convert it for you.

I believe both @Initostar and I are of the opinion that such a historical resource should deserve a caring home that preserves it for as long as possible.

Acorn

[IanB]

Thanks Acorn for your kind offer but I've broken the back of the task and will be tinkering to correct mistakes and add material to the site. I've added a pdf icon to the song list as, in the long term, I intend to produce more permanent pdfs of the songs (as someone suggested way back).


"you have picked up a lot of dead wood in your trips.
The song list has unused ClassNames, XX-95Listing-95Author XX-95Listing-95Song, which have no CSS or JavaScript coding.
I think them can all be purged."


This comment you made earlier has had me a little puzzled. I've no doubt in my magpie-like adopting others ideas that I have acquired a lot of unnecessary stuff but don't quite know how to access it to purge it.

Ian