document.getElementById is not a function [Archive]

1212jtraceur

11-02-2006, 12:09 AM

I'm working on a JS/DOM based music player webpage. One of the major steps I have taken with this dynamically generating the HTML from the contents of the songs array.

I've gotten through some of the previous problems, but I still have a major error. As you can see here...

<body onload="showInfo('dflt')">

<div id="container"></div>

<script type="text/javascript">
initialize();
</script>

...initialize() is called, which dynamically creates divs, objects, embeds, etc... When the body loads, showInfo('dflt') is called. It calls setStyleById, which tries to find the element with id 'dfltInfo', which does exist according to Firefox's DOM Inspector.

My complete code is attached, could anyone help me with this?

Thanks,
1212jtraceur

Beagle

11-02-2006, 07:49 AM

The question is "When do those elements exist?"

If those elements come into existance after your initialize call, then your initialize function will be looking for things that don't exist and you'll get your error. You'd be better off running initialize from body onload.

Kor

11-02-2006, 12:38 PM

There is no reason for not call both functions in the HEAD, onload. Remove the onload from BODY tag (anyway is deprecated to call onload in BODY), and use this in your HEAD

<script type="text/javascript">
onload=function(){
initialize();
showInfo('dflt');
}
</script>

1212jtraceur

11-03-2006, 05:23 PM

I've did that, and I still get 'document.getElementById is not a function'. My new source code is below, any ideas on what's going on now?

As a side note, I'm thinking of dynamically (add/remove)ing the elements rather than showing and hiding them. I think this would help with the playback of the embedded mp3s, as well as just being a bit 'better' than (show/hide)ing them, in the sense that the page shouldn't contain many non-displayed elements...What do you think about that?

Thanks,
1212jtraceur

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<?xml version="1.0" encoding="utf-8"?>



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Music Player</title>



<script type="text/javascript">
function generatePlayerDivs()
{
var playerContainer = document.createElement('div');
playerContainer.id = 'playerContainer';

for (var i = 0; i < songs.length; i++)
{
var id = songs[i].id;
var url = songs[i].url;

var embed = document.createElement('embed');
embed.setAttribute('type', 'audio/mpeg');
embed.setAttribute('src', url);
embed.setAttribute('class', 'player');

playerContainer.appendChild(embed);
}

document.body.appendChild(playerContainer);
}

function generateImagesDiv()
{
var images = document.createElement('div');
images.id = 'images';

for (var i = 0; i < songs.length; i++)
{
var id = songs[i].id;
var url = songs[i].albumArtUrl;
var info = songs[i].info;

var image = document.createElement('object');
image.id = id + 'Image';
image.setAttribute('data', url);
image.setAttribute('onmouseover', 'javascript:showInfo(' + id + ');');
image.setAttribute('onclick', 'javascript:playMusic(' + id + ');');
image.setAttribute('onmouseout', 'javascript:showInfo(\'dflt\');');
var klass = getImageClass(i%width, Math.floor(i/width));
image.setAttribute('class', klass + ' image ');
image.appendChild(document.createTextNode(info));

images.appendChild(image);
}

document.getElementById('container').appendChild(images);
}

var width = 4;
var height = 4;

function getImageClass(x, y)
{
var klass = '';

if (x == 0)
{
klass += 'left';
}
else if (x == (width - 1))
{
klass += 'right';
}

if (y == 0)
{
klass += ' top';
}
else if (y == (height - 1))
{
klass += ' bottom';
}

return klass;
}

function generateInfoDivs()
{
var infoContainer = document.createElement('div');
infoContainer.id = 'infoContainer';

for (var i = 0; i < songs.length; i++)
{
var id = songs[i].id;
var info = songs[i].info;

var infoDiv = createTextElement('div', info);
infoDiv.setAttribute('id', id + 'Info');
infoDiv.setAttribute('class', 'info');

infoContainer.appendChild(infoDiv);
}

var dfltInfo = 'Hover for info, click to play.';

var dfltInfoDiv = createTextElement('div', dfltInfo);
dfltInfoDiv.setAttribute('id', 'dfltInfo');
dfltInfoDiv.setAttribute('class', 'info');

infoContainer.appendChild(dfltInfoDiv);

document.getElementById('container').appendChild(infoContainer);
}

function createTextElement(name, text)
{
var e = document.createElement(name);
var t = document.createTextNode(text);
e.appendChild(t);
return e;
}

function showInfo(id)
{
displayNone('div', 'info');
setStyleById(id + 'Info', 'display', 'block');
}

function playMusic(id)
{
displayNone('embed', 'player');
setStyleById(id + 'Player', 'display', 'block');
}

function displayNone(tagName, className)
{
var elements = document.getElementsByTagName(tagName);

for (var i = 0; i < elements.length; i++)
{
var j = elements[i];
if (j.getAttribute('class') == className)
{
j.style.display = 'none';
}
}
}

// Sets style property p of an element with id i to value v.
function setStyleById(i, p, v)
{
var element = document.getElementbyId(i);
element.style[p] = v;
}

function initialize()
{
generateImagesDiv();
generatePlayerDivs();
generateInfoDivs();
}

function Song(id, title, artist, album, url, albumArtUrl)
{
this.id = id;
this.title = title;
this.artist = artist;
this.album = album;
this.url = url;
this.albumArtUrl = albumArtUrl;
this.info = title + ' - ' + artist + ' - ' + album;
}

var songs = new Array();

// Initializes songs
var chinaWhite = new Song('chinaWhite', 'He Is Legend', 'China White', 'I Am Hollywood',
'http://www.mydatabus.com/public/1212jtraceur/z/China_White-He_Is_Legend-I_Am_Hollywood.mp3',
'http://passzio.hu/kepek/kristof/he_is_legend.jpg');
songs[0] = chinaWhite;

var mouthMagazine = new Song('mouthMagazine', 'Mouth Like A Magazine', 'Showbread', 'No Sir, Nihilism Is Not Practical',
'http://www.mydatabus.com/public/1212jtraceur/z/Mouth_Like_A_Magazine-Showbread-No_Sir_Nihilism_Is_Not_Practical.mp3',
'http://www.smartpunk.com/product_images/12654.gif');
songs[1] = mouthMagazine;

var myDarkness = new Song('myDarkness', 'My Darkness', 'Destroy The Runner', 'Saints',
'http://www.mydatabus.com/public/1212jtraceur/z/My_Darkness-Destroy_The_Runner-Saints.mp3',
'http://graphics.christianbook.com/g/thumbnail/c/cd38621t.gif');
songs[2] = myDarkness;

var oneManParade = new Song('oneManParade', 'One Man Parade', 'Becoming The Archetype', 'Terminate Damnation',
'http://www.mydatabus.com/public/1212jtraceur/z/One_Man_Parade-Becoming_The_Archetype-Terminate_Damnation.mp3',
'http://www.decoymusic.com/vb/gas/images/5/becomingthearchetype_damnation.jpg');
songs[3] = oneManParade;

var sandstorm = new Song('sandstorm', 'Sandstorm', 'Darude', 'Before The Storm',
'http://www.mydatabus.com/public/1212jtraceur/z/Sandstorm-Darude-Before_The_Storm.mp3',
'http://www.eurodancehits.com/darude_storm.jpg');
songs[4] = sandstorm;

var ichabod = new Song('ichabod', 'Sincerely, Ichabod', 'Project 86', '...And The Rest Will Follow',
'http://www.mydatabus.com/public/1212jtraceur/z/Sincerely_Ichabod-Project_86-And_The_Rest_Will_Follow.mp3',
'http://us.ent1.yimg.com/images.launch.yahoo.com/000/027/365/27365652.jpg');
songs[5] = ichabod;

var coldestHeart = new Song('coldestHeart', 'The Coldest Heart', 'The Classic Crime', 'Albatross',
'http://www.mydatabus.com/public/1212jtraceur/z/The_Coldest_Heart-The_Classic_Crime-Albatross.mp3',
'http://images.emidigitalmedia.com/cover/thumb/094633553620.jpg');
songs[6] = coldestHeart;

var tunak = new Song('tunak', 'Tunak Tunak Tun', 'Daler Mehndi', 'Tunak Tunak Tun...',
'http://www.mydatabus.com/public/1212jtraceur/z/Tunak_Tunak_Tun-Daler_Mehndi-Tunak_Tunak_Tun.mp3',
'http://www.zibamusic.com/images/mojaanlaendo.jpg');
songs[7] = tunak;

var undying = new Song('undying', 'Undying', 'Demon Hunter', 'The Triptych',
'http://www.mydatabus.com/public/1212jtraceur/z/Undying-Demon_Hunter-The_Triptych.mp3',
'http://cover6.cduniverse.com/MuzeAudioArt/600/601933.jpg');
songs[8] = undying;

var walls = new Song('walls', 'Walls', 'Emery', 'The Weak\'s End',
'http://www.mydatabus.com/public/1212jtraceur/z/Walls-Emery-The_Weaks_End.mp3',
'http://www.christianrock.net/cdcovers/the%20weak\'s%20end.jpg');
songs[9] = walls;

var whiteNerdy = new Song('whiteNerdy', 'White and Nerdy', 'Weird Al Yankovic', 'Straight Outta Lynwood',
'http://www.mydatabus.com/public/1212jtraceur/z/White_and_Nerdy-Weird_Al_Yankovic-Straight_Outta_Lynwood.mp3',
'http://weirdal.com/images/solcdsm.jpg');
songs[10] = whiteNerdy;

var writingWalls = new Song('writingWalls', 'Writing On The Walls', 'UnderOath', 'Define The Great Line',
'http://www.mydatabus.com/public/1212jtraceur/z/Writing_On_The_Walls-UnderOath-Define_The_Great_Line.mp3',
'http://www.avopolis.gr/core/reviews/underoath%20define%20the%20great%20line.jpeg');
songs[11] = writingWalls;

