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

[IanB]

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.



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

[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

[IanB]

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

[Initiostar]

Ian,

Maybe a halfway house here: Mobile Menu.xar

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

[IanB]

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

[Acorn]

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:

<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