Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Dynam. created img displays in Firefox, but not IE

Reply
Thread Tools

Dynam. created img displays in Firefox, but not IE

 
 
david.karr
Guest
Posts: n/a
 
      05-19-2008
I have a simple app I'm writing as a learning exercise. It displays a
collection of thumbnail images, but the HTML also defines a full-size
version of the image, along with a block of caption text for the
image. When certain actions occur on the thumbnail image (just
mouseover for now), a div is dynamically created which contains the
full-size image and the caption block, and this div is appended to a
div that lies below the thumbnail collection.

This is working fine in Firefox2, but for reasons I can't understand,
in IE6 the dynamically created div containing the full-size image and
the caption only shows the caption, not the image.

I installed firebug-lite, and during the dynamic div creation I log
the image URL and the width and height. This shows the URL I expect,
but in IE the width and height are 0. I even tried manually setting
the width and height of the image in the HTML to non-zero, but IE
still thinks it's zero. I also tried a simple-minded image pre-load
technique (http://www.netmechanic.com/news/vol3/loadtime_no6.htm), but
that had no effect.

So, what browser incompatibility issue have I overlooked, and how can
I resolve it?

I'm enclosing my HTML page (excerpted), along with my js and css
files. I'm not attaching the image files I'm using.

----------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Image Gallery</title>
<link rel="stylesheet" type="text/css" href="gallery.css">
<script type="text/javascript" src="yui/yahoo-dom-event/yahoo-
dom-event.js"></script>
<script type="text/javascript" src="yui/element/element-beta-
min.js"></script>
<script type="text/javascript" src="firebug/firebug.js"></
script>
<script type="text/javascript" src="gallery.js"></script>
<script type="text/javascript">
var img1 = new Image();
img1.src = "images/belongingsoutside.jpg";
</script>
</head>
<body>
<div id="gallery">
<div id="shoebox">
<div class="photopair">
<div class="thumbnail">
<img src="images/belongingsoutsidet.jpg"/>
</div>
<div class="fullsize">
<img src="images/belongingsoutside.jpg" width="10" height="10"/>
</div>
<div class="caption">
Some text ...
</div>
</div>
<div class="photopair">
<div class="thumbnail">
<img src="images/homemovingt.jpg"/>
</div>
<div class="fullsize">
<img src="images/homemoving.jpg"/>
</div>
<div class="caption">
Some text ...
</div>
</div>
</div>
<div id="lightbox"></div>
</div>
<script type="text/javascript">
YAHOO.util.Event.onDOMReady(YAHOO.gallery.init);
</script>
</body>
</html>
----------------

----------------
YAHOO.namespace("gallery");

var $E = YAHOO.util.Event;
var $D = YAHOO.util.Dom;

YAHOO.gallery.init =
function ()
{
// thumbnails have black border by default, yellow while
hovering, and
// green if locked into lightbox.
var thumbnails = $D.getElementsByClassName("thumbnail");
$E.on(thumbnails, "mouseover",
function (evt)
{
// sticky flag says whether fullsize is locked into
lightbox.
if (!this.sticky)
{
$D.getFirstChild(this).style.borderColor =
"yellow";
var fullsize = $D.getNextSibling(this);
var caption = $D.getNextSibling(fullsize);
//var captiontext = $D.getFirstChild(caption);
var captiontext = caption.innerHTML;
var imgelem = $D.getFirstChild(fullsize);
var fullsizediv = document.createElement("div");
// Attach fullsizediv to thumbnail so we can
remove it
// from lightbox later.
this.fullsizediv = fullsizediv;
var fullsizeimage =
document.createElement("img");
fullsizeimage.src = imgelem.src;
console.log("src[" + fullsizeimage.src + "]");
fullsizeimage.width = imgelem.width;
fullsizeimage.height = imgelem.height;
console.log("width.height[" +
fullsizeimage.width + "." + fullsizeimage.height + "]");
fullsizediv.appendChild(fullsizeimage);

fullsizediv.appendChild(document.createElement("br "));

fullsizediv.appendChild(document.createTextNode(ca ptiontext));
var lightbox = new
YAHOO.util.Element("lightbox");
lightbox.appendChild(fullsizediv);
}
});
$E.on(thumbnails, "mouseout",
function (evt)
{
// sticky flag says whether fullsize is locked into
lightbox.
if (!this.sticky)
{
$D.getFirstChild(this).style.borderColor =
"black";
var fullsizediv = this.fullsizediv;
var lightbox = new
YAHOO.util.Element("lightbox");
lightbox.removeChild(fullsizediv);
}
else
$D.getFirstChild(this).style.borderColor =
"green";
});
$E.on(thumbnails, "click",
function (evt)
{
this.sticky = !this.sticky;
$D.getFirstChild(this).style.borderColor =
(this.sticky ? "green" : "yellow");
});
}
----------------

----------------
..photopair, .thumbnail
{
display:inline;
}
..thumbnail img
{
border: 3px solid;
border-color: black;
}
#shoebox .fullsize
{
display:none;
}
#shoebox .caption
{
display:none;
}
#shoebox
{
border: 1px black solid
}
----------------
 
Reply With Quote
 
 
 
 
david.karr
Guest
Posts: n/a
 
      05-20-2008
I'm still struggling with this. I even tried adding an image
preloader (http://warpspire.com/tipsresources/interface-scripting/
image-preloading-revisited/), but the images still do not display in
IE, and it thinks the width/height of them is zero.

However, when I changed my CSS so the previously hidden fullsize
images in the shoebox were now set to "display:inline", the copy of
the element into the lightbox shows up the image.

So, in Firefox, whether I preload the image or not, it shows up fine
when I dynamically create it. In IE, the dynamically created image
element doesn't show up, whether I preload the image or not.

I also tried manually setting both the fullsize div and img to
"display:inline" after creating them, but that had no effect.
 
Reply With Quote
 
 
 
 
david.karr
Guest
Posts: n/a
 
      05-20-2008
Ok, I've found a solution. In my original code, I thought I should
set the "width" and "height" of the created img to reflect the width &
height of the img element I was copying from. I tried removing those
assignments, and that made it work. It almost seems like IE doesn't
know what the width & height of the image is until after it's
rendered, even if the image is preloaded.

Can anyone provide any more background to this?
 
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
IE8 img scr="" displays a red X christy ASP .Net 3 07-27-2009 01:07 PM
putting img above/bellow img ? Jopek HTML 7 04-26-2009 10:26 PM
Problem: <img></img> Philipp Lenssen XML 15 07-03-2005 09:23 AM
how to download img from html img tag news.austin.rr.com ASP .Net 2 04-27-2005 06:25 PM
Classic asp date displays- changing over to aspnet date object displays Chumley Walrus ASP .Net 1 12-16-2004 09:57 PM



Advertisments