dynamic HTML cross-browser

[Aaron Gervais]

I am brand-new to javascript, but after reading some tutorials online I
was able to make a dynamic HTML photo gallery in javascript. It works
fine in all browsers except IE6 (big surprise). I've been looking
around online for solutions, but the fixes I have seen don't seem to
work. I assume I am misunderstanding something... I was using
element.setAttribute but have changed my code to avoid that. Here is an
example. IE6 displays the link text but doesn't do anything else--exact
same result I had by using element.setAttribute('name', 'value').

Any suggestions would be appreciated.
Thx,
Aaron

// scope workaround
function addClick(parent, index)
{
parent.onclick = function() { getThumbs(index); };
}

// make a link for each gallery
function makeButtons()
{
obj = document.getElementById("pgallery");
galholder = document.createElement("div");
galholder.className = "galleries";
for ( i = 0; i < gallerylist.length; i++ )
{
nd = document.createElement("a");
nd.className = "media";
nd.style.cursor = "pointer";
addClick(nd, i);
text = document.createTextNode(gallerylist[1]);
nd.appendChild(text);
galholder.appendChild(nd);
}
obj.appendChild(galholder);
spacer = document.createElement("div");
spacer.className = "picspacer";
obj.appendChild(spacer);
}

 

[RobG]

I am brand-new to javascript, but after reading some tutorials online I
was able to make a dynamic HTML photo gallery in javascript. It works
fine in all browsers except IE6 (big surprise). I've been looking
around online for solutions, but the fixes I have seen don't seem to
work. I assume I am misunderstanding something... I was using
element.setAttribute but have changed my code to avoid that. Here is an
example. IE6 displays the link text but doesn't do anything else--exact
same result I had by using element.setAttribute('name', 'value').

Any suggestions would be appreciated.

Don't post code with tabs. Use 2 or 4 spaces for indents and manually
wrap code at about 70 characters to prevent auto-wrapping (which
introduces errors and makes assistance a chore).

Thx,
Aaron

// scope workaround
function addClick(parent, index)
{
parent.onclick = function() { getThumbs(index); };

I think your problem is with getThumbs(). Change the onclick to
something trivial:

parent.onclick = function() { alert('Hey ' + index); return false; };

If that works, then your issue is with getThumbs(). Since the onclick
is on an A element, your function should return false to cancel
navigation (see below):

parent.onclick = function() {
getThumbs(index);
return false;
};

}

// make a link for each gallery
function makeButtons()
{
obj = document.getElementById("pgallery");
galholder = document.createElement("div");
galholder.className = "galleries";
for ( i = 0; i < gallerylist.length; i++ )
{
nd = document.createElement("a");
nd.className = "media";
nd.style.cursor = "pointer";

A elements already have a default cursor of pointer.

addClick(nd, i);
text = document.createTextNode(gallerylist[1]);
nd.appendChild(text);

You should give your A an href value that links to the image so that
users without JavaScript can still see it. Have your onclick return
false to prevent those with JS enabled from following the link.

galholder.appendChild(nd);
}
obj.appendChild(galholder);
spacer = document.createElement("div");
spacer.className = "picspacer";
obj.appendChild(spacer);

Spacing should be done with CSS, not with 'spacer' elements. You are
also creating a heap of global variables which may get you into trouble,
especially with counters like 'i'. To keep variables local, declare
them inside functions using the 'var' keyword, e.g.:

var obj = document.getElementById("pgallery");
var galholder = document.createElement("div");

}

Here's a small test:

<script type="text/javascript">
function addClick ( el ){
el.onclick = function() { alert('hi from blah'); return false;};
}
function addA ( el ) {
var x = document.createElement('A');
x.appendChild(document.createTextNode('blah'));
x.href = 'http://www.apple.com';
addClick( x );
document.getElementById('toMe').appendChild(x);
}
</script>

<div onclick="addA(this);">click me<br></div>
<div id="toMe"></div>

 

[Aaron Gervais]

All I needed was "return false;". getThumbs() worked fine after that. I
don't quite understand why I need to put return false in there,
however... Thanks about the variable scope--I thought the opposite was
true. div.spacer is simply set to {clear:both} in the css file, and I
use it to prevent the floating thumbnails from starting on the same
line as the floating gallery links. If you can suggest a better
solution, I'm all ears.

Aaron

 

[RobG]

All I needed was "return false;". getThumbs() worked fine after that. I
don't quite understand why I need to put return false in there,

It cancels nagivation via the href - IE has a few odd behavious with A
elements, I'll assume the lack of an href was causing an problem.

however... Thanks about the variable scope--I thought the opposite was
true. div.spacer is simply set to {clear:both} in the css file, and I
use it to prevent the floating thumbnails from starting on the same
line as the floating gallery links. If you can suggest a better
solution, I'm all ears.

Please quote what you are replying to and trim any excess.

The above is not really a javascript question, it should be asked at:

comp.infosystems.www.authoring.stylesheets

Anyhow, there are a thousand ways of skinning a cat. I can't see your
markup or layout, so I have no idea what a potential fix may be. But
your page should work with CSS disabled, if you are dependent on spacer
divs as above, it isn't.

I'll take a guess that your links have a thumbnail above with text below
and are centered in some element. Try the following example, the
gallery div can be set to any width and if the body has 'text-align:
center;' it will float in the middle (unless there are competing
elements...). The thumbs and links float in the middle of the div.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Show random matrix</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function doStuff( x ) {
if ( x.blur ) x.blur();
return confirm('Navigate to ' + x.href + '?');
}
</script>

<style type="text/css">
body {
background-color: #000000;
color: gold;
}
#gallery {
margin-top: 0;
padding: 0;
text-align: center;
width: 10em;
}
#gallery img {
margin-top: 30px;
text-decoration: none;
border: 2px solid gold;
}

#gallery a {
color: gold;
font-style: italic;
text-decoration: none;
}
#gallery a:active {color: gold;}
#gallery a:visited {color: gold;}
#gallery a:hover {color: red;}

</style>
</head>
<body>
<div id="gallery">
<a href="http://www.apple.com"
onclick="return doStuff(this);"><img
src="a.gif" alt="Go to Apple"><br>Apple
</a><br>
<a href="http://www.Google.com"
onclick="return doStuff(this)"><img
src="a.gif" alt="Go to Google"><br>Google
</a><br>
<a href="http://www.Yahoo.com"
onclick="return doStuff(this);"><img
src="a.gif" alt="Go to Yahoo"><br>Yahoo
<br></a>
</div>
</body></html>