Note: I never got to the bottom of the actual problem, partly because I don’t really care for the quirks of 6 year old browsers. I imagine it has something to do with Fancyobx inserting elements into the DOM before it is actually completely loaded (Fancybox init’s itself on-domready).

The fix is a hack for IE

Part 1

Somewhere near the bottom of the fancybox.js, there’s a call to

$.fancybox.init();

I changed this to delay Fancybox init until window is fully loaded for IE <= 7:

// delay fancybox init for old IE versions
if ($.browser.msie && $.browser.version <= 7) {
  $(window).load(function() {
    $.fancybox.init();
    // set a flag that fancybox is loaded and ready
    window.fancybox_is_ready = true;
  });
}
// the normal case (most browsers)
else {
  $(document).ready(function() {
    $.fancybox.init();
  });
}

Part 2

Locate where the $.fancybox() function is defined:

$.fancybox = function(obj) {

And add this to as the first thing in the function:

// delay fancybox ondomready registrations to window.load if fancybox
// isn't ready yet
if ($.browser.msie && $.browser.version <= 7 && !window.fancybox_is_ready) {
  $(window).load(function() {
    $.fancybox(obj);
  });

  return;
}

Explanation

In part 1, we delay Fancybox initialization until page is fully loaded, we also set a flag that Fancybox is ready. Part 2 is in case Fancybox is registered to be shown on-domready anywhere, in this case we delay the call until page is loaded if Fancybox isn’t ready yet.

That’s about it. Hope this helps someone.

<xsd:import namespace="http://schemas.xmlsoap.org/soap/envelope/" schemaLocation="http://schemas.xmlsoap.org/soap/envelope/"/>

My first thought was to match all the schemaLocations in the schemas and cache them manually, but it seemed to me there must be a better way..
There is and it’s called a catalog.

“What’s a catalog” I hear you say:

Basically it’s a lookup mechanism used when an entity (a file or a remote resource) references another entity. The catalog lookup is inserted between the moment the reference is recognized by the software (XML parser, stylesheet processing, or even images referenced for inclusion in a rendering) and the time where loading that resource is actually started.
- xmlsoft.org

So, it turns out libxml has catalog support. A catalog is basically an XML file that libxml will parse and use to map references. I was doing the schema validation with DomDocument::schemaValidate and since DomDocument uses libxml behind the scenes, this works for PHP as well. libxml2 per default looks for an xml catalog in /etc/xml/catalog and DomDocument is hardwired to that location as well. *

You can add XML catalogs with a little tool called xmlcatalog that comes with libxml (I think). The usage is pretty straightforward, call up the man page to get an overview or read it online. Here’s how I added a catalog to map the Soap envelope schema location to a local path:

1. Create /etc/xml if it doesn’t yet exist.

2. Copy the Soap envelope schema from http://schemas.xmlsoap.org/soap/envelope/ to a local path, let’s say /etc/xml/soap-envelope-1.1.xsd

3. Create the catalog file (if it doesn’t exist yet) and add our new rule:

xmlcatalog --create --noout --add "rewriteURI" "http://schemas.xmlsoap.org/soap/envelope/" \
"file:///etc/xml/soap-envelope-1.1.xsd" \
/etc/xml/catalog

The file created at /etc/xml/catalog should then look something like:

<?xml version="1.0"?>
<!DOCTYPE catalog PUBLIC "-//OASIS//DTD Entity Resolution XML Catalog V1.0//EN" "http://www.oasis-open.org/committees/entity/release/1.0/catalog.dtd">
<catalog xmlns="urn:oasis:names:tc:entity:xmlns:xml:catalog">
 <rewriteURI uriStartString="http://schemas.xmlsoap.org/soap/envelope/" rewritePrefix="file:///etc/xml/soap_1.1_envelope.xsd"/>
</catalog>

4. Restart apache

Your schema validation should be quick as a flash after that.

* You can change this default location by setting the

XML_CATALOG_FILES

environment variable.

Leave a comment if you have questions or feedback.

Pretty sweet eh? The solution I used is to make the TabbedBar transparent to the level to which you want it, then create a layer of fully visible Labels over the TabbedBar to create the illusion of a semi-transparent background. I wrote a function for this, feel free to use it if you like:

/**
 * Create a semi transparent TabbedBar
 *
 * The TabbedBar looks best if the backround color is set to one of the colors
 * of the background image of the view beneath it.
 *
 * props:
 * - backgroundColor  string   Background color of TabbedBar
 * - buttonNames      array    Names for the labels of the TabbedBar
 * - height           number   Height of entire view
 * - opacity          decimal  Opacity level of TabbedBar and it's background
 *
 * @param   object  Dictionary of properties
 * @return  object  Titanium View
 */
function createTransparentTabbedBar(props)
{
 if (typeof(props.opacity) == 'undefined')
 props.opacity = 0.4;

 // wraps all the views
 var wrapper = Ti.UI.createView({
 top: 0,
 left: 0,
 right: 0,
 height: (typeof(props.height) != 'undefined' ? props.height : 30)
 }),
 // text overlay container
 overlay = Ti.UI.createView({
 zIndex: 3,
 touchEnabled: false
 }),
 labels = [],
 // bar background layer
 bar_bg = Ti.UI.createView({
 backgroundColor: '#000',
 opacity: props.opacity/2,
 top: 0,
 left: 0,
 right: 0,
 zIndex: 1
 })
 tabbed_bar = Ti.UI.iOS.createTabbedBar({
 backgroundColor: (typeof(props.backgroundColor) != 'undefined' ? props.backgroundColor : '#000'),
 opacity: props.opacity,
 style: Ti.UI.iPhone.SystemButtonStyle.BAR,
 top: 2,
 bottom: 2,
 left: 2,
 right: 2,
 zIndex: 2
 }),
 // button width = screen resolution-2px outer border-right/left margin-1px (border) for every button
 width = Math.ceil((318-tabbed_bar.left-tabbed_bar.right-props.buttonNames.length)/props.buttonNames.length);

 // loop all buttons
 for (var i = 0, l = props.buttonNames.length; i < l; i++)
 {
 // create an empty label for the tab bar
 labels.push('');

 // create a label for the text overlay
 var label = Ti.UI.createLabel({
 text: props.buttonNames[i],
 width: width,
 left: (width*i)+(i*1),
 touchEnabled: false,
 textAlign: 'center',
 color: '#FFF',
 shadowColor: '#000',
 shadowOffset: {x: 0, y: -1},
 font: {
 fontSize: 12,
 fontWeight: 'bold'
 }
 });
 overlay.add(label);
 }

 // add an array of empty labels to create the tabs
 tabbed_bar.labels = labels;

 // wrap everything in one view
 wrapper.add(tabbed_bar, bar_bg, overlay);
 return wrapper;
}

So we create a View with a background color, put a semi-transparent TabbedBar with empty button names on top of it, then add another layer of fully visible labels spaced to fit the TabbedBar beneath it. Everything is then wrapped in one View, which you can add to another View or Window.

Here is an example how to use it:

// point the path to the image you want to use
Ti.UI.setBackgroundImage('images/background.jpg');
var win = Ti.UI.createWindow({title: 'Tabbed Bar Test'});

var bar = createTransparentTabbedBar({
 backgroundColor: '#88502B',
 buttonNames: ['One', 'Two', 'Three'],
 height: 40,
 opacity: 0.4
 });
win.add(bar);

win.open();

Have fun with your transparent TabbedBar!

iPhone Screenshot background from iphone4wallpaper.com.

Sometimes you’ll need to replace one view of a ScrollableView, which, as far as I can tell by the rather incomplete documentation, is not supported out-of-the-box. Don’t worry, it is possible though and I wrote a function for it:

/**
 * Replace (update) one view of a ScrollablView with a new one
 *
 * @param   object  The scrollableView
 * @param   object  The old view to be replaced
 * @param   object  The new view to replace the old one
 * @return  void
 */
function replaceView(scrollableView, oldView, newView)
{
  // loop all the views in the scrollable view
  for (var i = 0, newViews = [], l = scrollableView.views.length; i < l; i++)
  {
    // replace the old view with the new one
    if (i == scrollableView.currentPage)
      newViews.push(newView);
    // leave the other views unchanged
    else
      newViews.push(scrollableView.views[i]);
  }

  // update the scrollableView's views array with the new one
  scrollableView.views = newViews;
}

It’s pretty straightforward, we loop the existing Views of the ScrollableView and copy each View, replacing the one to be change, to a new array. Then we tell the ScrollableView to use our new Views-array for it’s Views.
I hope this helps someone.

Quartz is, in a nutshell, a graphic library and part of the OS X Core Graphics Framework. A Quartz filter is basically an XML file defining how Quartz should be used. Quartz filters are often used to compress PDF documents by reducing the size of the images in it – but can also be used for a variety of other image manipulations.

Here’s an article about using Quartz filters to reduce the file size of PDFs: learn how to reduce PDF file size with a Quartz filter. As far as I know, you can create your own filters with the ColorSync program that comes with OS X or by writing the XML yourself. The “Reduce File Size” Quartz filter by OS X goes a bit hard on the images, making it useless for print PDFs and even a bit hard on “screen” PDFs. A guy named Jerome Colas created a few filters which give you more control over the outcome of the images. Check them out in his article “Reduce PDF file size : free Acrobat replacement for Leopard“.

Using Quartz filters from command line

I wanted to use Quartz filters for exporting PDFs from an application I developed at work, preferably from the command line. It seems not that many people have wanted to do this or write about how to do it. After searching google on and off for days and trying all kinds of things, I was pointed in the right direction; you can do this with a Quartz printer application stored in /System/Library/Printers/Libraries/quartzfilter. The syntax is:

/System/Library/Printers/Libraries/quartzfilter sourcefile filter destination

So converting big.pdf into small.pdf with the “Reduce File Size” filter would work like this:

/System/Library/Printers/Libraries/quartzfilter big.pdf /System/Library/Filters/Reduce\ File\ Size.qfilter small.pdf

Pretty straightforward isn’t it?

Other ways of using Quartz filters

While searching, I learned about some other ways to use Quartz filters which may be interesting for some people.

Using Quartz filters in Python

On my mac I have the file:
/Developer/Examples/Quartz/Python/filter-pdf.py
I’m not sure if it came with XCode or if it’s OS X native. The script can be used to apply Quartz filters to PDF files, except well, it doesn’t work. If you have an up to date OS X, you should have at least Python 2.5 installed and it looks like the script was developed for Python ≤ 2.3 as it’s using features from the CoreGraphics library that aren’t supported in newer versions of Python. I don’t know the first thing about Python, but I figure if you’re developing with Python you might be able to fix it.

Using Quartz filters in Automator

..is very easy. Create a new Automator project and choose the action “Apply Quartz Filter to PDF Documents” from the “PDFs” section of the actions library and use it in combination with whatever other Automator action you need.

Using Quartz filters with AppleScript

Check this detailed article by Martin Michel over at MacScripter and try the cool droplet he made: thoughts and examples about using the quartzfilter tool.

Note: I tested these things on OS X 10.5.8, I’m not sure how this will work on other versions of OS X. Please leave a comment if you find out more.
Cheers