var suburbiaRuins = new Song('suburbiaRuins', 'Your Little Suburbia is in Ruins', 'August Burns Red', 'Thrill Seeker',
'http://www.mydatabus.com/public/1212jtraceur/z/Your_Little_Surburbia_Is_In_Ruins-August_Burns_Red-Thrill_Seeker.mp3',
'http://www.avopolis.gr/core/reviews/august%20burns%20red%20cover.jpg')
songs[12] = suburbiaRuins;

</script>

<script type='text/javascript'>
onload=function()
{
initialize();
showInfo('dflt');
}
</script>

<style type="text/css">
/* kill default browser margins and defaults */
html, body {margin: 0; padding: 0;}
body
{
color: #fff;
background: #000;
margin: 10px;
}
div#container
{
float: left;
}
div#images
{
position: relative;
}
div#infoContainer
{
margin-top: 25px;
}
div.info
{
display: none;
}
div#playerContainer
{
height: 100%;
width: 250px;
float: right;
}
embed
{
display: none;
}
object.image
{
height: 90px;
width: 90px;
float: left;
margin: 10px;
}
/* no unnecessary margins between outer edges of outer images and inner edge of div#images */
object.left
{
margin-left: 0;
/* ensures that image will be below previous row */
clear: left;
}
object.right {margin-right: 0;}
object.top {margin-top: 0;}
object.bottom {margin-bottom: 0;}

</style>
</head>

<body>

<div id="container"></div>

<noscript>
<p>
Since your user agent (browser) appears to not support JavaScript or DOM, or you've disabled them, you're pretty much out of luck
(unless, of course, you did not wish to view this as I intended).
This page, like many others, relies on JavaScript and DOM for interactivity.
You can either catch up with the rest of the world and get a real browser like
<a href="http:www.mozilla.org/firefox/">Mozilla Firefox</a>,
or you can start trusting people and your common sense and re-enable JavaScript through your user agent preferences.
My apologies for sounding harsh if you currently happen to have little control over how you browse the Internet.
</p>
</noscript>
</body>

</html>

Kor

11-03-2006, 09:16 PM

XML (and of course, XHTML as well) will read literally some javascript operators or characters (< > &) as being it's own code markups, thus you have to escape the code inside a CDATA section:

<script type="text/javascript">
/* <![CDATA[ */
......... your code here .........
/* ]]> */
</script>

You may also put the code in an external js file

<script type="text/javascript" src="myscript.js"></script>

1212jtraceur

11-04-2006, 09:19 PM

Never mind, I fixed that problem. It turns out that I had 'document.getElementbyId()' rather than "document.getElementById()' (by|By).

However, I have another problem: I get 'element has no properties' upon mouseover of the images. I know this can happen if there is no element with the specified id, but there should be, as initialize() is called on window.onload.

My current code is below, could someone help me figure out why my dynamically generated elements are not accessible?

Thanks,
1212jtraceur

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<?xml version="1.0" encoding="utf-8"?>



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Music Player</title>



<script type="text/javascript">
function generatePlayerDivs()
{
var playerContainer = document.createElement('div');
playerContainer.id = 'playerContainer';

for (var i = 0; i < songs.length; i++)
{
var id = songs[i].id;
var url = songs[i].url;

var embed = document.createElement('embed');
embed.setAttribute('type', 'audio/mpeg');
embed.setAttribute('src', url);
embed.setAttribute('class', 'player');

playerContainer.appendChild(embed);
}

document.body.appendChild(playerContainer);
}

function generateImagesDiv()
{
var images = document.createElement('div');
images.id = 'images';

for (var i = 0; i < songs.length; i++)
{
var id = songs[i].id;
var url = songs[i].albumArtUrl;
var info = songs[i].info;

var image = document.createElement('object');
image.id = id + 'Image';
image.setAttribute('data', url);
image.setAttribute('onmouseover', 'javascript:showInfo(' + id + ');');
image.setAttribute('onclick', 'javascript:playMusic(' + id + ');');
image.setAttribute('onmouseout', 'javascript:showInfo(\'dflt\');');
var klass = getImageClass(i%width, Math.floor(i/width));
image.setAttribute('class', klass + ' image ');
image.appendChild(document.createTextNode(info));

images.appendChild(image);
}

document.getElementById('container').appendChild(images);
}

var width = 4;
var height = 4;

function getImageClass(x, y)
{
var klass = '';

if (x == 0)
{
klass += 'left';
}
else if (x == (width - 1))
{
klass += 'right';
}

if (y == 0)
{
klass += ' top';
}
else if (y == (height - 1))
{
klass += ' bottom';
}

return klass;
}

function generateInfoDivs()
{
var infoContainer = document.createElement('div');
infoContainer.id = 'infoContainer';

for (var i = 0; i < songs.length; i++)
{
var id = songs[i].id;
var info = songs[i].info;

var infoDiv = createTextElement('div', info);
infoDiv.setAttribute('id', id + 'Info');
infoDiv.setAttribute('class', 'info');

infoContainer.appendChild(infoDiv);
}

var dfltInfo = 'Hover for info, click to play.';

var dfltInfoDiv = createTextElement('div', dfltInfo);
dfltInfoDiv.setAttribute('id', 'dfltInfo');
dfltInfoDiv.setAttribute('class', 'info');

infoContainer.appendChild(dfltInfoDiv);

document.getElementById('container').appendChild(infoContainer);
}

function createTextElement(name, text)
{
var e = document.createElement(name);
var t = document.createTextNode(text);
e.appendChild(t);
return e;
}

function showInfo(id)
{
displayNone('div', 'info');
setStyleById(id + 'Info', 'display', 'block');
}

function playMusic(id)
{
displayNone('embed', 'player');
setStyleById(id + 'Player', 'display', 'block');
}

function displayNone(tagName, className)
{
var elements = document.getElementsByTagName(tagName);

for (var i = 0; i < elements.length; i++)
{
var j = elements[i];
if (j.getAttribute('class') == className)
{
j.style.display = 'none';
}
}
}

// Sets style property p of an element with id i to value v.
function setStyleById(i, p, v)
{
var element = document.getElementById(i);
element.style[p] = v;
}

function initialize()
{
generateImagesDiv();
generatePlayerDivs();
generateInfoDivs();
}

function Song(id, title, artist, album, url, albumArtUrl)
{
this.id = id;
this.title = title;
this.artist = artist;
this.album = album;
this.url = url;
this.albumArtUrl = albumArtUrl;
this.info = title + ' - ' + artist + ' - ' + album;
}

var songs = new Array();

// Initializes songs
var chinaWhite = new Song('chinaWhite', 'He Is Legend', 'China White', 'I Am Hollywood',
'http://www.mydatabus.com/public/1212jtraceur/z/China_White-He_Is_Legend-I_Am_Hollywood.mp3',
'http://passzio.hu/kepek/kristof/he_is_legend.jpg');
songs[0] = chinaWhite;

var mouthMagazine = new Song('mouthMagazine', 'Mouth Like A Magazine', 'Showbread', 'No Sir, Nihilism Is Not Practical',
'http://www.mydatabus.com/public/1212jtraceur/z/Mouth_Like_A_Magazine-Showbread-No_Sir_Nihilism_Is_Not_Practical.mp3',
'http://www.smartpunk.com/product_images/12654.gif');
songs[1] = mouthMagazine;

var myDarkness = new Song('myDarkness', 'My Darkness', 'Destroy The Runner', 'Saints',
'http://www.mydatabus.com/public/1212jtraceur/z/My_Darkness-Destroy_The_Runner-Saints.mp3',
'http://graphics.christianbook.com/g/thumbnail/c/cd38621t.gif');
songs[2] = myDarkness;

var oneManParade = new Song('oneManParade', 'One Man Parade', 'Becoming The Archetype', 'Terminate Damnation',
'http://www.mydatabus.com/public/1212jtraceur/z/One_Man_Parade-Becoming_The_Archetype-Terminate_Damnation.mp3',
'http://www.decoymusic.com/vb/gas/images/5/becomingthearchetype_damnation.jpg');
songs[3] = oneManParade;

var sandstorm = new Song('sandstorm', 'Sandstorm', 'Darude', 'Before The Storm',
'http://www.mydatabus.com/public/1212jtraceur/z/Sandstorm-Darude-Before_The_Storm.mp3',
'http://www.eurodancehits.com/darude_storm.jpg');
songs[4] = sandstorm;

var ichabod = new Song('ichabod', 'Sincerely, Ichabod', 'Project 86', '...And The Rest Will Follow',
'http://www.mydatabus.com/public/1212jtraceur/z/Sincerely_Ichabod-Project_86-And_The_Rest_Will_Follow.mp3',
'http://us.ent1.yimg.com/images.launch.yahoo.com/000/027/365/27365652.jpg');
songs[5] = ichabod;

var coldestHeart = new Song('coldestHeart', 'The Coldest Heart', 'The Classic Crime', 'Albatross',
'http://www.mydatabus.com/public/1212jtraceur/z/The_Coldest_Heart-The_Classic_Crime-Albatross.mp3',
'http://images.emidigitalmedia.com/cover/thumb/094633553620.jpg');
songs[6] = coldestHeart;

var tunak = new Song('tunak', 'Tunak Tunak Tun', 'Daler Mehndi', 'Tunak Tunak Tun...',
'http://www.mydatabus.com/public/1212jtraceur/z/Tunak_Tunak_Tun-Daler_Mehndi-Tunak_Tunak_Tun.mp3',
'http://www.zibamusic.com/images/mojaanlaendo.jpg');
songs[7] = tunak;

var undying = new Song('undying', 'Undying', 'Demon Hunter', 'The Triptych',
'http://www.mydatabus.com/public/1212jtraceur/z/Undying-Demon_Hunter-The_Triptych.mp3',
'http://cover6.cduniverse.com/MuzeAudioArt/600/601933.jpg');
songs[8] = undying;

var walls = new Song('walls', 'Walls', 'Emery', 'The Weak\'s End',
'http://www.mydatabus.com/public/1212jtraceur/z/Walls-Emery-The_Weaks_End.mp3',
'http://www.christianrock.net/cdcovers/the%20weak\'s%20end.jpg');
songs[9] = walls;

