Ruby is one of the most versatile object oriented programming languages, which was designed explicitly to have a human focus, as compared to the machine focus of many other languages. Developed in the mid-90’s, initially in Japan and then elsewhere, Ruby is based on the “principle of least surprise” (POLS) which states that when two elements of an interface conflict, or are ambiguous, the behavior should be the one that will be least surprising to a human user or programmer. In simple terms that the most obvious behavior is the one that will result. And this is perhaps what gives Ruby its power and in turn has caused Ruby to become one of the most widely used programming languages for the web. There are of course many other useful features in Ruby, including but not limited to Dynamic Typing, Duck Typing, Automatic Garbage Collection, First Class Continuations, an Interactive Ruby Shell, variable scope at four different levels (global, class, instance, local), facilities to support metaprogramming and a standard set of object oriented features (inheritance, metaclasses, exception handling, operator overloading etc.). Finally, Ruby supports a number of programming paradigms: other than object oriented, also functional, imperative, and reflective.

But in addition to all the things that the native Ruby language can do (and Ruby carries a pretty large standard library), perhaps what makes it so suitable (and useful) for programming of various types, and especially web programming, is the existence of a number of Ruby frameworks. A Ruby framework is collection of pre-written libraries, functions and controls that can be downloaded and used to make your programming task easier. In addition to a time saving, there is also a significant benefit in terms of programming efficiency and implicitly a more consistent programming style (since so much is pre-defined, one begins to use or utilize the paradigm of the underlying framework when writing a program).

Ruby-on-Rails is perhaps the most popular (certainly the most well-known) of the Ruby frameworks that is in use today, but there are also many others such as Nitro, Sinatra, Merb, and Camping. There are a number of things to consider when deciding on a framework. We will look at some of these things in detail before moving on to a description of some of the most common in use today, including the ones mentioned above. Since Ruby is primarily used for web programming, implicitly that will tend to be our focus.

Why Ruby in the first place?

Now, we have touched upon this a little bit in our introduction, obviously POLS and the sheer flexibility of the programming language makes it a natural choice for a number of programming tasks. There is also the fact that Ruby is in philosophy (and in other ways, syntactically) similar to a number of other programming languages such as Perl, Smalltalk, Lisp, Ada, and Eiffel – languages on which Ruby was based during its development. This makes it easy for programmers comfortable using these languages or their programming styles to quickly adapt to using Ruby. The same is true of programmers working with Python, Dylan, and CLU because Ruby is also similar to these in many respects. The strong focus on the object oriented paradigm makes it easier for anybody with a strong grasp of object oriented principles to quickly get cracking in Ruby. Finally, as mentioned before there is the flexibility of different programming paradigms, such as the functional, imperative and reflective (obviously in addition to the Object Oriented) that makes it attractive to programmers.

But there are other things going on under the hood that make Ruby such a popular choice, especially for web programming. It would be instructive to go into a detailed discussion of this, but we know this is neither the time or place for this so we will just mention two of the things that we think are most important. The first is something that is pretty obvious to most people experiencing a language like Ruby versus an extremely popular language like Java, and that is the scripting-like programming, which in addition to making code more human-friendly, also renders other advantages – everything in Ruby is an expression and everything is imperatively executed. What is less obvious and perhaps more important is the fact that with Ruby a strict adherence to the MVC (Model-View-Controller) architecture is possible. In fact, the power of the MVC architecture, and the capability of the Ruby frameworks to inherently support it (all 5 mentioned in the introduction above do so) is what makes Ruby so suitable for web programming.

A bit about the MVC

The core principle of the MVC architecture is to separate application logic from the user interface (UI). The View part, as the name suggests, refers to the UI part of the software, and this is completely separated from the application logic which along with the domain-specific data constitutes the Model. The Controller is in charge of receiving input from the UI and initiating an appropriate call on Model objects. Data is then returned by the Model which is directly delivered to the View (without any intervention from the Controller).

