Contents vanish when changing opacity of table (IE)

Discussion in 'Javascript' started by chris@chrisbeach.co.uk, Nov 4, 2005.

  1. Guest

    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.AlphaImageLoader(src='/core/images/arrow.png',
    sizingMethod='crop') }
    ..arrowRight {
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(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/scripts/entryViewer.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.objElement.style.MozOpacity != null)
    { arrowArray.objElement.style.MozOpacity = arrowAlpha; }
    if ( arrowArray.objElement.style.opacity != null)
    { arrowArray.objElement.style.opacity = arrowAlpha; }
    if ( arrowArray.objElement.style.filter != null)
    {
    var ieOpacity = Math.round( arrowAlpha * 100 );
    arrowArray.objElement.style.filter =
    "progid:DXImageTransform.Microsoft.Alpha(opacity=" + ieOpacity + ")";
    }
     
    , Nov 4, 2005
    #1
    1. Advertising

  2. Guest

    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, 2005
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Greg
    Replies:
    0
    Views:
    680
  2. Angus Parvis
    Replies:
    0
    Views:
    618
    Angus Parvis
    Aug 26, 2004
  3. Per Magnus L?vold
    Replies:
    1
    Views:
    5,137
    John C. Bollinger
    Oct 8, 2004
  4. F. GEIGER
    Replies:
    2
    Views:
    355
    F. GEIGER
    Sep 30, 2003
  5. Sura

    Problem with changing opacity

    Sura, Jul 4, 2005, in forum: Javascript
    Replies:
    0
    Views:
    86
Loading...

Share This Page