[Proto-Scripty] document.write() vs Element/appendChild()

[fma]

I'm writing a javascript object to build a widget (which is reused in
several pages).

I first used document.write to create a few div. Then, I switched to
Element to directly create the DOM. But in this last case, things
don't work find under IE (but all is OK with Firefox). The problem is
when I try to set the propertied of that divs from my javascript
controller: it seems that using DOM, the position (fixed/absolute) is
not well understood under IE.

Here is my code:

var ImageFullSimpleView = Class.create(AbstractView, {
    // View for full size image with only navigation buttons
    //
    initialize: function($super) {
        $super("fullSimple");
    },

    createWidgets: function($super) {

        // Create widgets
        document.write("<div id=\"" + this._name + "_mask\" class=
\"fullMask\"></div>\n");
        document.write("<div id=\"" + this._name + "_content\" class=
\"fullContent\">\n");
        document.write("    <img id=\"" + this._name + "_image\" class=
\"fullImage\" />\n");
        document.write("    <div id=\"" + this._name + "_prevButton\"
class=\"fullPrevButton\"></div>\n");
        document.write("    <div id=\"" + this._name + "_nextButton\"
class=\"fullNextButton\"></div>\n");
        document.write("    <div id=\"" + this._name + "_hideButton\"
class=\"fullHideButton\"></div>\n");
        document.write("</div>\n");

        // Create bindings for widgets
        this.mask = $(this._name + "_mask");
        this.content = $(this._name + "_content");
        this.image = $(this._name + "_image");
        this.prevButton = $(this._name + "_prevButton");
        this.nextButton = $(this._name + "_nextButton");
        this.hideButton = $(this._name + "_hideButton");

//         // Create widgets using DOM (doesn't work well with IE)
//         this.mask = new Element('div', {'id': this._name + "_mask",
'class': "fullMask"});
//         document.body.appendChild(this.mask);
//         this.content = new Element('div', {'id': this._name +
"_content", 'class': "fullContent"});
//         document.body.appendChild(this.content);
//         this.image = new Element('img', {'id': this._name +
"_image", 'class': "fullImage"});
//         this.content.appendChild(this.image);
//         this.prevButton = new Element('div', {'id': this._name +
"_prevButton", 'class': "fullPrevButton"});
//         this.content.appendChild(this.prevButton);
//         this.nextButton = new Element('div', {'id': this._name +
"_nextButton", 'class': "fullNextButton"});
//         this.content.appendChild(this.nextButton);
//         this.hideButton = new Element('div', {'id': this._name +
"_hideButton", 'class': "fullHideButton"});
//         this.content.appendChild(this.hideButton);

        this.mask.hide();
        this.content.hide();
    },

});

The CSS is:

.fullMask {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.75;
    filter: alpha(opacity=75);
    z-index: 2;
}

.fullContent {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 3;
}

.fullImage {
    border: 10px solid white;
    z-index: 4;
}

/* Common settings for navigation buttons */
.fullPrevButton, .fullNextButton, .fullHideButton {
    position: absolute;
    height: 100px;
    width: 100px;
    z-index: 5;
    cursor: default;
    opacity: 0;
    filter: alpha(opacity=0);
    background-repeat: no-repeat;
    background-position: center center;
}

.fullPrevButton {
    top: 50%;
    margin-top: -50px;
    right: 50%;
    margin-right: 50px;
    background-image: url("/icons/default/button-left.png");
}

.fullNextButton {
    top: 50%;
    margin-top: -50px;
    left: 50%;
    margin-left: 50px;
    background-image: url("/icons/default/button-right.png");
}

.fullHideButton {
    top: 50%;
    margin-top: 25px;
    left: 50%;
    margin-left: -50px;
    background-image: url("/icons/default/button-hide.png");
}

--

You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to 
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en.