Location of Facebox viewer on screen changes on scrolling page

[aharvey]

1) Script Title: Facebox image and content viewer 1.1

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/facebox/index.htm

3) Describe problem: I have a page with many thumbnail images of personnel, in different categories, that require you to scroll to see them all. The thumbnails are Facebox-enabled. When you click on any of the thumbnails in the top of the page, the viewer appears just where you'd like them to be (i.e., centered from left to right, 100ish px from the top). However, as soon as you start scrolling down the page, the location of any viewer you then open starts dropping down the screen, before long disappearing altogether. I don't see anywhere in either the CSS or the javascript that would explain this; changing the #facebox position from absolute to fixed keeps an open viewer in the same screen position when you scroll, but doesn't keep any subsequent viewers from appearing lower on the screen. This is easier to show than to describe:

http://www.bio.georgiasouthern.edu/bio-home/Harvey/sandbox/faceboxtest.html

Click on a link, see the viewer. Scroll down the page, then click on another link. See the viewer now!

I've combined the script with DD Scrollspy, but the problem existed before I added the scrollspy script.

Any insights would be greatly appreciated!

Cheers,

Alan

[vwphillips]

You have




#facebox
{
position: fixed;
z-index: 100;
text-align: center;
top: 10px;
right: -100px;
}



the DD page has



#facebox {
position: absolute;
width: 100%;
top: 0;
left: 0;
z-index: 100;
text-align: left;
}



I agree that it makes more sence to use fixed but that is not what the script requires

to use fixed

modify this function(red)


// getPageScroll() by quirksmode.com
$.facebox.getPageScroll = function() {
var xScroll, yScroll;
if (self.pageYOffset) {
yScroll = self.pageYOffset;
xScroll = self.pageXOffset;
} else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
yScroll = document.documentElement.scrollTop;
xScroll = document.documentElement.scrollLeft;
} else if (document.body) {// all other Explorers
yScroll = document.body.scrollTop;
xScroll = document.body.scrollLeft;
}
return new Array(xScroll,0)// scroll y is 0
}




better

new option in red


(function($) {
$.facebox = function(data, klass) {
$.facebox.init()
$.facebox.loading()
$.isFunction(data) ? data.call($) : $.facebox.reveal(data, klass)
}

$.facebox.settings = {
fixed:true,
loading_image : 'facefiles/loading.gif',
close_image : 'facefiles/closelabel.gif',
image_types : [ 'png', 'jpg', 'jpeg', 'gif' ],
facebox_html : '\
<div id="facebox" style="display:none;"> \
...............


and modify function (in red)


$.facebox.loading = function() {
if ($('#facebox .loading').length == 1) return true

$('#facebox .content').empty()
$('#facebox .body').children().hide().end().
append('<div class="loading"><img src="'+$.facebox.settings.loading_image+'"/></div>')

var pageScroll = $.facebox.getPageScroll()
$('#facebox').css({
top: ($.facebox.settings.fixed?0:pageScroll[1]) + ($.facebox.getPageHeight() / 10),
left: ($.facebox.settings.fixed?0:pageScroll[0])
}).show()

$(document).bind('keydown.facebox', function(e) {
if (e.keyCode == 27) $.facebox.close()
})
}

$.facebox.reveal = function(data, klass) {
if (klass) $('#facebox .content').addClass(klass)
$('#facebox .content').append(data)
$('#facebox .loading').remove()
$('#facebox .body').children().fadeIn('normal')
}

$.facebox.close = function() {
$(document).trigger('close.facebox')
return false
}

[aharvey]

Vic,

Ah, that first step worked (just saw your revision, which I'll try next). Embarrassingly, I had that very pageScroll function staring at me in BBEdit and I failed to notice how it was assigning the y-coordinates. Look forward to trying the second solution.

Thanks very much!

Cheers,

Alan