By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,851 Members | 974 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,851 IT Pros & Developers. It's quick & easy.

Contents vanish when changing opacity of table (IE)

P: n/a
I've used JavaScript DOM scripting to create a table element and alter
its opacity. Bizarrely, the contents of the table appear to vanish when
the opacity changes.

One important note is that I am using transparent PNGs as background
images of elements within the table. The following CSS is used to style
two elements within the table:

..arrowLeft {
filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader(src='/core/images/arrow.png',
sizingMethod='crop') }
..arrowRight {
filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader(src='/core/images/arrowRight.png',
sizingMethod='crop') }

Is the vanishing problem a bug in Internet Explorer? And if so, I'd be
grateful if you could help me find a workaround.

In the example on the URL below, the beige arrows on the photo are the
tables in question, and you will observe their contents vanishing when
you mouse in and out of the photo (which should fade them in and out).

http://testing.chrisbeach.co.uk/core...er.php?ID=6572

Below are snippets of code used to create the tables and their contents
(which form the arrows), and also the code used to alter the opacity:

// Creating the table (arrow) and contents
function Arrow( user, coords )
{
this.user = user;
this.coords = coords;
var objArrowContainer = document.createElement( 'table' );
var objTableBody = document.createElement( 'tbody' );
var objArrowRow = document.createElement( 'tr' );
var objArrowLeft = document.createElement( 'td' );
var objArrowRight = document.createElement( 'td' );
if ( this.user.imageURL )
{
var objIcon = new Image();
objIcon.src = ( this.user.imageURL.substring( 0, 7 ) == 'http://' ) ?

this.user.imageURL : domain + this.user.imageURL;
objArrowLeft.appendChild( objIcon );
}
objArrowLeft.className = 'arrowLeft';
objArrowRight.className = 'arrowRight';
objArrowContainer.className = 'arrowContainer';
objArrowLeft.appendChild( document.createTextNode( this.user.forename
) );
objArrowRight.appendChild( document.createTextNode( " " ) );
objArrowRow.appendChild( objArrowLeft );
objArrowRow.appendChild( objArrowRight );
objTableBody.appendChild( objArrowRow );
objArrowContainer.appendChild( objTableBody );
objArrowContainer.id = this.user.username;
objArrowContainer.onmousedown = function( e )
{
objDragged = objArrowContainer;
docMouseMove( e );
return false;
};
objArrowContainer.style.left = ( coords.x + ARROW_OFFSET.x ) + "px";
objArrowContainer.style.top = ( coords.y + ARROW_OFFSET.y ) + "px";
this.objElement = objArrowContainer;
}
// Altering the opacity

if ( arrowArray[i].objElement.style.MozOpacity != null)
{ arrowArray[i].objElement.style.MozOpacity = arrowAlpha; }
if ( arrowArray[i].objElement.style.opacity != null)
{ arrowArray[i].objElement.style.opacity = arrowAlpha; }
if ( arrowArray[i].objElement.style.filter != null)
{
var ieOpacity = Math.round( arrowAlpha * 100 );
arrowArray[i].objElement.style.filter =
"progid:DXImageTransform.Microsoft.Alpha(opaci ty=" + ieOpacity + ")";
}

Nov 4 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
I've just tried adapting the code to add the AlphaImageLoader every
time the opacity changes -- this hasn't worked. The content of the
table still disappears

any suggestions?

Nov 4 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.