In the Web domain, the UI is HTML and the inputs received by the Controller are the GET and POST requests. The Controller then hands this over accordingly to certain Model objects, which then how to handle the request. The separation allows for a great deal of flexibility and the individual implementation of each piece of the architecture can be replaced without affecting the other pieces as long as the same interface is offered. This is especially important in business/commerce applications where policy changes can easily be applied by creating a different Model object, without touching the UI side.

MVC and Ruby frameworks

This kind of separation is what not only enables flexibility but in turn allows for rapid development of Web applications using Ruby frameworks. Most often the task of choosing the right Ruby framework boils down to the task of designing the proper MVC architecture (i.e. the individual pieces required for your particular application) and once these are well specified, this can guide you towards making more informed decisions regarding which framework to use.

To begin with it’s important to describe what the application domain is, that is what will the data look like. Are they records or are they files? What relationships, if at all, exist between different data elements and so on? This in turn will lead you to creating a new database for the application’s needs. Of course in many cases, you may already have the database available and that will automatically answer many of these questions for you.

The next task is to identify what can happen to this data. Can records be updated? Can they be deleted? And so on. It makes sense to spend a lot of time planning out all the possible ways in which you want user’s to be able to interact with data. Although, the Model part can be replaced easily, remember that the interfaces will still need to be consistent. Policy also plays a big role here.

Once you have elucidated all that you want the Model to do, you can proceed with the UI design. How do you want the application to appear in the Web-browser?

Ruby frameworks that support MVC (and most of them do) make the actual implementation of each of these pieces a breeze, because each of the three pieces of the architecture is handled by a specific sub-system, and if you have spent the requisite amount of time in planning you can pick and choose the specific functionality that you need for each sub-system. The skeleton is already implemented, you need to decide the details and you are away.

Choosing the right framework

The importance of the planning stage cannot be overstated, because the planning stage giving give you a road map as to what kind of framework you need. Essentially, this begins with the question of what you need to get done. What are the features and capabilities that are essential to the success of your project. This then gives you the outline for what you need.

Once you have the outline, there are several other things that you need to consider. Does a given framework have a strong support system and community? Is it used by a number of people? (Usually a more popular variant, or one that has been around for longer is also more likely to have a stronger support system and community.) Another related consideration is how well a framework is documented. In many cases there might be situations where your development team either has previous experience working with a certain kind of framework, or a certain style of Ruby programming, and this can direct your search for a framework.

If starting from scratch, then things such as how easy a particular framework is to use and understand, as well as how easy is it to develop and deploy, become important considerations. The development and deployment speed are also important considerations when not starting from scratch depending on the project timeline. Perhaps one of the things that is sometimes underrated is how comfortable you are using a particular framework.

Generally, to avoid errors/bugs and to ensure the stability of your web application, it makes sense to use a popular solution since finding answers to common questions and fixes for common solutions is easy. The most popular solutions (and those that have been around for a long time) have also been extensively tried and tested, ensuring a certain peace-of-mind for developers using it. And this, clearly, has something to do with that comfort aspect.

Compatibility checks (before installing a framework), and making sure that the framework has been installed and is functioning properly will ensure that once the development cycle is underway it will be relatively smooth sailing – at least in terms of the framework aspects – the problems of debugging the non-framework parts, and ensuring that you are using the framework in the right/desired way will remain, but don’t worry, these will surely get resolved as your project progresses (more so in the case of readily available documentation and strong support).

Ruby Frameworks

Ruby on Rails

Ruby on Rails is perhaps the most popular Ruby framework that is in use today, and with good reason. Ruby on Rails was the framework that popularized the MVC approach as it relates to the task of web programming. This is done primarily by the Ruby on Rails MVC framework that consists of the Model (ActiveRecord), View (ActionView) and Controller (ActionController) sub-systems. It is open source and comes with a rich set of features including: AJAX support (via Prototype/script.aculo.us JS frameworks); a host of testing (Unit, Functional and Integration), security, caching and form-validation frameworks; internalization and localization functionality; and there are also pretty standard features such as DB migration frameworks, MVC Push capability, etc.

