Thursday, December 18, 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:

    return false;

    return false;

    return false;

The code available for download via jQuery SVN doesn't have this functionality, but should work fine in IE7.

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)
 onkeyup: function(el)

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 }

Monday, December 15, 2008

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 < arguments.length; i++) a[i][a[i].length] = this;
 return this;

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:

$.each(ar1, function()
  console.log(this.attr("name") + " is in ar1");

$.each(ar2, function()
  console.log(this.attr("name") + " is in ar2");

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 want names like $ctl00$Content1$Field1)

  var $inputs = $(":input");
  var $textarea = $("<textarea>").css({width: "100%", height: "200px"});
    // $textarea.append("var $" + + " = $(\"[name='" + + "']\");\n");
    // ASPNET fix to get the name as set server side
    $textarea.append("var $" + ASPNETFix( + " = $(\"[name$='" + ASPNETFix( + "']\");\n");

function ASPNETFix(name)
 return name.split("$").pop();

Simply save this into a separate JavaScript file (tweaking as needed), include on your page, then copy the text generated in the textarea at the bottom of the page.

This could also save time in other languages, as you control the output (could be C#, VB.NET, PHP, Python etc).

HTML 5 Basic Template

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>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 <title>Site | Page 1</title>
 <div id="outer">
  <div id="top"></div>
  <div id="inner">
   <div id="header"><h1>Page 1</h1></div>
   <div id="navigation">
     <li class="current"><a href="#">Page 1</a></li>
     <li><a href="#">Page 2</a></li>
     <li><a href="#">Page 3</a></li>
   <div id="content">
    <p>Lorem ipsum dolor sit amet...</p>
   <div id="footer"><a href="#top">Top of page</a></div>
  <div id="bottom"></div>

Note: the Content-Type meta element has to be the first element under the head element to validate. In HTML elements can be optionally self closing (so <br /> and <br> are both valid.

Notice that there are 'top' and 'bottom' elements in the markup? They are used to allow the margin-top/bottom for the 'inner' <div> to work in Firefox. 'top' also functions as an anchor to get back to the top of the page.

Example of CSS that can be used with this template:

body {
 color: #000;
 background: #fff;
 margin: 0;
 padding: 10px

#outer {
 width: 960px;
 margin: 0 auto;
 background: #eee

#top {
 padding-bottom: 1px; margin-bottom: -1px /* force #inner margin-top to take effect in Firefox/WebKit */

#inner {
 margin: 3px; /* margin: 0 3px 3px 0; for drop shadow effect */
 border: 1px solid #009;
 background: #fff

#header { background: #eee }

#header h1 { margin: 0}

#navigation {
 background: #eef;
 width: 100%;
 overflow: hidden;
 border-width: 1px 0 1px 0;
 border-style: solid;
 border-color: #009

#navigation ul {
 margin: 0;
 padding: 0;
 list-style-type: none;
 float: right

#navigation ul li { float: left }

#navigation ul li a:link,
#navigation ul li a:visited {
 display: block;
 float: left;
 padding: 3px;
 zoom: 1 /* force hasLayout in IE */

#navigation ul li a:hover {
 background: #000;
 color: #fff

#navigation ul li a:active,
#navigation ul li.current a:link,
#navigation ul li.current a:visited,
#navigation ul li.current a:hover {
 background: #aaa;
 color: #ffe

#content { padding: 3px }

#footer {
 padding: 6px;
 border-top: 1px solid #009

#bottom {
 padding-top: 1px; margin-top: -1px /* force #inner margin-bottom to take effect in Firefox/WebKit */

Wednesday, December 03, 2008

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

In your page:

<asp:Repeater runat="server" DataSource='<%# Enum.GetValues(typeof(WeekDays)) %>'>
   <th>Start Time</th>
   <th>End Time</th>
   <td><%# Container.DataItem %></td>
   <td><%# GetStartTime(Container.DataItem) %></td>
   <td><%# GetEndTime(Container.DataItem) %></td>

GetStartTime and GetEndTime are just examples (so would just need writing in the code behind).

protected string GetStartTime(object day)
protected string GetEndTime(object day)