Blogs

MooFlow - a JavaScript Fisheye Photo Gallery

Tagged:  

Nothing says "Razzle Dazzle" like a fish-eyed Apple iTunes-like photo gallery effect. So, here we are to present a creation of outcut.de called MooFlow that does just that. Built using the MooTools JavaScript Framework, MooFlow is currently in beta at version 0.1.

Features
* Autosetup onload
* Autoresize on changes of Window dimensions
* Scrolling with mouse wheel
* Scrolling with key input (left and right cursor)
* Autoplay presentation loop

Requirements
MooTools V.1.2 Framework
* Class: Class
* Native: all
* Element: Element.Event
* Element: Element.Dimensions
* Window: Window.DomReady
* Plugins: Slider

Compatibility
MooTools is compatible and fully tested with Safari, internet explorer 6 and 7, Firefox (and its mozilla friends), Opera and Camino.

Performance
If you use Firebug - disable it for testing.
Best image interpolation in Opera and Safari.

Code & Documentation is available at outcut.de

Choosing a Development Framework

Over at Smashing Magazine they have put together a good round up of Development Frameworks. The post goes over the most popular frameworks for each language. The post also gives tips on what framework is best for you and has a brief over view of the Model View Controller (MVC) design pattern.

Below is an excerpt from the JavaScript frameworks.

JavaScript

  • Prototype is a JavaScript framework that serves as a foundation for other JavaScript frameworks. Don’t be fooled however, as Prototype can stand on its own.

  • script.aculo.us is built on the Prototype framework and has found its way into many high-profile sites including Digg, Apple, and Basecamp. The documentation is clear, and has an easy learning curve. However, compared to other JavaScript frameworks it is larger in size.

    Script.aculo.us

  • Mootools is a compact, modular, object-oriented JavaScript framework with impressive effects and Ajax handling. The framework is for advanced users as the learning curve is rather steep.

  • jQuery continues to rise in popularity due to its extensive API and active development. jQuery is a great balance of complexity and functionality.

  • For ASP.NET developers you can’t beat the ASP.NET AJAX framework which is built into the .NET Framework as of 3.5, but you can also download it for previous versions. The amount of documentation, examples, and community continues to increase. There are controls that you can simply drag-and-drop an update panel on an ASPX page and process Ajax!

    ASP.NET

Further JavaScript Frameworks

  • The Yahoo! User Interface Library - Yahoo! released its impressed JavaScript library with incredible amounts of documentation.
  • Ext JS - Originally built as an add-on to the YUI it can now extend Prototype and jQuery. Includes an impress interface.
  • Dojo is a small library focused on interpreter independence and small core size.
  • MochiKit - A framework that has focus on scripting language standards including ECMAScript and the W3C DOM.

Click here to read the full post on the frameworks.

Forcing a File Download in PHP

Tagged:  

I found an interesting tutorial on forcing a file to be downloaded instead of opened with the associated application.

Below is the PHP code that would be called to force the doe\wnload.

<?php
session_cache_limiter('none');
session_start();

function _Download($f_location, $f_name){
    str_replace('/', $f_name); 
    str_replace('/', $f_location); 
    header ("Cache-Control: must-revalidate, post-check=0, pre-check=0");
    header('Content-Description: File Transfer');
    header('Content-Type: application/octet-stream');
    header('Content-Length: ' . filesize($f_location));    header('Content-Disposition: attachment; filename=' . basename($f_name));
    readfile($f_location);
}

$file = $_GET['file'];
$loc = $_GET['location'];

downloadFiles($loc, $file);

?>

To use this file, create a link to your download file, lets assume it is download.php. Just reference the link to download.php?file=filename.txt&location=filename.txt. Using the URL parameters the file is passed in and this then forces the download.

This is a great script to for forcing downloads of images, web pages or text files as these would otherwise be opened in the browser.

To view the full tutorial click here

Facebox 1.0 - A lightbox for images, divs, and entire remote pages

You might be asking yourself - "Do we really need another lightbox library out there?" Well if you've ever implemented a lightbox library then you know that most are limited to only displaying images. Facebox is a bit different because it allows you to lightbox divs in a page, remote pages, as well as images. A couple of the screenshots on the site show Facebox used as a alert window, part of an image gallery, or as a preview of a remote file - check out the demos and screenshots on FamSpam.

You'll notice that Facebox has taken its style from Facebook. But what you might not notice are the rounded corners on a Facebox. Some of you are tired of rounded corners and some of you aren't. If you aren't, then enjoy them. If you are, then just replace the corner images with sharp edges and you're all set.

Note that this library does require jQuery 1.2.1.

Visit the Facebox homepage to see some sample code and download the library

del.icio.us Style Tag Suggestion with jQuery

Remy Sharp has recently posted an entry on his blog about del.icio.us style tag suggestion using jQuery. If you've used del.icio.us then you're probably familiar with their tag suggestion feature as you type in tags for a bookmark. Remy has encapsulated this piece of functionality in a jQuery library he's made available for download.

Check out the demo

The plugin has been successfully tested with:
IE 7, Firefox 2, Safari 3, and Opera 9.

Read the full post on Remy's blog to find out more about this plugin and to download the source code.

OpenAjax Hub 1.0 Approved

Tagged:  

Jon Ferraiolo announced today that the OpenAjax Hub 1.0 Specification was approved by the Interoperability Working Group, the members, and the OpenAjax Alliance Steering Committee. This represents the first approved Specification for OpenAjax Alliance per the terms of the OpenAjax Alliance Members Agreement.

OpenAjax Hub provides standard JavaScript that, when included with an Ajax-powered Web application, promotes the ability for multiple Ajax toolkits to work together on the same page. The central feature of the OpenAjax Hub is its publish/subscribe event manager (the “pub/sub manager”), which enables loose assembly and integration of Ajax components. With the pub/sub manager, one Ajax component can publish (i.e., broadcast) an event to which other Ajax components can subscribe, thereby allowing these components to communicate with each other through the Hub, which acts as an intermediary message bus. The umbrella use case for the OpenAjax Hub is the set of scenarios in which an Ajax developer needs to deploy a single application that uses multiple Ajax libraries simultaneously.

> Read the final approved specification

The next phase is OpenAjax Hub 1.1, which will add secure mashup support and client-server communications. We expect an initial draft specifications and open source to appear in the next few weeks.

If you're unfamilar with The OpenAjax Alliance:

The OpenAjax Alliance is an organization of 80+ vendors, open source initiatives, and Web developers dedicated to the successful adoption of open and interoperable Ajax-based Web technologies. The prime objective is to accelerate customer success with Ajax by promoting the ability to mix and match solutions from Ajax technology providers and by helping to drive the Ajax ecosystem.

Last year, 19 Ajax toolkits participated in the Second OpenAjax InteropFest for the OpenAjax Hub 1.0 spec and passed the test. The toolkits in alphabetical order are:

> Read the full announcement on the OpenAjax Alliance Blog

John Lilly named as Mozilla's new CEO

Tagged:  

Mozilla Corporation, makers of the wonderful open source Firefox browsers (they do make other browsers as well) has just named John Lilly as their new CEO.

Below is an excerpt from Michell Baker's blog announcing the new change.

As a result I've asked John to take on the role of CEO of the Mozilla Corporation, and John has agreed. In reality John and I have been unconsciously moving towards this change for some time, as John has been providing more and more organizational leadership. It is very Mozilla-like to acknowledge the scope of someone's role after he or she has been doing it for a while, and this is a good part of what is happening here. I expect this transition to continue to be very smooth.

I will remain an active and integral part of MoCo. I've been involved in shipping Mozilla products since the dawn of time, and have no intention of distancing myself from our products or MoCo. I'll remain both as the Chairman of the Board and as an employee. My focus will shift towards the kinds of activities described above, but I'll remain deeply engaged in MoCo activities. I don't currently plan to create a new title. I have plenty of Mozilla titles already: Chairman of the Mozilla Foundation, Chairman of the Mozilla Corporation, Chief Lizard Wrangler of the project. More importantly, I hope to provide leadership in new initiatives because they are worthwhile, separate from any particular title. We will probably create an Office of the Chairman with a small set of people to work on these initiatives. I intend to remain deeply involved with MoCo precisely because I remain focused on our products and what we can accomplish within the industry.

There will be some differences with this change of roles. Most notably:

  • John's role in products and organization will become more visible to the world as he becomes more of a public voice for MoCo activities.
  • Today-- in theory at least-- John provides advice to me for a range of decisions for which I am responsible. In the future I'll provide input to John and he'll be responsible for making MoCo an effective organization. I expect to provide advice on a subset of topics and thus reduce the duplication of work. On the other hand, I also expect to be quite vocal on the topics I care about most. John and I agree on most things these days, but that doesn't stop me from being vocal :-)

I'm thrilled with this development, both with John's new role and with mine. If you've got thoughts on the kinds of projects I want to set in motion, I'm eager to hear them. And don't be surprised if you see the Mozilla Corporation doing more faster-- that's a part of the goal. We're all committed to doing things in a Mozilla style and you should expect to see that continue to shine through all that we do, whether it's shipping product or developing a new initiative.

You can read the full post at Mitchell's blog.

There should be little visible changes other than the obvious title changes. Lilly will become the spokesperson for Mozilla's activities and Mitchell will be the point woman on the new focus in the world of security standards. Hopefully the Mozilla products will continue to thrive through this change.

Graceful handling of anchors with jQuery

Over at Hainhealt.com they have an interesting post on handling anchors gracefully with jQuery.

Below is an excerpt from the post:

I've come to use this quite often which eventually leads to a considerable amount of if statements.

Which is ugly. And since I don't like ugliness, I've coded myself a small anchor handler for jQuery. Looking at the code I think I could quite easily make it compatible with the Prototype framework too, but I'll keep that for another post :D

(function(){
  url = window.location.href, handlers = [];

  jQuery.extend({
    anchorHandler: {
      add: function(regexp, callback) {

        if (typeof(regexp) == 'object') {
          jQuery.map(regexp, function(arg){

            args = {r: arg[0], cb: arg[1]};});}

        else  args = {r: regexp, cb: callback};

        handlers.push(args);
        return jQuery.anchorHandler;
      }

    }
  })(document).ready(function(){
    jQuery.map(handlers, function(handler){

      match = url.match(handler.r) && url.match(handler.r)[0] || false;

      if (match) {
      	handler.cb.apply(this, [match, (url.match(/#.*/)[0] || false)]);

      }});});
})();

And I can add triggers like this:

$.anchorHandler
  .add(/\/\#ch\-cheatsheet/,    h.comment.showCheatsheet)

  .add(/\/\#comment\-compose/,  h.comment.showCompose)
  .add(/\/\#comment\-\d+/,      h.comment.focus);

The first argument is a regular expression or a string that is passed to the function match, the second argument is the callback function.

The method also accept arrays as argument like this:

$.anchorHandler.add([
  [/\/\#ch\-cheatsheet/,   h.comment.showCheatsheet],

  [/\/\#comment\-compose/, h.comment.showCompose],
  [/\/\#comment\-\d+/,     h.comment.focus]]);

The callback function receive 2 arguments. The matched bit of the anchor with the anchor itself.

Read the full post here.

This technique is very useful for downgrading your applications on browsers where JavaScript is disabled.

swfIR - SWF Image Replacement [with style]

The swfIR team over at swfIR.com has put together a handy widget for styling images in your site. The library utilitizes JavaScript and Flash to produce a variety of image effects like shadows, rounded corners (with or without borders), rotation, and borders.

From the swfIR homepage:

swfIR (swf Image Replacement) is here to solve some of the design limitations of the standard HTML image and its widely-accepted associated CSS values, while still supporting standards-based design concepts. Using the dark arts of JavaScript and Flash, swfIR gives you the ability to apply an assortment of visual effects to any or all images on your website. Through progressive enhancement, it looks through your page and can easily add some new flavor to standard image styling.

When you start to use swfIR, you’ll need the ability to style it, the same way that you can do with regular images. To get around browser inconsistencies, swfIR adds a with a class of swfir around any image you’re replacing.

The library and its required files are about 11.89 KB.

<script type="text/javascript" src="swfir.js"></script>

Once the library is included you can take advantage of its features:
var borders = new swfir();
borders.specify("border-radius", "15");
borders.swap("#content img");

Here are the properties you have available:

border-radius
border-width
border-color
shadow-offset
shadow-angle
shadow-alpha
shadow-blur
shadow-blur-x
shadow-blur-y
shadow-strength
shadow-color
shadow-quality
shadow-inner
shadow-knockout
shadow-hide
rotate
overflow
link
elasticity

There are some issues with swfIR that the creators make us aware of, and they are:

  • Resizing/zooming in Opera crashes the browser
  • Flash of unstyled content: images load first before JavaScript replaces them
  • alt text is not preserved upon replacement
  • HTML right-click options are disabled
  • Incompatible with other JS libraries like Prototype or MooTools
  • Doesn’t work with hot-linked images because of security restrictions in Flash

Visit the swfIR homepage to view some demos and to download the source

jQuery easyThumb - A PHP / jQuery Thumbnail Generator with Lightbox

The first version of jQuery easyThumb was released today. easyThumb is a plugin that uses both jQuery and PHP to generate thumbnails (to use in galleries etc.) on-the-fly. All you need to do is to make a unsorted list of images. No links or thumbnails are required, the library takes care of this - thumbnails are created automatically and are linked to the full size image. This integrates well with the Lightbox library as is shown in the online demo.

From the author:

jQuery easyThumb is a plugin for jQuery. It turns a list of full-scale images to a list of thumbnails on-the-fly. It uses a php-script to return a thumbnail for each image, and jQuery to generate the list.

Online Demo with Lightbox

Check out the original post to read more about easyThumb and to download the source code.

Syndicate content