Posts Tagged ‘JQuery’

JQuery RSS feed reader plugin

Friday, February 8th, 2008

Post update! I have been away from this blog for quite a while now; sometimes things turn in a way you wouln’t expect… Since this post seems to still be pretty active, I’m planning an update to include some explanation,more context and feedbacks. Please be patient and thanks for your suggestions:)

I’ve finally decided to post another no-brainer JQuery plugin: a simple news box fed by an RSS feed. You can see an example on our project’s home page. I had found the idea on the JQuery mailing list but loving plugins (although not really good at it) I decided to wrap it up a bit.

The result is quite simple: just place a div somewhere and initialize it with a feed URL:

<script language="JavaScript" type="text/javascript">
$('#rightcolumn').feedreader({
targeturl: 'http://blogs.atalayasec.org/atalaya/?feed=rss2'
});
</script>
...
<div id="rightcolumn">
</div>

There are two other configuration options available; how many posts to put in the news box and the length of the text to be displayed for each item. A complete initialization would be then like the following:

$('#rightcolumn').feedreader({
targeturl: 'http://blogs.atalayasec.org/atalaya/?feed=rss2',
items: 3,
descLength: 15
});

The code is pretty rough (and not really js-style) but functional. In case it’s useful to someone.

Tags: , , ,
Posted in Uncategorized | 31 Comments »

A JQuery plugin for canvas pies

Thursday, February 7th, 2008

These days I’ve been thinking on how to make Atalaya charts look better. This morning I’ve found this post that renders a canvas pie chart reading data from a table. Before trying to use it for real, I needed for the data table to disappear after rendering the chart.

The original code, from Stoyan Stefanov, is here. I’ve simply wrapped it in a jquery plugin. It’s enough to wrap the canvas and table elements in a div:

<div id="pie">
	  <table id="mydata">
	    <tr><th>Lang</th><th>Value</th</tr>
	    <tr><td>JavaScript</td><td>100</td></tr>
	    <tr><td>CSS</td><td>200</td></tr>
	    <tr><td>HTML</td><td>300</td></tr>
	    <tr><td>PHP</td><td>50</td></tr>
	    <tr><td>MySQL</td><td>30</td></tr>
	    <tr><td>Apache</td><td>10</td></tr>
	    <tr><td>Linux</td><td>30</td></tr>
	  </table>
	  <canvas id="canvas" width="300" height="300"></canvas>
</div>

and to initialize the plugin:

 $(function() {
         $(‘#pie‘).canvaspie({table: ‘#mydata‘,canvas: ‘#canvas‘})
 });

The plugin hides the table and shows the pie. An example (and the plugin itself) can be found here, in case someone finds it useful.

P.S: yes, I do need a code highlighter, sorry.

P.P.S: Thanks Stoyan for pointing me to hiliteme.

Update: I’ve updated the test page to use ExplorerCanvas, so now the test page should work on IE as well.

Tags: , , ,
Posted in Uncategorized | 11 Comments »