Posts Tagged ‘JavaScript’

Load Content When Users Hit Page Bottom For Endless Scrolling

08 Sep

There’s a snazzy new feature we’ve seen a couple places that we just had to look into. When users reach the bottom of a page, more content is loaded. So, rather than users closing the window (or having to click a “next page” link), you can given them more to read. For sites with a significant amount of content, this makes for endless scrolling.

Example of endless scrolling

There’s a short delay, while an Ajax call, retrieves more content and pastes it below. Otherwise, it’s a smooth transition to the next bundle of blog posts, photos, or links. You can see endless scrolling in the wild at lifestreaming service, link-sharing site DZone, Google Reader (if you have an account), or this demo of the technology. Just scroll to the bottom of any of those pages.

If this is something you want to implement there’s a JQuery implementation for endless scrolling. As with many snazzy JavaScript tricks, you’ll need a server-side component to send the next set of data.

See also:

Comments Off on Load Content When Users Hit Page Bottom For Endless Scrolling

Posted in Uncategorized


10 Promising JavaScript Frameworks

03 Sep

Popular JavaScript frameworks/libraries like jQuery, MooTools, Prototype, and YUI (to name a few of the most popular JavaScript frameworks out there) definitely have a solid foothold in the JavaScript framework arena. But for the more adventurous developers looking for new or alternative frameworks/libraries – there are some excellent frameworks outside the popular ones that’s worth checking out.

It’s always good to consider all of your options before settling on a JavaScript framework that’s right for you and/or your team – and though there’s definitely a lot of compelling reasons to stick to the big names – it won’t hurt you any to at least try the alternatives.

This article showcases 10 alternative and capable JavaScript frameworks/libraries to explore. Links to some of their demos (when available) are included in the entry so that you can see the framework in action.

1. SproutCore

SproutCore - screens hot.

SproutCore distinguishes itself by emphasizing its usage for bringing desktop application functionalities on the web. It’s got a healthy amount of easy-to-follow guides to get you going quickly and its own Google Group for your questions and for interacting with other SproutCore developers.

SproutCore demonstrations: Photos, Sample Controls

2. Spry

Spry - screen shot.

Spry is Adobe’s Ajax framework. One of the many distinctive features of Spry is its tight integration with Adobe products (such as Dreamweaver, Flash and AIR). Just like any Adobe product, there’s already a ton of documentation to help you get started with Spry quickly.

Spry demonstrations: Photo Gallery, RSS Reader, Form Validation Widgets

3. JavaScriptMVC

JavaScriptMVC - screen shot.

JavaScriptMVC is a featured-packed JavaScript framework. JSMVC applies the Model-View-Controller (MVC) architectural pattern to JavaScript, separating business logic from the presentation layer - resulting in increased modularity and ease-of-modification for either one of the components. It has a built-in automated testing unit (because "JavaScript testing sucks") and even emails you when a user encounters an error.

JavaScriptMVC demonstrations: Error Demo, History Demo, Todo Demo

4. qooxdoo

qooxdoo - screen shot.

qooxdoo is an Ajax application framework that uses object-oriented JavaScript. It’s a framework that allows you to build a web application using JavaScript without worrying about HTML, CSS, and the DOM. It’s also a fully-featured graphical user interface toolkit (much like YUI) giving the developer built-in support for keyboard navigation, tabbed interfaces, and drag and drop capabilities - among other components.

Qooxdoo demonstrations: demo browser, Feed Reader

5. midori

midori - screen shot.

midori is a light-weight JavaScript framework. At it’s uncompressed state, it weighs in at only 45 KB (in comparison – jQuery in it’s minified state is 54KB). But just because its light doesn’t mean it’s lacking in complex JavaScript functions – midori offers common functions you’d expect from an JavaScript framework such as cross-browser Ajax functions, the ability to use CSS selectors (as opposed to midori-specific syntax) for matching elements in the DOM, and animated effects.

midori demonstrations: drag and drop, popups, toggle

6. Archetype JavaScript Framework

Archetype JavaScript Framework - screen shot.

The Archetype JavaScript Framework is a robust JavaScript framework that shares a lot of things in common with Prototype. Archetype has a dependency management system which initializes needed components for particular web pages(what components and CSS file to load – for example). Archetype also emphasizes code readability and coding best practices by being hard-lined about HTML/CSS/JavaScript separation (i.e. "unobtrusive JavaScript") .

Archetype demonstration: Slidy Presentation

7. June Framework

June Framework - screen shot.

The June Framework was inspired by the Core library and uses the Module design pattern. For those using MS Visual Studio 2008, you’ll love the documentation that comes with the June Framework because it utilizes Visual Studio’s intellisense format (code hints/auto-completion while you write).

June Framework demonstrations: setOpacity, highlight, getKeyName


UIZE - screen shot.

UIZE (pronounced "you eyes") is another JavaScript framework the emphasizes the creation of full-on rich internet applications (RIA) as opposed to basic effects and widgets/components on a web page. It already comes packed with "ready-to-go" widgets such as a date picker, a table sorter, progress bar, and color picker.

UIZE demonstrations: Slideshow With Wipes, Marquee and Image Port

9. SimpleJS

SimpleJS - screen shot.

SimpleJS is a simple and lightweight, but feature-packed JavaScript framework with Ajax helper functions and animation effects. It uses a "plugins" system much like jQuery and MooTools to extend the framework. It’s the perfect solution for developers who don’t need much outside of basic Ajax functions and effects.

SimpleJS demonstration: you can view the demos in the left side bar of the website under "Functions".

10. Fleegix.js

Fleegix.js - screen shot.

Fleegix.js has an excellent "events system" that helps you listen, manipulate, and fire off DOM event (such as mouseover’s, onclick, etc.). It includes a function for serializing JavaScript objects into JSON format (fleegix.jason.serialize) and – because every other JavaScript framework has it – an awesome effects module to help you add rich, animated JavaScript animation onto your web page or web application.

What are you rolling with?

Which JavaScript framework do you use, and why? What compelling factors would make you look for another alternative? What features from other frameworks/libraries does your framework lack? Let’s start up a discussion on JavaScript frameworks in the comments!

Resources on JavaScript frameworks to check out

Related articles on Six Revisions

Comments Off on 10 Promising JavaScript Frameworks

Posted in Uncategorized


Loading the background image first

03 Sep

When loading images on a website the background image could be the last to load which doesn’t look too professional. In this very short tutorial (more a tip I suppose) I will show you how to load the background image before anything else, you can apply this to any image that you wish, it is achieved by a bit of javascript in the head section.

In between the <head> and </head> tags of your html file, add the script tags:

<script type="text/javascript">


It is worth mentioning that this wont work in browsers without javascript enabled, but the majority do so there shouldn’t be any real problems. If a browser doesn’t have javascript then it will continue to load as normal.

Now add the following code in between the script tags like this:

<script type="text/javascript">
ImageA = new Image(width,height)
ImageA.src = "URL of Image"

Replace the (width,height) with the dimensions of your image, eg (100,100) and the “URL of Image” to the URL of the image eg “”. Now it should load before all other images on the page.

To add more than one image you can do something like this:

<script type="text/javascript">

ImageA = new Image(100,100)
ImageA.src = ""

ImageB = new Image(100,100)
ImageB.src = "" </script>

ImageC = new Image(100,100)
ImageC.src = "" </script>

There you have it, how to load an image first, this works because javascript (and the content between the <head> and </head> tags) is loaded in the browser before the content, hence before any other images or CSS styles.

Comments Off on Loading the background image first

Posted in Uncategorized