Help with facebox positioning

Help with facebox positioning

I am using the facebox plugin that was produced a few years back.  It works just fine but I am now trying to add a simple functionality to it and I cannot get it to work and don't understand why.  I am trying to pass a setting to it so that I can affect the css position.  I know where to put the css part and that works fine when I declare it directly.   I have tried this, like some have posted across the web
  1. $.facebox({fixedPosition: 'relative'});
  2. $.facebox({'fixedPosition': 'relative'}); // Tried that too
Here is the full js for it.  I have added lines 83 and 108 to try my hand at this.
  1. /*
  2.  * Facebox (for jQuery)
  3.  * version: 1.2 (05/05/2008)
  4.  * @requires jQuery v1.2 or later
  5.  *
  6.  * Examples at http://famspam.com/facebox/
  7.  *
  8.  * Licensed under the MIT:
  9.  *   http://www.opensource.org/licenses/mit-license.php
  10.  *
  11.  * Copyright 2007, 2008 Chris Wanstrath [ chris@ozmm.org ]
  12.  *
  13.  * Usage:
  14.  *
  15.  *  jQuery(document).ready(function() {
  16.  *    jQuery('a[rel*=facebox]').facebox()
  17.  *  })
  18.  *
  19.  *  <a href="#terms" rel="facebox">Terms</a>
  20.  *    Loads the #terms div in the box
  21.  *
  22.  *  <a href="terms.html" rel="facebox">Terms</a>
  23.  *    Loads the terms.html page in the box
  24.  *
  25.  *  <a href="terms.png" rel="facebox">Terms</a>
  26.  *    Loads the terms.png image in the box
  27.  *
  28.  *
  29.  *  You can also use it programmatically:
  30.  *
  31.  *    jQuery.facebox('some html')
  32.  *    jQuery.facebox('some html', 'my-groovy-style')
  33.  *
  34.  *  The above will open a facebox with "some html" as the content.
  35.  *
  36.  *    jQuery.facebox(function($) {
  37.  *      $.get('blah.html', function(data) { $.facebox(data) })
  38.  *    })
  39.  *
  40.  *  The above will show a loading screen before the passed function is called,
  41.  *  allowing for a better ajaxy experience.
  42.  *
  43.  *  The facebox function can also display an ajax page, an image, or the contents of a div:
  44.  *
  45.  *    jQuery.facebox({ ajax: 'remote.html' })
  46.  *    jQuery.facebox({ ajax: 'remote.html' }, 'my-groovy-style')
  47.  *    jQuery.facebox({ image: 'stairs.jpg' })
  48.  *    jQuery.facebox({ image: 'stairs.jpg' }, 'my-groovy-style')
  49.  *    jQuery.facebox({ div: '#box' })
  50.  *    jQuery.facebox({ div: '#box' }, 'my-groovy-style')
  51.  *
  52.  *  Want to close the facebox?  Trigger the 'close.facebox' document event:
  53.  *
  54.  *    jQuery(document).trigger('close.facebox')
  55.  *
  56.  *  Facebox also has a bunch of other hooks:
  57.  *
  58.  *    loading.facebox
  59.  *    beforeReveal.facebox
  60.  *    reveal.facebox (aliased as 'afterReveal.facebox')
  61.  *    init.facebox
  62.  *    afterClose.facebox
  63.  *
  64.  *  Simply bind a function to any of these hooks:
  65.  *
  66.  *   $(document).bind('reveal.facebox', function() { ...stuff to do after the facebox and contents are revealed... })
  67.  *
  68.  */
  69. (function($) {
  70.   $.facebox = function(data, klass) {
  71.     $.facebox.loading()
  72.     if (data.ajax) fillFaceboxFromAjax(data.ajax, klass)
  73.     else if (data.image) fillFaceboxFromImage(data.image, klass)
  74.     else if (data.div) fillFaceboxFromHref(data.div, klass)
  75.     else if ($.isFunction(data)) data.call($)
  76.     else $.facebox.reveal(data, klass)
  77.   }
  78.   /*
  79.    * Public, $.facebox methods
  80.    */
  81.   $.extend($.facebox, {
  82.     settings: {
  83.       fixedPosition: 'fixed', // I added this line.  I wanted the position default to fixed and NOT when I define it in the activation call.
  84.       opacity      : 0.2,
  85.       overlay      : true,
  86.       loadingImage : 'scripts/facefiles/loading.gif',
  87.       closeImage   : 'scripts/facefiles/closelabel.gif',
  88.       imageTypes   : [ 'png', 'jpg', 'jpeg', 'gif' ],
  89.       faceboxHtml  : '\
  90.     <div id="facebox" style="display:none;"> \
  91.       <div class="popup"> \
  92.         <div class="content"> \
  93.         </div> \
  94.         <a href="#" class="close"><img src="scripts/facefiles/closelabel.gif" title="close" class="close_image" /></a> \
  95.       </div> \
  96.     </div>'
  97.     },
  98.     loading: function() {
  99.       init()
  100.       if ($('#facebox .loading').length == 1) return true
  101.       showOverlay()
  102.       $('#facebox .content').empty()
  103.       $('#facebox .body').children().hide().end().
  104.         append('<div class="loading"><img src="'+$.facebox.settings.loadingImage+'"/></div>')
  105.       $('#facebox').css({
  106.         top:    getPageScroll()[1] + (getPageHeight() / 10),
  107.         left:    $(window).width() / 2 - 205,
  108.         position: $.facebox.settings.fixedPosition //This is where I editted the css aspect and it works but I can't seem to make the fixedPosition change when activating the facebox.
  109.       }).show()
  110.       $(document).bind('keydown.facebox', function(e) {
  111.         if (e.keyCode == 27) $.facebox.close()
  112.         return true
  113.       })
  114.       $(document).trigger('loading.facebox')
  115.     },
  116.     reveal: function(data, klass) {
  117.       $(document).trigger('beforeReveal.facebox')
  118.       if (klass) $('#facebox .content').addClass(klass)
  119.       $('#facebox .content').append(data)
  120.       $('#facebox .loading').remove()
  121.       $('#facebox .body').children().fadeIn('normal')
  122.       $('#facebox').css('left', $(window).width() / 2 - ($('#facebox .popup').width() / 2))
  123.       $(document).trigger('reveal.facebox').trigger('afterReveal.facebox')
  124.     },
  125.     close: function() {
  126.       $(document).trigger('close.facebox')
  127.       return false
  128.     }
  129.   })
  130.   /*
  131.    * Public, $.fn methods
  132.    */
  133.   $.fn.facebox = function(settings) {
  134.     if ($(this).length == 0) return
  135.     init(settings)
  136.     function clickHandler() {
  137.       $.facebox.loading(true)
  138.       // support for rel="facebox.inline_popup" syntax, to add a class
  139.       // also supports deprecated "facebox[.inline_popup]" syntax
  140.       var klass = this.rel.match(/facebox\[?\.(\w+)\]?/)
  141.       if (klass) klass = klass[1]
  142.       fillFaceboxFromHref(this.href, klass)
  143.       return false
  144.     }
  145.     return this.bind('click.facebox', clickHandler)
  146.   }
  147.   /*
  148.    * Private methods
  149.    */
  150.   // called one time to setup facebox on this page
  151.   function init(settings) {
  152.     if ($.facebox.settings.inited) return true
  153.     else $.facebox.settings.inited = true
  154.     $(document).trigger('init.facebox')
  155.     makeCompatible()
  156.     var imageTypes = $.facebox.settings.imageTypes.join('|')
  157.     $.facebox.settings.imageTypesRegexp = new RegExp('\.(' + imageTypes + ')$', 'i')
  158.     if (settings) $.extend($.facebox.settings, settings)
  159.     $('body').append($.facebox.settings.faceboxHtml)
  160.     var preload = [ new Image(), new Image() ]
  161.     preload[0].src = $.facebox.settings.closeImage
  162.     preload[1].src = $.facebox.settings.loadingImage
  163.     $('#facebox').find('.b:first, .bl').each(function() {
  164.       preload.push(new Image())
  165.       preload.slice(-1).src = $(this).css('background-image').replace(/url\((.+)\)/, '$1')
  166.     })
  167.     $('#facebox .close').click($.facebox.close)
  168.     $('#facebox .close_image').attr('src', $.facebox.settings.closeImage)
  169.   }
  170.   // getPageScroll() by quirksmode.com
  171.   function getPageScroll() {
  172.     var xScroll, yScroll;
  173.     if (self.pageYOffset) {
  174.       yScroll = self.pageYOffset;
  175.       xScroll = self.pageXOffset;
  176.     } else if (document.documentElement && document.documentElement.scrollTop) {     // Explorer 6 Strict
  177.       yScroll = document.documentElement.scrollTop;
  178.       xScroll = document.documentElement.scrollLeft;
  179.     } else if (document.body) {// all other Explorers
  180.       yScroll = document.body.scrollTop;
  181.       xScroll = document.body.scrollLeft;
  182.     }
  183.     return new Array(xScroll,yScroll)
  184.   }
  185.   // Adapted from getPageSize() by quirksmode.com
  186.   function getPageHeight() {
  187.     var windowHeight
  188.     if (self.innerHeight) {    // all except Explorer
  189.       windowHeight = self.innerHeight;
  190.     } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
  191.       windowHeight = document.documentElement.clientHeight;
  192.     } else if (document.body) { // other Explorers
  193.       windowHeight = document.body.clientHeight;
  194.     }
  195.     return windowHeight
  196.   }
  197.   // Backwards compatibility
  198.   function makeCompatible() {
  199.     var $s = $.facebox.settings
  200.     $s.loadingImage = $s.loading_image || $s.loadingImage
  201.     $s.closeImage = $s.close_image || $s.closeImage
  202.     $s.imageTypes = $s.image_types || $s.imageTypes
  203.     $s.faceboxHtml = $s.facebox_html || $s.faceboxHtml
  204.   }
  205.   // Figures out what you want to display and displays it
  206.   // formats are:
  207.   //     div: #id
  208.   //   image: blah.extension
  209.   //    ajax: anything else
  210.   function fillFaceboxFromHref(href, klass) {
  211.     // div
  212.     if (href.match(/#/)) {
  213.       var url    = window.location.href.split('#')[0]
  214.       var target = href.replace(url,'')
  215.       if (target == '#') return
  216.       $.facebox.reveal($(target).html(), klass)
  217.     // image
  218.     } else if (href.match($.facebox.settings.imageTypesRegexp)) {
  219.       fillFaceboxFromImage(href, klass)
  220.     // ajax
  221.     } else {
  222.       fillFaceboxFromAjax(href, klass)
  223.     }
  224.   }
  225.   function fillFaceboxFromImage(href, klass) {
  226.     var image = new Image()
  227.     image.onload = function() {
  228.       $.facebox.reveal('<div class="image"><img src="' + image.src + '" /></div>', klass)
  229.     }
  230.     image.src = href
  231.   }
  232.   function fillFaceboxFromAjax(href, klass) {
  233.     $.get(href, function(data) { $.facebox.reveal(data, klass) })
  234.   }
  235.   function skipOverlay() {
  236.     return $.facebox.settings.overlay == false || $.facebox.settings.opacity === null
  237.   }
  238.   function showOverlay() {
  239.     if (skipOverlay()) return
  240.     if ($('#facebox_overlay').length == 0)
  241.       $("body").append('<div id="facebox_overlay" class="facebox_hide"></div>')
  242.     $('#facebox_overlay').hide().addClass("facebox_overlayBG")
  243.       .css('opacity', $.facebox.settings.opacity)
  244.       .click(function() { $(document).trigger('close.facebox') })
  245.       .fadeIn(200)
  246.     return false
  247.   }
  248.   function hideOverlay() {
  249.     if (skipOverlay()) return
  250.     $('#facebox_overlay').fadeOut(200, function(){
  251.       $("#facebox_overlay").removeClass("facebox_overlayBG")
  252.       $("#facebox_overlay").addClass("facebox_hide")
  253.       $("#facebox_overlay").remove()
  254.     })
  255.     return false
  256.   }
  257.   /*
  258.    * Bindings
  259.    */
  260.   $(document).bind('close.facebox', function() {
  261.     $(document).unbind('keydown.facebox')
  262.     $('#facebox').fadeOut(function() {
  263.       $('#facebox .content').removeClass().addClass('content')
  264.       $('#facebox .loading').remove()
  265.       $(document).trigger('afterClose.facebox')
  266.     })
  267.     hideOverlay()
  268.   })
  269. })(jQuery);