Bugzappy's Blog

In a typical bar-chart, the jquery plugin jqplot lets you set your x-axis labels to whatever string you want, including HTML mark-up. Imagine you have a chart showing the number of monthly downloads for prototype, jquery, and MooTools.

you might set your x-axis labels (values, to be precise) to

<a href=”http://www.prototypejs.org”>jquery</a>

<a href=”http://www.jquery.com”>jquery</a>

<a href=”http://www.mootools.com”>jquery</a>

The links get rendered in a <div> outside the canvas, but you cannot click them because the chart’s canvas extends over them.

solve it this way (using jquery for example):

$(’.jqplot-xaxis-tick’).css(’z-index’, 1000);

That sets your labels above the canvas and they can now be clicked.

Also reported at http://groups.google.com/group/jqplot-users/browse_thread/thread/bd9b9c49e609167e

Today I released the CyclicFade jQuery Plugin. It has its own dedicated page for details, demo, and download. It is listed in the jquery plugin repository.

Yesterday (august 31, 2009) the OpenAjax Alliance announced in a press release the immediate availability of javascript technology for securely integrating javascript code (widgets) from untrusted sources into your own web pages (and javascript code). It’s called OpenAjax Hub 2.0 and it is touted as the enabler of secure mashups.

There is a very similar initiative at Microsoft: websandbox at Microsoft livelabs. I have no idea if these are one and the same initiatives, or competitors, or somewhere in the middle.

My prediction is that beyond mashups and many other fantastic applications, this kind of technology will at last make the Semantic Web a reality. Why? because now data and its closely associated code (just like an object in OOP) can safely travel together from any source to any web application. The code is what gives the data some meaning even when the “mashup” does not know the semantics.  As long as we can apply this idea to as *small* a piece of data as we (architects and developers) want, we can build web 3.0.

As a result of this new technology, expect the start of a very dynamic phase of web 2.0 advances.

Read the OpenAjax Hub 2.0 Specification here.

It’s a barebones plugin that acts purely as a browser-side widget controller, it does not come with canned HTML/CSS. You must pass the id’s of the <div> or other elements you want to control to the plugin.

The widget is just a box which starts with a limited height, and then can be expanded by the user by a specified increment, or collpased entirely.

Try a DEMO:

The CODE for the above example:

<div style="border: 1px solid #ff0000; width: 200px;">
<div id="demo_box" style="padding: 10px; overflow: hidden; width: 200px; max-height: 80px;">
<p>AAAAAAA$lt;/p>
<p>BBBBBBBB$lt;/p>
<p>CCCCCCC$lt;/p>
<p>DDDDDDD$lt;/p>
<p>EEEEEEEE$lt;/p>
<p>FFFFFFFF$lt;/p>
</div>
<div id="demo_expand"
    style="color: #ff0000; cursor: pointer; width: 100px; height: 20px; float: left; text-align: left;">+</div>
<div id="demo_collapse"
    style="color: #ff0000; cursor: pointer; width: 100px; height: 20px; float: left; text-align: right;">-</div>
</div>

<script type="text/javascript"><!--
document.write(unescape("%3Cscript src='http://www.bugzappy.com/js/jquery.js' type='text/javascript'%3E%3C/script%3E"));
document.write(unescape("%3Cscript src='http://www.bugzappy.com/wp-content/uploads/2009/04/jqueryexpandbox.js' type='text/javascript'%3E%3C/script%3E"));
// --></script>

<script type="text/javascript"><!--
var $j = jQuery.noConflict();
$j("#demo_box").expandBox('#demo_expand', '#demo_collapse', {shrunkHeight: 80, expandHeightInc: 40, expandText: 'expand', expandDelay: 100, shrinkText: 'collapse'});
// --></script>

DOWNLOAD: jquery.expandbox.js

A bit of documentation coming later.