var whiteNerdy = new Song('whiteNerdy', 'White and Nerdy', 'Weird Al Yankovic', 'Straight Outta Lynwood',
'http://www.mydatabus.com/public/1212jtraceur/z/White_and_Nerdy-Weird_Al_Yankovic-Straight_Outta_Lynwood.mp3',
'http://weirdal.com/images/solcdsm.jpg');
songs[10] = whiteNerdy;

var writingWalls = new Song('writingWalls', 'Writing On The Walls', 'UnderOath', 'Define The Great Line',
'http://www.mydatabus.com/public/1212jtraceur/z/Writing_On_The_Walls-UnderOath-Define_The_Great_Line.mp3',
'http://www.avopolis.gr/core/reviews/underoath%20define%20the%20great%20line.jpeg');
songs[11] = writingWalls;

var suburbiaRuins = new Song('suburbiaRuins', 'Your Little Suburbia is in Ruins', 'August Burns Red', 'Thrill Seeker',
'http://www.mydatabus.com/public/1212jtraceur/z/Your_Little_Surburbia_Is_In_Ruins-August_Burns_Red-Thrill_Seeker.mp3',
'http://www.avopolis.gr/core/reviews/august%20burns%20red%20cover.jpg')
songs[12] = suburbiaRuins;

</script>

<script type='text/javascript'>
window.onload=function()
{
initialize();
showInfo('dflt');
}
</script>

<style type="text/css">
/* kill default browser margins and defaults */
html, body {margin: 0; padding: 0;}
body
{
color: #fff;
background: #000;
margin: 10px;
}
div#container
{
float: left;
}
div#images
{
position: relative
}
div#infoContainer
{
clear: both;
margin-top: 25px;
}
div.info
{
display: none;
}
div#playerContainer
{
height: 100%;
width: 250px;
float: right;
}
embed
{
display: none;
}
object.image
{
height: 90px;
width: 90px;
float: left;
margin: 10px;
}
/* no unnecessary margins between outer edges of outer images and inner edge of div#images */
object.left
{
margin-left: 0;
/* ensures that image will be below previous row */
clear: left;
}
object.right {margin-right: 0;}
object.top {margin-top: 0;}
object.bottom {margin-bottom: 0;}

</style>
</head>

<body>

<div id="container"></div>

<noscript>
<p>
Since your user agent (browser) appears to not support JavaScript or DOM, or you've disabled them, you're pretty much out of luck
(unless, of course, you did not wish to view this as I intended).
This page, like many others, relies on JavaScript and DOM for interactivity.
You can either catch up with the rest of the world and get a real browser like
<a href="http:www.mozilla.org/firefox/">Mozilla Firefox</a>,
or you can start trusting people and your common sense and re-enable JavaScript through your user agent preferences.
My apologies for sounding harsh if you currently happen to have little control over how you browse the Internet.
</p>
</noscript>
</body>

</html>

Kor

11-05-2006, 06:43 AM

1. Read what I have said in my previous replay. You must escape the code in a XHTML page
2. setAttribute('onclick','myFunction()'), or, generic, setAttribute('onsomeevent','somefunction()') will not work in IE. Use DOM 0 syntax

object.onclick=function(){myFunction()}

3. Nor setAttribute('class','myClass') will work. Use also DOM 0:

object.className='myclass';

1212jtraceur

11-05-2006, 05:36 PM

Ok, I've did those.

On onclick, I get 'element has no properties'. Also, on onmouseover, the same info is displayed below the images. Any idea why the same string is being accessed for each Song?

Thanks for everything so far, you've been really helpful.

1212jtraceur

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<?xml version="1.0" encoding="utf-8"?>



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Music Player</title>



<script type="text/javascript">
/* <![CDATA[ */
function generatePlayerDivs()
{
var playerContainer = document.createElement('div');
playerContainer.id = 'playerContainer';

for (var i = 0; i < songs.length; i++)
{
var id = songs[i].id;
var url = songs[i].url;

var embed = document.createElement('embed');
embed.type = 'audio/mpeg';
embed.src = url;
embed.className = 'player';

playerContainer.appendChild(embed);
}

document.body.appendChild(playerContainer);
}

function generateImagesDiv()
{
var images = document.createElement('div');
images.id = 'images';

for (var i = 0; i < songs.length; i++)
{
var id = songs[i].id;
var url = songs[i].albumArtUrl;
var info = songs[i].info;

var image = document.createElement('object');
image.id = id + 'Image';
image.data = url;
image.onmouseover = function(){showInfo(id);};
image.onclick = function(){playMusic(id);};
image.onmouseout = function(){showInfo('dflt');};
var klass = getImageClass(i%width, Math.floor(i/width));
image.className = klass + ' image ';
image.appendChild(document.createTextNode(info));

images.appendChild(image);
}

document.getElementById('container').appendChild(images);
}

var width = 4;
var height = 4;

function getImageClass(x, y)
{
var klass = '';

if (x === 0)
{
klass += 'left';
}
else if (x === (width - 1))
{
klass += 'right';
}

if (y === 0)
{
klass += ' top';
}
else if (y === (height - 1))
{
klass += ' bottom';
}

return klass;
}

function generateInfoDivs()
{
var infoContainer = document.createElement('div');
infoContainer.id = 'infoContainer';

for (var i = 0; i < songs.length; i++)
{
var id = songs[i].id;
var info = songs[i].info;

var infoDiv = createTextElement('div', info);
infoDiv.id = id + 'Info';
infoDiv.className = 'info';

infoContainer.appendChild(infoDiv);
}

var dfltInfo = 'Hover for info, click to play.';

var dfltInfoDiv = createTextElement('div', dfltInfo);
dfltInfoDiv.id = 'dfltInfo';
dfltInfoDiv.className = 'info';

infoContainer.appendChild(dfltInfoDiv);

document.getElementById('container').appendChild(infoContainer);
}

function createTextElement(name, text)
{
var e = document.createElement(name);
var t = document.createTextNode(text);
e.appendChild(t);
return e;
}

function showInfo(id)
{
displayNone('div', 'info');
setStyleById(id + 'Info', 'display', 'block');
}

function playMusic(id)
{
displayNone('embed', 'player');
setStyleById(id + 'Player', 'display', 'block');
}

function displayNone(tagName, className)
{
var elements = document.getElementsByTagName(tagName);

for (var i = 0; i < elements.length; i++)
{
var j = elements[i];
if (j.getAttribute('class') == className)
{
j.style.display = 'none';
}
}
}

// Sets style property p of an element with id i to value v.
function setStyleById(i, p, v)
{
var element = document.getElementById(i);
element.style[p] = v;
}

function initialize()
{
generateImagesDiv();
generatePlayerDivs();
generateInfoDivs();
}

function Song(id, title, artist, album, url, albumArtUrl)
{
this.id = id;
this.title = title;
this.artist = artist;
this.album = album;
this.url = url;
this.albumArtUrl = albumArtUrl;
this.info = title + ' - ' + artist + ' - ' + album;
}

var songs = new Array();

// Initializes songs
var chinaWhite = new Song('chinaWhite', 'He Is Legend', 'China White', 'I Am Hollywood',
'http://www.mydatabus.com/public/1212jtraceur/z/China_White-He_Is_Legend-I_Am_Hollywood.mp3',
'http://passzio.hu/kepek/kristof/he_is_legend.jpg');
songs[0] = chinaWhite;

var mouthMagazine = new Song('mouthMagazine', 'Mouth Like A Magazine', 'Showbread', 'No Sir, Nihilism Is Not Practical',
'http://www.mydatabus.com/public/1212jtraceur/z/Mouth_Like_A_Magazine-Showbread-No_Sir_Nihilism_Is_Not_Practical.mp3',
'http://www.smartpunk.com/product_images/12654.gif');
songs[1] = mouthMagazine;

var myDarkness = new Song('myDarkness', 'My Darkness', 'Destroy The Runner', 'Saints',
'http://www.mydatabus.com/public/1212jtraceur/z/My_Darkness-Destroy_The_Runner-Saints.mp3',
'http://graphics.christianbook.com/g/thumbnail/c/cd38621t.gif');
songs[2] = myDarkness;

var oneManParade = new Song('oneManParade', 'One Man Parade', 'Becoming The Archetype', 'Terminate Damnation',
'http://www.mydatabus.com/public/1212jtraceur/z/One_Man_Parade-Becoming_The_Archetype-Terminate_Damnation.mp3',
'http://www.decoymusic.com/vb/gas/images/5/becomingthearchetype_damnation.jpg');
songs[3] = oneManParade;

var sandstorm = new Song('sandstorm', 'Sandstorm', 'Darude', 'Before The Storm',
'http://www.mydatabus.com/public/1212jtraceur/z/Sandstorm-Darude-Before_The_Storm.mp3',
'http://www.eurodancehits.com/darude_storm.jpg');
songs[4] = sandstorm;

var ichabod = new Song('ichabod', 'Sincerely, Ichabod', 'Project 86', '...And The Rest Will Follow',
'http://www.mydatabus.com/public/1212jtraceur/z/Sincerely_Ichabod-Project_86-And_The_Rest_Will_Follow.mp3',
'http://us.ent1.yimg.com/images.launch.yahoo.com/000/027/365/27365652.jpg');
songs[5] = ichabod;

var coldestHeart = new Song('coldestHeart', 'The Coldest Heart', 'The Classic Crime', 'Albatross',
'http://www.mydatabus.com/public/1212jtraceur/z/The_Coldest_Heart-The_Classic_Crime-Albatross.mp3',
'http://images.emidigitalmedia.com/cover/thumb/094633553620.jpg');
songs[6] = coldestHeart;

var tunak = new Song('tunak', 'Tunak Tunak Tun', 'Daler Mehndi', 'Tunak Tunak Tun...',
'http://www.mydatabus.com/public/1212jtraceur/z/Tunak_Tunak_Tun-Daler_Mehndi-Tunak_Tunak_Tun.mp3',
'http://www.zibamusic.com/images/mojaanlaendo.jpg');
songs[7] = tunak;

