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 [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