Ruby on Rails emphasizes agile development, “Convention over Configuration” (developer only needs to concentrate on the non-conventional aspects of application development) and “Don’t Repeat Yourself” (information is located in a single, unambiguous place). Since it has been around for a while, there is a well-defined API, extensive documentation as well as tutorials all over the web and finally a vibrant and supportive community.

Nitro

Nitro is actually a framework that was around before Ruby on Rails became popular. There are a number of web developers who still swear by it. One of its finest features is a powerful template system that has a pipeline of configurable transformation steps. It is open source and along with the template style programming, there is the option of using the MVC approach as well. Og is the persistence layer (or object relational data mapping; ORM) that works with Nitro.

Nitro is comparable in its feature set to Ruby on Rails including AJAX support, testing frameworks, MVC Push, caching frameworks, security frameworks, internalization and localization, DB migration and more. However, its support and documentation is suspect, and in recent times interest in Nitro seems to have waned.

Merb

Merb is probably the second most popular framework in use after Ruby on Rails these days. One of the most interesting things about Merb is that it chooses not to make ORM, Templates, etc. frameworks/functionality part of the native system. These can be added via extension plug-ins and this allows the developer the flexibility to use whichever solution he/she prefers (or what makes sense for a given project). It does have a good feature-set that is part of the base system. It is an MVC based framework and has some of the best documentation (including useful getting-started tutorials).

Camping

At less than 4kb code size, Camping is one of the lightest Ruby frameworks around. In fact, it is one of the developers’ stated goals to always keep it below 4kb code size. It once again follows the MVC philosophy and provides a single file in which to carry out the development of the entire application (although the separation between each sub-system is still maintained). The developers also suggest that once initial or prototype development is completed in Camping the project can easily be migrated to Ruby on Rails. So in some cases Camping is a precursory development environment for Ruby on Rails.

Camping does not have AJAX support, internalization and localization frameworks, nor security, caching and form-validation frameworks, but has pretty much other necessary functionality such as DB migration, Testing frameworks, ORM, etc.

Ramaze

Ramaze’s emphasis is on simplicity. Ramaze also has a strict adherence to modular design and having minimal dependencies between different modules. Ramaze comes with a templating system called Ezamar and also has a fairly full-featured support for MVC applications.

Sinatra

Sinatra is a Ruby framework which like Camping is perhaps more suited for prototype development than actual business applications. It does, however, have a pretty standard set of features including MVC support, DB migration, Template and Caching frameworks. It does not have AJAX support, nor security and form-validation frameworks.

IOWA

IOWA is another framework that has been around for a long time. It has support for both Event based and Cluster based modes of operation. Interest in IOWA has also slacked in recent years.

Halcyon

Halcyon is another lightweight framework whose aim is to support service-oriented applications (SOA). It has AJAX support through the JSON interface, and overall is a very well documented project and has a strong support community.

Waves

Waves seeks to provide an alternative solution for applications that do not need an MVC architecture. Thus, it has support for such things as AJAX, Adobe Air, mashups, OpenID, rich-client mobile apps, etc. This is done through a rich DSL. Waves’ developer speaks of the concept of request lambdas which are basically request mapping into a certain block, which results in a certain level of flexibility by removing some of the responsibilities of the Controller and placing the emphasis more on mappings. However, note that this is a subtle or implicit modification to the MVC pattern, and so use only after you have a good grasp of what’s going on and are confident that this is exactly what you need.

RubyWAF

Ruby Web Application Framework (RubyWAF) is based on Jakarta Structs and enables web/wap application development. It can also serve as a starting point for developing custom Ruby frameworks.

Ruby/EventMachine

It is a Network I/O and Event Management system for Ruby.

Webby

Webby is a Content Management System, which the publisher’s call a website management system because they think it is not big enough.

Radiant

Like Webby Radiant is an open source Content Management System.

Ruby-GNOME2