var undying = new Song('undying', 'Undying', 'Demon Hunter', 'The Triptych',
'http://www.mydatabus.com/public/1212jtraceur/z/Undying-Demon_Hunter-The_Triptych.mp3',
'http://cover6.cduniverse.com/MuzeAudioArt/600/601933.jpg');
songs[8] = undying;

var walls = new Song('walls', 'Walls', 'Emery', 'The Weak\'s End',
'http://www.mydatabus.com/public/1212jtraceur/z/Walls-Emery-The_Weaks_End.mp3',
'http://www.lyricsmusicsongs.com/images/albums/emery-the-weak-s-end.jpg');
songs[9] = walls;

var whiteNerdy = new Song('whiteNerdy', 'White and Nerdy', 'Weird Al Yankovic', 'Straight Outta Lynwood',
'http://www.mydatabus.com/public/1212jtraceur/z/White_and_Nerdy-Weird_Al_Yankovic-Straight_Outta_Lynwood.mp3',
'http://weirdal.com/images/solcdsm.jpg');
songs[10] = whiteNerdy;

var writingWalls = new Song('writingWalls', 'Writing On The Walls', 'UnderOath', 'Define The Great Line',
'http://www.mydatabus.com/public/1212jtraceur/z/Writing_On_The_Walls-UnderOath-Define_The_Great_Line.mp3',
'http://www.avopolis.gr/core/reviews/underoath%20define%20the%20great%20line.jpeg');
songs[11] = writingWalls;

var suburbiaRuins = new Song('suburbiaRuins', 'Your Little Suburbia is in Ruins', 'August Burns Red', 'Thrill Seeker',
'http://www.mydatabus.com/public/1212jtraceur/z/Your_Little_Surburbia_Is_In_Ruins-August_Burns_Red-Thrill_Seeker.mp3',
'http://www.avopolis.gr/core/reviews/august%20burns%20red%20cover.jpg');
songs[12] = suburbiaRuins;
/* ]]> */
</script>

<script type='text/javascript'>
window.onload=function()
{
initialize();
showInfo('dflt');
}
</script>

<style type="text/css">
/* kill default browser margins and defaults */
html, body {margin: 0; padding: 0;}
body
{
color: #fff;
background: #000;
margin: 10px;
}
div#container
{
float: left;
}
div#images
{
position: relative;
}
div#infoContainer
{
clear: both;
margin-top: 25px;
}
div.info
{
display: none;
}
div#playerContainer
{
height: 100%;
width: 250px;
float: right;
}
embed
{
display: none;
}
object.image
{
height: 90px;
width: 90px;
float: left;
margin: 10px;
}
/* no unnecessary margins between outer edges of outer images and inner edge of div#images */
object.left
{
margin-left: 0;
/* ensures that image will be below previous row */
clear: left;
}
object.right {margin-right: 0;}
object.top {margin-top: 0;}
object.bottom {margin-bottom: 0;}

</style>
</head>

<body>

<div id="container"></div>

<noscript>
<p>
Since your user agent (browser) appears to not support JavaScript or DOM, or you've disabled them, you're pretty much out of luck
(unless, of course, you did not wish to view this as I intended).
This page, like many others, relies on JavaScript and DOM for interactivity.
You can either catch up with the rest of the world and get a real browser like
<a href="http:www.mozilla.org/firefox/">Mozilla Firefox</a>,
or you can start trusting people and your common sense and re-enable JavaScript through your user agent preferences.
My apologies for sounding harsh if you currently happen to have little control over how you browse the Internet.
</p>
</noscript>
</body>

</html>

Kor

11-06-2006, 10:16 AM

className is a javascript reserved word, use something else. And, as I said, IE does not use proper the getAttribute() and setAttribute() methods in case of events, classes, styles.

