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

Hi

In creating a new alphabetical menu for the 'Songs of the Waterway' website https://www.waterwaysongs.info/index.html
I have hit a little problem with iframes.

On the Song Menu page which exists on-line at the moment the iframe has a relatively short height so long(tall) alphabetical listing pages which load into that iframe generate a vertical scroll bar automatically. This can result in a slight horizontal shifting of text when a short page is loaded before/after a tall one or vice versa.

I would like to avoid the song titles shifting horizontally so on the new version (not yet finished) I created a very tall iframe into which even the largest alphabetical page will fit without scrolling. The only scroll bar that exists is the one for the whole page. There is a menu bar stuck at the top of the page and when the page is scrolled the song titles move under it and 'disappear'.

The problem now is that if a tall page has been scrolled up prior to the loading of a short one the new short page seems to load in the same vertical position the tall one was. This may mean that the page content disappears wholly or partially under the sticky menu at the top. The worst case scenario is that no content can be seen at first site.

Attachment 130391

My iframe is called 'songs' and each alphabetical menu button loads up the appropriate web page in this customised option on the Open Link menu. What I think I need to do is instruct the selected web-page at the _top of the songs iframe. Can this be done? Am I missing something obvious here?

Thanks in anticipation.

I am using Designer Pro+ which I recently bought. As an aside, it does seem to grind to a halt every now and then and uploading takes ages (broadband speed check was fine). I don't know if this is the computer carrying out clandestine tasks, the size of the file I am dealing with or if it is to do with Pro+. Any comments?

Ian

Ian, avoid complexity. Make the song list one long page with a Sticky 0-9, A-Z top piecewith each section having an anchor.
This make one-page searching very simple too.

Acorn

Quote:

---

Originally Posted by Acorn

Ian, avoid complexity. Make the song list one long page with a Sticky 0-9, A-Z top piecewith each section having an anchor.
This make one-page searching very simple too.

Acorn

---

Hi Acorn

I took your advice and created one long page. It was nearly 17000px long with 320 soft group menu items, it took some time to process and to load when converted. I can see now why the original menu was split into separate alphabetical pages. I'm going to have to decide about which route to take - the simplicity of your suggestion certainly appeals.

Thanks for your help,
Ian

Ian,

Maybe a halfway house here: Attachment 130395

This menu is all on one page, but each letter has a popup menu which limits the scrolling and avoids the iframe completely. Assuming you have circa up to 12 songs per letter not too much scrolling and each song is linked from its letter popup. There's a mobile and desktop variant.

Maybe worth a thought?

Gary

Hi Gary,

Thanks for your help again. Food for thought indeed. Some letters have just two songs listed while others have up to 40. I'll experiment with this popup option and see how it goes.

Ian

Ian, if it were my site, I would tackle the Song List as a searchable, filtering & ordering HTML table.

It would use this approach: https://www.talkgraphics.com/showthr...811#post635811
The demo generates the page very quickly and rendering is well under a second for 1,000 rows of more detail than your Songs currently.

The file Table.htm can be tested and run separately.
Yours would have the form of:

Code:

---

<link rel="stylesheet" href="jquery.dataTables.min.css">
<script src="jquery.js"></script>
<script src="jquery.dataTables.min.js"></script>
<script src="dataTableLoader.js"></script>


<table class="tg cell-border compact display">
<thead>
  <tr>
    <th>Index</th>
    <th>Song Title</th>
    <th>Composition By</th>
    <th>Lyrics</th>
    <th>Chords</th>
    <th>Music</th>
    <th>Recording</th>
    <th>Notes</th>
    <th>Reference</th>
    <th>Video</th>
    <th>Other</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>B</td>
    <td><a href="Songs/B/the_b_and_mk.htm" target="_top">The B & MK</a></td>
    <td>(c) Graeme Meek (2008)</td>
    <td>Chorus: They’re bringing the cut to the town;/They’ll be bringing the boats from the Grand Union way./May the doubters, their sorrows, all drown/When we welcome the boats on the B&MK.</td>
    <td>Chords Symbol</td>
    <td>Music Symbol</td>
    <td>Audio Symbol</td>
    <td>Notes Symbol</td>
    <td>Reference Symbol</td>
    <td>Video Symbol</td>
    <td><a href="Songs/B/the_b_and_mk.htm#xl_anchor">Read more...</a></td>
  </tr>
