Posts

Showing posts from December, 2008

jQuery newsticker Demo Page

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...

jQuery Validation Plugin Tip: Highlight Field

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 }

jQuery appendToArray plugin

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: $....

Code generation with jQuery

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...

HTML 5 Basic Template

Image
Since HTML 5 is likely to be in common use at some time in the future (taking advantage of current/future web browsers standards rendering mode) and the W3C validation service now validates HTML 5. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Site | Page 1</title> </head> <body> <div id="outer"> <div id="top"></div> <div id="inner"> <div id="header"><h1>Page 1</h1></div> <div id="navigation"> <ul> <li class="current"><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div> <div id="content"> <p>Lorem ipsum dolor sit...

DataBinding to an Enumeration / enum (C#, ASP.NET)

Enumeration types in C# can be used for many purposes. One such use is to reduce repetitive typing as they can be bound to server controls (e.g. Repeaters). In code behind: public enum WeekDays { Monday,Tuesday,Wednesday,Thursday,Friday,Saturday,Sunday } In your page: <asp:Repeater runat="server" DataSource='<%# Enum.GetValues(typeof(WeekDays)) %>'> <HeaderTemplate> <table> <thead> <tr> <th>Day</th> <th>Start Time</th> <th>End Time</th> </tr> </thead> <tbody> </HeaderTemplate> <ItemTemplate> <tr> <td><%# Container.DataItem %></td> <td><%# GetStartTime(Container.DataItem) %></td> <td><%# GetEndTime(Container.DataItem) %></td> </tr> </ItemTemplate> <FooterTemplate> </tbody> </table> </FooterTemplate> </asp:Repeater> GetStartT...