By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,696 Members | 1,424 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,696 IT Pros & Developers. It's quick & easy.

Is there a better/shorter way to accomplish this?

Death Slaught
100+
P: 1,137
I have made a music player in a pop up with JavaScript. It uses frames to write the object into an unseen page.

Here's an example of the page the user first sees.

[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>User Page</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="songPlayer.js"></script>
<style type="text/css">

* {
margin:0;
padding:0;
color:#fff;
background-color:#000;
}
input {
color:#fff;
background-color:#000;
}
</style>
</head>
<body>
<p>
<input type="button" onclick="songPlayer()" value="Music Player" />
</p>
</body>
</html>

[/HTML]

Here's the script that makes the pop up.

Expand|Select|Wrap|Line Numbers
  1.  
  2. function songPlayer() {
  3. var openPage=window.open("songPlayer.html", "Music_Player", "height=410,width=300");
  4. openPage.focus();
  5. }
  6.  
Here's the page that it opens.

[HTML] <html>
<head>
<title>Music Player</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<frameset rows="0%, 40%, 60%" border="0">
<frame src="musicPlayer.html" name="musicPlayer" />
<frame src="musicPage.html" name="musicPage" />
<frame src="album.html" name="album" />
</frameset>
</head>
</html>
[/HTML]

musicPlayer.html is what the script will be writing the object tag onto. album.html is what the script will be writing the album picture, and the name of the song playing onto.

Here's is musicPage.html it's the page that the user will type the song they want to hear into, and it's where the next song, and previous song buttons are.

[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Music Player</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="music.js"></script>
<style type="text/css">
* {
margin-top:15px;
padding:0;
color:#fff;
background-color:#000;
}
input {
color:#fff;
background-color:#000;
}
#musicPlayer {
text-align:center;
}
</style>
</head>
<body>
<div id="musicPlayer">
<p>
<input type="text" id="txtSong" />
<input type="button" onclick="txtPlay()" id="play" value="Play" />
<br /><br />
<input type="button" onclick="playPreviousSong()" id="previousSong" value="Previous Song" />
&nbsp;
<input type="button" onclick="playNextSong()" id="nextSong" value="Next Song" />
<br /><br />
</p>
</div>
</body>
</html>
[/HTML]

Now for the fun part. music.js. I used my favorite band for the test run.


Expand|Select|Wrap|Line Numbers
  1. /*The Black Parade Album*/
  2. var TBP01;
  3. TBP01="Music/My Chemical Romance/The Black Parade/01 The End.wma";
  4. var TBP02;
  5. TBP02="Music/My Chemical Romance/The Black Parade/02 Dead!.wma";
  6. var TBP;
  7. TBP03="Music/My Chemical Romance/The Black Parade/03 This Is How I Disappear.wma";
  8. var TBP04;
  9. TBP04="Music/My Chemical Romance/The Black Parade/04 The Sharpest Lives.wma";
  10. var TBP05;
  11. TBP05="Music/My Chemical Romance/The Black Parade/05 Welcome to the Black Parade.wma";
  12. var TBP06;
  13. TBP06="Music/My Chemical Romance/The Black Parade/06 I Dont Love You.wma";
  14. var TBP07;
  15. TBP07="Music/My Chemical Romance/The Black Parade/07 House of Wolves.wma";
  16. var TBP08;
  17. TBP08="Music/My Chemical Romance/The Black Parade/08 Cancer.wma";
  18. var TBP09;
  19. TBP09="Music/My Chemical Romance/The Black Parade/09 Mama.wma";
  20. var TBP10;
  21. TBP10="Music/My Chemical Romance/The Black Parade/10 Sleep.wma";
  22. var TBP11;
  23. TBP11="Music/My Chemical Romance/The Black Parade/11 Teenagers.wma";
  24. var TBP12;
  25. TBP12="Music/My Chemical Romance/The Black Parade/12 Disenchanted.wma";
  26. var TBP13;
  27. TBP13="Music/My Chemical Romance/The Black Parade/13 Famous Last Words.wma";
  28. var TBP14;
  29. TBP14="Music/My Chemical Romance/The Black Parade/14 Blood.wma";
  30. /*Three Cheers For Sweet Revenge*/
  31. var TCFSR01;
  32. TCFSR01="Music/My Chemical Romance/Three Cheers For Sweet Revenge/01 Helena.wma";
  33. var TCFSR02;
  34. TCFSR02="Music/My Chemical Romance/Three Cheers For Sweet Revenge/02 Give Em Hell Kid.wma";
  35. var TCFSR03;
  36. TCFSR03="Music/My Chemical Romance/Three Cheers For Sweet Revenge/03 To the End.wma";
  37. var TCFSR04;
  38. TCFSR04="Music/My Chemical Romance/Three Cheers For Sweet Revenge/04 You Know What They Do to Guys Like Us in Prison.wma";
  39. var TCFSR05;
  40. TCFSR05="Music/My Chemical Romance/Three Cheers For Sweet Revenge/05 Im Not Okay I Promise.wma";
  41. var TCFSR06;
  42. TCFSR06="Music/My Chemical Romance/Three Cheers For Sweet Revenge/06 The Ghost of You.wma";
  43. var TCFSR07;
  44. TCFSR07="Music/My Chemical Romance/Three Cheers For Sweet Revenge/07 The Jetset Life Is Gonna Kill You.wma";
  45. var TCFSR08;
  46. TCFSR08="Music/My Chemical Romance/Three Cheers For Sweet Revenge/08 Interlude.wma";
  47. var TCFSR09;
  48. TCFSR09="Music/My Chemical Romance/Three Cheers For Sweet Revenge/09 Thank You for the Venom.wma";
  49. var TCFSR10;
  50. TCFSR10="Music/My Chemical Romance/Three Cheers For Sweet Revenge/10 Hang Em High.wma";
  51. var TCFSR11;
  52. TCFSR11="Music/My Chemical Romance/Three Cheers For Sweet Revenge/11 Its Not a Fashion Statement Its a Deathwish.wma";
  53. var TCFSR12;
  54. TCFSR12="Music/My Chemical Romance/Three Cheers For Sweet Revenge/12 Cemetery Drive.wma";
  55. var TCFSR13;
  56. TCFSR13="Music/My Chemical Romance/Three Cheers For Sweet Revenge/13 I Never Told You What I Do for a Living.wma";
  57. /*Album Pictures*/
  58. var TBP;
  59. TBP="<img src='Music/My Chemical Romance/The Black Parade/Folder.jpg' alt='The Black Parade' />";
  60. var TCFWR;
  61. TCFSR="<img src='Music/My Chemical Romance/Three Cheers For Sweet Revenge/Folder.jpg' alt='Three Cheers For Sweet Revenge' />";
  62.  
Expand|Select|Wrap|Line Numbers
  1. function clear() {
  2. document.getElementById("txtSong").value="";
  3. }
  4.  
  5. var code;
  6. var code2;
  7. var song;
  8. var currentSong;
  9. function txtPlay () { 
  10. code="<html>";
  11. code+="<body>";
  12. code+="<object classid='clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95'>";
  13. code+="<param name='FileName' value='";
  14. code2="<html>";
  15. code2+="<head>";
  16. code2+="<style type='text/css'>";
  17. code2+="* { background-color:#000; color:#fff; margin:0; text-align:center; font-size:small; }";
  18. code2+="</style>";
  19. code2+="</head>";
  20. code2+="<body>";
  21. code2+="<p>";
  22. song=document.getElementById("txtSong").value;
  23. if (song == "the end") {
  24. code+=TBP01;
  25. code2+=TBP;
  26. code2+="</p>";
  27. code2+="<p>";
  28. code2+="The Black Parade-The End";
  29. currentSong="tbp01";
  30. clear();
  31. } else if (song == "dead") {
  32. code+=TBP02;
  33. code2+=TBP;
  34. code2+="</p>";
  35. code2+="<p>";
  36. code2+="The Black Parade-Dead!";
  37. currentSong="tbp02";
  38. clear();
  39. } else if (song == "this is how I disappear") {
  40. code+=TBP03;
  41. code2+=TBP;
  42. code2+="</p>";
  43. code2+="<p>";
  44. code2+="The Black Parade-This Is How I Disappear";
  45. currentSong="tbp03";
  46. clear();
  47. } else if (song == "the sharpest lives") {
  48. code+=TBP04;
  49. code2+=TBP;
  50. code2+="</p>";
  51. code2+="<p>";
  52. code2+="The Black Parade-The Sharpest Lives";
  53. currentSong="tbp04";
  54. clear();
  55. } else if (song == "welcome to the black parade") {
  56. code+=TBP05;
  57. code2+=TBP;
  58. code2+="</p>";
  59. code2+="<p>";
  60. code2+="The Black Parade-Welcome to the Black Parade";
  61. currentSong="tbp05";
  62. clear();
  63. } else if (song == "I dont love you") {
  64. code+=TBP06;
  65. code2+=TBP;
  66. code2+="</p>";
  67. code2+="<p>";
  68. code2+="The Black Parade-I Dont Love You";
  69. currentSong="tbp06";
  70. clear();
  71. } else if (song == "house of wolves") {
  72. code+=TBP07;
  73. code2+=TBP;
  74. code2+="</p>";
  75. code2+="<p>";
  76. code2+="The Black Parade-House Of Wolves";
  77. currentSong="tbp07";
  78. clear();
  79. } else if (song == "cancer") {
  80. code+=TBP08;
  81. code2+=TBP;
  82. code2+="</p>";
  83. code2+="<p>";
  84. code2+="The Black Parade-Cancer";
  85. currentSong="tbp08";
  86. clear();
  87. } else if (song == "mama") {
  88. code+=TBP09;
  89. code2+=TBP;
  90. code2+="</p>";
  91. code2+="<p>";
  92. code2+="The Black Parade-Mama";
  93. currentSong="tbp09";
  94. clear();
  95. } else if (song == "sleep") {
  96. code+=TBP10;
  97. code2+=TBP;
  98. code2+="</p>";
  99. code2+="<p>";
  100. code2+="The Black Parade-Sleep";
  101. currentSong="tbp10";
  102. clear();
  103. } else if (song == "teenagers") {
  104. code+=TBP11;
  105. code2+=TBP;
  106. code2+="</p>";
  107. code2+="<p>";
  108. code2+="The Black Parade-Teenagers";
  109. currentSong="tbp11";
  110. clear();
  111. } else if (song == "disenchanted") {
  112. code+=TBP12;
  113. code2+=TBP;
  114. code2+="</p>";
  115. code2+="<p>";
  116. code2+="The Black Parade-Disenchanted";
  117. currentSong="tbp12";
  118. clear();
  119. } else if (song == "famous last words") {
  120. code+=TBP13;
  121. code2+=TBP;
  122. code2+="</p>";
  123. code2+="<p>";
  124. code2+="The Black Parade-Famous Last Words";
  125. currentSong="tbp13";
  126. clear();
  127. } else if (song == "blood") {
  128. code+=TBP14;
  129. code2+=TBP;
  130. code2+="</p>";
  131. code2+="<p>";
  132. code2+="The Black Parade-Blood";
  133. currentSong="tbp14";
  134. clear();
  135. } else if (song == "helena") {
  136. code+=TCFSR01;
  137. code2+=TCFSR;
  138. code2+="</p>";
  139. code2+="<p>";
  140. code2+="Three Cheers For Sweet Revenge-Helena";
  141. currentSong="tcfsr01";
  142. clear();
  143. } else if (song == "give em hell kid") {
  144. code+=TCFSR02;
  145. code2+=TCFSR;
  146. code2+="</p>";
  147. code2+="<p>";
  148. code2+="Three Cheers For Sweet Revenge-Give Em Hell Kid";
  149. currentSong="tcfsr02";
  150. clear();
  151. } else if (song == "to the end") {
  152. code+=TCFSR03;
  153. code2+=TCFSR;
  154. code2+="</p>";
  155. code2+="<p>";
  156. code2+="Three Cheers For Sweet Revenge-To The End";
  157. currentSong="tcfsr03";
  158. clear();
  159. } else if (song == "you know what they do to guys like us in prison") {
  160. code+=TCFSR04;
  161. code2+=TCFSR;
  162. code2+="</p>";
  163. code2+="<p>";
  164. code2+="Three Cheers For Sweet Revenge-You Know What They Do To Guys Like Us In Prison";
  165. currentSong="tcfsr04";
  166. clear();
  167. } else if (song == "im not okay") {
  168. code+=TCFSR05;
  169. code2+=TCFSR;
  170. code2+="</p>";
  171. code2+="<p>";
  172. code2+="Three Cheers For Sweet Revenge-Im Not Okay"
  173. currentSong="tcfsr05";
  174. clear();
  175. } else if (song == "the ghost of you") {
  176. code+=TCFSR06;
  177. code2+=TCFSR;
  178. code2+="</p>";
  179. code2+="<p>";
  180. code2+="Three Cheers For Sweet Revenge-The Ghost Of You";
  181. currentSong="tcfsr06";
  182. clear();
  183. } else if (song == "the jetset life is gonna kill you") {
  184. code+=TCFSR07;
  185. code2+=TCFSR;
  186. code2+="</p>";
  187. code2+="<p>";
  188. code2+="Three Cheers For Sweet Revenge-The Jetset Life Is Gonna Kill You";
  189. currentSong="tcfsr07";
  190. clear();
  191. } else if (song == "interlude") {
  192. code+=TCFSR08;
  193. code2+=TCFSR;
  194. code2+="</p>";
  195. code2+="<p>";
  196. code2+="Three Cheers For Sweet Revenge-Interlude";
  197. currentSong="tcfsr08";
  198. clear();
  199. } else if (song == "thank you for the venom") {
  200. code+=TCFSR09;
  201. code2+=TCFSR;
  202. code2+="</p>";
  203. code2+="<p>";
  204. code2+="Three Cheers For Sweet Revenge-Thank You For The Venom";
  205. currentSong="tcfsr09";
  206. clear();
  207. } else if (song == "hang em high") {
  208. code+=TCFSR10;
  209. code2+=TCFSR;
  210. code2+="</p>";
  211. code2+="<p>";
  212. code2+="Three Cheers For Sweet Revenge-Hang Em High";
  213. currentSong="tcfsr10";
  214. clear();
  215. } else if (song == "its not a fashion statement its a deathwish") {
  216. code+=TCFSR11;
  217. code2+=TCFSR;
  218. code2+="</p>";
  219. code2+="<p>";
  220. code2+="Three Cheers For Sweet Revenge-Its Not A Fashion Statement Its A DeathWish";
  221. currentSong="tcfsr11";
  222. clear();
  223. } else if (song == "cemetery drive") {
  224. code+=TCFSR12;
  225. code2+=TCFSR;
  226. code2+="</p>";
  227. code2+="<p>";
  228. code2+="Three Cheers For Sweet Revenge-Cemetery Drive";
  229. currentSong="tcfsr12";
  230. clear();
  231. } else if (song == "I never told you what I do for a living") {
  232. code+=TCFSR13;
  233. code2+=TCFSR;
  234. code2+="</p>";
  235. code2+="<p>";
  236. code2+="Three Cheers For Sweet Revenge-I Never Told You What I Do For A Living";
  237. currentSong="tcfsr13";
  238. clear();
  239. } else {
  240. alert("ERROR!");
  241. }
  242. code+="' />";
  243. code+="</object>";
  244. code+="</body>";
  245. code+="</html>";
  246. code2+="</p>";
  247. code2+="</body>";
  248. code2+="</html>";
  249. var doc;
  250. doc=window.parent.musicPlayer.document;
  251. doc.open();
  252. doc.write(code);
  253. doc.close();
  254. var doc2;
  255. doc2=window.parent.album.document;
  256. doc2.open();
  257. doc2.write(code2);
  258. doc2.close();
  259. }
  260.  



Expand|Select|Wrap|Line Numbers
  1. function playPreviousSong() {
  2. code="";
  3. code="<html>";
  4. code+="<body>";
  5. code+="<object classid='clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95'>";
  6. code+="<param name='FileName' value='";
  7. code2="";
  8. code2+="<html>";
  9. code2+="<head>";
  10. code2+="<style type='text/css'>";
  11. code2+="* { background-color:#000; color:#fff; margin:0; text-align:center; font-size:small; }";
  12. code2+="</style>";
  13. code2+="</head>";
  14. code2+="<body>";
  15. code2+="<p>";
  16. if (currentSong == "tbp01") {
  17. code+=TBP01;
  18. code2+=TBP;
  19. code2+="</p>";
  20. code2+="<p>";
  21. code2+="The Black Parade-The End";
  22. currentSong="";
  23. currentSong="tbp01";
  24. } else if (currentSong == "tbp02") {
  25. code+=TBP01;
  26. code2+=TBP;
  27. code2+="</p>";
  28. code2+="<p>";
  29. code2+="The Black Parade-The End";
  30. currentSong="";
  31. currentSong="tbp01";
  32. } else if (currentSong == "tbp03") {
  33. code+=TBP02;
  34. code2+=TBP;
  35. code2+="</p>";
  36. code2+="<p>";
  37. code2+="The Black Parade-Dead!";
  38. currentSong="";
  39. currentSong="tbp02";
  40. } else if (currentSong == "tbp04") {
  41. code+=TBP03;
  42. code2+=TBP;
  43. code2+="</p>";
  44. code2+="<p>";
  45. code2+="The Black Parade-This Is How I Disappear";
  46. currentSong="";
  47. currentSong="tbp03";
  48. } else if (currentSong == "tbp05") {
  49. code+=TBP04;
  50. code2+=TBP;
  51. code2+="</p>";
  52. code2+="<p>";
  53. code2+="The Black Parade-The Sharpest Lives";
  54. currentSong="";
  55. currentSong="tbp04";
  56. } else if (currentSong == "tbp06") {
  57. code+=TBP05;
  58. code2+=TBP;
  59. code2+="</p>";
  60. code2+="<p>";
  61. code2+="The Black Parade-Welcome to the Black Parade";
  62. currentSong="";
  63. currentSong="tbp05";
  64. } else if (currentSong == "tbp07") {
  65. code+=TBP06;
  66. code2+=TBP;
  67. code2+="</p>";
  68. code2+="<p>";
  69. code2+="The Black Parade-I Dont Love You";
  70. currentSong="";
  71. currentSong="tbp06";
  72. } else if (currentSong == "tbp08") {
  73. code+=TBP07;
  74. code2+=TBP;
  75. code2+="</p>";
  76. code2+="<p>";
  77. code2+="The Black Parade-House Of Wolves";
  78. currentSong="";
  79. currentSong="tbp07";
  80. } else if (currentSong == "tbp09") {
  81. code+=TBP08;
  82. code2+=TBP;
  83. code2+="</p>";
  84. code2+="<p>";
  85. code2+="The Black Parade-Cancer";
  86. currentSong="";
  87. currentSong="tbp08";
  88. } else if (currentSong == "tbp10") {
  89. code+=TBP09;
  90. code2+=TBP;
  91. code2+="</p>";
  92. code2+="<p>";
  93. code2+="The Black Parade-Mama";
  94. currentSong="";
  95. currentSong="tbp09";
  96. } else if (currentSong == "tbp11") {
  97. code+=TBP10;
  98. code2+=TBP;
  99. code2+="</p>";
  100. code2+="<p>";
  101. code2+="The Black Parade-Sleep";
  102. currentSong="";
  103. currentSong="tbp10";
  104. } else if (currentSong == "tbp12") {
  105. code+=TBP11;
  106. code2+=TBP;
  107. code2+="</p>";
  108. code2+="<p>";
  109. code2+="The Black Parade-Teenagers";
  110. currentSong="";
  111. currentSong="tbp11";
  112. } else if (currentSong == "tbp13") {
  113. code+=TBP12;
  114. code2+=TBP;
  115. code2+="</p>";
  116. code2+="<p>";
  117. code2+="The Black Parade-Disenchanted";
  118. currentSong="";
  119. currentSong="tbp12";
  120. } else if (currentSong == "tbp14") {
  121. code+=TBP13;
  122. code2+=TBP;
  123. code2+="</p>";
  124. code2+="<p>";
  125. code2+="The Black Parade-Famous Last Words";
  126. currentSong="";
  127. currentSong="tbp13";
  128. } else if (currentSong == "tcfsr01") {
  129. code+=TCFSR01;
  130. code2+=TCFSR;
  131. code2+="</p>";
  132. code2+="<p>";
  133. code2+="Three Cheers For Sweet Revenge-Helena";
  134. currentSong="";
  135. currentSong="tcfsr01";
  136. } else if (currentSong == "tcfsr02") {
  137. code+=TCFSR01;
  138. code2+=TCFSR;
  139. code2+="</p>";
  140. code2+="<p>";
  141. code2+="Three Cheers For Sweet Revenge-Helena";
  142. currentSong="";
  143. currentSong="tcfsr01";
  144. } else if (currentSong == "tcfsr03") {
  145. code+=TCFSR02;
  146. code2+=TCFSR;
  147. code2+="</p>";
  148. code2+="<p>";
  149. code2+="Three Cheers For Sweet Revenge-Give Em Hell Kid";
  150. currentSong="";
  151. currentSong="tcfsr02";
  152. } else if (currentSong == "tcfsr04") {
  153. code+=TCFSR03;
  154. code2+=TCFSR;
  155. code2+="</p>";
  156. code2+="<p>";
  157. code2+="Three Cheers For Sweet Revenge-To The End";
  158. currentSong="";
  159. currentSong="tcfsr03";
  160. } else if (currentSong == "tcfsr05") {
  161. code+=TCFSR04;
  162. code2+=TCFSR;
  163. code2+="</p>";
  164. code2+="<p>";
  165. code2+="Three Cheers For Sweet Revenge-You Know What They Do To Guys Like Us In Prison";
  166. currentSong="";
  167. currentSong="tcfsr04";
  168. } else if (currentSong == "tcfsr06") {
  169. code+=TCFSR05;
  170. code2+=TCFSR;
  171. code2+="</p>";
  172. code2+="<p>";
  173. code2+="Three Cheers For Sweet Revenge-Im Not Okay";
  174. currentSong="";
  175. currentSong="tcfsr05";
  176. } else if (currentSong == "tcfsr07") {
  177. code+=TCFSR06;
  178. code2+=TCFSR;
  179. code2+="</p>";
  180. code2+="<p>";
  181. code2+="Three Cheers For Sweet Revenge-The Ghost Of You";
  182. currentSong="";
  183. currentSong="tcfsr06";
  184. } else if (currentSong == "tcfsr08") {
  185. code+=TCFSR07;
  186. code2+=TCFSR;
  187. code2+="</p>";
  188. code2+="<p>";
  189. code2+="Three Cheers For Sweet Revenge-The Jetset Life Is Gonna Kill You";
  190. currentSong="";
  191. currentSong="tcfsr07";
  192. } else if (currentSong == "tcfsr09") {
  193. code+=TCFSR08;
  194. code2+=TCFSR;
  195. code2+="</p>";
  196. code2+="<p>";
  197. code2+="Three Cheers For Sweet Revenge-Interlude";
  198. currentSong="";
  199. currentSong="tcfsr08";
  200. } else if (currentSong == "tcfsr10") {
  201. code+=TCFSR09;
  202. code2+=TCFSR;
  203. code2+="</p>";
  204. code2+="<p>";
  205. code2+="Three Cheers For Sweet Revenge-Thank You For The Venom";
  206. currentSong="";
  207. currentSong="tcfsr09";
  208. } else if (currentSong == "tcfsr11") {
  209. code+=TCFSR10;
  210. code2+=TCFSR;
  211. code2+="</p>";
  212. code2+="<p>";
  213. code2+="Three Cheers For Sweet Revenge-Hang Em High";
  214. currentSong="";
  215. currentSong="tcfsr10";
  216. } else if (currentSong == "tcfsr12") {
  217. code+=TCFSR11;
  218. code2+=TCFSR;
  219. code2+="</p>";
  220. code2+="<p>";
  221. code2+="Three Cheers For Sweet Revenge-Its Not A Fashion Statement Its A Deathwish";
  222. currentSong="";
  223. currentSong="tcfsr11";
  224. } else if (currentSong == "tcfsr13") {
  225. code+=TCFSR12;
  226. code2+=TCFSR;
  227. code2+="</p>";
  228. code2+="<p>";
  229. code2+="Three Cheers For Sweet Revenge-Cemetery Drive";
  230. currentSong="";
  231. currentSong="tcfsr12";
  232. } else {
  233. alert("ERROR!");
  234. }
  235.  
  236. code+="' />";
  237. code+="</object>";
  238. code+="</body>";
  239. code+="</html>";
  240. code2+="</p>";
  241. code2+="</body>";
  242. code2+="</html>";
  243. var doc;
  244. doc=window.parent.musicPlayer.document;
  245. doc.open();
  246. doc.write(code);
  247. doc.close();
  248. var doc2;
  249. doc2=window.parent.album.document;
  250. doc2.open();
  251. doc2.write(code2);
  252. doc2.close();
  253. }
  254.  



Expand|Select|Wrap|Line Numbers
  1. function playNextSong() {
  2. code="";
  3. code="<html>";
  4. code+="<body>";
  5. code+="<object classid='clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95'>";
  6. code+="<param name='FileName' value='";
  7. code2="";
  8. code2+="<html>";
  9. code2+="<head>";
  10. code2+="<style type='text/css'>";
  11. code2+="* { background-color:#000; color:#fff; margin:0; text-align:center; font-size:small; }";
  12. code2+="</style>";
  13. code2+="</head>";
  14. code2+="<body>";
  15. code2+="<p>";
  16. if (currentSong == "tbp01") {
  17. code+=TBP02;
  18. code2+=TBP;
  19. code2+="</p>";
  20. code2+="<p>";
  21. code2+="The Black Parade-Dead!";
  22. currentSong="";
  23. currentSong="tbp02";
  24. } else if (currentSong == "tbp02") {
  25. code+=TBP03;
  26. code2+=TBP;
  27. code2+="</p>";
  28. code2+="<p>";
  29. code2+="The Black Parade-This Is How I Disappear";
  30. currentSong="";
  31. currentSong="tbp03";
  32. } else if (currentSong == "tbp03") {
  33. code+=TBP04;
  34. code2+=TBP;
  35. code2+="</p>";
  36. code2+="<p>";
  37. code2+="The Black Parade-The Sharpest Lives";
  38. currentSong="";
  39. currentSong="tbp04";
  40. } else if (currentSong == "tbp04") {
  41. code+=TBP05;
  42. code2+=TBP;
  43. code2+="</p>";
  44. code2+="<p>";
  45. code2+="The Black Parade-Welcome To The Black Parade";
  46. currentSong="";
  47. currentSong="tbp05";
  48. } else if (currentSong == "tbp05") {
  49. code+=TBP06;
  50. code2+=TBP;
  51. code2+="</p>";
  52. code2+="<p>";
  53. code2+="The Black Parade-I Dont Love You";
  54. currentSong="";
  55. currentSong="tbp06";
  56. } else if (currentSong == "tbp06") {
  57. code+=TBP07;
  58. code2+=TBP;
  59. code2+="</p>";
  60. code2+="<p>";
  61. code2+="The Black Parade-House Of Wolves";
  62. currentSong="";
  63. currentSong="tbp07";
  64. } else if (currentSong == "tbp07") {
  65. code+=TBP08;
  66. code2+=TBP;
  67. code2+="</p>";
  68. code2+="<p>";
  69. code2+="The Black Parade-Cancer";
  70. currentSong="";
  71. currentSong="tbp08";
  72. } else if (currentSong == "tbp08") {
  73. code+=TBP09;
  74. code2+=TBP;
  75. code2+="</p>";
  76. code2+="<p>";
  77. code2+="The Black Parade-Mama";
  78. currentSong="";
  79. currentSong="tbp09";
  80. } else if (currentSong == "tbp09") {
  81. code+=TBP10;
  82. code2+=TBP;
  83. code2+="</p>";
  84. code2+="<p>";
  85. code2+="The Black Parade-Sleep";
  86. currentSong="";
  87. currentSong="tbp10";
  88. } else if (currentSong == "tbp10") {
  89. code+=TBP11;
  90. code2+=TBP;
  91. code2+="</p>";
  92. code2+="<p>";
  93. code2+="The Black Parade-Teenagers";
  94. currentSong="";
  95. currentSong="tbp11";
  96. } else if (currentSong == "tbp11") {
  97. code+=TBP12;
  98. code2+=TBP;
  99. code2+="</p>";
  100. code2+="<p>";
  101. code2+="The Black Parade-Disenchanted";
  102. currentSong="";
  103. currentSong="tbp12";
  104. } else if (currentSong == "tbp12") {
  105. code+=TBP13;
  106. code2+=TBP;
  107. code2+="</p>";
  108. code2+="<p>";
  109. code2+="The Black Parade-Famous Last Words";
  110. currentSong="";
  111. currentSong="tbp13";
  112. } else if (currentSong == "tbp13") {
  113. code+=TBP14;
  114. code2+=TBP;
  115. code2+="</p>";
  116. code2+="<p>";
  117. code2+="The Black Parade-Blood";
  118. currentSong="";
  119. currentSong="tbp14";
  120. } else if (currentSong == "tbp14") {
  121. code+=TBP14;
  122. code2+=TBP;
  123. code2+="</p>";
  124. code2+="<p>";
  125. code2+="The Black Parade-Blood";
  126. currentSong="";
  127. currentSong="tbp14";
  128. } else if (currentSong == "tcfsr01") {
  129. code+=TCFSR02;
  130. code2+=TCFSR;
  131. code2+="</p>";
  132. code2+="<p>";
  133. code2+="Three Cheers For Sweet Revenge-Give Em Hell Kid";
  134. currentSong="";
  135. currentSong="tcfsr02";
  136. } else if (currentSong == "tcfsr02") {
  137. code+=TCFSR03;
  138. code2+=TCFSR;
  139. code2+="</p>";
  140. code2+="<p>";
  141. code2+="Three Cheers For Sweet Revenge-To The End";
  142. currentSong="";
  143. currentSong="tcfsr03";
  144. } else if (currentSong == "tcfsr03") {
  145. code+=TCFSR04;
  146. code2+=TCFSR;
  147. code2+="</p>";
  148. code2+="<p>";
  149. code2+="Three Cheers For Sweet Revenge-You Know What They Do To Guys Like Us In Prison";
  150. currentSong="";
  151. currentSong="tcfsr04";
  152. } else if (currentSong == "tcfsr04") {
  153. code+=TCFSR05;
  154. code2+=TCFSR;
  155. code2+="</p>";
  156. code2+="<p>";
  157. code2+="Three Cheers For Sweet Revenge-Im Not Okay";
  158. currentSong="";
  159. currentSong="tcfsr05";
  160. } else if (currentSong == "tcfsr05") {
  161. code+=TCFSR06;
  162. code2+=TCFSR;
  163. code2+="</p>";
  164. code2+="<p>";
  165. code2+="Three Cheers For Sweet Revenge-The Ghost Of You";
  166. currentSong="";
  167. currentSong="tcfsr06";
  168. } else if (currentSong == "tcfsr06") {
  169. code+=TCFSR07;
  170. code2+=TCFSR;
  171. code2+="</p>";
  172. code2+="<p>";
  173. code2+="Three Cheers For Sweet Revenge-The Jetset Life Is Gonna Kill You";
  174. currentSong="";
  175. currentSong="tcfsr07";
  176. } else if (currentSong == "tcfsr07") {
  177. code+=TCFSR08;
  178. code2+=TCFSR;
  179. code2+="</p>";
  180. code2+="<p>";
  181. code2+="Three Cheers For Sweet Revenge-Interlude";
  182. currentSong="";
  183. currentSong="tcfsr08";
  184. } else if (currentSong == "tcfsr08") {
  185. code+=TCFSR09;
  186. code2+=TCFSR;
  187. code2+="</p>";
  188. code2+="<p>";
  189. code2+="Three Cheers For Sweet Revenge-Thank You For The Venom";
  190. currentSong="";
  191. currentSong="tcfsr09";
  192. } else if (currentSong == "tcfsr09") {
  193. code+=TCFSR10;
  194. code2+=TCFSR;
  195. code2+="</p>";
  196. code2+="<p>";
  197. code2+="Three Cheers For Sweet Revenge-Hang Em High";
  198. currentSong="";
  199. currentSong="tcfsr10";
  200. } else if (currentSong == "tcfsr10") {
  201. code+=TCFSR11;
  202. code2+=TCFSR;
  203. code2+="</p>";
  204. code2+="<p>";
  205. code2+="Three Cheers For Sweet Revenge-Its Not A Fashion Statement Its A Deathwish";
  206. currentSong="";
  207. currentSong="tcfsr11";
  208. } else if (currentSong == "tcfsr11") {
  209. code+=TCFSR12;
  210. code2+=TCFSR;
  211. code2+="</p>";
  212. code2+="<p>";
  213. code2+="Three Cheers For Sweet Revenge-Cemetery Drive";
  214. currentSong="";
  215. currentSong="tcfsr12";
  216. } else if (currentSong == "tcfsr12") {
  217. code+=TCFSR13;
  218. code2+=TCFSR;
  219. code2+="</p>";
  220. code2+="<p>";
  221. code2+="Three Cheers For Sweet Revenge-I Never Told You What I Do For A Living";
  222. currentSong="";
  223. currentSong="tcfsr13";
  224. } else if (currentSong == "tcfsr13") {
  225. code+=TCFSR13;
  226. code2+=TCFSR;
  227. code2+="</p>";
  228. code2+="<p>";
  229. code2+="Three Cheers For Sweet Revenge-I Never Told You What I Do For A Living";
  230. currentSong="";
  231. currentSong="tcfsr13";
  232. } else {
  233. alert("ERROR!");
  234. }
  235. code+="' />";
  236. code+="</object>";
  237. code+="</body>";
  238. code+="</html>";
  239. code2+="</p>";
  240. code2+="</body>";
  241. code2+="</html>";
  242. var doc;
  243. doc=window.parent.musicPlayer.document;
  244. doc.open();
  245. doc.write(code);
  246. doc.close();
  247. var doc2;
  248. doc2=window.parent.album.document;
  249. doc2.open();
  250. doc2.write(code2);
  251. doc2.close();
  252. }
  253.  
code is the variable for the hidden music player, and code2 is for the album photo and name, along with the song title.

So finaly here is my question, is there any way to shorten this? The coding was easy but even with using copy and paste it took me 1 hour and 43 minutes (I timed myself I was really bored). That's way to much work.

Furthermore just to get this out of the way. My user are not expecting a pause/stop button. Also, I will get permision before using any songs, photos, whatever before adding it any where on the site.

Thanks for any help, Death

I couldn't include the music file, but everything else is there.
Jan 22 '08 #1
Share this Question
Share on Google+
43 Replies


acoder
Expert Mod 15k+
P: 16,027
The first step could be to use arrays.

Secondly, why not have the HTML already written and just change the properties with JavaScript?
Jan 23 '08 #2

Death Slaught
100+
P: 1,137
The first step could be to use arrays.

Secondly, why not have the HTML already written and just change the properties with JavaScript?
Could you provide an example of using arrays for this.

Also for the life of me I can't remember how to change properties. It's been about 2 months sense i've even tried to do anything with it.

Thanks, Death
Jan 23 '08 #3

acoder
Expert Mod 15k+
P: 16,027
TBP** could be
Expand|Select|Wrap|Line Numbers
  1. var TBP = ["Music/My Chemical Romance/The Black Parade/01 The End.wma",...];
TBP[0] would give you the first array item.

You could change the text box txtSong into a drop down object.
Jan 23 '08 #4

Death Slaught
100+
P: 1,137
Thanks, but this music player is going to have well over 100 albums, and it would take way to long for the user to scroll through every song to find what they want.

That's why i'm considering using Psuedo URL's in links to create a row of bands based on the letter the user clicks/enters, and then it creates a list of albums based on the band the user chose. Finaly it creates another list of the songs in that album and all the user has to do is click on the link and the song plays.

I have a demo version if you would liek me to post it.

Thanks, Death
Jan 23 '08 #5

acoder
Expert Mod 15k+
P: 16,027
The restricted output makes sense. What if the user makes a typo? He won't see anything. He won't even know what choices are available.

As for setting properties, that's not too difficult. Just access using document.getElementById() and then set the property.

There's far too much redundant code at the moment which can be simplified using arrays. Set the value of the selected option as the index of the array and you'll have the value you need for the filename.
Jan 24 '08 #6

Death Slaught
100+
P: 1,137
I see what you meen, but this site will be for 'select' users and when I say this I meen no more than 20. Furthermore, they will all know what they are looking for (most of the time). The best solution I've thought of so far is something like this:


[HTML]
<div>
&nbsp;
<a href="javascript:showA();">A</a>
<a href="javascript:showB();">B</a>
<a href="javascript:showC();">C</a>
<a href="javascript:showD();">D</a>
<a href="javascript:showE();">E</a>
<a href="javascript:showF();">F</a>
<a href="javascript:showG();">G</a>
<a href="javascript:showH();">H</a>
<a href="javascript:showI();">I</a>
<a href="javascript:showJ();">J</a>
<br />
&nbsp;&nbsp;
<a href="javascript:showK();">K</a>
<a href="javascript:showL();">L</a>
<a href="javascript:showM();">M</a>
<a href="javascript:showN();">N</a>
<a href="javascript:showO();">O</a>
<a href="javascript:showP();">P</a>
<a href="javascript:showQ();">Q</a>
<a href="javascript:showR();">R</a>
<br />
&nbsp;&nbsp;
<a href="javascript:showS();">S</a>
<a href="javascript:showT();">T</a>
<a href="javascript:showU();">U</a>
<a href="javascript:showV();">V</a>
<a href="javascript:showW();">W</a>
<a href="javascript:showX();">X</a>
<a href="javascript:showY();">Y</a>
<a href="javascript:showZ();">Z</a>
</div>
[/HTML]


/*The Black Parade Album*/
var TBP01;
TBP01="Music/My Chemical Romance/The Black Parade/01 The End.wma";
var TBP02;
TBP02="Music/My Chemical Romance/The Black Parade/02 Dead!.wma";
var TBP;
TBP03="Music/My Chemical Romance/The Black Parade/03 This Is How I Disappear.wma";
var TBP04;
TBP04="Music/My Chemical Romance/The Black Parade/04 The Sharpest Lives.wma";
var TBP05;
TBP05="Music/My Chemical Romance/The Black Parade/05 Welcome to the Black Parade.wma";
var TBP06;
TBP06="Music/My Chemical Romance/The Black Parade/06 I Dont Love You.wma";
var TBP07;
TBP07="Music/My Chemical Romance/The Black Parade/07 House of Wolves.wma";
var TBP08;
TBP08="Music/My Chemical Romance/The Black Parade/08 Cancer.wma";
var TBP09;
TBP09="Music/My Chemical Romance/The Black Parade/09 Mama.wma";
var TBP10;
TBP10="Music/My Chemical Romance/The Black Parade/10 Sleep.wma";
var TBP11;
TBP11="Music/My Chemical Romance/The Black Parade/11 Teenagers.wma";
var TBP12;
TBP12="Music/My Chemical Romance/The Black Parade/12 Disenchanted.wma";
var TBP13;
TBP13="Music/My Chemical Romance/The Black Parade/13 Famous Last Words.wma";
var TBP14;
TBP14="Music/My Chemical Romance/The Black Parade/14 Blood.wma";

/*Three Cheers For Sweet Revenge*/
var TCFSR01;
TCFSR01="Music/My Chemical Romance/Three Cheers For Sweet Revenge/01 Helena.wma";
var TCFSR02;
TCFSR02="Music/My Chemical Romance/Three Cheers For Sweet Revenge/02 Give Em Hell Kid.wma";
var TCFSR03;
TCFSR03="Music/My Chemical Romance/Three Cheers For Sweet Revenge/03 To the End.wma";
var TCFSR04;
TCFSR04="Music/My Chemical Romance/Three Cheers For Sweet Revenge/04 You Know What They Do to Guys Like Us in Prison.wma";
var TCFSR05;
TCFSR05="Music/My Chemical Romance/Three Cheers For Sweet Revenge/05 Im Not Okay I Promise.wma";
var TCFSR06;
TCFSR06="Music/My Chemical Romance/Three Cheers For Sweet Revenge/06 The Ghost of You.wma";
var TCFSR07;
TCFSR07="Music/My Chemical Romance/Three Cheers For Sweet Revenge/07 The Jetset Life Is Gonna Kill You.wma";
var TCFSR08;
TCFSR08="Music/My Chemical Romance/Three Cheers For Sweet Revenge/08 Interlude.wma";
var TCFSR09;
TCFSR09="Music/My Chemical Romance/Three Cheers For Sweet Revenge/09 Thank You for the Venom.wma";
var TCFSR10;
TCFSR10="Music/My Chemical Romance/Three Cheers For Sweet Revenge/10 Hang Em High.wma";
var TCFSR11;
TCFSR11="Music/My Chemical Romance/Three Cheers For Sweet Revenge/11 Its Not a Fashion Statement Its a Deathwish.wma";
var TCFSR12;
TCFSR12="Music/My Chemical Romance/Three Cheers For Sweet Revenge/12 Cemetery Drive.wma";
var TCFSR13;
TCFSR13="Music/My Chemical Romance/Three Cheers For Sweet Revenge/13 I Never Told You What I Do for a Living.wma";

var code;
var code2;



function showM() {

code="";
code+="<html>";
code+="<head>";
code+="<script type='text/javascript' src='script.js'>";
code+="</script>";
code+="<style type='text/css'>";
code+="* { background-color:#000; margin:0; padding:0; }";
code+="a { text-decoration:none; color:#fff; }";
code+="a:hover { color:#000; }";
code+="#band { position:absolute; left:150px; }";
code+="</style>";
code+="</head>";
code+="<body>";
code+="<div id='band'>";
code+="<a href='javascript:showAlbumM();'>My Chemical Romance</a>";
code+="</div>";
code+="</body>";
code+="</html>";

var doc=window.parent.choose.document;

doc.open();
doc.write(code);
doc.close();

}



function showAlbumM () {

code="";
code+="<html>";
code+="<head>";
code+="<script type='text/javascript' src='script.js'>";
code+="</script>";
code+="<style type='text/css'>";
code+="* { background-color:#000; margin:0; padding:0; }";
code+="a { text-decoration:none; color:#fff; }";
code+="#band { position:absolute; left:150px; }";
code+="#album { position:absolute; left:300px; }";
code+="</style>";
code+="</head>";
code+="<body>";
code+="<div id='band'>";
code+="<a href='javascript:showAlbumM();'>My Chemical Romance-</a>";
code+="</div>";
code+="<div id='album'>";
code+="<a href='javascript:showTBP();'>The Black Parade</a>";
code+="</div>";
code+="</body>";
code+="</html>";

var doc=window.parent.choose.document;

doc.open();
doc.write(code);
doc.close();

}


/*Shows the songs from that album*/
function showTBP() {

code="";
code+="<html>";
code+="<head>";
code+="<script type='text/javascript' src='script.js'>";
code+="</script>";
code+="<style type='text/css'>";
code+="* { background-color:#000; margin:0; padding:0; }";
code+="a { text-decoration:none; color:#fff; }";
code+="#band { position:absolute; left:150px; }";
code+="#album { position:absolute; left:310px; }";
code+="#songs { position:absolute; left:425px; }";
code+="</style>";
code+="</head>";
code+="<body>";
code+="<div id='band'>";
code+="<a href='javascript:showAlbumM();'>My Chemical Romance-</a>";
code+="</div>";
code+="<div id='album'>";
code+="<a href='javascript:showTBP();'>The Black Parade-</a>";
code+="</div>";
code+="<div id='songs'>";
code+="<a href='javascript:playTBP01();'>The End</a>";
code+="<br />";
code+="<a href='javascript:playTBP02();'>Dead!</a>";
code+="<br />";
code+="<a href='javascript:playTBP03();'>This Is How I Disappear</a>";
code+="<br />";
code+="<a href='javascript:playTBP04();'>The Sharpest Lives</a>";
code+="<br />";
code+="<a href='javascript:playTBP05();'>Welcome To The Black Parade</a>";
code+="<br />";
code+="<a href='javascript:playTBP06();'>I Don't Love You</a>";
code+="<br />";
code+="<a href='javascript:playTBP07();'>House Of Wolves</a>";
code+="<br />";
code+="<a href='javascript:playTBP08();'>Cancer</a>";
code+="<br />";
code+="<a href='javascript:playTBP09();'>Mama</a>";
code+="<br />";
code+="<a href='javascript:playTBP10();'>Sleep</a>";
code+="<br />";
code+="<a href='javascript:playTBP11();'>Teenagers</a>";
code+="<br />";
code+="<a href='javascript:playTBP12();'>Disenchanted</a>";
code+="<br />";
code+="<a href='javascript:playTBP13();'>Famous Last Words</a>";
code+="<br />";
code+="<a href='javascript:playTBP14();'>Blood</a>";
code+="</div>";
code+="</body>";
code+="</html>";

var doc=window.parent.choose.document;

doc.open();
doc.write(code);
doc.close();

}

function playTBP01() {

code2="";
code2+="<html>";
code2+="<body>";
code2+="<object classid='clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95'>";
code2+="<param name='FileName' value='";
code2+=TBP01;
code2+="' />";
code2+="</object>";
code2+="</body>";
code2+="</html>";

var doc2=window.parent.player.document;

doc2.open();
doc2.write(code2);
doc2.close();

}

function playTBP02() {

code2="";
code2+="<html>";
code2+="<body>";
code2+="<object classid='clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95'>";
code2+="<param name='FileName' value='";
code2+=TBP02;
code2+="' />";
code2+="</object>";
code2+="</body>";
code2+="</html>";

var doc2=window.parent.player.document;

doc2.open();
doc2.write(code2);
doc2.close();

}

function playTBP03() {

code2="";
code2+="<html>";
code2+="<body>";
code2+="<object classid='clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95'>";
code2+="<param name='FileName' value='";
code2+=TBP03;
code2+="' />";
code2+="</object>";
code2+="</body>";
code2+="</html>";

var doc2=window.parent.player.document;

doc2.open();
doc2.write(code2);
doc2.close();

}

function playTBP04() {

code2="";
code2+="<html>";
code2+="<body>";
code2+="<object classid='clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95'>";
code2+="<param name='FileName' value='";
code2+=TBP04;
code2+="' />";
code2+="</object>";
code2+="</body>";
code2+="</html>";

var doc2=window.parent.player.document;

doc2.open();
doc2.write(code2);
doc2.close();

}

function playTBP05() {

code2="";
code2+="<html>";
code2+="<body>";
code2+="<object classid='clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95'>";
code2+="<param name='FileName' value='";
code2+=TBP05;
code2+="' />";
code2+="</object>";
code2+="</body>";
code2+="</html>";

var doc2=window.parent.player.document;

doc2.open();
doc2.write(code2);
doc2.close();

}

function playTBP06() {

code2="";
code2+="<html>";
code2+="<body>";
code2+="<object classid='clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95'>";
code2+="<param name='FileName' value='";
code2+=TBP06;
code2+="' />";
code2+="</object>";
code2+="</body>";
code2+="</html>";

var doc2=window.parent.player.document;

doc2.open();
doc2.write(code2);
doc2.close();

}

function playTBP07() {

code2="";
code2+="<html>";
code2+="<body>";
code2+="<object classid='clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95'>";
code2+="<param name='FileName' value='";
code2+=TBP07;
code2+="' />";
code2+="</object>";
code2+="</body>";
code2+="</html>";

var doc2=window.parent.player.document;

doc2.open();
doc2.write(code2);
doc2.close();

}

function playTBP08() {

code2="";
code2+="<html>";
code2+="<body>";
code2+="<object classid='clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95'>";
code2+="<param name='FileName' value='";
code2+=TBP08;
code2+="' />";
code2+="</object>";
code2+="</body>";
code2+="</html>";

var doc2=window.parent.player.document;

doc2.open();
doc2.write(code2);
doc2.close();

}

function playTBP09() {

code2="";
code2+="<html>";
code2+="<body>";
code2+="<object classid='clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95'>";
code2+="<param name='FileName' value='";
code2+=TBP09;
code2+="' />";
code2+="</object>";
code2+="</body>";
code2+="</html>";

var doc2=window.parent.player.document;

doc2.open();
doc2.write(code2);
doc2.close();

}

function playTBP10() {

code2="";
code2+="<html>";
code2+="<body>";
code2+="<object classid='clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95'>";
code2+="<param name='FileName' value='";
code2+=TBP10;
code2+="' />";
code2+="</object>";
code2+="</body>";
code2+="</html>";

var doc2=window.parent.player.document;

doc2.open();
doc2.write(code2);
doc2.close();

}

function playTBP11() {

code2="";
code2+="<html>";
code2+="<body>";
code2+="<object classid='clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95'>";
code2+="<param name='FileName' value='";
code2+=TBP11;
code2+="' />";
code2+="</object>";
code2+="</body>";
code2+="</html>";

var doc2=window.parent.player.document;

doc2.open();
doc2.write(code2);
doc2.close();

}

function playTBP12() {

code2="";
code2+="<html>";
code2+="<body>";
code2+="<object classid='clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95'>";
code2+="<param name='FileName' value='";
code2+=TBP12;
code2+="' />";
code2+="</object>";
code2+="</body>";
code2+="</html>";

var doc2=window.parent.player.document;

doc2.open();
doc2.write(code2);
doc2.close();

}

function playTBP13() {

code2="";
code2+="<html>";
code2+="<body>";
code2+="<object classid='clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95'>";
code2+="<param name='FileName' value='";
code2+=TBP13;
code2+="' />";
code2+="</object>";
code2+="</body>";
code2+="</html>";

var doc2=window.parent.player.document;

doc2.open();
doc2.write(code2);
doc2.close();

}

function playTBP14() {

code2="";
code2+="<html>";
code2+="<body>";
code2+="<object classid='clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95'>";
code2+="<param name='FileName' value='";
code2+=TBP14;
code2+="' />";
code2+="</object>";
code2+="</body>";
code2+="</html>";

var doc2=window.parent.player.document;

doc2.open();
doc2.write(code2);
doc2.close();

}


It's what I was talking about in my previous post. Any suggestions besides a huge drop down list?

Thanks, Death

Sorry about my lack of proper code tags, but I can't use them because of the glitch.
Jan 24 '08 #7

acoder
Expert Mod 15k+
P: 16,027
It's what I was talking about in my previous post. Any suggestions besides a huge drop down list?
Smaller dropdown lists. When you select/click on A, B, C, etc., the corresponding dropdown list is loaded either by modifying one select element or replacing with another one. This link will give you an idea.

The redundant code can be replaced using arrays as I mentioned earlier.
Jan 24 '08 #8

Death Slaught
100+
P: 1,137
Thanks I've got a few different things I'm going to try with the drop down menu, but I do have one more idea.....

What about having a drop down menu like we do here at Thescripts. Instead of Discussions it could be Bands, and instead of Forums it could be Albums, and instead of Howtos it could be Songs. Not exactly like it but with the same concept. Also, when the user selects a band, album, or song links appear below of the band next to that their albums, and next to that the songs on the album they have selected.

Would this work well?

Thanks, Death
Jan 24 '08 #9

gits
Expert Mod 5K+
P: 5,327
of course ... that will work :) ... just build it up ... you could even use a tree with a hierarchy ...

