Hi all! I am trying to have a flash-based music player on my page which continues playing a song even when you refresh or go to another page within the web site.
I whant do this like facebook footer
i read this topic http://stackoverflow.com/questions/668431/how-does-facebook-keep-the-header-and-footer-fixed-while-loading-a-different-page
but i have loadpage() and location.hash problem
if someone know how its made plz tell me
var header = document.getElementById('header');
var headerLinks = header.getElementsByTagName('a');
for(var i = 0, l = headerLinks.length; i < l; i++)
{
headerLinks[i].onclick = function() {
var href = this.href;
//Load the AJAX page (this is a whole other topic)
loadPage(href);
//Update the address bar to make it look like you were redirected
location.hash = '#' + href;
//Unfocus the link to make it look like you were redirected
this.blur();
//Prevent the natural HTTP redirect
return false;
}}
CSS:
#Footer {
font-size:xx-small;
text-align:left;
width:100%;
bottom:0px;
position:fixed;
left:0px;
background-color: #CCCCCC;
border-top: 1px solid #999999;
padding:4px;
padding-right:20px;
color:#666666;
}
I have done so this code not worked, i want to do not refresh area for music player like google videos or facebook task bar
I have done so
function links() {
//var header = document.getElementById("header");
var headerLinks = document.getElementsByTagName("a");
for (var i = 0, l = headerLinks.length; i < l; i++) {
headerLinks[i].onclick = function() {
var href = this.href;
loadPage(href);
window.location.hash = "#" + href;
this.blur();
return false;
}
}
}
window.onload = function() {
links();
}
i whant to all links to modify but it's not worked
It looks like you are pretty new to javascript. If that is the case then doing a full ajax site is probably not the place to start. I think you should try going old-school and using frames to accomplish this. (This is how Google Video used to function, and Google Images still uses this technique.)
<html>
<frameset rows="200px,*,200px">
<frame src="yourPageHeaderWithFlashPlayer.html" noresize="noresize"/>
<frame src="yourMainContent.html" noresize="noresize"/>
<frame src="yourPageFooter.html" noresize="noresize"/>
</frameset>
</html>
That would work for a 200px header and 200px footer. If you need more info: http://www.w3schools.com/tags/tag_frameset.asp.