JavaScript

Web-based PDF Viewer

Have you ever wanted to make a PDF available by embedding it into a web page? Well now you can with Vuzit.

Below is how the makers of the application describe it.

Vuzit is a web-based universal office document viewer you can embed in any web page to help maintain consistent branding and site navigation. It provides document security and increases revenue by improving accessibility and user experience.

One of the biggest advantages is the protection of stolen data. It makes it more difficult to steal content as it can't be downloaded.

The below code is an example of how you would code a basic viewer.

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="http://vuzit.com/stylesheets/Vuzit-2.1.css" rel="Stylesheet" type="text/css" />
    <script src="http://vuzit.com/javascripts/Vuzit-2.1.js" type="text/javascript"></script>

    <script type="text/javascript">
      // Called when the page is loaded.  
      function initialize()  {
        
        vuzit.Base.apiKeySet("ApiKey");
        var viewer = new vuzit.Viewer(document.getElementById("vuzit_viewer"));
        viewer.setUrl("http://www.welcomingcenter.org/documents/PMP.pdf", { zoom: 1, page: 2 });
      }
    </script>

  </head>
  <body onload="initialize()">
    <div id="vuzit_viewer" style="width: 650px; height: 500px;"></div>
  </body>

Currently the API only supports PDF files, but more formats will be added in the near future.

You can get more information and get more code samples at vuzit.com

Cross Browser Sound in JavaScript

When working on an upcoming project I had the need to play sound through JavaScript. The method had to be cross-browser compatible, so I couldn't use any IE only calls.

Happily, I found a nice API called SoundManager2 which uses Flash to play the sound and is called through JavaScript. The API is very easy to use and below is a sample of how to use it.

The below code would be put inside the head tag of your web page.

<script type="text/javascript" src="soundmanager2-jsmin.js"></script>
<script type="text/javascript">

soundManager.url = 'soundmanager2.swf'; // override default SWF url
soundManager.debugMode = false;
soundManager.consoleOnly = false;

soundManager.onload = function() {
  // soundManager is initialised, ready to use. Create a sound for this demo page.
  soundManager.createSound('aDrumSound','button-0.mp3');
}</script>

The part of the above code that you will be most interested in is the last line. The soundManager.createSound('aDrumSound','button-0.mp3'); is what actually loads the sound file.

The below code will cause the sound to play.

soundManager.play('aDrumSound');

You can go to the project page by clicking here and get more information about the API. Also, you can download the files needed to use the API (including documentation and demos) here.

The library would be very useful in many applications including JavaScript games. If you create any cool applications using the API I would love to hear about it. You can post a blog entry about it when you create a free account (once you login just click on "Create content" => "Blog Entry") on this blog.

Cornerz v0.2 - A Canvas/VML jQuery Plugin

Jonah Fox has released a jQuery Plugin that will add those coveted curvy corners to your site with the use of Canvas/VML.

Usage:
$('.myclass').curve(options)

Options include:
* radius
* borderWidth
* background
* borderColor
* corners ("tl br tr bl"). Specify which borders to draw

Example JavaScript

$('h1').cornerz({radius:40, borderWidth: 0, corners: "tl"})

Example HTML

<h1 style='margin-top: 0px;'>Cornerz v0.2</h1>

Result

The corners are antialiased and load fast, partially do to the script only being 4K - uncompressed. There is a known issue with IE having trouble with odd height values. Jonah's workaround is to use padding-bottom:1px for elements with odd heights.

* Tested on :
- IE6 XP/Vista
- IE7 XP/Vista
- Firefox 2 Ubuntu/Windows
- Safari 3 Windows
- Opera 9 Windows/Linux

Visit the Cornerz homepage to view some demos or click here to see the source.

Error Handling in JavaScript

Tagged:  

This article from Clientside discusses three types of error handling in JavaScript:

  • Graceful: if possible, just ignore the error and continue with some default state or without a meaningful value
  • Debug: throw a warning to the dbug.log method but continue otherwise
  • Break: Either explicitly throw an error or (more often) just let the error that is thrown at runtime be thrown

Graceful Examples
Graceful degradation includes some default behavior that occurs when data is missing or an expected result does not occur.

this.id = this.options.id || 'StickyWin_'+new Date().getTime();

A common practice of graceful error handling is to include Try/Catch statements

getContent: function(){
    try {
        new Ajax((this.options.ajaxLink || this.options.observer.href), $merge(this.options.ajaxOptions, {
                onComplete: this.show.bind(this)
            })
        ).request();
    } catch(e) {
        dbug.log('ajax error on PopupDetail: %s', e);
    }
}

Debug Example - warning the user

var ln = this.options.ajaxLinks.length;
if(ln <= 0) ln = this.options.details.length;
if (this.options.observers.length != ln)
    dbug.log("warning: observers and details are out of sync.");

Break Example - toss that exception

ret = Date.$months[month - 1] || false;
if (!ret) throw new Error('Invalid month index value must be between 1 and 12:' + index);

Read the full post over at Clientside

Book: The Art & Science of JavaScript

Tagged:  

If you haven't heard, a new JavaScript book is out on the market. The text is published by Sitepoint and is coauthored by James Edwards, Michael Mahemoff, Ara Pehlivanian, Cameron Adams, Dan Webb, Christian Heilmann and Simon Willison.

Who the publisher says the book is for:

This book is targeted at intermediate JavaScript developers who want to take their JavaScript skills to the next level without sacrificing web accessibility or best practice. If you’ve never written a line of JavaScript before, this probably isn’t the right book for you—some of the logic in the later chapters can get a little hairy.

If you have only a small amount of experience with JavaScript, but are comfortable enough programming in another language such as PHP or Java, you’ll be just fine—we’ll hold your hand along the way, and all of the code is available for you to download and experiment with on your own.

And if you’re an experienced JavaScript developer, we would be very, very surprised if you didn’t learn a thing or two. In fact, if you only learn a thing or two, you should contact us here at SitePoint—we may have a book project for you to tackle!

What they say you'll learn:

* Create a slick Google Maps and Flickr mashup.
* Build your own fully accessible 3D maze.
* Have some fun with draggable and sortable table columns.
* Give your site some extra personality with client-side badges.
* Write better code faster using metaprogramming techniques.
* Create stunning vector graphics using the canvas element.
* Become a debugging expert using pro-level Firebug tricks.

What's in the TOC:

Chapter 1: Fun with Tables
Chapter 2: Creating Client-side Badges
Chapter 3: Creating Vector Graphics with canvas
Chapter 4: Debugging and Profiling with Firebug
Chapter 5: Metaprogramming with JavaScript
Chapter 6: Building a 3D Maze with CSS and JavaScript
Chapter 7: Flickr and Google Maps Mashups

Visit the book's homepage at Sitepoint

If you've had a chance to start reading this book, please post your review in the comments.

JavaScript Cheat Sheet

Tagged:  

This one's an oldie, but a goodie. A few years ago the folks over at ilovejackdaniels.com put together a JavaScript Cheat Sheet that is designed to act as a reference sheet for JavaScript functions and methods.

The reference material covers:
* Functions & Methods
* Regular Expressions
* XMLHttpRequest
* JavaScript in HTML
* and last but not least, Event Handlers

Click to download:

Their other cheat sheets include:

If you'd like to get your hands on even more cheat sheets, check out this post on menekali.com that lists a ton of them.

*update*
If you're looking for some UNIX & Perl Cheat Sheets, check out Peteris Krumins blog. Thanks Peteris!

Tatami integrates the Google Web Toolkit and the DOJO framework

The Tatami project is an attempt to integrate the Google Web Toolkit (GWT) and the DOJO JavaScript framework. Tatami pulls in DOJO's rich widgets and utilities (like fisheye, slider, drag and drop functionality) and makes them accessible to the GWT as widgets and helpers. Tatami is compatible with the GWT 1.4 final version.

Check out the demo (may run slowly because files are being served from SVN)

Last month's release of Tatami-1.1 contained some new features, they are:

* DOJO 1.0 wrapped

* DropdownDatePicker and DropdownTimePicker with validation.

* Slider with labels an rule mark.

* The GFX package of DOJO wrapped. (Circle, Rectangle, Path, scaling...)

Visit the Tatami project homepage.

LiveValidation - JavaScript Form Validation

Tagged:  

Another useful validation script to take a look at, named LiveValidation, is a JavaScript Form Validation script that can easily add some slick UI enhancements to your existing forms. This definitely beats rolling your own form validation, especially if you tend to throw in some old school alerts like alert("Please enter your first name");

* Visit the LiveValidation Homepage

* View some Examples

* Download the Script

Snipplr - a public source code repository

Snipplr is a public source code repository that gives you a place to store and organize all the little pieces of code that you use each day and It lets you share your code snippets with other coders and designers.

Snipplr was designed by Sitening, a Nashville Web Design company originally to store their code snippets in one place. They currently have around 3605 snippets in the following categories:
* ActionScript
* ActionScript 3
* Apache
* AppleScript
* ASP
* Assembler
* Bash
* C#
* C++
* Cold Fusion
* CSS
* Diff
* Emacs Lisp
* eZ Publish
* Forth
* Fortran
* Groovy
* HTML
* Java
* JavaScript
* Lisp
* Lua
* MatLab
* NewtonScript
* Objective C
* Open Firmware
* Other
* Pascal
* Perl
* PHP
* PicBasic
* Python
* Rails
* Regular Expression
* Ruby
* SmallTalk
* Smarty
* SML
* SQL
* SVN
* TCL
* TYPO3
* VB.NET
* VHDL
* Visual Basic
* W-Language
* XML

Click here to visit to the Snipplr code repository and let us know what you think.

Game Development using the Yahoo! User Interface

As with many people that get into programming, I started programming because I wanted to make video games (in-fact I have had a few games published about 10 years ago). Now that I am in the web development industry, I from time to time like to look at the developments in Video Game development as it pertains to the web.

The Yahoo! User Interface is a great library for development of JavaScript based applications, including Ajax applications. The library has quite a few methods to help with animation that can be very useful in developing games. Today, I'm not going to go into much detail on using the library to make a game (this will be in a later post), however, I do want to show you how well these games can look.

Check out the below games that where made using the Yahoo! User Interface.

I was amazed at how close these games are to their Flash counterparts. Of course the advantage to using JavaScript over flash is that no plug-in is required to play the game.

You can read more about the Yahoo! User Interface here.

If you've seen any other cool games built using the Yahoo! User Interface I would love to hear about it. If you sign up for a free account you can blog about it on this blog or you can leave them in the comments.

Syndicate content