kind regards
Jan 24 '08 #10

Death Slaught
100+
P: 1,137
of course ... that will work :) ... just build it up ... you could even use a tree with a hierarchy ...

kind regards
Thanks, that's great to know!

Unfortunately, my JavaScript is very limited do you have any references for how I would acomplish this.

Thanks, Death
Jan 24 '08 #11

gits
Expert Mod 5K+
P: 5,327
hi ...

there are a lot of free js treeview controls out there :) ... just one is here for example ...

kind regards
Jan 24 '08 #12

acoder
Expert Mod 15k+
P: 16,027
What about having a drop down menu like we do here at Thescripts. Instead of Discussions it could be Bands, and instead of Forums it could be Albums, and instead of Howtos it could be Songs. Not exactly like it but with the same concept. Also, when the user selects a band, album, or song links appear below of the band next to that their albums, and next to that the songs on the album they have selected.
Just a quick note that it's been implemented using CSS only with no JavaScript involved, though you could use JavaScript of course. The treeview seems like a good option too.
Jan 25 '08 #13

Death Slaught
100+
P: 1,137
Thanks gits, that was really interesting I never knew that was possible.


Thats one option but how would I make a drop down menu like the one here on the scripts? Is it purley HTML and CSS or does it envolve JavaScript? Is it what acoder mentioned (thanks for the reply acoder)?

This stupid keyboard is screwing up making all my letter caps (no my caps lock isn"t on) i"ll post more on this later

Thanks Death
Jan 28 '08 #14

acoder
Expert Mod 15k+
P: 16,027
Thats one option but how would I make a drop down menu like the one here on the scripts? Is it purley HTML and CSS or does it envolve JavaScript? Is it what acoder mentioned (thanks for the reply acoder)?
Yes, there's no JavaScript involved. The HTML in this case is:
[html]<div id="menuwrapper">
<ul id="navMenubar">
<li><a href="#" class="trigger">Discussions</a>
<ul>
<li><a href="http://www.thescripts.com/forum/forum30.html">Introductions</a></li>
<li><a href="http://www.thescripts.com/forum/forum160.html">Cafe / Lounge</a></li>
<li><a href="http://www.thescripts.com/forum/forum67.html">Programming Challenges / IT Case Studies</a></li>
<li><a href="http://www.thescripts.com/forum/forum125.html">Feedback, Bugs, Suggestions</a></li>

<li><a href="http://www.thescripts.com/forum/forum266.html">Milestones</a></li>


<li><a href="http://www.thescripts.com/forum/forum157.html">Experts Panel</a></li>

</ul>
</li>
<li><a href="#" class="trigger">Forums</a>
<ul>
<div id="menudesc">Programming forums for software developers and programmers:</div>
<li><div class="menucat">Languages</div>
<div id="sublist">
<a href="http://www.thescripts.com/forum/forum129.html">C / C++</a>
<a href="http://www.thescripts.com/forum/forum130.html">Java</a>
<a href="http://www.thescripts.com/forum/forum131.html">.NET</a>
<a href="http://www.thescripts.com/forum/forum132.html">Visual Basic </a>
<a href="http://www.thescripts.com/forum/forum152.html">Python</a>
</div>
</li>[/html]and so on.

Use some inspector, e.g. Firebug with Firefox to see the CSS for each element.
Jan 28 '08 #15

CroCrew
Expert 100+
P: 563
can you back end this with a database? It would be better. If you can then I could give you an example on how to do this. Mide you my examples will be done in asp or asp.net with SQL or Access as the database.
Jan 28 '08 #16

Death Slaught
100+
P: 1,137
YAY! Something I understand thanks acoder, and gits.


I'll post the finished product, it should only take me 2 days with school and all.

Thanks, Death
Jan 28 '08 #17

Death Slaught
100+
P: 1,137
can you back end this with a database? It would be better. If you can then I could give you an example on how to do this. Mide you my examples will be done in asp or asp.net with SQL or Access as the database.
I could, but I don't really feal up to it. Besides dealing with a server slows it down a little. Furthermore, I'm in the middle of learning C++, and not ready to go after another langauge yet. You will see me eventually because I aim to learn every langauge I can.

Thanks, Death
Jan 28 '08 #18

acoder
Expert Mod 15k+
P: 16,027
I'll post the finished product, it should only take me 2 days with school and all.
Good luck!
Jan 29 '08 #19

Death Slaught
100+
P: 1,137
Good luck!
Thanks I would have had it finished tonight but it's really ironic that when I have something I want to do, my english teacher gives us a 10 page essay to write on a 132 page book.

^_^ I'll have it finished soon then I get to have some fun :)

Thanks, Death
Jan 29 '08 #20

Death Slaught
100+
P: 1,137
Well I'm getting there but I've hit a snag. When the name of the band, album, or song reaches a certain length it jumps down to the next line making each word on its own line. I originaly wanted the drop down menus to be in a vertical line with about 36px of space inbetween each one, but now I need them to be going straight down in a horizontal line.

Here's the JavaScript used to make the menu drop down (at least I think that's what does it).

