Oskar Krawczyk – blog.olicio.us

There’s always a but, eh?

There are so many things I love about Chrome, staring on the Tab system– the fact that it squeezes as much tabs as possible, even if that means showing the favicon alone. Finally, FINALLY, Flash isn’t taking the whole browser down like it used to do with Firefox and Safari.

Chrome for Mac is still in Beta, so there are things that might change, but somehow I don’t think the general UI will be altered, which brings me to the but.

Moving the window. Most apps allow you to drag the window by clicking on any white space- there’s always a fair amount of it. When it comes to Chrome this is not the case. There’s very limited space you can drag the window by. Let’s compare:

Safari

Chrome

Solution

• Introduce Status Bar
• Add more spacing between top of the browser window and top of the Tabs container, which also allows to have the title of the page we’re currently browsing

Since officially there’s no PDF docs for 1.2 version, I went ahead and compiled a PDF for both, -core and -more:

Download MooTools 1.2 Documentation in PDF

• MooTools-core 1.2.3 – Single PDF file (6.5 MB)
• MooTools-core 1.2.3 – Multi PDF file, zipped (1.8 MB)
• MooTools-more 1.2.2.3 – Single PDF file (9.8 MB)
• MooTools-more 1.2.2.3 – Multi PDF file, zipped (3 MB)

At some point, I’ll spend some time figuring out how to make a auto-magical converter so the PDF docs are always up-to-date with the ones from docs.mootools.net.

Setting it up

There are two ways of setting Floom up. One is the object way, where you specify the image url and the caption using the key-value notation.

var slides = [
  {
    image: 'photo-1.jpg',
    caption: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit'
  },
  {
    image: 'photo-2.jpg',
    caption: 'Excepteur sint occaecat cupidatat non proident'
  }
];
 
$('blinds').floom(slides, {
  axis: 'vertical'
});

<div id="blinds"></div>

The second one is by simply passing a element collection, ie. $$('#blinds img'), where the passed element has to be the actual image collection. In this scenario the caption is the elements title attribute.

$('blinds').floom($$('#blinds img'), {
  axis: 'vertical'
});

<div id="blinds">
  <img title="Description 0" alt="" src="nature-photo0.jpg" />
  <img title="Description 1" alt="" src="nature-photo1.jpg" />
  <img title="Description 2" alt="" src="nature-photo2.jpg" />
  <img title="Description 3" alt="" src="nature-photo3.jpg" />
  <img title="Description 4" alt="" src="nature-photo4.jpg" />
</div>

Options

All options have default values assigned, hence are optional.

1.1

• Bugfixes
• Removed onFirst and onLast options

1.0

• prefix: (str) class prefix for dynamically created elements. Defaults to floom
• amount: (int) amount of blinds. Defaults to 24
• animation: (int) animation duration for each blind (slice). Defaults to 70
• interval: (int) the interval between slide change. Defaults to 8000
• axis: (str) either horizontal or vertical. Defaults to vertical
• progressbar: (bool) show the progress bar. Defaults to true
• captions: (bool) show the captions. Defaults to true
• captionsFxIn: (obj) extend morph-in
• captionsFxOut: (obj) extend morph-out
• slidesBase: (str) the directory where to look for images/slides
• sliceFxIn: (obj) extend morph-in
• onSlideChange: fires on slide change
• onPreload: fires on slides preload (once, on script initialization)

Download & demo

• Example
• Fork or download from GitHub

Here we go, just add this little piece of code to your website and set the scope of the images you want to preload and fade in. Plus, if there’s an error while loading a specific image you can simply display a pre-set one by using the noImage option.

You can use the selector scope to load all or a certain group of images, ie. img.preload, img[rel=preload], etc.

Possible options

1.0

• noImage: image URL to use when an error occurs (404, broken lit, etc).

new MooImagePreload('#wrapper img', {
  noImage: '404-image.gif'
});

Plus some initial style:

img {visibility: hidden}

• Examples
• Get MooImagePreload-1.0.js (2Kb)
• Requires mootools-1.2.2-core.js and mootools-1.2.2.1-more.js or newer

Possible options

new in 1.3

• [new] toImage: returns the large image instead of a link to flickr.
• [new] onComplete: fires an event when all images are loaded, passing an array of links as reference.

1.2

• apikey: your API key if you have one, otherwise just use the one provided.
• size: the size of displayed photos. Possible values are “s”, “m”, “l”.
• method: the method you want to use, defaults to flickr.photos.getRecent. You can use any public method, such as flickr.photos.search and set the post data using passData.
• amount: the number of photos to fetch and display.
• passData: post data you want to pass with the request when using flickr.photos.search method.
• onProgress: fires an event every time a photo is loaded and passes the image element reference.

new MooFlickrBadge('badge', {
	amount: 18
});

<div id="badge"></div>

• Examples
• Get MooFlickrBadge-1.3.js (2Kb)
• Requires mootools-1.2.2-core.js and mootools-1.2.2.1-more.js or newer

Here’s a quick fix that worked for me:

1. Instead of trying, entering your existing account details, tap on Create account
2. Tap on the first field– the keyboard should appear
3. Tap on Cancel and go back to the previous screen

At this point you should be able to enter your details into the log-in fields without causing the app to crash.

REMEMBER: Remember to restart your iPhone after the installation!