Posted on

Load swfobject into facebox and an IE bug

I recently had some issues trying to load a swf via swfobject into a facebox. Swfobject 2.2 gives me some additional functionality including the ability to remove the swf completely when my facebox is closed. This was a problem for me in IE because audio from my swf continued to play after closing the facebox. The main problem is that facebox makes a duplicate of the content loaded on the page and places it inside its modal. At this point we have two IDs of the same name and can no longer control an element or object by ID. So I decided to add the new div with the initial facebox call and then use this new div for the swfobject. Here’s a quick example of code (sorry it’s so narrow and difficult to read):

Make sure you are loading jQuery, facebox and swobject 2.2

$(document).bind('reveal.facebox', function() {
swfobject.embedSWF("yourfilename.swf", "yourDiv", "400", "300", "8","expressInstall.swf");
});
$(document).bind("close.facebox", function(){
// Otherwise audio keeps playing in IE
swfobject.removeSWF("yourDiv");
}) ;

jQuery.facebox('

');

In addition, if you want to keep the facebox centered when the browser is resized, try this!


$(window).resize(function(){
var pWidth = $(document).width();
$("#facebox").css("left",pWidth / 2 - ($("#facebox table").width() / 2));
});

References:
http://jquery.com/
http://defunkt.github.com/facebox/
http://github.com/defunkt/facebox/blob/master/facebox.js
http://code.google.com/p/swfobject/wiki/api
http://code.google.com/p/swfobject/wiki/documentation

Posted on

Jörn Zaefferer’s Tooltip Hacks

I added two settings variables to the plugin:

positionVar: boolean

appendElement: ‘#mydiv’

positionVar sets a condition of whether to use the calculated positioning or otherwise just use the positioning from the settings.

appendElement replaces the default body.document parameter for the appendTo function. Instead, we want to position the tooltip inside of an element with relative positioning so we can give it a ‘static’ position.

Now that the tooltip has been positioned precisely we can unbind and bind events to the tooltip and the container div. Add this below the tooltip initialization. (sorry for the narrow layout)


$('.toolTipPop').unbind('mouseout');
$('#container').bind('mouseout', function() { $('#tooltip').css("opacity", 0); });
$('#container').bind('mouseover', function() { $('#tooltip').css("opacity", 100); });

See example here
Make sure to escape your html characters in your title tag if you want to add links to the tooltip content.

Based on  Jörn Zaefferer’s jquery tooltip plugin.

http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/