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

[IanB]

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

[Acorn]

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

These are handled as text so no images are mangled:



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.

Waterways.xar

Acorn

[IanB]

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

[IanB]

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