Android 中调整窗口大小时,灯箱从视图中消失
灯箱显示在右侧位置(顶部/左侧居中),但是当用户缩放时; lightobx 保持在相同位置(不考虑窗口/视图已调整大小/裁剪),
您可以在此处测试 单击标题的蓝色按钮,
我正在检查灯箱的代码,并且,我可以看到
$(window).bind('resize', $.proxy(function() {
if (this.visible)
{
this.overlay.resize();
if (!this.maximized) {
this.movebox();
}
}
}, this));
MOVEBOX() 在哪里:
function(w, h) {
var size = { x: $(window).width(), y: $(window).height() };
var scroll = { x: $(window).scrollLeft(), y: $(window).scrollTop() };
var height = h!=null ? h : this.esqueleto.lightbox.outerHeight();
var width = w!=null ? w : this.esqueleto.lightbox.outerWidth();
var y = 0;
var x = 0;
//vertically center
x = scroll.x + ((size.x - width) / 2);
if (this.visible) {
y = scroll.y + (size.y - height) / 2;
} else if (this.options.emergefrom == "bottom") {
y = (scroll.y + size.y + 14);
} else {// top
y = (scroll.y - height) - 14;
}
if (this.visible) {
if (!this.animations.move) {
this.morph(this.esqueleto.move, {
'left' : x
}, 'move');
}
this.morph(this.esqueleto.move, {
'top' : y
}, 'move');
} else {
this.esqueleto.move.css({
'left' : x,
'top' : y
});
}
}
问题是:如何正确计算新高度和新高度,以便灯箱遵循android 中的 srcoll/zoom (在 iphone 中它也会移动一点)
the lightbox is shown in the right position (top/left centered), but when users zoom; the lightobx stays in the same position (without considering the window/view has been resized/cropped),
You can test this here clicking in the blue button of the header
I am checking at the code of lightbox, and, i can see
$(window).bind('resize', $.proxy(function() {
if (this.visible)
{
this.overlay.resize();
if (!this.maximized) {
this.movebox();
}
}
}, this));
WHERE MOVEBOX() IS:
function(w, h) {
var size = { x: $(window).width(), y: $(window).height() };
var scroll = { x: $(window).scrollLeft(), y: $(window).scrollTop() };
var height = h!=null ? h : this.esqueleto.lightbox.outerHeight();
var width = w!=null ? w : this.esqueleto.lightbox.outerWidth();
var y = 0;
var x = 0;
//vertically center
x = scroll.x + ((size.x - width) / 2);
if (this.visible) {
y = scroll.y + (size.y - height) / 2;
} else if (this.options.emergefrom == "bottom") {
y = (scroll.y + size.y + 14);
} else {// top
y = (scroll.y - height) - 14;
}
if (this.visible) {
if (!this.animations.move) {
this.morph(this.esqueleto.move, {
'left' : x
}, 'move');
}
this.morph(this.esqueleto.move, {
'top' : y
}, 'move');
} else {
this.esqueleto.move.css({
'left' : x,
'top' : y
});
}
}
question is: how can I properly calculate new height and new with so the lightbox follows srcoll/zoom in android (and also in iphone it moves a bit)
我在 move() element on window.resize( ) 函数在 Android 上不起作用 可能会为您提供一些关于该主题的信息。我猜您在使用scrollLeft() 时遇到了某种问题。
悲伤的时刻:(
My answer at move() element on window.resize() function not working on Android might shed some light on the subject for you. I'm guessing you're running into some sort of problem with scrollLeft().
Sad times :(