PDA

View Full Version : Display array on click?

eckostar19
09-05-2006, 12:47 PM
Is it possible that when someone clicks a link, an array is diplayed on a certain spot in that page? On my page (http://www.civildraftingservices.com/rwfmuz/beats.html) I have set up individual links on each songs title, and when the user clicks that link, I want a basic array such as this to be displayed in the same location as the 'iframeloc' on the right hand of the page.

<script type="text/javascript">
var x
var snginf = new Array()
snginf[0] = "Song Name"
snginf[1] = "Song info goes here, or this may be used to display a description"
snginf[2] = "More song information such as year and creator here."

for (x in snginf)
{
document.write(snginf[x] + "<br />")
}
</script>

Can you guys help direct me on where to go...I am completely new to java and have no real clue as to how to do this.. Thanks ahead of time. - R
coothead
09-05-2006, 01:35 PM
Hi there eckostar19,

try it like this...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
#array_display {
font-family:verdana,arial,helvetica,sans-serif;
font-size:14px;
border:3px double #000;
width:480px;
padding:10px;
}
-->
</style>

<script type="text/javascript">
<!--
window.onload=function() {
var snginf = new Array()
snginf[0]='Song Name';
snginf[1]='Song info goes here, or this may be used to display a description.';
snginf[2]='More song information such as year and creator here.';

for(c=0;c<snginf.length;c++) {
document.getElementById('array_display').innerHTML+='<p>'+snginf[c]+'<\/p>';
}
}
//-->
</script>

</head>
<body>

<div id="array_display"></div>

</body>
</html>
eckostar19
09-05-2006, 02:01 PM
Ok coothead....that works, and that helps to start I think :). Now if I have an individual array setup or defined for each individual song that is listed (19 in total) via a link like so:

<a href="javascript:snginf('name line','description line 1','descrition line 2')">Song 1</a>
<a href="javascript:snginf('name line','description line 1','descrition line 2')">Song 2</a>

How can I get it to display that information when the link is clicked, rather than on the exact time that the window is loaded? You see what I am getting at?
coothead
09-05-2006, 02:52 PM
Hi there eckostar19,

here you go, I've done the first six songs, just add the other thirteen to the array and the links in the same manner...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
#array_display {
font-family:verdana,arial,helvetica,sans-serif;
font-size:14px;
border:3px double #000;
width:480px;
height:108px;
padding:10px;
}
-->
</style>

<script type="text/javascript">
<!--

window.onload=function() {
var anc=document.getElementById('song_links').getElementsByTagName('a');
var obj=document.getElementById('array_display');
var snginf = new Array();
snginf[0]='Song 1 Name';
snginf[1]='Song 1 info.';
snginf[2]='More song 1 info.';

snginf[3]='Song 2 Name';
snginf[4]='Song 2 info.';
snginf[5]='More song 2 info.';

snginf[6]='Song 3 Name';
snginf[7]='Song 3 info.';
snginf[8]='More song 3 info.';

snginf[9]='Song 4 Name';
snginf[10]='Song 4 info.';
snginf[11]='More song 4 info.';

snginf[12]='Song 5 Name';
snginf[13]='Song 5 info.';
snginf[14]='More song 5 info.';

snginf[15]='Song 6 Name';
snginf[16]='Song 6 info.';
snginf[17]='More song 6 info.';

for(c=0;c<anc.length;c++) {
anc[c].id='s'+c;
anc[c].onclick=function() {
obj.innerHTML='';
for(j=0;j<3;j++) {
num=parseFloat(this.id.split('s')[1]*3+j);
obj.innerHTML+='<p>'+snginf[num]+'<\/p>';
}
return false;
}
}
}
//-->
</script>

</head>
<body>

<div id="array_display"></div>

<ul id="song_links">
<li><a href="#">Song 1</a></li>
<li><a href="#">Song 2</a></li>
<li><a href="#">Song 3</a></li>
<li><a href="#">Song 4</a></li>
<li><a href="#">Song 5</a></li>
<li><a href="#">Song 6</a></li>
</ul>

</body>
</html>
eckostar19
09-05-2006, 07:13 PM
coothead - thanks for the tremendous amount of help...with a little playing around, i was able to put it into play correctly, and in two different ways :) actually learned a little bit. here are some links to see what i've done now:

http://civildraftingservices.com/rwfmuz/rmxs.html
http://civildraftingservices.com/rwfmuz/beats.html

Thanks again for the help. - R
eckostar19
09-09-2006, 07:31 PM
Ok, well after a long while of playing with what you had given me coothead, I came to the conlusion that it would be a little too hard to keep my list and displays correctly. Somehow I came across what I am proposing as a great alternative. Thanks to the Adobe Labs, I found this: Spry framework (http://labs.adobe.com/technologies/spry/)

Now in amongst their samples and everything there is one called the accordion. Now I am trying to use this in lu of the other way that you had turned me onto coothead, it is working out great too :) just thought I would turn you onto this if you haven't already seen it. -R