It can be done much better than what I wrote in my previous post. You can do it with a fullscreen iframe, no frameset required.
Also, each separate page will be loaded together with its fully functioning music link.
As soon as I have the time, I will develop this further. Coding is kept simple, since
this is only an illustration. There is a DEMO LINK at the bottom of this post.
In INDEX.HTML:
Code:
<!-- Overflow hidden, just to make sure there are no bars in this 'matrix page' -->
<html style="overflow:hidden;">
<head>
<script>
function music()
{
music=window.open('http://cgi.omroep.nl/cgi-bin/streams?/avro/klassiek/zoc/zoc_951119.wma','name','toolbar=yes,top=30000,left=0,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=1,copyhistory=yes,width=1,height=1');setTimeout("music.blur()",8000)
}
</script>
<!--Without this script, we would only have the content of 'index.html ', not the content of the separate
'non-matrix pages' (page1.html, page2.html and page3.html) -->
<script language="JavaScript" type="text/javascript">
var firstpos=top.location.href.lastIndexOf('/')+1;
var lastpos=top.location.href.length;
var file=top.location.href.substring(firstpos,lastpos);
if (file=='index.html'){file='page1.html'};
if (file==''){file='page1.html'};
var ls = location.search.substr(1);
var currentpage = (ls && (ls.substr(0,4) == "url=")) ? unescape(ls.substr(4)) : file;
var MyIframeInclude = '<iframe name="ifr" id="ifr"
style="position:absolute;width:100%;height:100%;left:0px;top:0px" frameborder=0 src="' + currentpage + '">\n';
document.write(MyIframeInclude);
//This is required, for unknown reasons
document.write('<iframe></iframe>');
</script>
</head>
<!-- Overflow hidden, just to make sure there are no bars in this 'matrix page' -->
<body style="overflow:hidden;margin:0;padding:0;font-family:verdana;font-size:12px">
<!-- These links appear on every separate 'non-matrix page', thanks to the above script
and a little script that we have on every page (except index.html, which is the matrix)
-->
<div style="position:absolute;top:1%;left:1%;z-index:1;background:black;padding:4"><a
href="javascript:void(0)" style="color:white;text-decoration:none" onclick=music()>Click
here for music by <span style="color:yellow">Mussorgsi</span><br>(heavier than the
heaviest metal)</a></div><br><br><br>
<div style="position:relative;left:10px;top:20px;height:100px">
<!-- target="ifr', since that's the name of the fullscreen iframe, written in the script
above -->
<a href="page1.html" target="ifr">page 1</a><br><br>
<a href="page2.html" target="ifr">page 2</a><br><br>
<a href="page3.html" target="ifr">page 3</a><br><br>
</div>
</body>
</html>
In PAGE1.HTML:
Code:
<html>
<head>
<!-- Needed for loading music link and other links in page -->
<script type="text/javascript">
if(window==top){
var url='window.location.replace("index.html?var1='+window.location.href+'")';
eval(url);}
</script>
<body style="padding:120 30 110 100;border:1px solid black;height:58%">
<div style="position:relative;text-align:center;top:-100">PAGE 1</div>
Content content content content Content content content content Content content content
content Content content content content Content content content content Content content
content content Content content content content Content content content content Content
content content content ...
</body>
</html>
In PAGE2.HTML:
Code:
<html>
<head>
<!-- Needed for loading music link and page links (given in 'index.html') in this page
-->
<script type="text/javascript">
if(window==top){
var url='window.location.replace("index.html?var1='+window.location.href+'")';
eval(url);}
</script>
<body style="padding:120 30 110 100;border:1px solid black;height:58%">
<div style="position:relative;text-align:center;color:red;top:-90px"><br>PAGE 2</div>
Content content content content Content content content content Content content content
content Content content content content Content content content content Content content
content content Content content content content Content content content content Content
content content content ...
</body>
</html>
In PAGE3.HTML:
Code:
<html>
<head>
<!-- Needed for loading music link and other links in page -->
<script type="text/javascript">
if(window==top){
var url='window.location.replace("index.html?var1='+window.location.href+'")';
eval(url);}
</script>
<body style="padding:120 30 110 100;border:1px solid black;height:58%">
<div style="position:relative;text-align:right;color:blue;top:-110px">PAGE 3</div>
Content content content content Content content content content Content content content
content Content content content content Content content content content Content content
content content Content content content content Content content content content Content
content content content ...
</body>
</html>
Here's a demo link.
Arie Molendijk.
How to make music continue to play throughout whole website
Bookmarks