Results 1 to 3 of 3

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

  1. #1
    Join Date
    Jul 2005
    Posts
    16
    Thanks
    2
    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): http://www.dynamicdrive.com/dynamici...ebox/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/b...ceboxtest.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

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,821
    Thanks
    2
    Thanked 425 Times in 419 Posts

    Default

    You have

    Code:
    #facebox
    {
    	position: fixed;
    	z-index: 100;
    	text-align: center;
    	top: 10px;
    	right: -100px;
    }
    the DD page has

    Code:
    #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)

    Code:
      // 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

    Code:
    (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)

    Code:
      $.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
      }
    Last edited by vwphillips; 07-27-2014 at 03:00 PM.
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

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

    aharvey (07-27-2014)

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

    Default

    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

Similar Threads

  1. Submenu drops at wrong location on Scrolling
    By srinicoder in forum Bug reports
    Replies: 6
    Last Post: 05-10-2010, 06: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, 09: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-28-2008, 12:13 AM
  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

Bookmarks

Posting Permissions

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