Modify InnerHTML for parent div

jsschmitt · June 2, 2009

Ok... capt "let's-try-to-do-things-you-have-no-clue-how-to-do" here...

the site: http://www.anomymage.com/tests/do/desktop/

This is what I am working on:

myTunes > when click launches a little self-contained flash music player that has the option of using different playlists. When I change the playlist, I want the title of the floating div to change.

Here is the code that creates the div:

function createMUSIC(){
  var newdiv = document.createElement('div');
  var divIdName = 'div'+arguments[0];
  newdiv.setAttribute('id',divIdName);
  newdiv.className = "block";
  newdiv.style.width = "340px";
  newdiv.style.height = "280px";
  newdiv.style.left = "100px";
  newdiv.style.top = arguments[0]+"00px";
  newdiv.style.position = "fixed";
  newdiv.style.border = "1px solid #000000";
  newdiv.innerHTML = '<iframe id="MUSICdesk" name="MUSICdesk" src="./music/index.php" style="width:100%;height:100%;z-index:3;overflow: hidden;"></iframe>';

  var handle = document.createElement('div');
  handle.className = 'handle';
  handle.style.width = '100%';
  handle.style.height = '20px';
  handle.innerHTML = 'Music Player';
  newdiv.appendChild(handle);
  
  var status = document.createElement('div');
  status.className = 'status';
  status.style.width = '100%';
  status.style.height = '20px';
  status.innerHTML = '';
  newdiv.appendChild(status);

  var lnk = document.createElement('div');
  if(lnk.addEventListener){
    lnk.addEventListener('click', (function(i){
             return function(){
                   document.body.removeChild(i)}
             })(newdiv), false);
  }else
   if(lnk.attachEvent){
    lnk.attachEvent('onclick', (function(i){
             return function(){
                   document.body.removeChild(i)}
             })(newdiv));
  }else{
    lnk.onclick = (function(i){
             return function(){
                   document.body.removeChild(i)}
             })(newdiv);
  };
  lnk.className = 'close';
  lnk.style.width = '20px';
  lnk.style.height = '20px';
  lnk.innerHTML = '<div align="center">x</div>';
  lnk.appendChild(document.createElement('div'));
  
  newdiv.appendChild(lnk);
  
  document.body.appendChild(newdiv);
  $(newdiv).dragResize({grid:100});
};

Here is the code that actually changes the playlist:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
            @import url("styles.css");
</style>

<?php
$plist = $_POST['playlist'];
?>
<style type="text/javascript">
window.parent.document.getElementById('CREATEmusic[]').innerHTML(<?php echo $plist ?>);
</style>
<?php
$plist = "./playlists/".$_POST['playlist'];
?>
</head>
<body>

<!--
INSTRUCTIONS
* Change autoPlay to "yes" if you want the music track to start automatically once loaded

More instructions at:
http://www.premiumbeat.com/flash_resources/free_flash_music_player/multiple_tracks_mp3_player.php

-->

<?php
		echo "<div style='text-align:center;'>";

		echo "

			<script type='text/javascript' src='swfobject.js'></script>
			  <div id='flashPlayer' style='z-index:1;'>
			    This text will be replaced by the flash music player.
			  </div>

			<script type='text/javascript'>
			   var so = new SWFObject('playerMultipleList.swf', 'mymovie', '295', '200', '7', '#FFFFFF');  
			   so.addVariable('autoPlay','no')
			   so.addVariable('playlistPath','".$plist."')
			   so.write('flashPlayer');
			</script>";

		echo "<br/>";


		/* $url = "http://www.anomymage.com/tests/do/music/"; */
		$path = "playlists/";
		print "<form method='post' action='index.php'>\n";
		print "<SELECT NAME='playlist'>\n";
		print "<OPTION SELECTED VALUE=''>Select a playlist</OPTION>\n";

		$narray=array();
		$dir_handle = @opendir($path) or die("Unable to open $path");
		$i=0;
		while($file = readdir($dir_handle))
		{
		if($file != '.' && $file != '..' && $file != '.xml')
		{
		//echo "<a href='$path/$file'>$file</a>";
		$narray[$i]=$file;
		$i++;
		}
		}
		sort($narray);

		for($i=0; $i<sizeof($narray); $i++)
		{
		echo "<option value='".$narray[$i]."'>".$narray[$i]."</option>\n";

		}

		//closing the directory
		closedir($dir_handle);

		print "<input type='submit' value='Start'> ";
		print " <a href='createplist.php'>Create a playlist</a>";
		print "</form>\n";

	?>	


</div>

</body>
</html>

Sign In

Modify InnerHTML for parent div

Recommended Posts

jsschmitt

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information