And finally little off-beat, for Linux enthusiasts: Ruby-GNOME2, a set of Ruby language bindings for the GNOME 2.0 development environment.

With basic HTML tables, the structure and the way the table are presented inherits the native html style. And if you like to change it then you need to change the underlying HTML code or spend time in adding attributes to all tables tags, in order to style it with CSS . But what if you want to make the tables more interesting, more dynamic, more visual appealing without spending so much time. Yes you can certainly use JavaScript for this, but coding it from scratch will be time consuming and it’s not worth. But JS libraries/frameworks will allow you to add a range of dynamic behavior to your tables and manipulate it for better presentation on a webpage without spending much time. We decided to list a few for the benefit of those who intend to use tables with JavaScript(JS). Most of these are for the popular jQuery, MooTools and Prototype/script.aculo.us JS frameworks. Since most of the JS frameworks mentioned below are plug-ins that work on top of existing JS frameworks, it is recommended that you take a look at those base frameworks first. But there are a few others that do not require an existing JS frameworks.

Solutions Based on jQuery

Flexigrid

Flexigrid is a lightweight plug-in for jQuery that converts an ordinary HTML table into an extremely flexible and feature-rich datagrid (or Flexigrid). Resizable columns, ability to connect to an XML data source through AJAX, data scrolling, search, pagination, themes, and the ability to add a toolbar are some of its features.

tablesorter

tablesorter is a jQuery plug-in for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell. It has a number of interesting features including: multi-column sorting; support for secondary hidden sorting; preloaded sorters for text, URLs, integers, currency, etc. – your own can be added easily; cross-browser support (except Chrome); and the system is easily extensible via the widget system.

TableRowCheckboxToggle

This is a plug-in that generically adds the toggle checkbox function to any table rows you specify based on the css class names. It will by default toggle any checkboxes within the table row. You can also manually exclude checkboxes based on various criteria: name, id, or CSS classes. And more. See the live Demo here.

TableEditor

TableEditor provides flexible in place editing of HTML tables.

ingrid

ingrid is a jQuery datagrid plug-in. It makes it possible to achieve a number of datagrid behaviors such as column resizing, paging, sorting, row and column styling, etc. Take a look at the examples page to see some of the possibilities.

columnManager

columnManager is a jQuery plug-in that enables you to toggle the visibility of table columns (collapsing / expanding) and also to save the state of the table until the user’s next visit to the webpage.

DataTables

