Results 1 to 3 of 3

Thread: Location of Facebox viewer on screen changes on scrolling page

  1. #1
    Join Date
    Jul 2005
    Thanked 0 Times in 0 Posts

    Default Location of Facebox viewer on screen changes on scrolling page

    1) Script Title: Facebox image and content viewer 1.1

    2) Script URL (on DD):

    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:

    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!



  2. #2
    Join Date
    Dec 2008
    Portsmouth, UK
    Thanked 441 Times in 435 Posts


    You have

    	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
      $.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


    new option in red

    (function($) {
      $.facebox = function(data, klass) {
        $.isFunction(data) ?$) : $.facebox.reveal(data, klass)
      $.facebox.settings = {
        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()
          top:	($.facebox.settings.fixed?0:pageScroll[1]) + ($.facebox.getPageHeight() / 10),
          left:	($.facebox.settings.fixed?0:pageScroll[0])
        $(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() {
        return false
    Last edited by vwphillips; 07-27-2014 at 02:00 PM.
    God Loves You and will never love you less.
    If my post has been useful please donate to

  3. The Following User Says Thank You to vwphillips For This Useful Post:

    aharvey (07-27-2014)

  4. #3
    Join Date
    Jul 2005
    Thanked 0 Times in 0 Posts



    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!



Similar Threads

  1. Submenu drops at wrong location on Scrolling
    By srinicoder in forum Bug reports
    Replies: 6
    Last Post: 05-10-2010, 05:15 AM
  2. Submenu drops at wrong location on Scrolling
    By srinicoder in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 04-07-2010, 08:21 PM
  3. Integrating Facebox Image Viewer with Carousel Viewer
    By button1 in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 12-11-2008, 12:26 AM
  4. Open the facebox in another frame or location
    By tomus in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 08-27-2008, 11:13 PM
  5. Scrolling transparent picture that follows the screen
    By disco243 in forum Looking for such a script or service
    Replies: 2
    Last Post: 03-01-2008, 11:50 PM


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts