Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > dynamic HTML cross-browser

Reply
Thread Tools

dynamic HTML cross-browser

 
 
Aaron Gervais
Guest
Posts: n/a
 
      07-18-2005
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[i][1]);
nd.appendChild(text);
galholder.appendChild(nd);
}
obj.appendChild(galholder);
spacer = document.createElement("div");
spacer.className = "picspacer";
obj.appendChild(spacer);
}

 
Reply With Quote
 
 
 
 
RobG
Guest
Posts: n/a
 
      07-18-2005
Aaron Gervais wrote:
> 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[i][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>




--
Rob
 
Reply With Quote
 
 
 
 
Aaron Gervais
Guest
Posts: n/a
 
      07-18-2005
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

 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      07-18-2005
Aaron Gervais wrote:
> 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>

--
Rob
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
firefox html, my downloaded html and firebug html different? Adam Akhtar Ruby 9 08-16-2008 07:55 PM
how can I validate html produced by ajax (asynchronous dynamic html)? zzzbla@gmail.com HTML 7 05-13-2006 11:43 AM
VPN between 2 Cisco routers (1 static, 1 dynamic) with access from stat --> dynamic over ISDN Hans-Peter Walter Cisco 3 01-21-2004 02:12 PM
Does Pix or cisco router support dynamic-to-dynamic IPSec VPN? c Cisco 2 01-13-2004 01:53 AM
Re: Dynamic Table with Dynamic LinkButtons Rick Glos ASP .Net 0 07-08-2003 01:09 PM



Advertisments