I am no web designer pro so please be gentle
Situation:
I am currently building a website to be able to share my DJ mixes and studio production work, a preview is available on http://davidloran.com/test-03/index.html .
The site is composed of:
- index.html
-> contains:
1- A css3 menu (including list of mixes currently being correctly played in the player)
2- A jquery plugin audio player (http://codecanyon.net/item/fullwidth…-plugin/841563)
3- An IFRAME where the other pages are loaded into
- tracks.html
-> contains a list of the production tracks to be selected by the user and then (eventually!) played into the player placed on the index page - facebook.html
-> contains FB comments box - background.html
Problem found:
As you probably noticed from my description text above, the production tracks cannot be played in the audio-player because they are placed in another page (track.html) called into the IFRAME.
Question:
Are there any ways the audio-player .js code (I’ll post the code in next) can be modified so that it handles play requests initialised from pages within the iframe?
Any other suggestions come to minds? (remote window? other?)
Thank you!
this what I’ve got on the index.html page head:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Dj David Loran</title>
<link rel="stylesheet" type="text/css" href="css/jquery.fullwidthAudioPlayer.css">
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<link href="css/nblack.css" rel="stylesheet" type="text/css" />
<link href="css/Iframe.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.js" type="text/javascript"></script>
<script src="js/soundmanager2-nodebug-jsmin.js" type="text/javascript"></script>
<script src="js/jquery.fullwidthAudioPlayer.js" type="text/javascript"></script>
<script type="text/javascript">
//set here the swf folder
soundManager.url = 'swf/';
//need to be flash player 9
soundManager.flashVersion = 9;
//prefer HTML5 audio rather than flash
soundManager.useHTML5Audio = true;
$(document).ready(function(){
$('#fap').fullwidthAudioPlayer({autoPlay: 'true', wrapperPosition:'bottom', wrapperColor:'#3f3f3f'});
});
function changeContent() {
document.getElementById('tracks').innerHTML="";
}
</script>
</head>
where, from the same page, links like this one play correctly in the player:
<ul class="fap-my-playlist">
<li><a href="../Audio/Lounge session - Bar.mp3" title="Dj David Loran - Lounge session - Bar" target="http://www.davidloran.com/">Lounge session - Bar</a></li>
The question is: How do I get the same types of links work from a different page opening within an IFRAME?!?
You can indeed make something happen in one frame when something happens in another frame using JavaScript. Use the
parentobject from within the frame. Look here for some examples: http://www.pageresource.com/jscript/jframe1.htmAlso, you mentioned in passing that you might want to do it from another window, as well. This can be accomplished using
window.opener.