Is there a better/shorter way to accomplish this?

Collapse
X
Collapse
 
  • Page of 3
  • Time
  • Show
Clear All
new posts
Previous 1 2 3 template Next
  • Death Slaught
    Top Contributor
    • Aug 2007
    • 1137
    #1

    Is there a better/shorter way to accomplish this?

    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="songPl ayer()" value="Music Player" />
    </p>
    </body>
    </html>

    [/HTML]

    Here's the script that makes the pop up.

    [CODE=javascript]
    function songPlayer() {
    var openPage=window .open("songPlay er.html", "Music_Play er", "height=410,wid th=300");
    openPage.focus( );
    }
    [/CODE]

    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="musicPlaye r.html" name="musicPlay er" />
    <frame src="musicPage. html" name="musicPage " />
    <frame src="album.html " name="album" />
    </frameset>
    </head>
    </html>
    [/HTML]

    musicPlayer.htm l 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="txtPla y()" id="play" value="Play" />
    <br /><br />
    <input type="button" onclick="playPr eviousSong()" id="previousSon g" value="Previous Song" />
    &nbsp;
    <input type="button" onclick="playNe xtSong()" 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.


    Code:
    /*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";
/*Album Pictures*/
var TBP;
TBP="<img src='Music/My Chemical Romance/The Black Parade/Folder.jpg' alt='The Black Parade' />";
var TCFWR;
TCFSR="<img src='Music/My Chemical Romance/Three Cheers For Sweet Revenge/Folder.jpg' alt='Three Cheers For Sweet Revenge' />";
    Code:
    function clear() {
document.getElementById("txtSong").value="";
}
 
var code;
var code2;
var song;
var currentSong;
function txtPlay () { 
code="<html>";
code+="<body>";
code+="<object classid='clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95'>";
code+="<param name='FileName' value='";
code2="<html>";
code2+="<head>";
code2+="<style type='text/css'>";
code2+="* { background-color:#000; color:#fff; margin:0; text-align:center; font-size:small; }";
code2+="</style>";
code2+="</head>";
code2+="<body>";
code2+="<p>";
song=document.getElementById("txtSong").value;
if (song == "the end") {
code+=TBP01;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-The End";
currentSong="tbp01";
clear();
} else if (song == "dead") {
code+=TBP02;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-Dead!";
currentSong="tbp02";
clear();
} else if (song == "this is how I disappear") {
code+=TBP03;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-This Is How I Disappear";
currentSong="tbp03";
clear();
} else if (song == "the sharpest lives") {
code+=TBP04;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-The Sharpest Lives";
currentSong="tbp04";
clear();
} else if (song == "welcome to the black parade") {
code+=TBP05;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-Welcome to the Black Parade";
currentSong="tbp05";
clear();
} else if (song == "I dont love you") {
code+=TBP06;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-I Dont Love You";
currentSong="tbp06";
clear();
} else if (song == "house of wolves") {
code+=TBP07;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-House Of Wolves";
currentSong="tbp07";
clear();
} else if (song == "cancer") {
code+=TBP08;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-Cancer";
currentSong="tbp08";
clear();
} else if (song == "mama") {
code+=TBP09;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-Mama";
currentSong="tbp09";
clear();
} else if (song == "sleep") {
code+=TBP10;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-Sleep";
currentSong="tbp10";
clear();
} else if (song == "teenagers") {
code+=TBP11;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-Teenagers";
currentSong="tbp11";
clear();
} else if (song == "disenchanted") {
code+=TBP12;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-Disenchanted";
currentSong="tbp12";
clear();
} else if (song == "famous last words") {
code+=TBP13;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-Famous Last Words";
currentSong="tbp13";
clear();
} else if (song == "blood") {
code+=TBP14;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-Blood";
currentSong="tbp14";
clear();
} else if (song == "helena") {
code+=TCFSR01;
code2+=TCFSR;
code2+="</p>";
code2+="<p>";
code2+="Three Cheers For Sweet Revenge-Helena";
currentSong="tcfsr01";
clear();
} else if (song == "give em hell kid") {
code+=TCFSR02;
code2+=TCFSR;
code2+="</p>";
code2+="<p>";
code2+="Three Cheers For Sweet Revenge-Give Em Hell Kid";
currentSong="tcfsr02";
clear();
} else if (song == "to the end") {
code+=TCFSR03;
code2+=TCFSR;
code2+="</p>";
code2+="<p>";
code2+="Three Cheers For Sweet Revenge-To The End";
currentSong="tcfsr03";
clear();
} else if (song == "you know what they do to guys like us in prison") {
code+=TCFSR04;
code2+=TCFSR;
code2+="</p>";
code2+="<p>";
code2+="Three Cheers For Sweet Revenge-You Know What They Do To Guys Like Us In Prison";
currentSong="tcfsr04";
clear();
} else if (song == "im not okay") {
code+=TCFSR05;
code2+=TCFSR;
code2+="</p>";
code2+="<p>";
code2+="Three Cheers For Sweet Revenge-Im Not Okay"
currentSong="tcfsr05";
clear();
} else if (song == "the ghost of you") {
code+=TCFSR06;
code2+=TCFSR;
code2+="</p>";
code2+="<p>";
code2+="Three Cheers For Sweet Revenge-The Ghost Of You";
currentSong="tcfsr06";
clear();
} else if (song == "the jetset life is gonna kill you") {
code+=TCFSR07;
code2+=TCFSR;
code2+="</p>";
code2+="<p>";
code2+="Three Cheers For Sweet Revenge-The Jetset Life Is Gonna Kill You";
currentSong="tcfsr07";
clear();
} else if (song == "interlude") {
code+=TCFSR08;
code2+=TCFSR;
code2+="</p>";
code2+="<p>";
code2+="Three Cheers For Sweet Revenge-Interlude";
currentSong="tcfsr08";
clear();
} else if (song == "thank you for the venom") {
code+=TCFSR09;
code2+=TCFSR;
code2+="</p>";
code2+="<p>";
code2+="Three Cheers For Sweet Revenge-Thank You For The Venom";
currentSong="tcfsr09";
clear();
} else if (song == "hang em high") {
code+=TCFSR10;
code2+=TCFSR;
code2+="</p>";
code2+="<p>";
code2+="Three Cheers For Sweet Revenge-Hang Em High";
currentSong="tcfsr10";
clear();
} else if (song == "its not a fashion statement its a deathwish") {
code+=TCFSR11;
code2+=TCFSR;
code2+="</p>";
code2+="<p>";
code2+="Three Cheers For Sweet Revenge-Its Not A Fashion Statement Its A DeathWish";
currentSong="tcfsr11";
clear();
} else if (song == "cemetery drive") {
code+=TCFSR12;
code2+=TCFSR;
code2+="</p>";
code2+="<p>";
code2+="Three Cheers For Sweet Revenge-Cemetery Drive";
currentSong="tcfsr12";
clear();
} else if (song == "I never told you what I do for a living") {
code+=TCFSR13;
code2+=TCFSR;
code2+="</p>";
code2+="<p>";
code2+="Three Cheers For Sweet Revenge-I Never Told You What I Do For A Living";
currentSong="tcfsr13";
clear();
} else {
alert("ERROR!");
}
code+="' />";
code+="</object>";
code+="</body>";
code+="</html>";
code2+="</p>";
code2+="</body>";
code2+="</html>";
var doc;
doc=window.parent.musicPlayer.document;
doc.open();
doc.write(code);
doc.close();
var doc2;
doc2=window.parent.album.document;
doc2.open();
doc2.write(code2);
doc2.close();
}



    Code:
    function playPreviousSong() {
code="";
code="<html>";
code+="<body>";
code+="<object classid='clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95'>";
code+="<param name='FileName' value='";
code2="";
code2+="<html>";
code2+="<head>";
code2+="<style type='text/css'>";
code2+="* { background-color:#000; color:#fff; margin:0; text-align:center; font-size:small; }";
code2+="</style>";
code2+="</head>";
code2+="<body>";
code2+="<p>";
if (currentSong == "tbp01") {
code+=TBP01;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-The End";
currentSong="";
currentSong="tbp01";
} else if (currentSong == "tbp02") {
code+=TBP01;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-The End";
currentSong="";
currentSong="tbp01";
} else if (currentSong == "tbp03") {
code+=TBP02;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-Dead!";
currentSong="";
currentSong="tbp02";
} else if (currentSong == "tbp04") {
code+=TBP03;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-This Is How I Disappear";
currentSong="";
currentSong="tbp03";
} else if (currentSong == "tbp05") {
code+=TBP04;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-The Sharpest Lives";
currentSong="";
currentSong="tbp04";
} else if (currentSong == "tbp06") {
code+=TBP05;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-Welcome to the Black Parade";
currentSong="";
currentSong="tbp05";
} else if (currentSong == "tbp07") {
code+=TBP06;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-I Dont Love You";
currentSong="";
currentSong="tbp06";
} else if (currentSong == "tbp08") {
code+=TBP07;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-House Of Wolves";
currentSong="";
currentSong="tbp07";
} else if (currentSong == "tbp09") {
code+=TBP08;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-Cancer";
currentSong="";
currentSong="tbp08";
} else if (currentSong == "tbp10") {
code+=TBP09;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-Mama";
currentSong="";
currentSong="tbp09";
} else if (currentSong == "tbp11") {
code+=TBP10;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-Sleep";
currentSong="";
currentSong="tbp10";
} else if (currentSong == "tbp12") {
code+=TBP11;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-Teenagers";
currentSong="";
currentSong="tbp11";
} else if (currentSong == "tbp13") {
code+=TBP12;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-Disenchanted";
currentSong="";
currentSong="tbp12";
} else if (currentSong == "tbp14") {
code+=TBP13;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-Famous Last Words";
currentSong="";
currentSong="tbp13";
} else if (currentSong == "tcfsr01") {
code+=TCFSR01;
code2+=TCFSR;
code2+="</p>";
code2+="<p>";
code2+="Three Cheers For Sweet Revenge-Helena";
currentSong="";
currentSong="tcfsr01";
} else if (currentSong == "tcfsr02") {
code+=TCFSR01;
code2+=TCFSR;
code2+="</p>";
code2+="<p>";
code2+="Three Cheers For Sweet Revenge-Helena";
currentSong="";
currentSong="tcfsr01";
} else if (currentSong == "tcfsr03") {
code+=TCFSR02;
code2+=TCFSR;
code2+="</p>";
code2+="<p>";
code2+="Three Cheers For Sweet Revenge-Give Em Hell Kid";
currentSong="";
currentSong="tcfsr02";
} else if (currentSong == "tcfsr04") {
code+=TCFSR03;
code2+=TCFSR;
code2+="</p>";
code2+="<p>";
code2+="Three Cheers For Sweet Revenge-To The End";
currentSong="";
currentSong="tcfsr03";
} else if (currentSong == "tcfsr05") {
code+=TCFSR04;
code2+=TCFSR;
code2+="</p>";
code2+="<p>";
code2+="Three Cheers For Sweet Revenge-You Know What They Do To Guys Like Us In Prison";
currentSong="";
currentSong="tcfsr04";
} else if (currentSong == "tcfsr06") {
code+=TCFSR05;
code2+=TCFSR;
code2+="</p>";
code2+="<p>";
code2+="Three Cheers For Sweet Revenge-Im Not Okay";
currentSong="";
currentSong="tcfsr05";
} else if (currentSong == "tcfsr07") {
code+=TCFSR06;
code2+=TCFSR;
code2+="</p>";
code2+="<p>";
code2+="Three Cheers For Sweet Revenge-The Ghost Of You";
currentSong="";
currentSong="tcfsr06";
} else if (currentSong == "tcfsr08") {
code+=TCFSR07;
code2+=TCFSR;
code2+="</p>";
code2+="<p>";
code2+="Three Cheers For Sweet Revenge-The Jetset Life Is Gonna Kill You";
currentSong="";
currentSong="tcfsr07";
} else if (currentSong == "tcfsr09") {
code+=TCFSR08;
code2+=TCFSR;
code2+="</p>";
code2+="<p>";
code2+="Three Cheers For Sweet Revenge-Interlude";
currentSong="";
currentSong="tcfsr08";
} else if (currentSong == "tcfsr10") {
code+=TCFSR09;
code2+=TCFSR;
code2+="</p>";
code2+="<p>";
code2+="Three Cheers For Sweet Revenge-Thank You For The Venom";
currentSong="";
currentSong="tcfsr09";
} else if (currentSong == "tcfsr11") {
code+=TCFSR10;
code2+=TCFSR;
code2+="</p>";
code2+="<p>";
code2+="Three Cheers For Sweet Revenge-Hang Em High";
currentSong="";
currentSong="tcfsr10";
} else if (currentSong == "tcfsr12") {
code+=TCFSR11;
code2+=TCFSR;
code2+="</p>";
code2+="<p>";
code2+="Three Cheers For Sweet Revenge-Its Not A Fashion Statement Its A Deathwish";
currentSong="";
currentSong="tcfsr11";
} else if (currentSong == "tcfsr13") {
code+=TCFSR12;
code2+=TCFSR;
code2+="</p>";
code2+="<p>";
code2+="Three Cheers For Sweet Revenge-Cemetery Drive";
currentSong="";
currentSong="tcfsr12";
} else {
alert("ERROR!");
}
 
code+="' />";
code+="</object>";
code+="</body>";
code+="</html>";
code2+="</p>";
code2+="</body>";
code2+="</html>";
var doc;
doc=window.parent.musicPlayer.document;
doc.open();
doc.write(code);
doc.close();
var doc2;
doc2=window.parent.album.document;
doc2.open();
doc2.write(code2);
doc2.close();
}



    Code:
    function playNextSong() {
code="";
code="<html>";
code+="<body>";
code+="<object classid='clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95'>";
code+="<param name='FileName' value='";
code2="";
code2+="<html>";
code2+="<head>";
code2+="<style type='text/css'>";
code2+="* { background-color:#000; color:#fff; margin:0; text-align:center; font-size:small; }";
code2+="</style>";
code2+="</head>";
code2+="<body>";
code2+="<p>";
if (currentSong == "tbp01") {
code+=TBP02;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-Dead!";
currentSong="";
currentSong="tbp02";
} else if (currentSong == "tbp02") {
code+=TBP03;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-This Is How I Disappear";
currentSong="";
currentSong="tbp03";
} else if (currentSong == "tbp03") {
code+=TBP04;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-The Sharpest Lives";
currentSong="";
currentSong="tbp04";
} else if (currentSong == "tbp04") {
code+=TBP05;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-Welcome To The Black Parade";
currentSong="";
currentSong="tbp05";
} else if (currentSong == "tbp05") {
code+=TBP06;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-I Dont Love You";
currentSong="";
currentSong="tbp06";
} else if (currentSong == "tbp06") {
code+=TBP07;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-House Of Wolves";
currentSong="";
currentSong="tbp07";
} else if (currentSong == "tbp07") {
code+=TBP08;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-Cancer";
currentSong="";
currentSong="tbp08";
} else if (currentSong == "tbp08") {
code+=TBP09;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-Mama";
currentSong="";
currentSong="tbp09";
} else if (currentSong == "tbp09") {
code+=TBP10;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-Sleep";
currentSong="";
currentSong="tbp10";
} else if (currentSong == "tbp10") {
code+=TBP11;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-Teenagers";
currentSong="";
currentSong="tbp11";
} else if (currentSong == "tbp11") {
code+=TBP12;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-Disenchanted";
currentSong="";
currentSong="tbp12";
} else if (currentSong == "tbp12") {
code+=TBP13;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-Famous Last Words";
currentSong="";
currentSong="tbp13";
} else if (currentSong == "tbp13") {
code+=TBP14;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-Blood";
currentSong="";
currentSong="tbp14";
} else if (currentSong == "tbp14") {
code+=TBP14;
code2+=TBP;
code2+="</p>";
code2+="<p>";
code2+="The Black Parade-Blood";
currentSong="";
currentSong="tbp14";
} else if (currentSong == "tcfsr01") {
code+=TCFSR02;
code2+=TCFSR;
code2+="</p>";
code2+="<p>";
code2+="Three Cheers For Sweet Revenge-Give Em Hell Kid";
currentSong="";
currentSong="tcfsr02";
} else if (currentSong == "tcfsr02") {
code+=TCFSR03;
code2+=TCFSR;
code2+="</p>";
code2+="<p>";
code2+="Three Cheers For Sweet Revenge-To The End";
currentSong="";
currentSong="tcfsr03";
} else if (currentSong == "tcfsr03") {
code+=TCFSR04;
code2+=TCFSR;
code2+="</p>";
code2+="<p>";
code2+="Three Cheers For Sweet Revenge-You Know What They Do To Guys Like Us In Prison";
currentSong="";
currentSong="tcfsr04";
} else if (currentSong == "tcfsr04") {
code+=TCFSR05;
code2+=TCFSR;
code2+="</p>";
code2+="<p>";
code2+="Three Cheers For Sweet Revenge-Im Not Okay";
currentSong="";
currentSong="tcfsr05";
} else if (currentSong == "tcfsr05") {
code+=TCFSR06;
code2+=TCFSR;
code2+="</p>";
code2+="<p>";
code2+="Three Cheers For Sweet Revenge-The Ghost Of You";
currentSong="";
currentSong="tcfsr06";
} else if (currentSong == "tcfsr06") {
code+=TCFSR07;
code2+=TCFSR;
code2+="</p>";
code2+="<p>";
code2+="Three Cheers For Sweet Revenge-The Jetset Life Is Gonna Kill You";
currentSong="";
currentSong="tcfsr07";
} else if (currentSong == "tcfsr07") {
code+=TCFSR08;
code2+=TCFSR;
code2+="</p>";
code2+="<p>";
code2+="Three Cheers For Sweet Revenge-Interlude";
currentSong="";
currentSong="tcfsr08";
} else if (currentSong == "tcfsr08") {
code+=TCFSR09;
code2+=TCFSR;
code2+="</p>";
code2+="<p>";
code2+="Three Cheers For Sweet Revenge-Thank You For The Venom";
currentSong="";
currentSong="tcfsr09";
} else if (currentSong == "tcfsr09") {
code+=TCFSR10;
code2+=TCFSR;
code2+="</p>";
code2+="<p>";
code2+="Three Cheers For Sweet Revenge-Hang Em High";
currentSong="";
currentSong="tcfsr10";
} else if (currentSong == "tcfsr10") {
code+=TCFSR11;
code2+=TCFSR;
code2+="</p>";
code2+="<p>";
code2+="Three Cheers For Sweet Revenge-Its Not A Fashion Statement Its A Deathwish";
currentSong="";
currentSong="tcfsr11";
} else if (currentSong == "tcfsr11") {
code+=TCFSR12;
code2+=TCFSR;
code2+="</p>";
code2+="<p>";
code2+="Three Cheers For Sweet Revenge-Cemetery Drive";
currentSong="";
currentSong="tcfsr12";
} else if (currentSong == "tcfsr12") {
code+=TCFSR13;
code2+=TCFSR;
code2+="</p>";
code2+="<p>";
code2+="Three Cheers For Sweet Revenge-I Never Told You What I Do For A Living";
currentSong="";
currentSong="tcfsr13";
} else if (currentSong == "tcfsr13") {
code+=TCFSR13;
code2+=TCFSR;
code2+="</p>";
code2+="<p>";
code2+="Three Cheers For Sweet Revenge-I Never Told You What I Do For A Living";
currentSong="";
currentSong="tcfsr13";
} else {
alert("ERROR!");
}
code+="' />";
code+="</object>";
code+="</body>";
code+="</html>";
code2+="</p>";
code2+="</body>";
code2+="</html>";
var doc;
doc=window.parent.musicPlayer.document;
doc.open();
doc.write(code);
doc.close();
var doc2;
doc2=window.parent.album.document;
doc2.open();
doc2.write(code2);
doc2.close();
}
    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.
    Tags: None
    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032
      #2
      The first step could be to use arrays.

      Secondly, why not have the HTML already written and just change the properties with JavaScript?

        Comment

        • Death Slaught
          Top Contributor
          • Aug 2007
          • 1137
          #3
          Originally posted by acoder
          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

            Comment

            • acoder
              Recognized Expert MVP
              • Nov 2006
              • 16032
              #4
              TBP** could be [code=javascript]var TBP = ["Music/My Chemical Romance/The Black Parade/01 The End.wma",...];[/code]TBP[0] would give you the first array item.

              You could change the text box txtSong into a drop down object.

                Comment

                • Death Slaught
                  Top Contributor
                  • Aug 2007
                  • 1137
                  #5
                  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

                    Comment

                    • acoder
                      Recognized Expert MVP
                      • Nov 2006
                      • 16032
                      #6
                      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.getEle mentById() 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.

                        Comment

                        • Death Slaught
                          Top Contributor
                          • Aug 2007
                          • 1137
                          #7
                          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="javascrip t:showA();">A</a>
                          <a href="javascrip t:showB();">B</a>
                          <a href="javascrip t:showC();">C</a>
                          <a href="javascrip t:showD();">D</a>
                          <a href="javascrip t:showE();">E</a>
                          <a href="javascrip t:showF();">F</a>
                          <a href="javascrip t:showG();">G</a>
                          <a href="javascrip t:showH();">H</a>
                          <a href="javascrip t:showI();">I</a>
                          <a href="javascrip t:showJ();">J</a>
                          <br />
                          &nbsp;&nbsp;
                          <a href="javascrip t:showK();">K</a>
                          <a href="javascrip t:showL();">L</a>
                          <a href="javascrip t:showM();">M</a>
                          <a href="javascrip t:showN();">N</a>
                          <a href="javascrip t:showO();">O</a>
                          <a href="javascrip t:showP();">P</a>
                          <a href="javascrip t:showQ();">Q</a>
                          <a href="javascrip t:showR();">R</a>
                          <br />
                          &nbsp;&nbsp;
                          <a href="javascrip t:showS();">S</a>
                          <a href="javascrip t:showT();">T</a>
                          <a href="javascrip t:showU();">U</a>
                          <a href="javascrip t:showV();">V</a>
                          <a href="javascrip t:showW();">W</a>
                          <a href="javascrip t:showX();">X</a>
                          <a href="javascrip t:showY();">Y</a>
                          <a href="javascrip t: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.wm a";
                          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:absolu te; left:150px; }";
                          code+="</style>";
                          code+="</head>";
                          code+="<body>";
                          code+="<div id='band'>";
                          code+="<a href='javascrip t:showAlbumM(); '>My Chemical Romance</a>";
                          code+="</div>";
                          code+="</body>";
                          code+="</html>";

                          var doc=window.pare nt.choose.docum ent;

                          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:absolu te; left:150px; }";
                          code+="#album { position:absolu te; left:300px; }";
                          code+="</style>";
                          code+="</head>";
                          code+="<body>";
                          code+="<div id='band'>";
                          code+="<a href='javascrip t:showAlbumM(); '>My Chemical Romance-</a>";
                          code+="</div>";
                          code+="<div id='album'>";
                          code+="<a href='javascrip t:showTBP();'>T he Black Parade</a>";
                          code+="</div>";
                          code+="</body>";
                          code+="</html>";

                          var doc=window.pare nt.choose.docum ent;

                          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:absolu te; left:150px; }";
                          code+="#album { position:absolu te; left:310px; }";
                          code+="#songs { position:absolu te; left:425px; }";
                          code+="</style>";
                          code+="</head>";
                          code+="<body>";
                          code+="<div id='band'>";
                          code+="<a href='javascrip t:showAlbumM(); '>My Chemical Romance-</a>";
                          code+="</div>";
                          code+="<div id='album'>";
                          code+="<a href='javascrip t:showTBP();'>T he Black Parade-</a>";
                          code+="</div>";
                          code+="<div id='songs'>";
                          code+="<a href='javascrip t:playTBP01();' >The End</a>";
                          code+="<br />";
                          code+="<a href='javascrip t:playTBP02();' >Dead!</a>";
                          code+="<br />";
                          code+="<a href='javascrip t:playTBP03();' >This Is How I Disappear</a>";
                          code+="<br />";
                          code+="<a href='javascrip t:playTBP04();' >The Sharpest Lives</a>";
                          code+="<br />";
                          code+="<a href='javascrip t:playTBP05();' >Welcome To The Black Parade</a>";
                          code+="<br />";
                          code+="<a href='javascrip t:playTBP06();' >I Don't Love You</a>";
                          code+="<br />";
                          code+="<a href='javascrip t:playTBP07();' >House Of Wolves</a>";
                          code+="<br />";
                          code+="<a href='javascrip t:playTBP08();' >Cancer</a>";
                          code+="<br />";
                          code+="<a href='javascrip t:playTBP09();' >Mama</a>";
                          code+="<br />";
                          code+="<a href='javascrip t:playTBP10();' >Sleep</a>";
                          code+="<br />";
                          code+="<a href='javascrip t:playTBP11();' >Teenagers</a>";
                          code+="<br />";
                          code+="<a href='javascrip t:playTBP12();' >Disenchanted </a>";
                          code+="<br />";
                          code+="<a href='javascrip t:playTBP13();' >Famous Last Words</a>";
                          code+="<br />";
                          code+="<a href='javascrip t:playTBP14();' >Blood</a>";
                          code+="</div>";
                          code+="</body>";
                          code+="</html>";

                          var doc=window.pare nt.choose.docum ent;

                          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.par ent.player.docu ment;

                          doc2.open();
                          doc2.write(code 2);
                          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.par ent.player.docu ment;

                          doc2.open();
                          doc2.write(code 2);
                          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.par ent.player.docu ment;

                          doc2.open();
                          doc2.write(code 2);
                          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.par ent.player.docu ment;

                          doc2.open();
                          doc2.write(code 2);
                          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.par ent.player.docu ment;

                          doc2.open();
                          doc2.write(code 2);
                          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.par ent.player.docu ment;

                          doc2.open();
                          doc2.write(code 2);
                          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.par ent.player.docu ment;

                          doc2.open();
                          doc2.write(code 2);
                          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.par ent.player.docu ment;

                          doc2.open();
                          doc2.write(code 2);
                          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.par ent.player.docu ment;

                          doc2.open();
                          doc2.write(code 2);
                          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.par ent.player.docu ment;

                          doc2.open();
                          doc2.write(code 2);
                          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.par ent.player.docu ment;

                          doc2.open();
                          doc2.write(code 2);
                          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.par ent.player.docu ment;

                          doc2.open();
                          doc2.write(code 2);
                          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.par ent.player.docu ment;

                          doc2.open();
                          doc2.write(code 2);
                          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.par ent.player.docu ment;

                          doc2.open();
                          doc2.write(code 2);
                          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.

                            Comment

                            • acoder
                              Recognized Expert MVP
                              • Nov 2006
                              • 16032
                              #8
                              Originally posted by Death Slaught
                              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.

                                Comment

                                • Death Slaught
                                  Top Contributor
                                  • Aug 2007
                                  • 1137
                                  #9
                                  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

                                    Comment

                                    • gits
                                      Recognized Expert Moderator Expert
                                      • May 2007
                                      • 5390
                                      #10
                                      of course ... that will work :) ... just build it up ... you could even use a tree with a hierarchy ...

                                      kind regards

                                        Comment

                                        • Death Slaught
                                          Top Contributor
                                          • Aug 2007
                                          • 1137
                                          #11
                                          Originally posted by gits
                                          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

                                            Comment

                                            • gits
                                              Recognized Expert Moderator Expert
                                              • May 2007
                                              • 5390
                                              #12
                                              hi ...

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

                                              kind regards

                                                Comment

                                                • acoder
                                                  Recognized Expert MVP
                                                  • Nov 2006
                                                  • 16032
                                                  #13
                                                  Originally posted by Death Slaught
                                                  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.

                                                    Comment

                                                    • Death Slaught
                                                      Top Contributor
                                                      • Aug 2007
                                                      • 1137
                                                      #14
                                                      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

                                                        Comment

                                                        • acoder
                                                          Recognized Expert MVP
                                                          • Nov 2006
                                                          • 16032
                                                          #15
                                                          Originally posted by Death Slaught
                                                          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">I ntroductions</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">P rogramming 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">P rogramming 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.

                                                            Comment

                                                            Previous 1 2 3 template Next
                                                            Working...