Expand|Select|Wrap|Line Numbers
  1.  
  2. function navMenuExp(){ //v1.1.0.2 by PVII-www.projectseven.com
  3.  if(navigator.appVersion.indexOf("MSIE")==-1){return;}
  4.  var i,k,g,lg,r=/\s*p7hvr/,nn='',c,cs='p7hvr',bv='navMenubar';
  5.  for(i=0;i<10;i++){g=document.getElementById(bv+nn);if(g){
  6.  lg=g.getElementsByTagName("LI");if(lg){for(k=0;k<lg.length;k++){
  7.  lg[k].onmouseover=function(){c=this.className;cl=(c)?c+' '+cs:cs;
  8.  this.className=cl;};lg[k].onmouseout=function(){c=this.className;
  9.  this.className=(c)?c.replace(r,''):'';};}}}nn=i+1;}
  10. }
  11.  
This makes the menu drop straight down. I want to make it 'drop' to the right and then down. If this doesn't make any sense (wich it doesn't much to me when I think about it) I'm looking for an example.

The first attachment is what it looks like now. The second is what I want it to look like.

Thanks, Death
Jan 30 '08 #21

acoder
Expert Mod 15k+
P: 16,027
The first attachment is what it looks like now. The second is what I want it to look like.
Where are the attachments?
Jan 31 '08 #22