[Lots of Song details follow...]
</tbody>
</table>

---

It works across Variants though I might create a sub-version of the HTML table if the Choruses are too large/wide.
It has a built-in Search.
You can add links to all the Symbols if you want to play the audio from the Song List or jump to the reference page, opening the required pop-up layer.

Acorn

Hi Acorn

I've just discovered your posting as I am finishing off (for the time being) a Song Menu with mobile and main variations. In the end I took your initial advice and have produced one long page. To facilitate loading speed I have removed all soft group menu items, replacing them with just a mouseoff image. I may reinstate the soft groups (and mouseover effect) on the main (desktop) menu. It still takes an age for the program to generate 640 identical button background images from the graphic group (5 shaded rectangles) but I can live with that. Can't help thinking that loading hundreds of identical image files is rather strange and that there ought to be a way of using just one image over and over again in different locations.

One thing that put me off this method initially was the fact that when anchors were placed alongside the text I wanted to appear at the top of the screen (just below the sticky menu group) the first line of text was under, and hidden by, the menu. I got round this by using a tall background coloured rectangle as the anchor so, though the top of the anchor is beneath the menu grouping, the first line of text in each alphabetical grouping can be clearly seen. I assume there is some relationship between where the anchored text moves to and the menu button which initiates the move but it's a bit confusing and I'm happy to have something which appears to work.

When I finish the Song Menu I'll post a link but there are a few tweaks to be done yet.

I know if I were to start from scratch designing this website, databases, tables and goodness knows what would be the route to take but to quote something I heard somewhere across the Irish Sea, "if I was going there I wouldn't start from here". Adapting what I have already done is, I think, my easiest option.

Thanks again for your help.

Ian


Here's the link : https://www.waterwaysongs.info/NewMenu/songmenu

Ian, then use Font Awesome glyphs (characters) instead.

These are handled as text so no images are mangled:

Attachment 130401

675 characters on a page generating in under a second and and rendering extremely fast for presentation.

For your Track Titles and Composers, create a Rectangle with Fill colours and Stops and then Soft-Group with the text.
Give each a Push of 5px above and below.

Again no images are produced: text and linear gradients. All blindingly fast.

If you don't, you are killing the site performance metrics.

Attachment 130402

Acorn

Thanks Acorn

I am beginning to implement your suggestions which will hopefully save the site. It may take me a while to complete the process!

The Push facility is certainly useful but I was unaware of it.

Regards
Ian

Though it still needs a tweak or two (or possibly a major rethink - depending upon any comments) I have uploaded the new menu so that a relative with access to Apple devices can check it out for me.

https://www.waterwaysongs.info/new_songmenu

The menu is not 'active' (linked to from other pages) yet. I'd appreciate any comments about load speed, etc.

Some of the song links are applied to the text only and some to the soft group of text and background. The latter seems preferable but the process of changing them all is slow and I'd like to know if doing so would slow down anything.

I know the rest of the site needs a new mobile version but that's next on the list.

Thanks again for all the help and suggestions I've received.

Ian

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

Quote:

---

Originally Posted by 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

---

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

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: Attachment 130495

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

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

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.

Attachment 130499

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

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

Quote:

---

Originally Posted by 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

---

Gary, thanks

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

Acorn

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

@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

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

Quote:

---

Originally Posted by 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

---

Have a look in the Names Gallery.
If there, delete them and test having first made a design file backup lest they are important.

Acorn

I'd looked in the Names Gallery and found nothing so I presumed I should be looking elsewhere.

Thanks again.
Ian