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.

<div id="text" class="dynacloud">
 (your content)
</div>

<p class="dynacloud">
 (more content)
</p>

<div id="dynacloud"></div>

.highlight { background-color: yellow }

$("p.someclass").dynaCloud();

$('#text').dynaCloud('#tagCloud');

$.merge($.dynacloud.stopwords, [ "der", "die", "das" ]);

$.dynaCloud.max = 42;

$.dynaCloud.sort = false;

$.dynaCloud.auto = false;

$.dynaCloud.single = false;

$.dynaCloud.wordStats = false

<p class="dynacloud">Hello bla bla</p>

<div class="dynacloud">
 <p>Hello bla bla</p>
</div>

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 »