Death Slaught
100+
P: 1,137
Where are the attachments?
Yeah really sorry about that. I had them uploaded but the editor had an error so I couldn't save it, and my dad was screaming at me already to get off so I couldn't upload them again.

Here they are.

^_^ Thanks, Death
Jan 31 '08 #23

acoder
Expert Mod 15k+
P: 16,027
Yeah really sorry about that. I had them uploaded but the editor had an error so I couldn't save it, and my dad was screaming at me already to get off so I couldn't upload them again.
LOL.

I thought the attachments would be images that I could have a look at.

Can you just show the relevant code instead if it's not too much. The code in the earlier post would only work in IE because if the navigator string doesn't have MSIE in it, it just returns.
Feb 1 '08 #24

Death Slaught
100+
P: 1,137
LOL.

I thought the attachments would be images that I could have a look at.

Can you just show the relevant code instead if it's not too much. The code in the earlier post would only work in IE because if the navigator string doesn't have MSIE in it, it just returns.

Sorry, I thought it would be easier if you had all the code to tamper with.

I never thought i'de be saying this, but i'm not looking for cross-browser compatability. If it only works in IE (which it needs to). Then I don't care.

I can't find any sites that have the type of navagation i'm looking for so that makes it difficult to explain/show you what i'm trying to accomplish. I think I may have another solution but I still would like to know how to change around the drop down menu.

