What is the logic of Lightbox 2 on where to position the popup?

Question

It seems that when using Firefox or Chrome it shows up in different places on different pages. Is there any setting to have it show at the same height on every page for consistency?

What is the CSS or logic it's using to determine positioning?

What lightbox 2, what framework (if any...)? I'm using one under jQuery - called lightbox 2 - and it is always centered (except on the iPhone). — jeroen, Oct 15 '09 at 03:13
Have you considered `"position: fixed; top: 100px;"`? The `fixed position` generates an absolutely positioned element, positioned relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties ... http://www.w3schools.com/Css/pr_class_position.asp — gahooa, Nov 27 '09 at 15:05

Residuum · Accepted Answer · 2009-11-26T14:38:18.117

In what way does it display on different places, what is your desired behaviour, and can you give a sample page?

Here is how the script itself calculates the top position of the popup (lightbox v2.04, zip download, js/lightbox.js, lines 229ff):

// calculate top and left offset for the lightbox 
var arrayPageScroll = document.viewport.getScrollOffsets();
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
var lightboxLeft = arrayPageScroll[0];
this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();

As the script uses Prototype's document.viewport object, the script positions the popups at 10% inside the current scroll position, like this:

------- page start
|
|
|
|
|
------- scroll position top
|
------- start of lightbox popup
|
|
|
|
|
|
|
|
------ scroll position bottom
|
|
|
|
------ page end

score 1 · Answer 2 · answered Jan 08 '12 at 13:16

I know this is a very old thread, but still top 5 google results. IE/FF gives me good results but Chrome doesn't. To get them all consistent,

line 231 of js/lightbox.js

var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);

was changed to

var lightboxTop = arrayPageScroll[1] + (100);

Not exactly what was requested, but the pages are consistent now.

Info taken from http://www.lokeshdhakar.com/forums/discussion/5494/fixed-display-position-problems-with-firefox-but-not-ie-on-tall-webpages/p1

I'm aware this doesn't answer the question above. Hope someone else finds it helpful for their own dev work — Wayne Evans, Jan 08 '12 at 13:18

score 1 · Answer 3 · edited Oct 28 '12 at 12:56

In line 231 at lightbox.js adjust division by 10 to 100 like this:

document.viewport.getHeight() / 100

Sample code:

    // calculate top and left offset for the lightbox 
    var arrayPageScroll = document.viewport.getScrollOffsets();
    var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 100); // 
    var lightboxLeft = arrayPageScroll[0];
    this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();

score 0 · Answer 4 · answered Nov 27 '09 at 15:01

0

You could try Flowplayer:

http://flowplayer.org/tools/demos/index.html

You can set the positioning and size of your overlay through the CSS file to wherever you want.

answered Nov 27 '09 at 15:01

tahdhaze09

2,220
1
21
36

score -2 · Answer 5 · answered Oct 15 '09 at 07:19

-2

#lightbox{
position: absolute;
top: 100px !important; /*I foxed it 100px from the top, you could fix it as much pixels as you wish*/
}

answered Oct 15 '09 at 07:19

jmav

3,119
4
27
27

1

the issue here is that if i have to scroll down on the page, it then shows the box off the screen. what i need is 100px relative to the top of the page now . . – leora Oct 15 '09 at 10:57

What is the logic of Lightbox 2 on where to position the popup?

5 Answers5

Linked