xslt.js version 3.0 released XML XSLT now with jQuery plugin
Posted 2008-05-19 in JavaScript by Johann.
xslt.js is a tiny JavaScript library to transform XML with XSL. Essentially, it’s a JavaScript wrapper around the browser’s XSLT API.
The version 3.0 now includes a jQuery plugin.
Browser Support
xslt.js supports the following browsers:
- Mozilla 0.9.4 and greater.
- Microsoft Internet Explorer 5 and greater, Internet Explorer 6 and greater if using the jQuery plugin.
- Opera 9 and greater.
- Safari 3 or greater.
jQuery XSL plugin
To use the jQuery XSL plugin, add the jquery.xsltjs.js
file (5 KB) to your page. Files compressed with YUI (2 KB) and YUI and /packer/ (2 KB) are included in the download as well.
Ideally, you would compress all JavaScript files on your page into one single file though.
The jQuery plugin extends jQuery with a function called xslt
. Its parameters are xml
and xslt
where xml
is the URI of the XML file and xslt
is the URI of the XSL style sheet.
$('#myid').xslt('bla.xml', 'bla.xslt');
Changelog
- JavaScript compression changed from ShrinkSafe to YUI Compressor to /packer/.
xslt.js
version information removed.- jQuery plugin.
Issues
- There is no XSLT callback in the jQuery plugin. This means you currently cannot modify the transformed XML. If you need this, please let me know.
Tips
- To perform an XSLT
onload
, use the following JavaScript:
$(function() { $('#element').xslt('bla.xml', 'bla.xslt'); });
2 comments
Highlight 3 and DynaCloud 5 released
Posted 2009-02-22 in JavaScript by Johann.
I have just released Highlight 3 and DynaCloud 5.
Changes
- The API of highlight was simplified, as suggested by Nox.
- Internet Explorer would highlight more than the desired element, as document by Teye.
- Extra code for Internet Explorer was removed, making both jQuery plugins smaller.
- Removing highlights would not work in Internet Explorer.
- It is no longer required to upper case the pattern in highlight.
- Packed/Shrunk versions no longer use /packer/, but simply YUI Compressor.
Download
If you use highlight or DynaCloud, please update to the latest versions, available from the blog posts above.
DynaCloud - a dynamic JavaScript tag/keyword cloud with jQuery
Posted 2007-08-06 in JavaScript by Johann.
DynaCloud is a jQuery plugin that generates tag or keyword clouds from text on web pages and highlights matching parts once a keyword is clicked.
Demo
Usage
Add DynaCloud
Download the jquery.dynacloud-5.js JavaScript (6 KB) and add it to your web page. A YUI compressed version (4 KB) is also available.
Add class attributes
Add the dynacloud
class to all of the elements you want to have keywords generated from.
<div id="text" class="dynacloud"> (your content) </div> <p class="dynacloud"> (more content) </p>
Create the target element
(Optional) Create an element with an id
attribute of dynacloud
. The tags will be filled into this element. If the element doesn’t exist, an empty paragraph will be created at the end of the document.
<div id="dynacloud"></div>
Style the highlight class
Create an entry in your style sheet for the highlight
class.
.highlight { background-color: yellow }
Manual creation of tag clouds
Tag clouds can be generated dynamically using the dynaCloud
method.
$("p.someclass").dynaCloud();
Custom Output Element
DynaCloud will be default create the tag cloud in an element with an id
attribute of dynacloud
. An optional parameter of the dynaCloud
method can be used to specify a different output element.
$('#text').dynaCloud('#tagCloud');
Customization
Several aspects of DynaCloud can be customized.
Stopwords
DynaCloud filters out frequently occuring words like this, I or the (so-called stopwords). You can edit the list of stopwords by modifying or replacing the $.dynacloud.stopwords
array.
$.merge($.dynacloud.stopwords, [ "der", "die", "das" ]);
Limiting the number of tags
DynaCloud will generate 20 tags at most. You can change this maximum by setting the $.dynaCloud.max
property. If you set it to -1
, the number of tags is unlimited.
$.dynaCloud.max = 42;
Sorting tags
DynaCloud will sort the tags first by descending frequency, then alphabetically. You can turn sorting off by setting the $.dynaCloud.sort
property to false
.
$.dynaCloud.sort = false;
Automatic generation of tag clouds
When the document has finished loading, DynaCloud automatically scans your document for elements with a class name of dynacloud
. To create tag clouds manually, set $.dynaCloud.auto
property to false
.
$.dynaCloud.auto = false;
Allowing only one active tag
By setting the $.dynaCloud.single
property to false
, more than one tag can be selected.
$.dynaCloud.single = false;
Using wordStats if available
DynaCloud will use wordStats to calculate the topic of a web page if available. This behavior can be turned off by setting the $.dynaCloud.wordStats
property to false
.
$.dynaCloud.wordStats = false
Note that wordStats iterates over p
, h1
and other elements of the DynaCloud element. Whereas the following HTML will work when using DynaCloud alone
<p class="dynacloud">Hello bla bla</p>
it will not work when using wordStats. WordStats needs child elements, like this
<div class="dynacloud"> <p>Hello bla bla</p> </div>
Changelog
- 2009-02-22: Bugfix for one or two strange problems with IE.
- 2008-09-26: Added custom output element, support for German Umlauts. Explained wordStats usage.
- 2008-06-04: Bugfix for incorrect DOM normalization. Thanks Georgy.
- 2007-08-24. Better jQuery integration and wordStats support.
- 2007-08-06. Initial release.
Credits
- The list of stopwords was taken from the Perseus English Index.
- Text highlighting for Mozilla and Opera was adapted from the Text and Data Bookmarklets page.
17 comments
6 more jQuery Tips: Text Searching, Page Load Time and Others
Posted 2008-07-22 in JavaScript by Johann.
After the first and the second round of jQuery tips, here are 6 more JavaScript snippets.
Searching for Text with jQuery
This function performs a recursive search for nodes that contain a pattern. Arguments are a jQuery object and a pattern. The pattern can be a string
or a regular expression.
$.fn.egrep = function(pat) { var out = []; var textNodes = function(n) { if (n.nodeType == Node.TEXT_NODE) { var t = typeof pat == 'string' ? n.nodeValue.indexOf(pat) != -1 : pat.test(n.nodeValue); if (t) { out.push(n.parentNode); } } else { $.each(n.childNodes, function(a, b) { textNodes(b); }); } }; this.each(function() { textNodes(this); }); return out; };
Demo: Highlight all nodes containing a text node that contains the word “jQuery”.
Case-Insensitive Contains Check
By using case-insensitive regular expressions, this becomes rather easy:
var pattern = /exp/i; $('#id').filter(function() { return pattern.test($(this).text()); });
Demo: Turn all list items that contain “bla” bold.
- Blabla
- Keks
- BLA
Super small jquery.js
Many people want an even smaller version of jQuery. The combination of YUI and JavaScript Utility yields a 26807 B jquery-1.2.6.js
file which is almost 15 % smaller than the regular size of 31033 B.
Log Page Load Time
With large pages or pages containing inline JavaScript, it is a good idea™ to monitor how long pages take to load. The code below is different from waiting until onload
is fired and only measures page load time.
<html> <head> <script type="text/javascript"> var t = new Date(); </script> … (your page) … <script type="text/javascript"> new Image().src = '/load.gif?' + (new Date().getTime() - t.getTime()); </script> </body> <html>
load.gif
can be a generic 1*1 pixel GIF. You can extract the data from your log files using grep
and sed
.
Reload an IFrame
Accessing the contentWindow
property to obtain the location
object.
$('#iframe').each(function() { this.contentWindow.location.reload(true); });
Demo: Force a reload of the IFrame
below.
Callback for IFrame
Loading
With the onload
event, your code is called when an IFrame
has finished loading.
$('#iframe').load(function() { // do something });
Demo: Force a reload of the IFrame
below.
I hope you find these tips useful.
Pages
Page 1 · Page 2 · Page 3 · Page 4 · Page 5 · Next Page »
Subscribe
RSS 2.0, Atom or subscribe by Email.
Top Posts
- DynaCloud - a dynamic JavaScript tag/keyword cloud with jQuery
- 6 fast jQuery Tips: More basic Snippets
- xslt.js version 3.2 released
- xslt.js version 3.0 released XML XSLT now with jQuery plugin
- Forum Scanners - prevent forum abuse
- Automate JavaScript compression with YUI Compressor and /packer/