DataTables is a plug-in that adds advanced interaction tools to your HTML tables. These include: on-the-fly sorting; multi-column sorting with automatic detection of data types; variable length pagination; and an extensible API to add more features of your own. It can display data from almost any data source – DOM, JS array, AJAX files and supports Server-side processing (PHP, C#, Perl, Ruby, AIR, Gears, …). Tables can also be themed by CSS or jQuery UI ThemeRoller.

uiTableFilter

uiTableFilter by Greg Weber is a jQuery plug-in for filtering table rows. The arrows at the top of each column enable you to sort accordingly. He has also created another great plug-in uiTableFilter, which makes tables editable by users.

Scrollable HTML Table

Convert ordinary HTML tables into Scrollable HTML Tables.

JQTreeTable

JQTreeTable enables you to have a tree-view for an ordinary HTML table. It also has graceful degradation inasmuch as, once the browser’s JS is turned off, the plain HTML table view is maintained.

CSV2Table

A plug-in that helps to load a CSV file and load the data values directly into a table.

Table Pagination

This can help to create a pagination element at the bottom of a table.

Table Drag and Drop

Pretty self-explanatory name: enables users to reorder rows according to their own criteria (for example priority). Individual rows can be marked as non-draggable and/or non-droppable (i.e. other rows cannot be dropped on to them).

Solutions Based on MooTools

OmniGrid

OmniGrid is a plug-in for the MooTools JS framework that can add a rich set of functionality to your data grids and HTML tables. These functionality include: pagination; Server-side and Client-side sorting; resizable columns; connection to back-end databases through AJAX; multiple selection and more. It has been inspired, according to its author, Marko Šantic, by Flexigrid (see above) and PhatFusion’s sortableTable (see below).

TableGear

TableGear is a MooTools+PHP powered component that enables you to manipulated data on the web in various ways. It helps you easily create interactive HTML tables. Features include: sorting; the ability to add and delete rows on-the-fly; keyboard shortcuts; graceful degradation to simple tables in the absence of JS capability on a browser; data loading through AJAX and POST; and is fully XHTML compliant.

Phatfusion Sortable Table

Phatfusion’s sortableTable enables you to sort and filter HTML tables. Sorting can be done on numbers, strings, dates and currency. Filtering can be done on columns.

Zebra Tables

Zebra Tables, developed by David Walsh, is a MooTools plug-in that implements “Zebra” presentation on ordinary tables (i.e. alternate rows are different colors).

mootable

mootable enables conversion of an ordinary HTML table into what the author’s call a mootable, which is simply saying that the table now will have interactive capabilities such as sorting, resizable columns, and the ability to hide/show columns. They degrade gracefully because they are still simple HTML tables at heart.

Solutions Based on Prototype

TableKit

This is a whole set of enhancements for HTML tables. It implements a number of functionality including: column sorting, column resizing, row striping, user cell editing using AJAX, and more.

Solutions Based on Yahoo! UI

YUI DataTables

The Yahoo! UI (YUI) people provide their own control for making powerful HTML tables which is called DataTable. YUI DataTables has pretty advanced functionality: sorting; user cell editing; pagination; scrolling; row, cell and column selection; ability to hide, show, insert or delete columns; and more.

Solutions that Do Not Depend on an Existing Framework

KeyTable

Although KeyTable has a couple of jQuery components, since they are just two it can be easily be made to work with other JS frameworks. It takes any simple HTML table and is able to add things such as keyboard-based navigation and event bindings. The author (Allan Jardine) calls this Excel style navigation, because the table entries can be edited without the use of a mouse. The current cell is highlighted (see below) using event handling functions through the API: “focus” – when a cell is highlighted; “blur” – when user navigates away from the highlighted cell; “return” – when user hits a return key for the current cell; and “esc” – when user hits the escape key.

Tablecloth

Tablecloth is a lightweight, easy to use, and unobtrusive way to add style and behavior to html table elements. Tablecloth searches your HTML source for table elements and processes each one individually. It is easily extensible with the function that gets called when the user clicks on a table cell being editable.

TinyTable

At a 2.5KB download size this is an extremely lightweight solution, that adds a number of attractive features to simple HTML tables which include the following: alternate row highlighting; header class toggling; auto data type recognition; selective column sorting; column highlighting; optional pagination; support for links; and date/link parsing. See the live demo here.

DrasticData

This is an exciting PHP/JS/MySQL based open source package with an AJAX-based datagrid, which comes with editing support, a configurable tag cloud and even a Google Mapping component. See the host of examples for what is possible. The example below shows reverse sorted “Continent” column and hitting the red “x” on row 6 has brought up the dialog box. Check out other examples at the homepage.

JavaScripTools

JavaScripTools is a collection of useful JS components, functions, and classes with the aim of simplifying the web developer’s task. Its features include parsers/formatters for various data types. In particular, it comes with a dynamic table function that is useful for creating sortable HTML tables.

Standardista Table Sorting

This is a JS module that allows to take an HTML data table and make it sortable by any column. Sorting can be done on various data types including IP addresses, Currency, numbers, Plain text, and dates. The example shows the “price” column sorted.

Unobtrusive Table Actions Script

The author’s goal was to create a solution which was not tied to any underlying JS framework and so we get the Unobtrusive Table Actions Script. This has a number of useful features including: “Zebra” striping of rows; row hover, cell hover, and column hover effects; table rows can be selected on click and the behavior on click can be programmed via a callback function, allowing for flexibility for the web developer; row and column highlighting and selection; and the ability to hyperlink cell contents. See example below: row 6 has been selected; the mouse pointer is actually on row 10 and column 2 causing that to be highlighted as also the entire row; finally, there is a hyperlink at cell (1,1).

sorttable

sorttable is a JS framework that enables you to convert all your HTML tables and make them sortable (see example below – name column is reverse sorted). sorttable uses DOM, sorts a number of different data types and it is completely unobtrusive.

dragtable

As its name suggest dragtable makes table columns draggable. Users can now change the order of table columns by dragging them wherever they need to. Enable users to change order of table columns by simply dragging them. It can and is meant to be used in conjunction with sorttable.

You might have seen and used lot of JavaScript redirection before. What sets this JavaScript apart from others is that it redirects to a new location only on chosen page. This can come in handy if you don’t have access to sever-sided scripting, which is usually used for such path/URL specific re-direction. Like most of the weblogs – blogger, Wordpress MU, etc.

<!--Path Specific Re-direction from www.thepixelart.com-->
<script language="JavaScript">
var currentpage=location.href;
var spage="http://pixelart.com/web";
if(currentpage==spage)
 setTimeout("location.href = 'http://www.example.com';",10000);
</script>

Here “spage” is the page which needs to be redirected to new location. www.example.com represents the new location and the number “10000” is the time delay.

Processing is great tool for programmers for creating graphics which can be manipulated with any given input. It’s free and open source and uses Java programming language which in itself is great. There is very little you cannot do with Processing. Besides producing graphics for videos, art installations and concerts, it can be used for web (within browser) like flash. It has a vibrant and creative community of developers, teachers, and artists that share their work, contribute ideas, and expand the features of Processing. Below we feature useful free source code of various web applets created with processing. And it’s not limited for use of web only,but you can use the code to create amazing interactive static and motion graphics in any project.

Cloth

Base26

Line of Elegance

Sea Thing

Fall in love

Tube Galaxy

FauDropFont

Mappa

Birch Tree

Cherry Tree

Perlyburly

Meshy

Washing Machine

Ribons

Fluids

Also check Raycoaster

Magnets

Stripes

Swinging

Glow

Hairball

Bugs

Eye for an Eye

Bubbles

Twinkle

MorphMonster

Bounce

Shell

Barebones

Segmentmonster

Small code snippet that will allow you to display random images, every time the page loads. Major advantage of using it is that you no longer have to make use of scripts (JavaScript) which can be bulky, especially on the older browsers. Though we have used this code with images only, it can be easily used for any other object to be displayed in random order. It’s more of PHP than Wordpress.

Code

Place this code anywhere in your Wordpress template – header, footer, etc, with appropriate changes to CSS.

<div id="image<?php echo rand(1,4); ?>"></div>
 

Change (1,4) depending upon the number of images.

CSS

Add this CSS code to the Wordpress template CSS file.

#image1 {
background:url(img/image1.jpg);
width:500px;
height:100px;
}
#image2 {
background:url(img/image2.jpg);
width:500px;
height:100px;
}
#image3 {
background:url(img/image3.jpg);
width:500px;
height:100px;
}
#image4 {
background:url(img/image4.jpg);
width:500px;
height:100px;
}
 