^_^ Oh well, Death
Feb 1 '08 #25

acoder
Expert Mod 15k+
P: 16,027
Sorry, I thought it would be easier if you had all the code to tamper with.
True, I may do if I have the time to look at it.

I never thought i'de be saying this, but i'm not looking for cross-browser compatability. If it only works in IE (which it needs to). Then I don't care.
Why would that be (out of curiosity)?
Feb 1 '08 #26

Death Slaught
100+
P: 1,137
I'd be glad to answer. There's only going to be about 20 users that will ever be on my site, and they will all be using IE so there's is no reason to have the site cross-browser compatable.

^_^ Thanks, Death
Feb 1 '08 #27

acoder
Expert Mod 15k+
P: 16,027
Fair enough, but there's no harm in keeping the good habit!
Feb 2 '08 #28

Death Slaught
100+
P: 1,137
Sup, i've been working on the site for the music player to go into (because i'm not done with the musicp layer yet). And I was just curious what the heck does that code below do exactly? I understand that it shows the menu but wouldn't it just be easier to do something like this?

[HTML]
<div id="nav">
<ul>
<li>
<a href="#" class="trigger" onmouseover=show('list');">Link</a>
<ul>
<li id="list" onmouseout=hide('list');">
Links or Text
</li>
</ul>
</li>
</ul>
</div>
[/HTML]

Expand|Select|Wrap|Line Numbers
  1.  function show(show) { 
  2.   document.getElementById(show).display="block";
  3. }
  4.  
  5. function hide(hide) {
  6.   document.getElementById(hide).display="none;
  7. }
  8.  
And this basicly gives you the same effect (but with out all the special decorations).

^_^ Thanks, Death
Feb 6 '08 #29

acoder
Expert Mod 15k+
P: 16,027
And I was just curious what the heck does that code below do exactly? I understand that it shows the menu but wouldn't it just be easier to do something like this?
I assume you mean the code in post #21. That code is unobtrusive - no need for inline JavaScript code, though I don't like how it's all squashed up. If you indent and space out the code, it'd be easier to follow.
Feb 6 '08 #30

Death Slaught
100+
P: 1,137
I assume you mean the code in post #21. That code is unobtrusive - no need for inline JavaScript code.
Thanks, but I'm still a little confused. Without that code the drop down menu doesn't 'drop down'.

though I don't like how it's all squashed up. If you indent and space out the code, it'd be easier to follow
I didn't write the code I got it from thescripts.com, and didn't understand it then and I still don't :).

^_^ Thanks, Death

PS - In my previous post the text at the bottom is blue, how do I get that to happen again? :)
Feb 6 '08 #31

