Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Let's resolve the ambiguity in our use of the word 'frame'. While it is true that the <code>&lt;frame&gt;</code> tag will be discontinued in future versions of HTML, the <code>&lt;iframe&gt;</code> tag will continue to be supported, and it makes for an ideal solution to your problem. Your whole website will consist of two major elements in the body:</p> <ol> <li>The music player, and</li> <li>A nice big <code>&lt;iframe&gt;</code> to hold the navigable portion of your website.</li> </ol> <p>This will allow the music player to play continuously while all the navigation occurs in a separate frame, effectively keeping the music player 'static', and the rest of the page dynamic. Best of all, once browsers begin to support HTML 5, you will be able to use the new <code>seamless</code> attribute to help integrate the frame into the look of your page. Until then, you will need to manually remove the border and scrollbars, to stay consistent across all browsers. You can achieve this with the following:</p> <pre><code>&lt;iframe src="navigable_page.html" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" vspace="0" hspace="0"&gt; &lt;/iframe&gt; </code></pre> <p>Remember to set the height using CSS. With this approach, you also have a lot of flexibility in your layout, and you don't have to redesign anything if you don't want to. Options include having the frame take up the whole webpage, with the music player in front of everything else, draggable, resizable, etc. Web designers would wonder how you created a music player that is independent of the rest of the changing content. You could also have a table that occupies the whole page, with two rows. The top row could have the music player, and the bottom row could contain the frame with height set to 100%. Use frames, as in <code>iframes</code>, and you won't be disappointed.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload