JavaScript

markitup

markitup is an interesting script that allows you to change a textarea html element and turn it into a markup editor. You can use it to edit Html, Textile, Wiki Syntax, Markdown, BBcode or even your own Markup system.

The script is built on the jQuery library and does a good job of using the library. In case you are unfamiliar with the library you can learn more about it here.

You can see quite a few examples of markitup here. Also, you can read the documentation for the script here. Click here to go to the markitup web page where you can download the script.

This script would be very useful if you are creating a CMS, Forum or any system where your users would need to edit markup.

Aptana Jaxer 0.9.5


Via Kevin Hakman at the Aptana Blog, Jaxer 0.9.5 is now available with more horsepower and extra bells and whistles.

Download the latest version here

Expect performance gains to due Jaxer's core now being based on Firefox 3 and because Jaxer now pre-parses scripts to bytecode. Bells and whistles include more natural window/document objects on the server side, no more inlined external scripts, and a new autoload feature that caches scripts so they don't have be loaded on demand.

Read more about this release in Kevin's post at Aptana

Meteora JavaScript Widgets 0.5

Meteora is set of cross-browser Widgets and Controls that you can use to write rich web applications. Meteora is an Open Source project of Astrata Software. It's based on the MooTools framework (version 1.11) and is released under the MIT license.

With the recent 0.5 release, you'll find the following updates:

  • Picbox: A control to display images in top of an overlay. It is smart enough to adapt itself to the screen size. [ demo | doc ]
  • Bubble: Shows "idea bubbles" in any element. We are using it within the Form control as an user-friendly way to display input errors. [ demo | doc ]
  • Treeview: Displays and allows the user to interact with hierarchical nodes. You can use AJAX to create and display new nodes. [ demo | doc ]

Download Meteora


JavaScript Step Carousel Viewer

Tagged:  

Dynamic Drive has posted a jQuery-based Step Carousel script that enables you to display images or rich HTML by side scrolling them left or right. Besides supporting sequential scrolling, it also has the capability to jump to any scroll item or scroll x items at a time. The script has two public methods, two custom event handlers, and three "status" variables to provide more control. It's also able to handle content defined directly inline on the page or loaded dynamically with Ajax. Content is simply contained in DIVs with a common CSS class. For implementation details, visit Dynamic Drive.



Visit the Step Carousel Homepage for more information, demos, and to download the script.

MooCrop - a JavaScript Image Cropping UI

Nathan White has developed an image cropping library called MooCrop, built with the MooTools JavaScript framework. MooCrop can be combined with a server side script to provide image manipulation functionality in your apps. The library weighs in just under 11K and totals for about 35K when you add in the YUI compressed MooTools framework.

Resize the crop area below and double-click it to see the result on the right:

Here are some features of the MooCrop class as described on its homepage:

  • Completely customizable CSS styling
  • Detects and handles multiple CSS box models
  • Allows for masking to be toggled
  • Ability to hide resize handles during drag
  • Custom events for your own modification
  • Relative based postioning rather then absolute (should handle overflow properly)
  • Works and retains layouts on floating images.
  • Resize from 8 different directions
  • Ability to set minimium size limit
  • Cleans up nicely, leaving your DOM in its original state when removed.
  • Fast!

Visit the MooCrop homepage for more demos, information, and downloads

ProtoFlow

Have you been looking for a cool way to display information on your web site or application. Well, one interesting script that can display information in a cool effect is ProtoFlow.

ProtoFlow is very easy to use and below is how you use it as described on the ProtoFlow web site.

How to use it?

Its fairly easy to use this lib. Just follow the steps:

  1. Download ProtoFlow and extract it.
  2. Add Prototype and Scriptaculous and Reflection.js to your page
  3. Add ProtoFlow.js and ProtoFlow.css to your page
  4. Add Markup and onLoad event (as described below)

Implementation:

Your HTML Markup would look like:


<div id="myCoverFlow">
	<img src="image1.jpg" alt="Caption for this image 1"/>
	<img src="image2.jpg" alt="Caption for this image 2"/>

	<img src="image3.jpg" alt="Caption for this image 3"/>
	.....
	<img src="imageN.jpg" alt="Caption for this image N"/>

</div>
			

Than you can initialize ProtoFlow like:

Event.observe(window, 'load', function(evnt)
{
	var ProtFlowExample = new ProtoFlow($("myCoverFlow"), {
		startIndex: 2,	//which image do you want the flow
						//to focus on by default
		slider: true,	//show or hide slider?
		captions: true,	//show or hide captions, by default we hide it. 
				//So YOU MUST turn it on here
		useReflection: false	//Add reflection to your images. Please 
				//note that this will slow down rendering.
	});
});
			

While there are other scripts that create a similar effect, ProtoFlow is the only one that I know of using Prototype and Scriptaculous. This makes it perfect if you are already using these libraries (just remember to compress the script files as appropriate as the libraries are a little large).

You can get more information about ProtoFlow and see a demo of it here.

If you find any interesting uses for the script I'd love to hear about it (you can leave a comment or you can write a blog post using your free Ajaxonomy account). So, start making that cool website or application and use this or some other interesting effect to make it stand out.

YouTube Data API Changes and Player API

If you haven't heard the big news yet, the YouTube Data API has been updated and the YouTube Player APIs have been released. The APIs look very interesting with some much wanted features.

The below is the big news from the YouTube Blog.

Here's the sound byte: We now support upload, other write operations, and internationalized standard feeds. (And there was much rejoicing!) We're also introducing player APIs and a chromeless player -- a barebones player SWF that's fully customizable and controllable using the player APIs.

The Data API now allows for reading (nothing new), writing and uploading of data (the latter two are the big news). The API allows for you to do many things that can be done in YouTube, such as add comments about a video or upload videos to YouTube. Libraries for the API are available for Java and PHP (sorry Ruby developers at least for now).

You can read more about the Data API here.

The Player APIs now offer a Flash (Actionscript 2.0) API and a JavaScript API to allow more control over the player. The JavaScript API and Flash API are very similar (which makes since as they are both based on ECMA Script). The APIs have some very powerful hooks into the videos. My personal favorite hook is player.getPlayerState() which returns the state of the player. Possible values are unstarted (-1), ended (0), playing (1), paused (2), buffering (3), video cued (5).

You can read about the JavaScript API here and the Flash API here (note that the Flash API is almost exactly the same as the JavaScript API, so you will need to read both references if you are going to use the Flash API).

Perhaps Even bigger news is the release of the chromeless player. Below is an excerpt about the chromeless player from reference.

Getting Started

First off, you need a developer key. To register for one, visit the registration page.

The chromeless player consists of two SWF files. apiplayer.SWF contains the actual video playing functionality. cl.SWF is a loader SWF that loads apiplayer.SWF and exposes the player's API functions. It also provides security sandbox restrictions for the apiplayer.SWF, so loading SWFs cannot access elements inside the player directly.

The player can be controlled via two methods — by loading the SWF into another SWF (or Flash website, etc.), or by embedding it directly in an HTML page and using JavaScript to control the player. The JavaScript controls are identical to the embedded player's JavaScript API.

The URL to load the chromeless player SWF is:

http://gdata.youtube.com/apiplayer?key=DEV_KEY

Functions

The following operations are available in addition to the ones listed in the JavaScript API documentation.

loadVideoById(videoId:String, startSeconds:Number):Void
Load the specified video and starts playing the video. If startSeconds (number can be a float) is specified, the video will start from the closest keyframe to the specified time.
cueVideoById(videoId:String, startSeconds:Number):Void
Loads the specified video's thumbnail and prepares the player to play the video. The player does not request the FLV until playVideo() or seekTo() is called. startSeconds accepts a float/integer and specifies the time that the video should start playing from when playVideo() is called. If you specify startSeconds and then call seekTo(), the startSeconds is forgotten and the player plays from the time specified in the seekTo() call. When the video is cued and ready to play, the player will broadcast a video cued event (5).
setSize(width:Number, height:Number):Void
Sets the size of the chromeless player. This method should be used in favor of setting the width + height of the MovieClip directly. Note that this method does not constrain the proportions of the video player, so you will need to maintain a 4:3 aspect ratio. When embedding the player directly in HTML, the size is updated automatically to the Stage.width and Stage.height values, so there is no need to call setSize() when embedding the chromeless player directly into an HTML page. The default size of the SWF when loaded into another SWF is 320px by 240px.

You can read more about the new features at the YouTube API Blog.

I think that these new feature really make it possible to make some great mash-ups with YouTube. If you create a cool mash-up using some of the new features of the API or use the the Player APIs or use the chromeless player then I would love to hear about it (you can leave it in the comments or you can write a blog post about it using your free Ajaxonomy account.

JavaScriptMVC - Model View Controller for JavaScript

You may have heard about the JavaScriptMVC library (it received quite a bit of press because of it's compression capabilities) and may have thought about using it, but haven't played with it yet. Well, I've been looking at the library and have found a few tutorials very useful.

If you haven't downloaded the library you will want to do it before starting working on the tutorials (You can download the library here).

The first tutorial you should read is the getting started tutorial. This tutorial covers the basics of including the JavaScript files and the plug-in files.

Below is an excerpt from the getting started tutorial.

Including plugins and JavaScripts

All JavaScriptMVC functionality comes in the form of a plugin. We'll include the Controller plugin, which organizes your event handlers.

Replace myapp.html with the following HTML. Note the numbered comments, which are explained after the code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
   <head></head>
   <body>
      <script type='text/javascript' src='jmvc/include.js'></script>
      <script type='text/javascript'> 
         include.plugins('controller'); 
include('myscript');
      </script>
   </body>
</html>
  1. Creates a script tag where we'll include a plugin and a script.
  2. Loads the Controller plugin.
  3. Loads myscript.js, a file we'll create in the next section.

The next tutorial that I would recommend reading is the controller tutorial. The tutorial goes over the syntax that is required to use the controller.

Below is an excerpt from the controller tutorial.

Main Controller

If you want to respond to events like:

  • the page being loaded
  • the page being unloaded
  • the page being resized
  • the page being scrolled

you create a special main controller by naming it 'main'. The main controller listens for events on the window, document, and body.

$MVC.Controller('main',{
  // the window onload event handler
  load: function(){
    alert('page loaded');
  },
  // the window resize event handler
  resize: function(){
    alert('page resized');
  }
});

The next tutorial that I would read is the view tutorial. This tutorial gives an overview of how the view functionality is accomplished including the use of templates.

Below is an excerpt from the view tutorial.

Create a Template

The first step towards cleaner code is separating your presentation markup (HTML) from your application logic (JavaScript). We'll do this by separating our presentation markup into a separate file called a template. Create a file called cleaning.ejs and insert the following code:

<h1><%= title %></h1>
<ul>
    <% for(var i=0; i<supplies.length; i++) { %>

        <li>
            <a href='supplies/<%= supplies[i] %>'>
                <%= supplies[i] %>
            </a>
        </li>

    <% } %>
</ul>

You'll notice everything inside <% %> tags is
executed and everything inside <%= %> tags inserts itself into the returned HTML string.

We need to add JavaScript to control the loading and rendering of the template.
We'll replace the original string concatenation code with the following:

// load the template file, then render it with data
var html = new View({url: 'cleaning.ejs'}).render(data);

Doesn't that feel better? The template code restores HTML to its intended structure and the JavaScript code is short and unambiguous.
The dust is clear, now its time to mop.

It is good to see a library try to bring some form of the Model View Controller design patter to JavaScript. If you use this library for any of your projects I would love to hear about them (as usual you can leave them in the comments or write a blog post about it using your free Ajaxonomy account).

Bad Object Detection

Tagged:  

John Resig has written another great post, this time about bad object detection. The article talks about classic bad object detection such as checking if the document.all object exists to test for Internet Explorer (I admit it I've been guilty of this one).

Below is an excerpt from the post.

Fringe Cases From Global Variables

While they don't happen often for those that they do happen to they can be a living hell. Specifically when object detection takes place within the global object (e.g. window.opera) then all bets are off as to its cross-browser applicability. Let's take a look at an example:

<html>
<head>
<script>

window.onload = function(){
  if ( window.opera ) {
    alert("You're using Opera, pick me!");
  }
};
</script>

</head>
<body> 
  <h1>Which browser?</h1>
  <a href="http://mozilla.com/" id="firefox"> Firefox</a><br/>

  <a href="http://apple.com/" id="safari"> Safari</a><br/>
  <a href="http://opera.com/" id="opera"> Opera</a><br/>

  <a href="http://microsoft.com/" id="ie"> Internet Explorer</a>
</body>
</html>

You would expect the alert to pop up when the user visits the page in Opera - and it does - however the alert also comes up in Internet Explorer. This is because all elements with an ID are automatically introduced as global variables (in the above there are four globals: firefox, safari, opera, and ie that all reference their associated elements). This is a fantastically difficult bug to spot and work around - thus you should be very cautious when doing any form of object detection on the global object.

Of course, it almost goes without saying, that there could exist an 'opera' variable elsewhere in the site that could interfere with this detection. Although that would, arguably, be easier to detect as it would make every browser trigger a false positive.

There's two morals here:

  1. Only use object detection to detect exactly what you need to use.
  2. Be wary of detecting properties on the global object - it's capable of lying to you.

You can read the full post here.

This is a great post and something that I hadn't thought much about. I really like John's blog and I find his posts very informative. I have often found information on his blog that I haven't seen anywhere else on the web (I know that I've said it before, but if you don't have John's blog on your feed reader, I would recommend adding it).

SWFUpload v2.1.0 Beta

Earlier this month, a new beta release of SWFUpload was posted over at SWFUpload.org. This release reduces the amount of code in SWFUpload, improves code reuse, fixes bugs, and adds some new features. All JavaScript in the project is said to have been run through JSLint.com to improve general quality and consistency. For a full change log, click here.

For those of you not familiar with SWFUpload, it is a small JavaScript/Flash library to handle file uploads. Here's a short description of how it works:

SWFUpoad uses a hidden Flash movie to handle file selection and upload. JavaScript is used to activate the file selection dialog. The file selection dialog is configured to allow the user select to a single file or to multiple files. The file types can be restricted so users only select the appropriate files (e.g., *.jpg;*.gif).

Once files are selected each is processed to check for valid file extensions and that the file is within size limits. Flash calls several pre-defined JavaScript callback functions which the developer overrides in order to update the page's UI so users can see file progress or errors.

The uploaded file is submitted separately from the rest of the page and form. Each file is uploaded individually which keeps the server-side upload handling script simple as it only ever has to handle a single uploaded file at a time. Since Flash is providing the upload service the page does not have to be reloaded. The usage pattern for SWFUpload is more like that of an AJAX application than that of standard HTML form. Often the server-side script that receives the uploaded file is different than the target of the page's form. The page's form will be processed separately from the file upload.

Check out some demos

Click here to download

Syndicate content