Web Developer Blog

Long time since I've posted, but have updated my jQuery numeric plugin for allowing only numbers in input boxes, fixing a couple of bugs and adding functionality (removing from input and allowing integers only). See code updates via GitHub , or download the latest stable version zipped . In the future might set it so you can restrict how many characters you can put after the decimal point (so could be useful for currency input).

It is possible to integrate the jQuery newsticker plugin into a SharePoint site using a WebPart: News Ticker Web Part . SmartTools is used to integrate jQuery into SharePoint, via the SmartTools.jQuery component. Anyone else integrated the newsticker plugin into a module / add-on for a Web CMS?

jQuery allows you to get the background image of any element on a web page: $("#myelement").css("background-image"); However, this returns it in an undesirable format: url(http://example.com/images/image.jpg) or url("http://example.com/images/image.jpg") . With a bit of string replacement, you can get extract the URL: function extractUrl(input) { // remove quotes and wrapping url() return input.replace(/"/g,"").replace(/url\(|\)$/ig, ""); } So now you can just do this: extractUrl($("#myelement").css("background-image")) Which will return the URL on its own http://example.com/images/image.jpg .

While jQuery UI's Dialog widget has good default options, there may be circumstances when you want to change them. For instance, you may want all dialog windows to be modal windows, with a semi-transparent background and the bgiframe plugin applied. Place this code at the end of the page, or within $(document).ready . $.extend($.ui.dialog.defaults, { overlay : { background: "#000", opacity: 0.8}, modal: true, bgiframe: true });

Recently, I have been looking at Pixie , to see how it works as a simple system for managing websites. It is open source (GPL v3), written to web standards (XHTML Strict, Microformats ) and powered by jQuery and PHP/MySQL. It consists of several page types – dynamic (blog, news), static or module (e.g. contact form, events, links etc). Plugins add additional functionality to modules (like allowing comments on blog posts). Blocks allow you to add content alongside your content (e.g. display RSS content from BBC News). Easy enough to extend, with detailed guides for module development (so you can create additional ones to those that are bundled with Pixie) block development and theme development . A few additional blocks I have created: News (latest content from a page named ‘news’) and Google Maps . These can then be shown on any page (so you can see news on your home page for example).

Some may have noticed, the demo page for the newsticker jQuery plugin has not been working in Internet Explorer 7. This is due to it being experimental code for allowing pausing, resuming and clearing of any active news ticker's on the page. It should now work in IE7 (and hopefully IE6 as well). There are a few additions to the plugin that should be of benefit. Set up the news ticker as usual: var $news = $("#news").newsticker(); After doing so, you may pause, resume and clear it in your own functions. For example, clicking on elements with id's pause , resume or clear will perform the relevant action: $("#pause").click( function() { $.newsticker.pause($news); return false; } ); $("#resume").click( function() { $.newsticker.resume($news); return false; } ); $("#clear").click( function() { $.newsticker.clear($news); return false; } ); The code available for download via jQuery SVN doesn...

The validation plugin for jQuery is a very useful plugin for validating forms before they are submitted. This tip shows you how you can highlight the field if there is an error with it. var validator = $("#myform").validate({ onblur: function(el) { if(validator.check(el)) $(el).removeClass(validator.settings.errorClass); else $(el).addClass(validator.settings.errorClass); }, onkeyup: function(el) { if(validator.check(el)) $(el).removeClass(validator.settings.errorClass); else $(el).addClass(validator.settings.errorClass); } }); This adds the errorClass (normally 'error') to the field being validated, which can then be styled via CSS: input.error { border: 1px solid #c00; background: #fee }

With jQuery, I found no real way of grouping elements together (other than using a class, and using filter), so I thought about adding jQuery objects to an array (or multiple arrays), which can then be iterated over with jQuery.each . I tried appendTo (on the off chance that it would work with plain arrays), but no such luck. So I created a simple plugin: jQuery.fn.appendToArray = function() { var a = arguments; for(var i = 0; i Through using arguments , it can be appending to multiple arrays at the same time: var ar1 = []; var ar2 = []; var $field1 = $("[name='field1']").appendToArray(ar1, ar2); var $field2 = $("[name='field2']").appendToArray(ar1); var $field3 = $("[name='field3']").appendToArray(ar1, ar2); var $field4 = $("[name='field4']").appendToArray(ar2); var $field5 = $("[name='field5']").appendToArray(ar2); You can then loop through the arrays, with specific functions applied: $....

Update : changed post title (content still same) Sometimes, when you are developing in javascript, you need to reference many form inputs on a page, which can be time consuming (typing each one out). With jQuery, you can reduce the time by using jQuery to write the code (which you then copy and paste). For example (simplified, as you probably would not have fields named field1, field2, field3 etc): var $field1 = $("[name='field1']"); var $field2 = $("[name='field2']"); var $field3 = $("[name='field3']"); var $field4 = $("[name='field4']"); var $field5 = $("[name='field5']"); var $field6 = $("[name='field6']"); var $field7 = $("[name='field7']"); var $field8 = $("[name='field8']"); var $field9 = $("[name='field9']"); This simple script can be used to create the aforementioned code. Includes an ASP.NET fix (if you don't w...

jQuery 1.2.6 Text Clips for Programmer's Notepad 2 are available along with my other text clips. If they don't show when you start PN2, close it and delete installClipCache.xml that is stored within the %APPDATA%\Echo Software\PN2\ directory. Programmer's Notepad 2 is an open source application that supports syntax highlighting of many file types, project support (using its own project file type), autocompletion, text clips (snippets), automatic indenting among other features . It loads quickly (startup is faster than IDE's like Visual Studio, Eclipse and Komodo have), so is a good lightweight IDE that is also portable (save it on your portable hard drive / memory stick and run on many different PC's).

JQuery | Encosia has several articles related to the use of jQuery with ASP.NET. Microsoft AJAX can add quite a lot of overhead and so the use of jQuery can help reduce that.

Check the Select Box Manipulation project page at the jQuery site for the latest download.

While working with jQuery UI draggables , I have noticed that there does not seem to be a class associated with the draggable helper, and so it is styled in the same way as the draggable you selected. As a result you have to resort to the start function option to add the class dynamically: $(".dragme").draggable({helper: "clone", start: function(e, ui) { $(ui.helper).addClass("ui-draggable-helper"); } }); Then just create a style for ui-draggable-helper , e.g. .ui-draggable-helper { border: 1px dotted #000; padding: 6px; background: #fff; font-size: 1.2em; }

Recently I've been placing scripts at the bottom of the page, instead if the top. However, I don't put all of them there - the key ones required by other scripts (e.g. libraries like jQuery) are still in the header. The pages can appear to load faster, and in some cases may save some (albeit not always that much) code, e.g. .... <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script> <script type="text/javascript"> $( function() { $("a.foo").click(doSomething); }; function doSomething() { return confirm("About to visit " + this.href + ", continue?"); } </script> </head> <body> ... </body> </html> Can instead be: .... <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script> </head> <body> ... <script type="text/javascript"> $("a.foo").click(doSomething); function doSomethi...

jQuery is a very useful JavaScript library for manipulating you web pages. However, I have seen it used to get attribute values when it doesn't have to be, normally to get element attributes. For example, opening all links with a class external and giving them a title (tooltip). $("a.external").click( function() { window.open($(this).attr("href")); return false; } ).each( function() { $(this).attr("title", $(this).attr("title") + " External link: " + $(this).attr("href")); } ); Would be the same as $("a.external").click( function() { window.open(this.href); return false; } ).each( function() { this.title += " External link: " + this.href; } ); There are some attributes that in JavaScript aren't the same as they are in html. The ones you may have issues with are listed below. for (htmlFor) class (className) readonly (readOnly) maxlengt...

Working with dates can be problematic when handling dates returned by a remote server. They were returned in GMT format, but when displayed on a page, the time was either ahead or behind (depending on which timezone you are in). For example, if you have the date returned via JSON: var dates = {"StartDate": new Date(1216944000000),"EndDate": new Date(1217030399000)} So the date now has the timezone offset added: dates.StartDate = Fri Jul 25 2008 01:00:00 GMT+0100 (GMT Standard Time) dates.EndDate = Sat Jul 26 2008 00:59:59 GMT+0100 (GMT Standard Time) So now, to take into account the timezone offset, getTimezoneOffset() can be used, along with setMinutes() and getMinutes() dates.StartDate.setMinutes(dates.StartDate.getTimezoneOffset() + dates.StartDate.getMinutes()); dates.EndDate.setMinutes(dates.EndDate.getTimezoneOffset() + dates.EndDate.getMinutes()); For a useful JavaScript library for working with dates (it extends the native Date object), check out Dat...

JSON (JavaScript Object Notation) is a data interchange format for transferring data between disparate systems. Unlike XML (which is also designed for this), it is far simpler and can be processed more easily by client applications (no validation, or other advanced features of XML) and easier to implement (no special parser needed like XML) - JSON: The Fat-Free Alternative to XML . There are examples of JSON messages (and the XML equivalent) on the JSON Example page . You can validate JSON online using JSONLint . While its name suggests that it is only for programmers using JavaScript, it is useful for other programming languages as well. The JSON site lists implementations and even hosts code for several languages, e.g. JavaScript , C and Java . JsonML is a way of transporting XML data by representing it in the JSON syntax. As a result, it can be be used for transmitting XHTML markup (represented as JSON rather than XHTML) which can then be added directly to the document (via the...

Update: jQuery.version should have been jQuery.browser.version. Added Firefox 3.0.1 If you are a user of jQuery, you may be aware of the basic browser sniffer that comes with it. However, it may seem to return the wrong version number for certain browsers (Firefox and Safari in particular). This is because it returns the version number of the rendering engine (i.e. the part of the web browser that determines how a page should look and function). To help simplify things, I have created a table of common user agents and what jQuery returns: Browser jQuery.browser jQuery.browser.version Internet Explorer 6 jQuery.browser.msie = true 6.0 Internet Explorer 7 jQuery.browser.msie = true 7.0 Firefox 1.5 (first release) jQuery.browser.mozilla = true 1.8 or 1.8.0 Firefox 1.5.0.9 jQuery.browser.mozilla = true 1.8.0.9 Firefox 2.0 (first release) jQuery.browser.mozilla = true 1.8.1 Firefox 2.0.0.9 jQuery.browser.mozilla = true 1.8.1.9 Firefox 3.0 jQuery.browser.mozilla = true 1.9 Firefo...

I'm sure some may already do this, but compressing textual content can save bandwidth but also make it easier to maintain (by just including a php file instead of a CSS or JavaScript one). For example, create a file jquery.php in the same directory as JavaScript files: <?php ob_start("ob_gzhandler"); header("Content-Type: text/javascript"); include("jquery-1.2.6.min.js") ?> Then include it instead of the normal JavaScript file: <script type="text/javascript" src="/js/jquery.php"></script> It's simple to maintain and could be improved (for example, some kind of caching). CSS files can also be used: <?php ob_start("ob_gzhandler"); header("Content-Type: text/css"); include("styles.css") ?>

Google now offers a service for hosting popular JavaScript libraries, so for any website this is used on the performance will be better (the user may have already downloaded the file on another site and it is cached) and it will reduce the bandwidth your server uses. So far it hosts jQuery, prototype, script.aculo.us, Mootools and Dojo. You can either load it via the Google AJAX API or the <script/> tag. The advantage of using the Google API is that it can be used for Google's services as well (like Maps, RSS/Atom Feeds and Search (Analytics is missing from the list though)). Ajaxian » Announcing AJAX Libraries API: Speed up your Ajax apps with Google’s infrastructure Google AJAX Libraries API , Developers Guide