I use highslide to popup. I would like to have a stable position popup.
I tried:
hs.marginTop="120";
It works when I have a lot of text... When text is short, popup pops random. Usually at the right-bottom
My code:
hs.graphicsDir = "./includes/highslide/graphics/";
hs.outlineType = "rounded-white";
hs.wrapperClassName = "draggable-header";
hs.marginTop="120";
$(function() {
var dialog=$(".siteText").html();
$("#highslide-html .highslide-body").html(dialog);
if(!$(".highslide-body").is(":empty"))
{
hs.htmlExpand(this, { contentId: \'highslide-html\' } )
}
});
HTML:
<div class="highslide-html-content" id="highslide-html" style="width:950px;color:black;">
<div class="highslide-header">
<ul>
<li class="highslide-close">
<a href="#" title="Close (esc)" onclick="return hs.close(this)"><span>Close</span></a>
</li>
</ul>
</div>
<div class="highslide-body">
</div>
<div class="highslide-footer">
<div>
<span class="highslide-resize" title="Resize">
<span></span>
</span>
</div>
</div>
</div>
EDIT: It works... But is very ugly effect... Popup jumps. First is at the bottom, then jumps to top.
if (!hs.ie || hs.uaVersion > 6) hs.extend ( hs.Expander.prototype, {
fix: function(on) {
var sign = on ? -1 : 1,
stl = this.wrapper.style;
if (!on) hs.getPageSize(); // recalculate scroll positions
hs.setStyles (this.wrapper, {
position: "fixed",
zoom: 1, // IE7 hasLayout bug,
left: (parseInt(stl.left) + sign * hs.page.scrollLeft) +"px",
top: "125px"
});
if (this.outline) {
stl = this.outline.table.style;
hs.setStyles (this.outline.table, {
position: "fixed",
zoom: 1, // IE7 hasLayout bug,
left: (parseInt(stl.left) + sign * hs.page.scrollLeft) +"px",
top: "120px"
});
}
this.fixed = on; // flag for use on dragging
},
onAfterExpand: function() {
this.fix(true); // fix the popup to viewport coordinates
},
onBeforeClose: function() {
this.fix(false); // unfix to get the animation right
},
onDrop: function() {
this.fix(true); // fix it again after dragging
},
onDrag: function(sender, args) {
if (this.fixed) { // only unfix it on the first drag event
this.fix(true);
}
}});
THX :)
Using hs.marginTop is not going to work. What you're after is hs.targetX and hs.targetY. These let you position the popup in a fixed position, no matter what. See the API: http://highslide.com/ref/hs.targetX. Pay attention to the requirement for a target "div" with an ID on it - it can be just an empty placeholder, but it has to exist.