Javascript: Problems making client-side gallery dynamic

[dashy]

Hello,

I'm new here and new to web-coding in general - so you all know what you're dealing with here before I begin.

Okay, so I've been customizing a gallery (created with javascript and css, considered dhtml i think) for a personal website I've been developing (my first), and I seem to have some fundamental misconceptions regarding javascript's interaction with css.

What I'm trying to accomplish: Firstly, I am trying to keep from navigating to a different web page for any part of this gallery.

Specifics:
1. I have an image 'folder' section, on the web page, in which a click on a specific folder results in a change to the gallery being displayed by the javascript code (and in turn, hides all other folders' galleries). Unfortunately, depending on the order of the conditional statements I've created in the js file, the css style may appear without the images.

2. Also, after choosing to view the content of one folder, upon returning to view this folder's content a second time, all folders' galleries become hidden.


Specific #1 has to do with my inability to customize js code that was not intended to be dynamic in the way I am attempting to make it. And specific #2 is purely an example of my lack of knowledge of js.

Here is the javascript code (my addition is the function showHide(name); to have the code work as the original author intended, comment out my code and de-comment the one commented line within the init function (then change the html accordingly):


var gal = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
//if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
var li = document.getElementById('jgal').getElementsByTagName('li');
li[0].className = 'active';
for (i=0; i<li.length; i++) {
li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
li[i].title = li[i].getElementsByTagName('img')[0].alt;
gal.addEvent(li[i],'click',function() {
var im = document.getElementById('jgal').getElementsByTagName('li');
for (j=0; j<im.length; j++) {
im[j].className = '';
}
this.className = 'active';
});
}
},
addEvent : function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);
}
}
}
gal.addEvent(window,'load', function() {
gal.init();
});

//var current_gallery = 'jgal';

function showHide(name) {
//document.getElementById('jgal').id = current_gallery;
document.getElementById('the_bird_watch_content').style.display = 'none';
document.getElementById('mt_macedon_content').style.display = 'none';

if (name == 'bird_gallery')
{
document.getElementById('bird_gallery').id = 'jgal';
document.getElementById('the_bird_watch_content').style.display = 'block';
gal.init();
//current_gallery = 'bird_gallery';
}
else if (name == 'macedon_gallery')
{
document.getElementById('macedon_gallery').id = 'jgal';
document.getElementById('mt_macedon_content').style.display = 'block';
gal.init();
//current_gallery = 'macedon_gallery';
}
else return false;
}

Here is the portion of the html relevant to the query:


<div id="gallery_area">
<div class="folder">
<a href="#gallery_content" onClick="showHide('macedon_gallery')">
<img id="mt-macedon" src="Gallery Pics/Folder Pics/mt-macedon.jpg" alt="Mt. Macedon" />
</a>
<div class="desc">Mt. Macedon</div>
</div>
<div class="folder">
<a href="#gallery_content" onClick="showHide('bird_gallery')">
<img id="the-bird-watch" src="Gallery Pics/Folder Pics/the-bird-watch.jpg" alt="The Bird Watch" />
</a>
<div class="desc">The Bird Watch</div>
</div>
<div id="gallery_content">
<div id="the_bird_watch_content">
<div id="gallery_content_title">The Bird Watch</div>
<div id="scrollup_tab2"><a href="#picturebox">Back to the Gallery</a></div>
<ul id="bird_gallery">
<li><img src="Gallery Pics/the-seagull.jpg" alt="the seagull" /></li>
<li><img src="Gallery Pics/the-seagull.jpg" alt="the seagull" /></li>
<li><img src="Gallery Pics/the-seagull.jpg" alt="the seagull" /></li>
<li><img src="Gallery Pics/the-seagull.jpg" alt="the seagull" /></li>
<li><img src="Gallery Pics/the-seagull.jpg" alt="the seagull" /></li>
<li><img src="Gallery Pics/the-seagull.jpg" alt="the seagull" /></li>
<li><img src="Gallery Pics/the-seagull.jpg" alt="the seagull" /></li>
<li><img src="Gallery Pics/the-seagull.jpg" alt="the seagull" /></li>
<li><img src="Gallery Pics/the-seagull.jpg" alt="the seagull" /></li>
<li><img src="Gallery Pics/the-seagull.jpg" alt="the seagull" /></li>
</ul>
</div>
<div id="mt_macedon_content">
<div id="gallery_content_title">Mt. Macedon</div>
<div id="scrollup_tab2"><a href="#picturebox">Back to the Gallery</a></div>
<ul id="macedon_gallery">
<li><img src="Gallery Pics/harbison-picnic-ground.jpg" alt="the seagull" /></li>
<li><img src="Gallery Pics/harbison-picnic-ground.jpg" alt="the seagull" /></li>
<li><img src="Gallery Pics/harbison-picnic-ground.jpg" alt="the seagull" /></li>
<li><img src="Gallery Pics/harbison-picnic-ground.jpg" alt="the seagull" /></li>
<li><img src="Gallery Pics/harbison-picnic-ground.jpg" alt="the seagull" /></li>
<li><img src="Gallery Pics/harbison-picnic-ground.jpg" alt="the seagull" /></li>
<li><img src="Gallery Pics/harbison-picnic-ground.jpg" alt="the seagull" /></li>
<li><img src="Gallery Pics/harbison-picnic-ground.jpg" alt="the seagull" /></li>
<li><img src="Gallery Pics/harbison-picnic-ground.jpg" alt="the seagull" /></li>
<li><img src="Gallery Pics/harbison-picnic-ground.jpg" alt="the seagull" /></li>
</ul>
</div>
</div>
</div>

