Databases
StackOverflow2013
Postsdbo
POFacebox - Jquery 1.2.1 close function broken in 1.3.2
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFacebox - Jquery 1.2.1 close function broken in 1.3.2
    primarykey
    data
    text
    <p>I am using "facebox" which uses jQuery 1.2.1 on my website here </p> <p><a href="http://www.pointclickshoot.com/beta2" rel="nofollow noreferrer">http://www.pointclickshoot.com/beta2</a></p> <p>The rest of my site is using jQuery-1.3.2.js. I need to update the following functions to work with jQuery 1.3.2:</p> <pre><code>/* Bindings */ $(document).bind('close.facebox', function() { $(document).unbind('keydown.facebox') $('#facebox').fadeOut(function() { $('#facebox .content').removeClass().addClass('content') hideOverlay(); $('#facebox .loading').remove() /* My added code to REMOVE video_players so vimeo player stops playing!*/ $('#facebox .video_player').fadeOut(200).remove(); }) }) })(jQuery); </code></pre> <p>Right now all that happens is:</p> <ol> <li>Video div is removed (via #facebox .videoplayer .fadeout) - this is where the movie is, but not the WHOLE facebox POPUP</li> <li>Facebox div still shows!</li> </ol> <p>It appears as if the the <strong>close.facebox</strong> function is broken :/</p> <p>Here is the full FACEBOX.js file:</p> <pre><code>/* * Facebox (for jQuery) * version: 1.2 (05/05/2008) * @requires jQuery v1.2 or later * * Examples at http://famspam.com/facebox/ * * Licensed under the MIT: * http://www.opensource.org/licenses/mit-license.php * * Copyright 2007, 2008 Chris Wanstrath [ chris@ozmm.org ] * * Usage: * * jQuery(document).ready(function() { * jQuery('a[rel*=facebox]').facebox() * }) * * &lt;a href="#terms" rel="facebox"&gt;Terms&lt;/a&gt; * Loads the #terms div in the box * * &lt;a href="terms.html" rel="facebox"&gt;Terms&lt;/a&gt; * Loads the terms.html page in the box * * &lt;a href="terms.png" rel="facebox"&gt;Terms&lt;/a&gt; * Loads the terms.png image in the box * * * You can also use it programmatically: * * jQuery.facebox('some html') * jQuery.facebox('some html', 'my-groovy-style') * * The above will open a facebox with "some html" as the content. * * jQuery.facebox(function($) { * $.get('blah.html', function(data) { $.facebox(data) }) * }) * * The above will show a loading screen before the passed function is called, * allowing for a better ajaxy experience. * * The facebox function can also display an ajax page, an image, or the contents of a div: * * jQuery.facebox({ ajax: 'remote.html' }) * jQuery.facebox({ ajax: 'remote.html' }, 'my-groovy-style') * jQuery.facebox({ image: 'stairs.jpg' }) * jQuery.facebox({ image: 'stairs.jpg' }, 'my-groovy-style') * jQuery.facebox({ div: '#box' }) * jQuery.facebox({ div: '#box' }, 'my-groovy-style') * * Want to close the facebox? Trigger the 'close.facebox' document event: * * jQuery(document).trigger('close.facebox') * * Facebox also has a bunch of other hooks: * * loading.facebox * beforeReveal.facebox * reveal.facebox (aliased as 'afterReveal.facebox') * init.facebox * * Simply bind a function to any of these hooks: * * $(document).bind('reveal.facebox', function() { ...stuff to do after the facebox and contents are revealed... }) * */ (function($) { $.facebox = function(data, klass) { $.facebox.loading() if (data.ajax) fillFaceboxFromAjax(data.ajax, klass) else if (data.image) fillFaceboxFromImage(data.image, klass) else if (data.div) fillFaceboxFromHref(data.div, klass) else if ($.isFunction(data)) data.call($) else $.facebox.reveal(data, klass) } /* * Public, $.facebox methods */ $.extend($.facebox, { settings: { opacity : 0, overlay : true, loadingImage : '/images/facebox/loading.gif', closeImage : '/images/facebox/closelabel.gif', imageTypes : [ 'png', 'jpg', 'jpeg', 'gif' ], faceboxHtml : '\ &lt;div id="facebox" style="display:none;"&gt; \ &lt;div class="popup"&gt; \ &lt;table&gt; \ &lt;tbody&gt; \ &lt;tr&gt; \ &lt;td class="tl"/&gt;&lt;td class="b"/&gt;&lt;td class="tr"/&gt; \ &lt;/tr&gt; \ &lt;tr&gt; \ &lt;td class="b"/&gt; \ &lt;td class="body"&gt; \ &lt;div class="content"&gt; \ &lt;/div&gt; \ &lt;div class="footer"&gt; \ &lt;a href="#" class="close"&gt; \ &lt;img src="/images/facebox/closelabel.gif" title="close" class="close_image" /&gt; \ &lt;/a&gt; \ &lt;/div&gt; \ &lt;/td&gt; \ &lt;td class="b"/&gt; \ &lt;/tr&gt; \ &lt;tr&gt; \ &lt;td class="bl"/&gt;&lt;td class="b"/&gt;&lt;td class="br"/&gt; \ &lt;/tr&gt; \ &lt;/tbody&gt; \ &lt;/table&gt; \ &lt;/div&gt; \ &lt;/div&gt;' }, loading: function() { init() if ($('#facebox .loading').length == 1) return true showOverlay() $('#facebox .content').empty() $('#facebox .body').children().hide().end(). append('&lt;div class="loading"&gt;&lt;img src="'+$.facebox.settings.loadingImage+'"/&gt;&lt;/div&gt;') $('#facebox').css({ top: getPageScroll()[1] + (getPageHeight() / 10), left: $(window).width() / 2 - 205 }).show() $(document).bind('keydown.facebox', function(e) { if (e.keyCode == 27) $.facebox.close() return true }) $(document).trigger('loading.facebox') }, reveal: function(data, klass) { $(document).trigger('beforeReveal.facebox') if (klass) $('#facebox .content').addClass(klass) $('#facebox .content').append(data) $('#facebox .loading').remove() $('#facebox .body').children().fadeIn('normal') $('#facebox').css('left', $(window).width() / 2 - ($('#facebox table').width() / 2)) $(document).trigger('reveal.facebox').trigger('afterReveal.facebox') }, close: function() { $(document).trigger('close.facebox') return false } }) /* * Public, $.fn methods */ $.fn.facebox = function(settings) { if ($(this).length == 0) return init(settings) function clickHandler() { $.facebox.loading(true) // support for rel="facebox.inline_popup" syntax, to add a class // also supports deprecated "facebox[.inline_popup]" syntax var klass = this.rel.match(/facebox\[?\.(\w+)\]?/) if (klass) klass = klass[1] fillFaceboxFromHref(this.href, klass) return false } return this.bind('click.facebox', clickHandler) } /* * Private methods */ // called one time to setup facebox on this page function init(settings) { if ($.facebox.settings.inited) return true else $.facebox.settings.inited = true $(document).trigger('init.facebox') makeCompatible() var imageTypes = $.facebox.settings.imageTypes.join('|') $.facebox.settings.imageTypesRegexp = new RegExp('\.(' + imageTypes + ')$', 'i') if (settings) $.extend($.facebox.settings, settings) $('body').append($.facebox.settings.faceboxHtml) var preload = [ new Image(), new Image() ] preload[0].src = $.facebox.settings.closeImage preload[1].src = $.facebox.settings.loadingImage $('#facebox').find('.b:first, .bl').each(function() { preload.push(new Image()) preload.slice(-1).src = $(this).css('background-image').replace(/url\((.+)\)/, '$1') }) $('#facebox .close').click($.facebox.close) $('#facebox .close_image').attr('src', $.facebox.settings.closeImage) } // getPageScroll() by quirksmode.com function getPageScroll() { var xScroll, yScroll; if (self.pageYOffset) { yScroll = self.pageYOffset; xScroll = self.pageXOffset; } else if (document.documentElement &amp;&amp; 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,yScroll) } // Adapted from getPageSize() by quirksmode.com function getPageHeight() { var windowHeight if (self.innerHeight) { // all except Explorer windowHeight = self.innerHeight; } else if (document.documentElement &amp;&amp; document.documentElement.clientHeight) { // Explorer 6 Strict Mode windowHeight = document.documentElement.clientHeight; } else if (document.body) { // other Explorers windowHeight = document.body.clientHeight; } return windowHeight } // Backwards compatibility function makeCompatible() { var $s = $.facebox.settings $s.loadingImage = $s.loading_image || $s.loadingImage $s.closeImage = $s.close_image || $s.closeImage $s.imageTypes = $s.image_types || $s.imageTypes $s.faceboxHtml = $s.facebox_html || $s.faceboxHtml } // Figures out what you want to display and displays it // formats are: // div: #id // image: blah.extension // ajax: anything else function fillFaceboxFromHref(href, klass) { // div if (href.match(/#/)) { var url = window.location.href.split('#')[0] var target = href.replace(url,'') if (target == '#') return $.facebox.reveal($(target).html(), klass) // image } else if (href.match($.facebox.settings.imageTypesRegexp)) { fillFaceboxFromImage(href, klass) // ajax } else { fillFaceboxFromAjax(href, klass) } } function fillFaceboxFromImage(href, klass) { var image = new Image() image.onload = function() { $.facebox.reveal('&lt;div class="image"&gt;&lt;img src="' + image.src + '" /&gt;&lt;/div&gt;', klass) } image.src = href } function fillFaceboxFromAjax(href, klass) { $.get(href, function(data) { $.facebox.reveal(data, klass) }) } function skipOverlay() { return $.facebox.settings.overlay == false || $.facebox.settings.opacity === null } function showOverlay() { if (skipOverlay()) return if ($('#facebox_overlay').length == 0) $("body").append('&lt;div id="facebox_overlay" class="facebox_hide"&gt;&lt;/div&gt;') $('#facebox_overlay').hide().addClass("facebox_overlayBG") .css('opacity', $.facebox.settings.opacity) .click(function() { $(document).trigger('close.facebox') }) .fadeIn(200) return false } function hideOverlay() { if (skipOverlay()) return $('#facebox_overlay').fadeOut(200, function(){ $("#facebox_overlay").removeClass("facebox_overlayBG") $("#facebox_overlay").addClass("facebox_hide") $("#facebox_overlay").remove() }) return false } /* * Bindings */ $(document).bind('close.facebox', function() { $(document).unbind('keydown.facebox') $('#facebox').fadeOut(function() { $('#facebox .content').removeClass().addClass('content') hideOverlay(); $('#facebox .loading').remove() /* My added code to REMOVE video_players so vimeo player stops playing!*/ $('#facebox .video_player').fadeOut(200).remove(); }) }) })(jQuery); </code></pre> <p>Also, the following code does NOT WORK:</p> <pre><code>$('#facebox').remove() </code></pre> <p>It physically REMOVES the FACEBOX from the page, thus disabling the ability to REOPEN it.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USNick Craver
    1. USarsoneffect
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POFacebox - Jquery 1.2.1 close function broken in 1.3.2
      1. USarsoneffect
      1. VTFavorite
    2. VO
      singulars
      1. POFacebox - Jquery 1.2.1 close function broken in 1.3.2
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload