JavaScript

Fix your IE6 Transparent PNG Issue and More with IE7.js

Dean Edwards has published an IE7 JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.

Usage

IE7.js
Upgrade MSIE5-6 to be compatible with MSIE7.
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/xx.x/IE7.js" type="text/javascript"></script>
<![endif]-->

IE8.js
Upgrade MSIE5-7 with advanced CSS features missing from MSIE7.
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/xx.x/IE8.js" type="text/javascript"></script>
<![endif]-->

Note: You do not need to include IE7.js if you are using IE8.js

PNG Note: The script only fixes images named: *-trans.png

Download
http://ie7-js.googlecode.com/svn/version/

Demo
http://ie7-js.googlecode.com/svn/test/index.html

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.

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.

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.

YUI Based Lightbox [Final] Released

Cuong Tham over at Code Central created a YUI based Lightbox library and has just released the final version. For those of you unfamiliar with Lightbox, check this out.

   

What's New in this release?

The most significant change in this version of the lightbox is that image thumbnails are no longer required for creating lightbox instance. That implies that you can create an image gallery without the presence of image thumbnails. The more exciting aspect of this new feature is that you can virtually grab any image from the internet and include it in your gallery.

Below is the detailed list:

* Ability to view full size and auto-fit version of the image
* Settings for changing background mask opacity and color
* keyboard shortcuts
* Tooltip panel for displaying extra information
* Navigation control toolbar
* Image transition effect
* External stylesheet for styling

Bug Fixes

* Fixed image goes outside of viewport bug
* Removed extra scrollbar when the image can be fit into the viewport

The lightbox has been tested in Firefox 2.0.0.6, IE 7, Opera 9.21.

Check out a demo with thumbnails and without thumbnails [I recommend the black or the white theme as they look best].

One thing to note is that this is a hefty Lightbox implementation, weighing it at around 63KB for all required JavaScript files whereas the original Lightbox library only required about 13KB of JavaScript. That's a high price to pay for a cool gallery. But nevertheless, thanks to Code Central for putting this out, it's nice to see the differences in their implementation. If nothing else, you can download their source and play with it in your sandbox.

Click here to read the full article and download the source code.

Ajax Pagination Script

Tagged:  

The folks over at Dynamic Drive have put together a nice ajax based pagination script that lets you draw content from multiple pages and display them on demand, using Ajax. Pagination links are automatically created, with each page downloaded only when requested (speeding up delivery and saving on bandwidth. An overview of this script now:

  • The pagination interface for each Ajax Pagination instance is "free floating", meaning it can be positioned
    anywhere on the page and repeated multiple times as well.
  • Each page within the paginated content is fetched individually and only
    when requested for sake of efficiency.
  • The settings for each Ajax Pagination instance is stored neatly in a
    variable object for ease of portability. This variable can be manually
    defined or easily dynamically written out based on information returned from
    the sever, such as via PHP/ MySQL.
  • The entire paginated content can be refreshed with new data on demand,
    with the pagination links updated automatically as well.

This script is ideal for showing multi-page content such as
"user comments" without reloading the rest of the page each time a
comment page is requested.

Click here to visit the site and to download the script.

Dynamic Drive also has a Virtual Pagination Script that lets you "transform long content on your page into a series of virtual pages, browseable via pagination links. The broken up content pieces are separated simply via arbitrary DIVs (or another block level element of your choice) with a shared class name." Read the full post on the Virtual Pagination Script

Let us know your experience with the Ajax Pagination Script or with any other pagination script you've worked with.

Syndicate content