acoder
Expert Mod 15k+
P: 16,027
Thanks, but I'm still a little confused. Without that code the drop down menu doesn't 'drop down'.
By unobtrusive, I meant that the code doesn't appear within the HTML tags. Instead it's separate.
I didn't write the code I got it from thescripts.com, and didn't understand it then and I still don't :).
Oh, I didn't know that! All the code does is sets the className onmouseover and onmouseout. The CSS classes will obviously have display/visibility settings.
PS - In my previous post the text at the bottom is blue, how do I get that to happen again? :)
I don't see any blue text.
Feb 6 '08 #32

Death Slaught
100+
P: 1,137
Thanks I get it now. As for the blue text.........





^_^ Thanks, Death
Feb 6 '08 #33

Death Slaught
100+
P: 1,137
I found a solution for the music player (make sure to look at the source :) ).

^_^ Thanks, Death
Attached Files
File Type: zip Test.zip (5.7 KB, 41 views)
Feb 6 '08 #34

acoder
Expert Mod 15k+
P: 16,027
I found a solution for the music player (make sure to look at the source :) ).
Nice, but the source code looks more complicated than it needs to be. As long as you never need to change the JavaScript and CSS, you should be OK with it, but if ever you do, good luck!
Feb 7 '08 #35

Death Slaught
100+
P: 1,137
Nice, but the source code looks more complicated than it needs to be. As long as you never need to change the JavaScript and CSS, you should be OK with it, but if ever you do, good luck!
Thanks, I used a program I found online for making it. And your right that's was too complicated, but i'm slowly reading through it, and I'll have it editable soon.

^_^ Thanks, Death

PS - So any ideas on the blue text?
Feb 7 '08 #36

acoder
Expert Mod 15k+
P: 16,027
PS - So any ideas on the blue text?
No idea. I can't see blue text here, but it may be viewable in IE. Did you use anything in the editor or did it just turn out like that?
Feb 7 '08 #37

Death Slaught
100+
P: 1,137
Thanks, i've only viewed it in IE, i'll check it in FF in a few minutes, but i can't remember doing anything to make it look like that but I like it :).

^_^ Thanks, Death

[EDIT] Yeah it can only be seen in IE [/EDIT]
Feb 7 '08 #38

acoder
Expert Mod 15k+
P: 16,027
Figured out why it occurs. If you look in the code, there's a mistake - the end quote is not present. The colour continues onto the bracket and then outside the code block. It's obviously a bug.
Feb 7 '08 #39

Death Slaught
100+
P: 1,137
Figured out why it occurs. If you look in the code, there's a mistake - the end quote is not present. The colour continues onto the bracket and then outside the code block. It's obviously a bug.
Awesome! Thanks, please don't report the bug :)......

^_^ Death

PS - I can't look at the code lol
Feb 7 '08 #40

acoder
Expert Mod 15k+
P: 16,027
Awesome! Thanks, please don't report the bug :)......

^_^ Death

PS - I can't look at the code lol
Which code? The code for this page?
Feb 8 '08 #41

Death Slaught
100+
P: 1,137
Which code? The code for this page?
No the code for that post. :)

^_^ Thanks, Death

PS - I went to the library yesterday and checked out a 919 page book on JavaScript. So you will be seeing me a lot more around here :)
Feb 8 '08 #42

acoder
Expert Mod 15k+
P: 16,027
No the code for that post. :)
The code for post #29? It shows up in the image.
PS - I went to the library yesterday and checked out a 919 page book on JavaScript. So you will be seeing me a lot more around here :)
No problem - the more the merrier!
Feb 8 '08 #43

Death Slaught
100+
P: 1,137
The code for post #29? It shows up in the image.
No problem - the more the merrier!
Lol, I should be about half way done in 2 days.

^_^ Thanks, Death
Feb 8 '08 #44

Post your reply

Sign in to post your reply or Sign up for a free account.