function displayNone(tagName, classN)
{
.....
if (j.className == classN)

1212jtraceur

11-07-2006, 04:22 AM

Oh, thank you. I thought I removed the getAttribute and setAttribute from the Javascript...Anyway, I've did those two things. I've almost fixed everything, but there's one more annoying problem:

No matter what image I mouseover or click, I get the same info or music. I'm thinking this is some sort of error with the Songs or the way their properties are accessed...

My code is below. Thanks for all your help, it's almost completed...!

1212jtraceur

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<?xml version="1.0" encoding="utf-8"?>



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Music Player</title>



<script type="text/javascript">
/* <![CDATA[ */
function generatePlayerDivs()
{
var playerContainer = document.createElement('div');
playerContainer.id = 'playerContainer';

for (var i = 0; i < songs.length; i++)
{
var id = songs[i].id;
var url = songs[i].url;

var embed = document.createElement('embed');
embed.type = 'audio/mpeg';
embed.src = url;
embed.id = id + 'Player';
embed.className = 'player';

playerContainer.appendChild(embed);
}

document.body.appendChild(playerContainer);
}

function generateImagesDiv()
{
var images = document.createElement('div');
images.id = 'images';

for (var i = 0; i < songs.length; i++)
{
var id = songs[i].id;
var url = songs[i].albumArtUrl;
var info = songs[i].info;

var image = createTextElement('object', info);
image.id = id + 'Image';
image.data = url;
image.onmouseover = function(){showInfo(id);};
image.onclick = function(){playMusic(id);};
image.onmouseout = function(){showInfo('dflt');};
var klass = getImageClass(i%width, Math.floor(i/width));
image.className = klass + ' image';

images.appendChild(image);
}

document.getElementById('container').appendChild(images);
}

var width = 4;
var height = 4;

function getImageClass(x, y)
{
var klass = '';

if (x === 0)
{
klass += 'left';
}
else if (x === (width - 1))
{
klass += 'right';
}

if (y === 0)
{
klass += ' top';
}
else if (y === (height - 1))
{
klass += ' bottom';
}

return klass;
}

function generateInfoDivs()
{
var infoContainer = document.createElement('div');
infoContainer.id = 'infoContainer';

for (var i = 0; i < songs.length; i++)
{
var id = songs[i].id;
var info = songs[i].info;

var infoDiv = createTextElement('div', info);
infoDiv.id = id + 'Info';
infoDiv.className = 'info';

infoContainer.appendChild(infoDiv);
}

var dfltInfo = 'Hover for info, click to play.';

var dfltInfoDiv = createTextElement('div', dfltInfo);
dfltInfoDiv.id = 'dfltInfo';
dfltInfoDiv.className = 'info';

infoContainer.appendChild(dfltInfoDiv);

document.getElementById('container').appendChild(infoContainer);
}

function createTextElement(name, text)
{
var e = document.createElement(name);
var t = document.createTextNode(text);
e.appendChild(t);
return e;
}

function showInfo(id)
{
displayNone('div', 'info');
setStyleById(id + 'Info', 'display', 'block');
}

function playMusic(id)
{
displayNone('embed', 'player');
setStyleById(id + 'Player', 'display', 'block');
}

function displayNone(tagName, classN)
{
var elements = document.getElementsByTagName(tagName);

for (var i = 0; i < elements.length; i++)
{
var j = elements[i];
if (j.className == classN)
{
j.style.display = 'none';
}
}
}

// Sets style property p of an element with id i to value v.
function setStyleById(i, p, v)
{
var element = document.getElementById(i);
element.style[p] = v;
//alert(element + ', ' + i);
}

function initialize()
{
generateImagesDiv();
generatePlayerDivs();
generateInfoDivs();
}

function Song(id, title, artist, album, url, albumArtUrl)
{
this.id = id;
this.title = title;
this.artist = artist;
this.album = album;
this.url = url;
this.albumArtUrl = albumArtUrl;
this.info = title + ' - ' + artist + ' - ' + album;
}

var songs = new Array();

// Initializes songs
var chinaWhite = new Song('chinaWhite', 'He Is Legend', 'China White', 'I Am Hollywood',
'http://www.mydatabus.com/public/1212jtraceur/z/China_White-He_Is_Legend-I_Am_Hollywood.mp3',
'http://passzio.hu/kepek/kristof/he_is_legend.jpg');
songs[0] = chinaWhite;

var mouthMagazine = new Song('mouthMagazine', 'Mouth Like A Magazine', 'Showbread', 'No Sir, Nihilism Is Not Practical',
'http://www.mydatabus.com/public/1212jtraceur/z/Mouth_Like_A_Magazine-Showbread-No_Sir_Nihilism_Is_Not_Practical.mp3',
'http://www.smartpunk.com/product_images/12654.gif');
songs[1] = mouthMagazine;

var myDarkness = new Song('myDarkness', 'My Darkness', 'Destroy The Runner', 'Saints',
'http://www.mydatabus.com/public/1212jtraceur/z/My_Darkness-Destroy_The_Runner-Saints.mp3',
'http://graphics.christianbook.com/g/thumbnail/c/cd38621t.gif');
songs[2] = myDarkness;

var oneManParade = new Song('oneManParade', 'One Man Parade', 'Becoming The Archetype', 'Terminate Damnation',
'http://www.mydatabus.com/public/1212jtraceur/z/One_Man_Parade-Becoming_The_Archetype-Terminate_Damnation.mp3',
'http://www.decoymusic.com/vb/gas/images/5/becomingthearchetype_damnation.jpg');
songs[3] = oneManParade;

var sandstorm = new Song('sandstorm', 'Sandstorm', 'Darude', 'Before The Storm',
'http://www.mydatabus.com/public/1212jtraceur/z/Sandstorm-Darude-Before_The_Storm.mp3',
'http://www.eurodancehits.com/darude_storm.jpg');
songs[4] = sandstorm;

var ichabod = new Song('ichabod', 'Sincerely, Ichabod', 'Project 86', '...And The Rest Will Follow',
'http://www.mydatabus.com/public/1212jtraceur/z/Sincerely_Ichabod-Project_86-And_The_Rest_Will_Follow.mp3',
'http://us.ent1.yimg.com/images.launch.yahoo.com/000/027/365/27365652.jpg');
songs[5] = ichabod;

var coldestHeart = new Song('coldestHeart', 'The Coldest Heart', 'The Classic Crime', 'Albatross',
'http://www.mydatabus.com/public/1212jtraceur/z/The_Coldest_Heart-The_Classic_Crime-Albatross.mp3',
'http://images.emidigitalmedia.com/cover/thumb/094633553620.jpg');
songs[6] = coldestHeart;

var tunak = new Song('tunak', 'Tunak Tunak Tun', 'Daler Mehndi', 'Tunak Tunak Tun...',
'http://www.mydatabus.com/public/1212jtraceur/z/Tunak_Tunak_Tun-Daler_Mehndi-Tunak_Tunak_Tun.mp3',
'http://www.zibamusic.com/images/mojaanlaendo.jpg');
songs[7] = tunak;

var undying = new Song('undying', 'Undying', 'Demon Hunter', 'The Triptych',
'http://www.mydatabus.com/public/1212jtraceur/z/Undying-Demon_Hunter-The_Triptych.mp3',
'http://cover6.cduniverse.com/MuzeAudioArt/600/601933.jpg');
songs[8] = undying;

var walls = new Song('walls', 'Walls', 'Emery', 'The Weak\'s End',
'http://www.mydatabus.com/public/1212jtraceur/z/Walls-Emery-The_Weaks_End.mp3',
'http://www.lyricsmusicsongs.com/images/albums/emery-the-weak-s-end.jpg');
songs[9] = walls;

var whiteNerdy = new Song('whiteNerdy', 'White and Nerdy', 'Weird Al Yankovic', 'Straight Outta Lynwood',
'http://www.mydatabus.com/public/1212jtraceur/z/White_and_Nerdy-Weird_Al_Yankovic-Straight_Outta_Lynwood.mp3',
'http://weirdal.com/images/solcdsm.jpg');
songs[10] = whiteNerdy;

var writingWalls = new Song('writingWalls', 'Writing On The Walls', 'UnderOath', 'Define The Great Line',
'http://www.mydatabus.com/public/1212jtraceur/z/Writing_On_The_Walls-UnderOath-Define_The_Great_Line.mp3',
'http://www.avopolis.gr/core/reviews/underoath%20define%20the%20great%20line.jpeg');
songs[11] = writingWalls;

var suburbiaRuins = new Song('suburbiaRuins', 'Your Little Suburbia is in Ruins', 'August Burns Red', 'Thrill Seeker',
'http://www.mydatabus.com/public/1212jtraceur/z/Your_Little_Surburbia_Is_In_Ruins-August_Burns_Red-Thrill_Seeker.mp3',
'http://www.avopolis.gr/core/reviews/august%20burns%20red%20cover.jpg');
songs[12] = suburbiaRuins;

var liarsenic = new Song('liarsenic', 'Liarsenic', 'Norma Jean', 'O God, The Aftermath',
'http://www.mydatabus.com/public/1212jtraceur/z/Liarsenic-Norma_Jean-O_God_The_Aftermath.mp3',
'http://www.lyricsforall.com/images/albums/1594467844NormaJean_OGodAftermath.jpg');
songs[13] = liarsenic;
/* ]]> */
</script>

<script type='text/javascript'>
window.onload=function()
{
initialize();
showInfo('dflt');
}
</script>

<style type="text/css">
/* kill default browser margins and defaults */
html, body {margin: 0; padding: 0;}
body
{
color: #fff;
background: #000;
margin: 10px;
}
div#container
{
float: left;
}
div#images
{
position: relative;
}
div#infoContainer
{
clear: both;
margin-top: 25px;
}
div.info
{
display: none;
}
div#playerContainer
{
height: 100%;
width: 250px;
float: right;
}
embed
{
display: none;
}
object.image
{
height: 90px;
width: 90px;
float: left;
margin: 10px;
overflow: hidden;
}
/* no unnecessary margins between outer edges of outer images and inner edge of div#images */
object.left
{
margin-left: 0;
/* ensures that image will be below previous row */
clear: left;
}
object.right {margin-right: 0;}
object.top {margin-top: 0;}
object.bottom {margin-bottom: 0;}

</style>
</head>

<body>

<div id="container"></div>

<noscript>
<p>
Since your user agent (browser) appears to not support JavaScript or DOM, or you've disabled them, you're pretty much out of luck
(unless, of course, you did not wish to view this as I intended).
This page, like many others, relies on JavaScript and DOM for interactivity.
You can either catch up with the rest of the world and get a real browser like
<a href="http:www.mozilla.org/firefox/">Mozilla Firefox</a>,
or you can start trusting people and your common sense and re-enable JavaScript through your user agent preferences.
My apologies for sounding harsh if you currently happen to have little control over how you browse the Internet.
</p>
</noscript>
</body>

</html>

Gox

11-11-2006, 10:03 AM

There seems to be an issue with the for loop in your generateImagesDiv(). I'm know very little javascript but it seems the issue is with
image.onmouseover = function(){showInfo(id);};
image.onclick = function(){playMusic(id);};

Those function calls seem to always use whatever the current value of id is. Once the loop exits id is the id of the last song in the song array, and somehow all mouse over etc are using this id.

Maybe some people that know javascript can find a better solution, but the only way I could solve it was to get rid of the for loop and make new variables for each song. This of course makes it messy and a pain everytime you want to add a new song, but maybe it will give you some insight in to how to correctly implement changes.

The changes I made are in the generateImagesDiv() function between //***Gox and //***End Gox. I've only done the first two songs, but they both work correctly.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<?xml version="1.0" encoding="utf-8"?>



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Music Player</title>



<script type="text/javascript">
/* <![CDATA[ */
function generatePlayerDivs()
{
var playerContainer = document.createElement('div');
playerContainer.id = 'playerContainer';

for (var i = 0; i < songs.length; i++)
{
var id = songs[i].id;
var url = songs[i].url;

var embed = document.createElement('embed');
embed.type = 'audio/mpeg';
embed.src = url;
embed.id = id + 'Player';
embed.className = 'player';

playerContainer.appendChild(embed);
}

document.body.appendChild(playerContainer);
}

function generateImagesDiv()
{
var images = document.createElement('div');
images.id = 'images';

/***
for (var i = 0; i < songs.length; i++)
{
var id = songs[i].id;
var url = songs[i].albumArtUrl;
var info = songs[i].info;

var image = createTextElement('object', info);
image.id = id + 'Image';
image.data = url;
image.onmouseover = function(){showInfo(id);};
image.onclick = function(){playMusic(id);};
image.onmouseout = function(){showInfo('dflt');};
var klass = getImageClass(i%width, Math.floor(i/width));
image.className = klass + ' image';

images.appendChild(image);
}
***/

//***Gox*****************************************

//Info for Song[0]

var id = songs[0].id;
var url = songs[0].albumArtUrl;
var info = songs[0].info;

var image = createTextElement('object', info);
image.id = id + 'Image';
image.data = url;
image.onmouseover = function(){showInfo(id);};
image.onclick = function(){playMusic(id);};
image.onmouseout = function(){showInfo('dflt');};
var klass = getImageClass(0%width, Math.floor(0/width));
image.className = klass + ' image';

images.appendChild(image);

//Info for song[1]

var id2 = songs[1].id;
var url2 = songs[1].albumArtUrl;
var info2 = songs[1].info;

var image2 = createTextElement('object', info);
image2.id = id2 + 'Image';
image2.data = url2;
image2.onmouseover = function(){showInfo(id2);};
image2.onclick = function(){playMusic(id2);};
image2.onmouseout = function(){showInfo('dflt');};
var klass2 = getImageClass(1%width, Math.floor(1/width));
image2.className = klass2 + ' image';

images.appendChild(image2);

//***End Gox**************************************

document.getElementById('container').appendChild(images);
}

var width = 4;
var height = 4;

function getImageClass(x, y)
{
var klass = '';

if (x === 0)
{
klass += 'left';
}
else if (x === (width - 1))
{
klass += 'right';
}

if (y === 0)
{
klass += ' top';
}
else if (y === (height - 1))
{
klass += ' bottom';
}

return klass;
}

function generateInfoDivs()
{
var infoContainer = document.createElement('div');
infoContainer.id = 'infoContainer';

for (var i = 0; i < songs.length; i++)
{
var id = songs[i].id;
var info = songs[i].info;

var infoDiv = createTextElement('div', info);
infoDiv.id = id + 'Info';
infoDiv.className = 'info';

infoContainer.appendChild(infoDiv);
}

var dfltInfo = 'Hover for info, click to play.';

var dfltInfoDiv = createTextElement('div', dfltInfo);
dfltInfoDiv.id = 'dfltInfo';
dfltInfoDiv.className = 'info';

infoContainer.appendChild(dfltInfoDiv);

document.getElementById('container').appendChild(infoContainer);
}

function createTextElement(name, text)
{
var e = document.createElement(name);
var t = document.createTextNode(text);
e.appendChild(t);
return e;
}

function showInfo(id)
{
displayNone('div', 'info');
setStyleById(id + 'Info', 'display', 'block');
}

function playMusic(id)
{
displayNone('embed', 'player');
setStyleById(id + 'Player', 'display', 'block');
}

function displayNone(tagName, classN)
{
var elements = document.getElementsByTagName(tagName);

for (var i = 0; i < elements.length; i++)
{
var j = elements[i];
if (j.className == classN)
{
j.style.display = 'none';
}
}
}

// Sets style property p of an element with id i to value v.
function setStyleById(i, p, v)
{
var element = document.getElementById(i);
element.style[p] = v;
//alert(element + ', ' + i);
}

function initialize()
{
generateImagesDiv();
generatePlayerDivs();
generateInfoDivs();
}

function Song(id, title, artist, album, url, albumArtUrl)
{
this.id = id;
this.title = title;
this.artist = artist;
this.album = album;
this.url = url;
this.albumArtUrl = albumArtUrl;
this.info = title + ' - ' + artist + ' - ' + album;
}

var songs = new Array();

// Initializes songs
var chinaWhite = new Song('chinaWhite', 'He Is Legend', 'China White', 'I Am Hollywood',
'http://www.mydatabus.com/public/1212jtraceur/z/China_White-He_Is_Legend-I_Am_Hollywood.mp3',
'http://passzio.hu/kepek/kristof/he_is_legend.jpg');
songs[0] = chinaWhite;

var mouthMagazine = new Song('mouthMagazine', 'Mouth Like A Magazine', 'Showbread', 'No Sir, Nihilism Is Not Practical',
'http://www.mydatabus.com/public/1212jtraceur/z/Mouth_Like_A_Magazine-Showbread-No_Sir_Nihilism_Is_Not_Practical.mp3',
'http://www.smartpunk.com/product_images/12654.gif');
songs[1] = mouthMagazine;

var myDarkness = new Song('myDarkness', 'My Darkness', 'Destroy The Runner', 'Saints',
'http://www.mydatabus.com/public/1212jtraceur/z/My_Darkness-Destroy_The_Runner-Saints.mp3',
'http://graphics.christianbook.com/g/thumbnail/c/cd38621t.gif');
songs[2] = myDarkness;

var oneManParade = new Song('oneManParade', 'One Man Parade', 'Becoming The Archetype', 'Terminate Damnation',
'http://www.mydatabus.com/public/1212jtraceur/z/One_Man_Parade-Becoming_The_Archetype-Terminate_Damnation.mp3',
'http://www.decoymusic.com/vb/gas/images/5/becomingthearchetype_damnation.jpg');
songs[3] = oneManParade;

var sandstorm = new Song('sandstorm', 'Sandstorm', 'Darude', 'Before The Storm',
'http://www.mydatabus.com/public/1212jtraceur/z/Sandstorm-Darude-Before_The_Storm.mp3',
'http://www.eurodancehits.com/darude_storm.jpg');
songs[4] = sandstorm;

var ichabod = new Song('ichabod', 'Sincerely, Ichabod', 'Project 86', '...And The Rest Will Follow',
'http://www.mydatabus.com/public/1212jtraceur/z/Sincerely_Ichabod-Project_86-And_The_Rest_Will_Follow.mp3',
'http://us.ent1.yimg.com/images.launch.yahoo.com/000/027/365/27365652.jpg');
songs[5] = ichabod;

var coldestHeart = new Song('coldestHeart', 'The Coldest Heart', 'The Classic Crime', 'Albatross',
'http://www.mydatabus.com/public/1212jtraceur/z/The_Coldest_Heart-The_Classic_Crime-Albatross.mp3',
'http://images.emidigitalmedia.com/cover/thumb/094633553620.jpg');
songs[6] = coldestHeart;

var tunak = new Song('tunak', 'Tunak Tunak Tun', 'Daler Mehndi', 'Tunak Tunak Tun...',
'http://www.mydatabus.com/public/1212jtraceur/z/Tunak_Tunak_Tun-Daler_Mehndi-Tunak_Tunak_Tun.mp3',
'http://www.zibamusic.com/images/mojaanlaendo.jpg');
songs[7] = tunak;

var undying = new Song('undying', 'Undying', 'Demon Hunter', 'The Triptych',
'http://www.mydatabus.com/public/1212jtraceur/z/Undying-Demon_Hunter-The_Triptych.mp3',
'http://cover6.cduniverse.com/MuzeAudioArt/600/601933.jpg');
songs[8] = undying;

var walls = new Song('walls', 'Walls', 'Emery', 'The Weak\'s End',
'http://www.mydatabus.com/public/1212jtraceur/z/Walls-Emery-The_Weaks_End.mp3',
'http://www.lyricsmusicsongs.com/images/albums/emery-the-weak-s-end.jpg');
songs[9] = walls;

var whiteNerdy = new Song('whiteNerdy', 'White and Nerdy', 'Weird Al Yankovic', 'Straight Outta Lynwood',
'http://www.mydatabus.com/public/1212jtraceur/z/White_and_Nerdy-Weird_Al_Yankovic-Straight_Outta_Lynwood.mp3',
'http://weirdal.com/images/solcdsm.jpg');
songs[10] = whiteNerdy;

var writingWalls = new Song('writingWalls', 'Writing On The Walls', 'UnderOath', 'Define The Great Line',
'http://www.mydatabus.com/public/1212jtraceur/z/Writing_On_The_Walls-UnderOath-Define_The_Great_Line.mp3',
'http://www.avopolis.gr/core/reviews/underoath%20define%20the%20great%20line.jpeg');
songs[11] = writingWalls;

var suburbiaRuins = new Song('suburbiaRuins', 'Your Little Suburbia is in Ruins', 'August Burns Red', 'Thrill Seeker',
'http://www.mydatabus.com/public/1212jtraceur/z/Your_Little_Surburbia_Is_In_Ruins-August_Burns_Red-Thrill_Seeker.mp3',
'http://www.avopolis.gr/core/reviews/august%20burns%20red%20cover.jpg');
songs[12] = suburbiaRuins;

var liarsenic = new Song('liarsenic', 'Liarsenic', 'Norma Jean', 'O God, The Aftermath',
'http://www.mydatabus.com/public/1212jtraceur/z/Liarsenic-Norma_Jean-O_God_The_Aftermath.mp3',
'http://www.lyricsforall.com/images/albums/1594467844NormaJean_OGodAftermath.jpg');
songs[13] = liarsenic;

/* ]]> */
</script>

<script type='text/javascript'>
window.onload=function()
{
initialize();
showInfo('dflt');
}
</script>

<style type="text/css">
/* kill default browser margins and defaults */
html, body {margin: 0; padding: 0;}
body
{
color: #fff;
background: #000;
margin: 10px;
}
div#container
{
float: left;
}
div#images
{
position: relative;
}
div#infoContainer
{
clear: both;
margin-top: 25px;
}
div.info
{
display: none;
}
div#playerContainer
{
height: 100%;
width: 250px;
float: right;
}
embed
{
display: none;
}
object.image
{
height: 90px;
width: 90px;
float: left;
margin: 10px;
overflow: hidden;
}
/* no unnecessary margins between outer edges of outer images and inner edge of div#images */
object.left
{
margin-left: 0;
/* ensures that image will be below previous row */
clear: left;
}
object.right {margin-right: 0;}
object.top {margin-top: 0;}
object.bottom {margin-bottom: 0;}

</style>
</head>

<body>

<div id="container"></div>

<noscript>
<p>
Since your user agent (browser) appears to not support JavaScript or DOM, or you've disabled them, you're pretty much out of luck
(unless, of course, you did not wish to view this as I intended).
This page, like many others, relies on JavaScript and DOM for interactivity.
You can either catch up with the rest of the world and get a real browser like
<a href="http:www.mozilla.org/firefox/">Mozilla Firefox</a>,
or you can start trusting people and your common sense and re-enable JavaScript through your user agent preferences.
My apologies for sounding harsh if you currently happen to have little control over how you browse the Internet.
</p>
</noscript>
</body>

</html>

Good luck!

1212jtraceur

11-12-2006, 02:40 AM

Thanks for helping! I agree, the problem is in the loop. However, I think it is with i, not id. The word 'id' in the playMusic and showInfo signatures indicates that the value is supplied, not the variable id, as defined in generateImagesDiv().

Anyone else know what could be going wrong? My (very slightly updated) code is below.

Thanks again,
1212jtraceur

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<?xml version="1.0" encoding="utf-8"?>



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Music Player</title>



<script type="text/javascript">
/* <![CDATA[ */
function generatePlayerDivs()
{
var playerContainer = document.createElement('div');
playerContainer.id = 'playerContainer';

for (var i = 0; i < songs.length; i++)
{
var id = songs[i].id;
var url = songs[i].url;

var embed = document.createElement('embed');
embed.type = 'audio/mpeg';
embed.src = url;
embed.id = id + 'Player';
embed.className = 'player';

playerContainer.appendChild(embed);
}

document.body.appendChild(playerContainer);
}

function generateImagesDiv()
{
var images = document.createElement('div');
images.id = 'images';

for (var i = 0; i < songs.length; i++)
{
var id = songs[i].id;
var url = songs[i].albumArtUrl;
var info = songs[i].info;

var image = createTextElement('object', info);
image.id = id + 'Image';
image.data = url;
image.onmouseover = function(){showInfo(id);};
image.onclick = function(){playMusic(id);};
image.onmouseout = function(){showInfo('dflt');};
var klass = getImageClass(i%width, Math.floor(i/width));
image.className = klass + ' image';

images.appendChild(image);
}

document.getElementById('container').appendChild(images);
}

var width = 4;
var height = 4;

function getImageClass(x, y)
{
var klass = '';

if (x === 0)
{
klass += 'left';
}
else if (x === (width - 1))
{
klass += 'right';
}

if (y === 0)
{
klass += ' top';
}
else if (y === (height - 1))
{
klass += ' bottom';
}

return klass;
}

function generateInfoDivs()
{
var infoContainer = document.createElement('div');
infoContainer.id = 'infoContainer';

for (var i = 0; i < songs.length; i++)
{
var id = songs[i].id;
var info = songs[i].info;

var infoDiv = createTextElement('div', info);
infoDiv.id = id + 'Info';
infoDiv.className = 'info';

infoContainer.appendChild(infoDiv);
}

var dfltInfo = 'Hover for info, click to play.';

var dfltInfoDiv = createTextElement('div', dfltInfo);
dfltInfoDiv.id = 'dfltInfo';
dfltInfoDiv.className = 'info';

infoContainer.appendChild(dfltInfoDiv);

document.getElementById('container').appendChild(infoContainer);
}

function createTextElement(name, text)
{
var e = document.createElement(name);
var t = document.createTextNode(text);
e.appendChild(t);
return e;
}

function showInfo(id)
{
displayNone('div', 'info');
setStyleById(id + 'Info', 'display', 'block');
}

function playMusic(id)
{
displayNone('embed', 'player');
setStyleById(id + 'Player', 'display', 'block');
}

function displayNone(tagName, classN)
{
var elements = document.getElementsByTagName(tagName);

for (var i = 0; i < elements.length; i++)
{
var j = elements[i];
if (j.className == classN)
{
j.style.display = 'none';
}
}
}

// Sets style property p of an element with id i to value v.
function setStyleById(i, p, v)
{
var element = document.getElementById(i);
element.style[p] = v;
//alert(element + ', ' + i);
}

function initialize()
{
generateImagesDiv();
generatePlayerDivs();
generateInfoDivs();
}

function Song(id, title, artist, album, url, albumArtUrl)
{
this.id = id;
this.title = title;
this.artist = artist;
this.album = album;
this.url = url;
this.albumArtUrl = albumArtUrl;
this.info = title + ' - ' + artist + ' - ' + album;
}

var songs = new Array();

// Initializes songs
var chinaWhite = new Song('chinaWhite', 'He Is Legend', 'China White', 'I Am Hollywood',
'http://www.mydatabus.com/public/1212jtraceur/z/China_White-He_Is_Legend-I_Am_Hollywood.mp3',
'http://passzio.hu/kepek/kristof/he_is_legend.jpg');
songs[0] = chinaWhite;

var mouthMagazine = new Song('mouthMagazine', 'Mouth Like A Magazine', 'Showbread', 'No Sir, Nihilism Is Not Practical',
'http://www.mydatabus.com/public/1212jtraceur/z/Mouth_Like_A_Magazine-Showbread-No_Sir_Nihilism_Is_Not_Practical.mp3',
'http://www.smartpunk.com/product_images/12654.gif');
songs[1] = mouthMagazine;

var myDarkness = new Song('myDarkness', 'My Darkness', 'Destroy The Runner', 'Saints',
'http://www.mydatabus.com/public/1212jtraceur/z/My_Darkness-Destroy_The_Runner-Saints.mp3',
'http://graphics.christianbook.com/g/thumbnail/c/cd38621t.gif');
songs[2] = myDarkness;

var oneManParade = new Song('oneManParade', 'One Man Parade', 'Becoming The Archetype', 'Terminate Damnation',
'http://www.mydatabus.com/public/1212jtraceur/z/One_Man_Parade-Becoming_The_Archetype-Terminate_Damnation.mp3',
'http://www.decoymusic.com/vb/gas/images/5/becomingthearchetype_damnation.jpg');
songs[3] = oneManParade;

var sandstorm = new Song('sandstorm', 'Sandstorm', 'Darude', 'Before The Storm',
'http://www.mydatabus.com/public/1212jtraceur/z/Sandstorm-Darude-Before_The_Storm.mp3',
'http://www.eurodancehits.com/darude_storm.jpg');
songs[4] = sandstorm;

var ichabod = new Song('ichabod', 'Sincerely, Ichabod', 'Project 86', '...And The Rest Will Follow',
'http://www.mydatabus.com/public/1212jtraceur/z/Sincerely_Ichabod-Project_86-And_The_Rest_Will_Follow.mp3',
'http://us.ent1.yimg.com/images.launch.yahoo.com/000/027/365/27365652.jpg');
songs[5] = ichabod;

var coldestHeart = new Song('coldestHeart', 'The Coldest Heart', 'The Classic Crime', 'Albatross',
'http://www.mydatabus.com/public/1212jtraceur/z/The_Coldest_Heart-The_Classic_Crime-Albatross.mp3',
'http://images.emidigitalmedia.com/cover/thumb/094633553620.jpg');
songs[6] = coldestHeart;

var tunak = new Song('tunak', 'Tunak Tunak Tun', 'Daler Mehndi', 'Tunak Tunak Tun...',
'http://www.mydatabus.com/public/1212jtraceur/z/Tunak_Tunak_Tun-Daler_Mehndi-Tunak_Tunak_Tun.mp3',
'http://www.zibamusic.com/images/mojaanlaendo.jpg');
songs[7] = tunak;

var undying = new Song('undying', 'Undying', 'Demon Hunter', 'The Triptych',
'http://www.mydatabus.com/public/1212jtraceur/z/Undying-Demon_Hunter-The_Triptych.mp3',
'http://cover6.cduniverse.com/MuzeAudioArt/600/601933.jpg');
songs[8] = undying;

var walls = new Song('walls', 'Walls', 'Emery', 'The Weak\'s End',
'http://www.mydatabus.com/public/1212jtraceur/z/Walls-Emery-The_Weaks_End.mp3',
'http://www.lyricsmusicsongs.com/images/albums/emery-the-weak-s-end.jpg');
songs[9] = walls;

var whiteNerdy = new Song('whiteNerdy', 'White and Nerdy', 'Weird Al Yankovic', 'Straight Outta Lynwood',
'http://www.mydatabus.com/public/1212jtraceur/z/White_and_Nerdy-Weird_Al_Yankovic-Straight_Outta_Lynwood.mp3',
'http://weirdal.com/images/solcdsm.jpg');
songs[10] = whiteNerdy;

var writingWalls = new Song('writingWalls', 'Writing On The Walls', 'UnderOath', 'Define The Great Line',
'http://www.mydatabus.com/public/1212jtraceur/z/Writing_On_The_Walls-UnderOath-Define_The_Great_Line.mp3',
'http://www.avopolis.gr/core/reviews/underoath%20define%20the%20great%20line.jpeg');
songs[11] = writingWalls;

var suburbiaRuins = new Song('suburbiaRuins', 'Your Little Suburbia is in Ruins', 'August Burns Red', 'Thrill Seeker',
'http://www.mydatabus.com/public/1212jtraceur/z/Your_Little_Surburbia_Is_In_Ruins-August_Burns_Red-Thrill_Seeker.mp3',
'http://www.avopolis.gr/core/reviews/august%20burns%20red%20cover.jpg');
songs[12] = suburbiaRuins;

var liarsenic = new Song('liarsenic', 'Liarsenic', 'Norma Jean', 'O God, The Aftermath',
'http://www.mydatabus.com/public/1212jtraceur/z/Liarsenic-Norma_Jean-O_God_The_Aftermath.mp3',
'http://www.lyricsforall.com/images/albums/1594467844NormaJean_OGodAftermath.jpg');
songs[13] = liarsenic;
/* ]]> */
</script>

<script type='text/javascript'>
window.onload=function()
{
initialize();
showInfo('dflt');
}
</script>

<style type="text/css">
/* kill default browser margins and defaults */
html, body {margin: 0; padding: 0;}
body
{
color: #fff;
background: #000;
margin: 10px;
}
div#container
{
float: left;
}
div#images
{
position: relative;
}
div#infoContainer
{
clear: both;
margin-top: 25px;
}
div.info
{
display: none;
}
div#playerContainer
{
height: 100%;
width: 250px;
float: right;
}
embed
{
display: none;
}
object.image
{
height: 90px;
width: 90px;
float: left;
margin: 10px;
overflow: hidden;
}
/* no unnecessary margins between outer edges of outer images and inner edge of div#images */
object.left
{
margin-left: 0;
/* ensures that image will be below previous row */
clear: left;
}
object.right {margin-right: 0;}
object.top {margin-top: 0;}
object.bottom {margin-bottom: 0;}

</style>
</head>

<body>

<div id="container"></div>

<noscript>
<p>
Since your user agent (browser) appears to not support JavaScript or DOM, or you've disabled them, you're pretty much out of luck
(unless, of course, you did not wish to view this as I intended).
This page, like many others, relies on JavaScript and DOM for interactivity.
You can either catch up with the rest of the world and get a real browser like
<a href="http:www.mozilla.org/firefox/">Mozilla Firefox</a>,
or you can start trusting people and your common sense and re-enable JavaScript through your user agent preferences.
My apologies for sounding harsh if you currently happen to have little control over how you browse the Internet.
</p>
</noscript>

</body>

</html>

Gox

11-12-2006, 03:22 AM

I'm not sure that it is the var i in your loop that is giving you the issues. Here's another example to try and help you narrow it down.

Notice that I used my previous method (no loop) but this time I used var id for both of the songs id's. You'll also notice that this has the same affect as your loop, but i is taken out of the equation. I'm just providing the generateImagesDiv function this time.

function generateImagesDiv()
{
var images = document.createElement('div');
images.id = 'images';

/***
for (var i = 0; i < 2; i++)
{
var id = songs[i].id;
url = songs[i].albumArtUrl;
info = songs[i].info;

var image = createTextElement('object', info);
image.id = id + 'Image';
image.data = url;
image.onmouseover = function(){showInfo(id);};
image.onclick = function(){playMusic(id);};
image.onmouseout = function(){showInfo('dflt');};
var klass = getImageClass(i%width, Math.floor(i/width));
image.className = klass + ' image';

images.appendChild(image);
}
***/

//***Gox*****************************************

//Info for Song[0]

var id = songs[0].id; //Same variable used for both song id's
var url = songs[0].albumArtUrl;
var info = songs[0].info;

var image = createTextElement('object', info);
image.id = id + 'Image';
image.data = url;
image.onmouseover = function(){showInfo(id);};
image.onclick = function(){playMusic(id);};
image.onmouseout = function(){showInfo('dflt');};
var klass = getImageClass(0%width, Math.floor(0/width));
image.className = klass + ' image';

images.appendChild(image);

//Info for song[1]

var id = songs[1].id;
var url2 = songs[1].albumArtUrl;
var info2 = songs[1].info;

var image2 = createTextElement('object', info);
image2.id = id + 'Image';
image2.data = url2;
image2.onmouseover = function(){showInfo(id);};
image2.onclick = function(){playMusic(id);};
image2.onmouseout = function(){showInfo('dflt');};
var klass2 = getImageClass(1%width, Math.floor(1/width));
image2.className = klass2 + ' image';

images.appendChild(image2);

//***End Gox**************************************

document.getElementById('container').appendChild(images);
}

1212jtraceur

11-12-2006, 09:19 PM

I don't really know what's going on right now. I'll ignore that issue and introduce another one...

I'm getting the '[element] has no properties' error again. I tried to make it so that the invisible elements are not merely invisible (display: none;), they are completely removed from the document (by using replaceChild()).

Anyway, when I open the document, the images do not appear. I open the Firefox Error Console and see: 'images (the div containing the album art) has no properties' (without the text in the parentheses).

Last time that happened, I found that the element did not exist when getElementById() was called. This time, however, I provide nested div structure, which the functions alter the children of. Also, fillImagesDiv() is called only on window.onload, so that shouldn't be a problem.


<div id="container">
<div id="images"></div>
</div>

<div id="playerContainer"></div>

Thanks to everyone for all their help. Hopefully, this will soon be completed...

1212jtraceur

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<?xml version="1.0" encoding="utf-8"?>



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Music Player</title>



<script type="text/javascript">
/* <![CDATA[ */
function fillImagesDiv()
{
var images = document.getElementById('images');

for (var i = 0; i < songs.length; i++)
{
var id = songs[i].id;
var url = songs[i].albumArtUrl;
var info = songs[i].info;

var image = createTextElement('object', info);
image.id = id + 'Image';
image.data = url;
image.onmouseover = function(){showInfo(id);};
image.onclick = function(){playMusic(id);};
image.onmouseout = function(){showInfo('dflt');};
var klass = getImageClass(i%width, Math.floor(i/width));
image.className = klass + ' image';

images.appendChild(image);
}
}

var width = 4;
var height = 4;

function getImageClass(x, y)
{
var klass = '';

if (x === 0)
{
klass += 'left';
}
else if (x === (width - 1))
{
klass += 'right';
}

if (y === 0)
{
klass += ' top';
}
else if (y === (height - 1))
{
klass += ' bottom';
}

return klass;
}

function createTextElement(name, text)
{
var e = document.createElement(name);
var t = document.createTextNode(text);
e.appendChild(t);
return e;
}

function showInfo(id)
{
var info = createTextElement(div, songs[id].info);
var container = document.getElementById(infoContainer);
container.replaceChild(container.firstChild, info);
}

function playMusic(id)
{
var player = songs[id].player;
var container = document.getElementById('playerContainer');
container.replaceChild(container.firstChild, player);
}

// Sets style property p of an element with id i to value v.
function setStyleById(i, p, v)
{
var element = document.getElementById(i);
element.style[p] = v;
//alert(element + ', ' + i);
}

function Song(id, title, artist, album, url, albumArtUrl)
{
this.id = id;
this.title = title;
this.artist = artist;
this.album = album;
this.url = url;
this.albumArtUrl = albumArtUrl;
this.info = title + ' - ' + artist + ' - ' + album;

var embed = document.createElement('embed');
embed.type = 'audio/mpeg';
embed.src = url;
embed.id = id + 'Player';
embed.className = 'player';

this.player = embed;
}

var songs = new Array();

// Initializes songs
var chinaWhite = new Song('chinaWhite', 'He Is Legend', 'China White', 'I Am Hollywood',
'http://www.mydatabus.com/public/1212jtraceur/z/China_White-He_Is_Legend-I_Am_Hollywood.mp3',
'http://passzio.hu/kepek/kristof/he_is_legend.jpg');
songs[0] = chinaWhite;

var mouthMagazine = new Song('mouthMagazine', 'Mouth Like A Magazine', 'Showbread', 'No Sir, Nihilism Is Not Practical',
'http://www.mydatabus.com/public/1212jtraceur/z/Mouth_Like_A_Magazine-Showbread-No_Sir_Nihilism_Is_Not_Practical.mp3',
'http://www.smartpunk.com/product_images/12654.gif');
songs[1] = mouthMagazine;

var myDarkness = new Song('myDarkness', 'My Darkness', 'Destroy The Runner', 'Saints',
'http://www.mydatabus.com/public/1212jtraceur/z/My_Darkness-Destroy_The_Runner-Saints.mp3',
'http://graphics.christianbook.com/g/thumbnail/c/cd38621t.gif');
songs[2] = myDarkness;

var oneManParade = new Song('oneManParade', 'One Man Parade', 'Becoming The Archetype', 'Terminate Damnation',
'http://www.mydatabus.com/public/1212jtraceur/z/One_Man_Parade-Becoming_The_Archetype-Terminate_Damnation.mp3',
'http://www.decoymusic.com/vb/gas/images/5/becomingthearchetype_damnation.jpg');
songs[3] = oneManParade;

var sandstorm = new Song('sandstorm', 'Sandstorm', 'Darude', 'Before The Storm',
'http://www.mydatabus.com/public/1212jtraceur/z/Sandstorm-Darude-Before_The_Storm.mp3',
'http://www.eurodancehits.com/darude_storm.jpg');
songs[4] = sandstorm;

var ichabod = new Song('ichabod', 'Sincerely, Ichabod', 'Project 86', '...And The Rest Will Follow',
'http://www.mydatabus.com/public/1212jtraceur/z/Sincerely_Ichabod-Project_86-And_The_Rest_Will_Follow.mp3',
'http://us.ent1.yimg.com/images.launch.yahoo.com/000/027/365/27365652.jpg');
songs[5] = ichabod;

var coldestHeart = new Song('coldestHeart', 'The Coldest Heart', 'The Classic Crime', 'Albatross',
'http://www.mydatabus.com/public/1212jtraceur/z/The_Coldest_Heart-The_Classic_Crime-Albatross.mp3',
'http://images.emidigitalmedia.com/cover/thumb/094633553620.jpg');
songs[6] = coldestHeart;

var tunak = new Song('tunak', 'Tunak Tunak Tun', 'Daler Mehndi', 'Tunak Tunak Tun...',
'http://www.mydatabus.com/public/1212jtraceur/z/Tunak_Tunak_Tun-Daler_Mehndi-Tunak_Tunak_Tun.mp3',
'http://www.zibamusic.com/images/mojaanlaendo.jpg');
songs[7] = tunak;

var undying = new Song('undying', 'Undying', 'Demon Hunter', 'The Triptych',
'http://www.mydatabus.com/public/1212jtraceur/z/Undying-Demon_Hunter-The_Triptych.mp3',
'http://cover6.cduniverse.com/MuzeAudioArt/600/601933.jpg');
songs[8] = undying;

var walls = new Song('walls', 'Walls', 'Emery', 'The Weak\'s End',
'http://www.mydatabus.com/public/1212jtraceur/z/Walls-Emery-The_Weaks_End.mp3',
'http://www.lyricsmusicsongs.com/images/albums/emery-the-weak-s-end.jpg');
songs[9] = walls;

var whiteNerdy = new Song('whiteNerdy', 'White and Nerdy', 'Weird Al Yankovic', 'Straight Outta Lynwood',
'http://www.mydatabus.com/public/1212jtraceur/z/White_and_Nerdy-Weird_Al_Yankovic-Straight_Outta_Lynwood.mp3',
'http://weirdal.com/images/solcdsm.jpg');
songs[10] = whiteNerdy;

var writingWalls = new Song('writingWalls', 'Writing On The Walls', 'UnderOath', 'Define The Great Line',
'http://www.mydatabus.com/public/1212jtraceur/z/Writing_On_The_Walls-UnderOath-Define_The_Great_Line.mp3',
'http://www.avopolis.gr/core/reviews/underoath%20define%20the%20great%20line.jpeg');
songs[11] = writingWalls;

var suburbiaRuins = new Song('suburbiaRuins', 'Your Little Suburbia is in Ruins', 'August Burns Red', 'Thrill Seeker',
'http://www.mydatabus.com/public/1212jtraceur/z/Your_Little_Surburbia_Is_In_Ruins-August_Burns_Red-Thrill_Seeker.mp3',
'http://www.avopolis.gr/core/reviews/august%20burns%20red%20cover.jpg');
songs[12] = suburbiaRuins;

var liarsenic = new Song('liarsenic', 'Liarsenic', 'Norma Jean', 'O God, The Aftermath',
'http://www.mydatabus.com/public/1212jtraceur/z/Liarsenic-Norma_Jean-O_God_The_Aftermath.mp3',
'http://www.lyricsforall.com/images/albums/1594467844NormaJean_OGodAftermath.jpg');
songs[13] = liarsenic;
/* ]]> */
</script>

<script type='text/javascript'>
window.onload = fillImagesDiv();
</script>

<style type="text/css">
/* kill default browser margins and defaults */
html, body {margin: 0; padding: 0;}
body
{
color: #fff;
background: #000;
margin: 10px;
}
div#container
{
float: left;
}
div#images
{
position: relative;
}
div#infoContainer
{
clear: both;
margin-top: 25px;
}
div.info
{
display: none;
}
div#playerContainer
{
height: 100%;
width: 250px;
float: right;
}
embed
{
display: none;
}
object.image
{
height: 90px;
width: 90px;
float: left;
margin: 10px;
overflow: hidden;
}
/* no unnecessary margins between outer edges of outer images and inner edge of div#images */
object.left
{
margin-left: 0;
/* ensures that image will be below previous row */
clear: left;
}
object.right {margin-right: 0;}
object.top {margin-top: 0;}
object.bottom {margin-bottom: 0;}

</style>
</head>

<body>

<div id="container">
<div id="images"></div>
</div>

<div id="playerContainer"></div>

<noscript>
<p>
Since your user agent (browser) appears to not support JavaScript or DOM, or you've disabled them, you're pretty much out of luck
(unless, of course, you did not wish to view this as I intended).
This page, like many others, relies on JavaScript and DOM for interactivity.
You can either catch up with the rest of the world and get a real browser like
<a href="http:www.mozilla.org/firefox/">Mozilla Firefox</a>,
or you can start trusting people and your common sense and re-enable JavaScript through your user agent preferences.
My apologies for sounding harsh if you currently happen to have little control over how you browse the Internet.
</p>
</noscript>
</body>

</html>