And lastly, the css (although the problem isn't really residing here):


.folder {
height: auto;
width: auto;
display: inline-block;
text-align: center;
margin-top: 5px;
}
.folder img {
border: 4px solid #fff;
outline: 2px solid #d6aeae;
margin-right: 21px;
}
.folder a:hover img {
outline: 2px solid #7b7b7b;
}
.desc {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
font-weight: bold;
color: #5a5a5a;
width: 180px;
margin: 2px;
}

/*content area content area content area*/

#gallery_content {
position: relative;
left: -10px;
width: 888px;
background: #ffffff;
margin-top: 25px;
margin-bottom: 10px;
display: inline-block;
}
#scrollup_tab2 a {
position: relative;
float: right;
top: -60px;
font-family: Georgia, DejaVu Serif, Verdana, Arial, Helvetica, sans-serif;
color: #d6aeae;
font-weight: normal;
font-size: 125%;
text-decoration: none;
}
#scrollup_tab2 a:hover {
color: #7b7b7b;
}
#gallery_content_title {
font-family: Georgia, Verdana, Arial, Helvetica, sans-serif;
text-align: center;
font-weight: normal;
font-size: 175%;
color: #7b7b7b;
margin-top: 5px;
margin-bottom: 10px;
}
/* styling for gallery content */
* { margin: 0; padding: 0; }

#jgal {
list-style: none;
width: 200px;
margin-left: 20px;
}
#jgal li {
opacity: .5;
float: left;
display: block;
width: 60px;
height: 60px;
background-position: 50% 50%;
cursor: pointer;
border: 3px solid #fff;
outline: 1px solid #ddd;
margin-right: 14px;
margin-bottom: 14px;
}
#jgal li img {
position: absolute;
top: 35px;
left: 220px;
display: none;
}
#jgal li.active img {
display: block;
border: 3px solid #fff;
outline: 1px solid #d6aeae;
}
#jgal li.active, #jgal li:hover {
outline-color: #d6aeae;
opacity: .99 /* safari bug */
}

/* styling without javascript */
#gallery {
list-style: none;
display: block;
}
#gallery li {
float: left;
margin: 0 10px 10px 0;
}

/*Picture Gallery Display*/
#the_bird_watch_content {
display: none;
}
#mt_macedon_content {
display: none;
}


And really, thank you so very much to anyone who has read this far, much less chooses to help me sort out this mess.

[dashy]

Problem solved. In case anyone was wondering what the issue was:

I had solved the problem with what I left commented out in my new function showHide(), however, I needed a conditional statement in the beginning of the function to deal with the issue of document.getElementByID('jgal') not existing at runtime. The critical misconception I had with javascript was that any code pertaining to non-existent elements voids the remainder of the function; thus, a run-time error I believe.

If anyone has any suggestions as to how I could have coded this more elegantly, I'd appreciate the input. For now though, I'm just happy to have solved my issue.

Thanks to all those who have read!