For long now flash has been dominating the interactive web animation, using JavaScript was a daunting task. But introduction of frameworks like jQuery, MooTools, Scriptaculous, etc have made animating web component much easier. Another advantage of using these frameworks over flash is that they are search engine friendly. Though search engine do not index JavaScript, actual content is present in html or other SEO friendly code.

You must have seen this text effect on many flash websites. jTicker is a jQuery plugin that can be used for creating such effect without the use of flash. This effect comes in handy when you want to force the visitor to read the text. But should be used wherever necessary, as the usability suffers. jTicker can be declared on any element and can be stylized using CSS. You can also use event buttons to play, stop and control the speed of the effect.

HTML

Let us start with html markup. Make sure that you have linked the .js files correctly.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jticker | Demo</title>
<script type="text/javascript" SRC="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" SRC="js/jquery.jticker.js"></script>
</head>
<body>
<div id="content">
  <h2>jTicker Demo  </h2>
  <div id="ticker">
    <div>
      <h3>What does jTicker do?</h3>
        <p>jTicker takes an elements' children and displays them one by one, in sequence, writing their text 'ticker tape' style. It is smart enough to ticker text from an element heirarchy, inserting elements back into the DOM tree as it needs them. That means almost any content can be 'tickered'.</p>
        <p>It can be controlled with jQuery events.</p>
        <a class="next" href="#">next</a>
    </div>
    <div>
      <h3>Not my cup of tea, really, ...</h3>
        <p>annoying little blinky things trying to distract attention when you want to get on with the serious business of reading a website, but if it's your thing, here it is.</p>

        <a class="next" href="#">next</a>
    </div>
    <div>
        <h3>jTicker has some neat features:</h3>
        <ul>
        	<li>jTicker can be declared on any element, and it respects that element's DOM tree, printing it back out with the same hierarchy.</li>
            <li>jTicker handles any number of alternating cursors (or just one).</li>

            <li>jTicker's cursor container is styleable using the class .cursor, or can be defined as your own jQuery object</li>
            <li>jTicker reacts to jQuery events "play", "stop" and "control". You can try them out below.</li>
        </ul>
        <a class="next" href="#">next</a>
    </div>

    <div>
        <h3>There is one caveat:</h3>

        <ul>
            <li><span>jTicker can't understand text and children at the same level (I don't know how to do that yet), so if you want some text and then a link, you have to wrap the text in, say, a span, like this:</span>
                <code>|span| some text |/span| |a|and then a link|/a|</code>
            </li>
            <li>But obviously not with those brackets. That's another thing, jTicker is not good at handling html character entities. So make that two caveats.</li>
        </ul>
        <a class="next" href="#">next</a>
    </div>
  </div>
</div>
</body>
</html>
 

CSS

Add this code to your CSS file or to the <style>

  #ticker
    {height: 12em; padding: 0.6em 0; margin: 0 0 1.8em 0; border-top:3px solid #efefef; border-bottom:3px solid #efefef; position: relative;}
  #ticker .cursor
    {display: inline-block; background: #565c61; width: 0.6em; height: 1em; text-align: center;}
  #ticker p
    {margin-bottom: 0.8em;}
  #ticker code
    {margin: 0.4em 0.4em; display: block;}
  #ticker .next
    {position: absolute; bottom: 1em;}

JavaScript

Now initialize jTicker by adding this JavaScript to <head> between <script type=”text/javascript”></script>

<!--
  jQuery(document).ready(function(){
    // Instantiate jTicker
	jQuery("#ticker").ticker({
 		cursorList:  " ",
 		rate:        10,
 		delay:       4000
	}).trigger("play").trigger("stop");

    // Trigger events
    jQuery(".stop").click(function(){
        jQuery("#ticker").trigger("stop");
        return false;
    });

    jQuery(".play").click(function(){
        jQuery("#ticker").trigger("play");
        return false;
    });

    jQuery(".speedup").click(function(){
        jQuery("#ticker")
        .trigger({
            type: "control",
            item: 0,
            rate: 10,
            delay: 4000
        })
        return false;
    });

    jQuery(".slowdown").click(function(){
        jQuery("#ticker")
        .trigger({
            type: "control",
            item: 0,
            rate: 90,
            delay: 8000
        })
        return false;
    });

    jQuery(".next").live("click", function(){
        jQuery("#ticker")
        .trigger({type: "play"})
        .trigger({type: "stop"});
        return false;
    });

    jQuery(".style").click(function(){
        jQuery("#ticker")
        .trigger({
            type: "control",
            cursor: jQuery("#ticker").data("ticker").cursor.css({width: "4em", background: "#efefef", position: "relative", top: "1em", left: "-1em"})
        })
        return false;
    });

  });

//-->

View Demo

Download Files

Visit Authors Website