Web Developer Blog

New posts @ http://blog.webmonkey.uk.com/

2011-11-23T22:55:00.000Z

Posts have been copied over to http://blog.webmonkey.uk.com/ and all future updates will be made there rather than here. The feedburner feed has been updated to point to the new blog.

jQuery Numeric Plugin Update

2010-10-31T17:17:00.003Z

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

Update: CSSCompact - WebHandler

2010-02-20T16:01:00.003Z

Only a minor code update: CssCompact: A WebHandler for shrinking CSS files (ASP.NET). Code I am developing will go on GitHub/SamWM at some point (already has my jQuery plugins and ASP code I wrote a while back).

Simple Slideshow System: S5

2009-09-10T20:14:00.003+01:00

S5 has been around a few years now, but some may not be aware of it. S5 stands for 'Simple Standards-Based Slide Show System'. The XHTML code is simple to modify (adding / removing slides) and understand. Styling via CSS is also very simple to do. It gracefully degrades - so if JavaScript is disabled, you can still see the content. Slideshows are also printer friendly.

Like a slideshow you would do in Microsoft Office PowerPoint or OpenOffice Impress, you have to make sure not too much content is added to a slide, since any overflow is hidden. The keyboard or mouse can be used to navigate the S5 slideshow (although there are no context menu options).

WebSlide

2009-09-09T19:11:00.000+01:00

What is WebSlide? WebSlide is a JavaScript based web application front-end for presenting mockups and other images in a web browser. Click in the demo area and either click buttons with your mouse, or use shortcut keys →, ←, z, x, and n. For more information on using and setting up a WebSlide, view the online documentation. Features

No server-side requirements
User-configurable
Create custom themes with CSS
Keyboard navigation
Zoom images in & out
Optional password protection

Visit WebSlide | Full Screen Demo

Google Wave: 5 Ways It Could Change the Web

2009-09-06T18:50:00.004+01:00

Google Wave arrives on September 30th. On that day, Google will start sending out 100,000 invites to non-developers to its much-anticipated real-time communication platform. An interesting article '5 ways Google Wave could change the web' has been published over at Mashable.

1. Wave-Powered Forums
2. Wave-powered Commenting System
3. Wave-Based Content Management System
4. Wave for Customer Support
5. Wave for Education

Read the full article over here

Microsoft.NET Framework directory locations

2009-09-05T08:43:00.006+01:00

Since there are directories all over the place for the Microsoft.NET Framework, I have decided to compile a list of some of the key ones used.

Compilers, GACUtil, ASP.NET Register IIS/SQL, Assemblies etc.

.NET 1.0: C:\Windows\Microsoft.NET\Framework\v1.0.3705

.NET 1.1: C:\Windows\Microsoft.NET\Framework\v1.1.4322

.NET 2.0: C:\Windows\Microsoft.NET\Framework\v2.0.50727

After 2.0, more directories were added, the build number was also omitted from the directory name. Some key utilities (for Global Assembly Cache (GAC), ASP.NET, Code Access Security Policy Tool (caspol.exe)) weren't part of future versions, so, as a result, .NET 2.0 is required by them.

.NET 3.0 uses .NET 2.0 compiler. New directories:

C:\Windows\Microsoft.NET\Framework\v3.0\Windows Communication Foundation
C:\Windows\Microsoft.NET\Framework\v3.0\Windows Workflow Foundation (only SQL scripts in here)
C:\Windows\Microsoft.NET\Framework\v3.0\WPF (Windows Presentation Foundation)
C:\Program Files\Reference Assemblies\Microsoft\Framework\v3.0 (for reference when compiling / developing)

.NET 3.5

C:\Windows\Microsoft.NET\Framework\v3.5 (compiler, WPF, MSBuild)
C:\Program Files\Reference Assemblies\Microsoft\Framework\v3.5 (for reference when compiling / developing)

IxEdit

2009-09-02T21:07:00.001+01:00

IxEdit is a JavaScript-based interaction design tool for the web. With IxEdit, designers can practice DOM-scripting without coding to change, add, move, or transform elements dynamically on your web pages. Especially, IxEdit must be useful to try various interactions rapidly in the prototyping phase of your web application.

Website: http://www.ixedit.com/ | Demo: http://www.ixedit.com/samples/

jQTouch

2009-09-01T11:08:00.002+01:00

jQTouch is a jQuery plugin for creating mobile applications with just HTML, CSS & JavaScript.

A jQuery plugin for mobile web development on the iPhone, Android, Palm Pre, and other forward-thinking devices.

Link: http://www.jqtouch.com/

New a CMS - you need GetSimple.

2009-08-24T19:09:00.004+01:00

GetSimple is an XML based lite Content Management System. To go along with it’s best-in-class user interface, its loaded with features that every website needs. GetSimple is truly the simplest way to manage a small-business website + no MySQL Database required! its all, as above, managed by XML awesome, Check out the site, download it and check it out!

URL: http://get-simple.info/

jQuery newsticker: SharePoint WebPart

2009-08-21T17:35:00.002+01:00

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?

Visual Studio Macro: Wrap Selected Text in Tag

2009-07-27T16:06:00.005+01:00

This simple macro allows you to wrap whatever text is selected in a tag - a feature that somehow is missing from Visual Studio 2008...

    Sub SurroundWithTag()
        Dim selectedText = DTE.ActiveDocument.Selection.Text
        Dim tag As String
        tag = InputBox("Enter tag name", "Tag", "strong")
        If (tag = "") Then
            MsgBox("No tag defined")
        Else
            ' no end tag needed as Visual Studio creates the end tag..
            DTE.ActiveDocument.Selection.Text = String.Format("<{0}>{1}", tag, selectedText)
        End If
    End Sub

Based on the answer to this question found on Stack Overflow: Macro to wrap selected text with tags in Visual Studio (which also details how you can create a macro)

jQuery Quick Tip: Extract CSS Background Image

2009-07-08T14:55:00.003+01:00

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.

ASP.NET Snippet: Delete All Users and Roles

2009-05-18T17:52:00.000+01:00

Deleting all users and related data from a site using ASP.NET authentication is fairly simple. Useful if copying a database and you want to remove all the users, but keep the structure and other data (e.g. user content) intact.

Delete all users:

foreach (MembershipUser u in Membership.GetAllUsers())
{
 Membership.DeleteUser(u.UserName, true);
}

Delete all roles:

foreach (string role in Roles.GetAllRoles())
{
 Roles.DeleteRole(role);
}

ASP.NET Snippet: Quick Password Reset

2009-05-15T17:55:00.002+01:00

Here is a simple way, via code to reset a password when you are using the built-in ASP.NET authentication system. Useful if you either don't have a reset password form, or you just want to quickly change a password. Create a blank page, and place in the code behind Page_Load event.

    protected void Page_Load(object sender, EventArgs e)
    {
        MembershipUser u = Membership.FindUsersByName("Username")["Username"];
        u.UnlockUser();
        u.ChangePassword(u.ResetPassword(), "newpassword");
    }

    Public Sub Page_Load(sender As Object, e As EventArgs)
        Dim u As MembershipUser = Membership.FindUsersByName("Username")("Username")
        u.UnlockUser()
        u.ChangePassword(u.ResetPassword(), "newpassword")
    End Sub

Just delete the page when done.

Update (8 July 2009): If a question and answer is required when you create a user, you have to pass on the answer to u.ResetPassword, e.g. u.ChangePassword(u.ResetPassword("answer"), "newpassword"), otherwise ResetPassword won't work.

Get ListControl values (CheckBoxList, RadioButtonList, DropDownList, ListBox) from a Repeater the easy way (ASP.NET C#)

2009-05-05T17:51:00.002+01:00

Building on Get TextBox values from a Repeater the easy way (ASP.NET C#), here is a function that will get the selected values from WebControls that inherit from ListControl (CheckBoxList, RadioButtonList, DropDownList and ListBox)

It returns null if the ListControl matching the given ID does not exist in the repeater or an empty string array if nothing is selected.

public string[] ListControlValues(RepeaterItem itm, string controlId)
{
 string[] output = null;
 ListControl t = itm.FindControl(controlId) as ListControl;
 if (t != null)
 {
  ArrayList ar = new ArrayList();
  foreach (ListItem li in t.Items)
  {
   if (li.Selected) ar.Add(li.Value);
  }
  output = (string[])ar.ToArray(typeof(string));
 }
 return output;
}

Use in Repeater ItemCommand

protected void MyRepeater_ItemCommand(object sender, RepeaterCommandEventArgs e)
{
 switch (e.CommandName.ToString())
 {
  case "Save":
   int recordID = Convert.ToInt32(e.CommandArgument);
   string[] listBoxValues = ListControlValues("ListBox1");
   if(listBoxValues != null)
   {
     foreach(string s in listBoxValues)
     {
      
     }
   }
   string[] dropDownValues = ListControlValues("DropDown1");
   if(dropDownValues != null)
   {
    // since dropdown can only have one item selected...
    string dropDownValue = dropDownValues[0];
   }
   ....
   
   break;
  default:
   break;
 }
}

Get TextBox values from a Repeater the easy way (ASP.NET C#)

2009-05-01T19:06:00.001+01:00

The asp:Repeater control allows you to attach an ItemCommand event to it, for instance, updating a record in a database.

<asp:Repeater ID="MyRepeater" DataSource='<%# MyData %>' runat="server" 
 OnItemCommand="MyRepeater_ItemCommand">
 <HeaderTemplate><ul></HeaderTemplate>
 <ItemTemplate><li>
 Url: <asp:TextBox ID="Urdl" Text='<%# Eval("Url") %>' runat="server" />
 Text: <asp:TextBox ID="Text" Text='<%# Eval("Text") %>' runat="server" />
 <asp:Button ID="SaveButton" CommandName="Save" CommandArgument='<%# Eval("RecordID") %>' Text="Save" runat="server" />
 </li></ItemTemplate>
 <FooterTemplate></ul></FooterTemplate>
</asp:Repeater>

MyRepeater_ItemCommand is then defined:

protected void MyRepeater_ItemCommand(object sender, RepeaterCommandEventArgs e)
{
 switch (e.CommandName.ToString())
 {
  case "Save":
   int recordID = Convert.ToInt32(e.CommandArgument);
   TextBox url = e.Item.FindControl("Url") as TextBox;
   TextBox text = e.Item.FindControl("Text") as TextBox;
   
   ....
   
   break;
  default:
   break;
 }
}

However this has several downsides:

If you mistype the control id, you get a NullReferenceException
The code can get cluttered and harder to understand as more TextBox's are added.

To help mitigate this, this function gets the value of the TextBox, or null if the TextBox is not found.

public string TextBoxValue(RepeaterItem itm, string controlId)
{
 string output = null;
 TextBox t = itm.FindControl(controlId) as TextBox;
 if (t != null)
 {
  output = t.Text;
 }
 return output;
}

Then you can get the value without an exception occurring:

string url = TextBoxValue(e.Item, "Url");
string text = TextBoxValue(e.Item, "Text");
if(url != null)
{
    // update url in record
}
if(text == null)
{
    // update text in record
}

The code could then be used in a class and used on multiple pages, so if a page doesn't have a TextBox with a certain ID, the corresponding data field is not updated (e.g. on one page you might want a user to update the URL, but on another more restricted page, you may only want them to change the text). Code behind would then just be:

protected void MyRepeater_ItemCommand(object sender, RepeaterCommandEventArgs e)
{
 RepeaterMethods.MyRepeater_ItemCommand(sender, e);
}

And the class could be:

using System;
using System.Collections.Generic;
using System.Web;
using System.Text;
using System.Web.UI;
using System.Web.UI.WebControls;

/// <summary>
/// Summary description for RepeaterMethods
/// </summary>
public class RepeaterMethods
{
 public RepeaterMethods()
 {
  //
  // TODO: Add constructor logic here
  //
 }

 public static void MyRepeater_ItemCommand(object sender, RepeaterCommandEventArgs e)
 {
  switch (e.CommandName.ToString())
  {
   case "Save":
    string url = TextBoxValue(e.Item, "Url");
    string text = TextBoxValue(e.Item, "Text");
    if (url != null)
    {
     // update url in record
    }
    if (text == null)
    {
     // update text in record
    }
    break;
   default:
    break;
  }
 }

 public static string TextBoxValue(RepeaterItem itm, string controlId)
 {
  string output = null;
  TextBox t = itm.FindControl(controlId) as TextBox;
  if (t != null)
  {
   output = t.Text;
  }
  return output;
 }
}

Binding data to a Repeater using Lazy Loading (ASP.NET C#)

2009-05-01T18:28:00.000+01:00

Lazy loading is a method of only loading data as and when you need it. Rather than loading it on page load, you can define a property that can then be bound to a WebControl.

For example, in the page is an asp:Repeater:

        <asp:Repeater ID="MyRepeater" DataSource='<%# MyData %>' runat="server">
            <HeaderTemplate><ul></HeaderTemplate>
            <ItemTemplate><li><a href="<%# Eval("Url") %>"><%# Eval("Text") %></a> (Record ID: <%# Eval("RecordID") %>)</li></ItemTemplate>
            <FooterTemplate></ul></FooterTemplate>
        </asp:Repeater>

MyData in the DataSource attribute of asp:Repeater is a property defined in the CodeBehind page:

    private DataTable _MyData;
    public DataTable MyData
    {
        get
        {
            if (_MyData == null)
            {
                _MyData = LoadMyData();
            }
            return _MyData;
        }
    }

LoadMyData gets the data you want to show (normally it would be loaded from a database, rather than rows added in this case)

    private DataTable LoadMyData()
    {
        Trace.Write("LoadMyData");
        DataTable dt = new DataTable();
        dt.Columns.Add(new DataColumn("RecordID", Type.GetType("System.Int32")));
        dt.Columns.Add(new DataColumn("Text", Type.GetType("System.String")));
        dt.Columns.Add(new DataColumn("Url", Type.GetType("System.String")));

        DataRow row;
        int index = 1;

        // new row
        row = dt.NewRow();
        // populate row
        row["RecordID"] = index;
        row["Text"] = "Google";
        row["Url"] = "http://www.google.co.uk";
        // add row to table
        dt.Rows.Add(row);

        // increment index
        index++;

        // new row
        row = dt.NewRow();
        // populate row
        row["RecordID"] = index;
        row["Text"] = "Yahoo";
        row["Url"] = "http://www.yahoo.co.uk";
        // add row to table
        dt.Rows.Add(row);

        return dt;
    }

The Trace.Write is there to show that the data isn't loaded if it is not bound to a WebControl in the page. This can be tested by turning on tracing (adding Trace="True" to <%@ Page) and removing DataSource='<%# MyData %>' from the Repeater.

You would then bind the page on load:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            DataBind();
        }
    }

LazyLoadRepeater.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="LazyLoadRepeater.aspx.cs" Inherits="LazyLoadRepeater" Trace="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Lazy Loading</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h1>Search Engines</h1>
        <asp:Repeater ID="MyRepeater" DataSource='<%# MyData %>' runat="server">
            <HeaderTemplate><ul></HeaderTemplate>
            <ItemTemplate><li><a href="<%# Eval("Url") %>"><%# Eval("Text") %></a> (Record ID: <%# Eval("RecordID") %>)</li></ItemTemplate>
            <FooterTemplate></ul></FooterTemplate>
        </asp:Repeater>
    </div>
    </form>
</body>
</html>

LazyLoadRepeater.aspx.cs:

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

public partial class LazyLoadRepeater : System.Web.UI.Page
{
    private DataTable _MyData;
    public DataTable MyData
    {
        get
        {
            if (_MyData == null)
            {
                _MyData = LoadMyData();
            }
            return _MyData;
        }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            DataBind();
        }
    }

    private DataTable LoadMyData()
    {
        Trace.Write("LoadMyData");
        DataTable dt = new DataTable();
        dt.Columns.Add(new DataColumn("RecordID", Type.GetType("System.Int32")));
        dt.Columns.Add(new DataColumn("Text", Type.GetType("System.String")));
        dt.Columns.Add(new DataColumn("Url", Type.GetType("System.String")));

        DataRow row;
        int index = 1;

        // new row
        row = dt.NewRow();
        // populate row
        row["RecordID"] = index;
        row["Text"] = "Google";
        row["Url"] = "http://www.google.co.uk";
        // add row to table
        dt.Rows.Add(row);

        // increment index
        index++;

        // new row
        row = dt.NewRow();
        // populate row
        row["RecordID"] = index;
        row["Text"] = "Yahoo";
        row["Url"] = "http://www.yahoo.co.uk";
        // add row to table
        dt.Rows.Add(row);

        return dt;
    }
}

Chinook: Cross-Database (SQL Server, Oracle, MySQL) Sample

2009-04-16T18:08:00.001+01:00

The Chinook database is a sample database that is an alternative to the Northwind sample. One of the advantages it has over Northwind is that it can be installed on SQL Server (including the Compact Edition), Oracle and MySQL. Therefore it can be used to test Object-relational mapping (ORM) frameworks (e.g. NHibernate, SubSonic etc).

Code Generation with MyGeneration

2009-04-15T18:10:00.001+01:00

Rather than type repetitive code, a code generator could be used to do it for you. MyGeneration is one such piece of software that will help. As the output is just text, you can output code in any language (ASP.NET, C#, VB.NET, PHP, JavaScript etc) - although with a bit of extra work, PDF's can be generated (using iTextSharp - which would need to be downloaded and the dll saved in the MyGeneration install folder). It can query many database types (SQL Server, Oracle, SQLite, MySQL, PostgreSQL and more), but a database isn't required for it to be of use. You can set up an interface (to select columns in a table for example), but it is optional.

For example, to loop through columns in a database table:

Template Code

<%
public class GeneratedTemplate : DotNetScriptTemplate
{
 public GeneratedTemplate(ZeusContext context) : base(context) {}
 
 private string DatabaseName;
 private string TableName;
 private ITable table;
 private ArrayList columns;
 private string PrimaryKey = string.Empty;

 //---------------------------------------------------
 // Render() is where you want to write your logic    
 //---------------------------------------------------
 public override void Render()
 {
  DatabaseName = input["databaseName"].ToString();
  TableName = input["tableName"].ToString();
  table = MyMeta.Databases[DatabaseName].Tables[TableName];
  columns = input["lstColumns"] as ArrayList;
  try
  {
   PrimaryKey = table.PrimaryKeys[0].Name; 
  }
  catch (System.Exception ex)
  {
   // no primary key
  }
  foreach (string columnName in columns)
  {
  %>
  <li><%= columnName %></li><%
  }
 }
 
 // check if column has been selected via UI
 private bool IsInColumns(Column c)
 {
  foreach (string columnName in columns)
  {
   if (columnName == c.Name) return true;
  }
  return false;
 }
}
%>

Interface Code

public class GeneratedGui : DotNetScriptGui
{
 public GeneratedGui(ZeusContext context) : base(context) {}
 
 private string DatabaseName;
 private string TableName;
 private string PrimaryKey = string.Empty;
 private ArrayList columns;
 private ITable table;

 //-----------------------------------------
 // The User Interface Entry Point
 //-----------------------------------------
 public override void Setup()
 {

  ui.Width  = 500;
  ui.Height = 350;
  
  // Setup Database selection combobox.
  GuiLabel lblDatabases = ui.AddLabel("lblDatabases", "Select a database:", "Select a database in the dropdown below.");
  GuiComboBox cmbDatabases = ui.AddComboBox("databaseName", "Select a database.");
  
  // Setup Tables selection multi-select listbox.
  GuiLabel lblTables = ui.AddLabel("lblTables", "Select table:", "Select table from the combobox below.");
  GuiComboBox cmbTables = ui.AddComboBox("tableName", "Select a table.");
  
  // setup columns list box
  GuiLabel lblColumns = ui.AddLabel("lblColumns", "Select columns:", "Select columns from the listbox below.");
  GuiListBox lstColumns = ui.AddListBox("lstColumns", "Select columns.");
  
  lstColumns.Height = 130;
  
  // bind data to the controls
  cmbDatabases.BindData(MyMeta.Databases);
  cmbDatabases.SelectedValue = MyMeta.DefaultDatabase.Name;
  cmbTables.BindData( MyMeta.Databases[cmbDatabases.SelectedValue].Tables );
  
  // Attach the onchange event to the cmbDatabases control.
  cmbDatabases.AttachEvent("onchange", "cmbDatabases_onchange");
  cmbTables.AttachEvent("onchange", "cmbTables_onchange");
  
  ui.ShowGui = true;
 }
 
 public void cmbDatabases_onchange(GuiComboBox control)
 {
  GuiComboBox cmbDatabases = ui["databaseName"] as GuiComboBox;
  GuiComboBox cmbTables = ui["tableName"] as GuiComboBox;
  cmbTables.BindData( MyMeta.Databases[cmbDatabases.SelectedValue].Tables );
  GuiListBox lstColumns = ui["lstColumns"] as GuiListBox;
  lstColumns.Clear();
 }
 
 public void cmbTables_onchange(GuiComboBox control)
 {
  try 
  {
   GuiComboBox cmbDatabases = ui["databaseName"] as GuiComboBox;
   GuiComboBox cmbTables = ui["tableName"] as GuiComboBox;
   GuiListBox lstColumns = ui["lstColumns"] as GuiListBox;
   lstColumns.BindData( MyMeta.Databases[cmbDatabases.SelectedValue].Tables[cmbTables.SelectedValue].Columns );
  }
  catch (Exception ex)
  {
  }
 }
}

To loop through a collection (e.g. ArrayList).

Template Code

<%
public class GeneratedTemplate : DotNetScriptTemplate
{
 public GeneratedTemplate(ZeusContext context) : base(context) {}

 //---------------------------------------------------
 // Render() is where you want to write your logic    
 //---------------------------------------------------
 public override void Render()
 {
  int i;
  ArrayList items = new ArrayList();
  items.Add("Array Item 1");
  items.Add("Array Item 2");
  items.Add("Array Item 3");
  items.Add("Array Item 4");
  items.Add("Array Item 5");
  
  for(i = 0; i < items.Count; i++)
  {
  %>
    <p><%= items[i].ToString() %></p>
  <%
  }
 }

}
%>

Interface Code

public class GeneratedGui : DotNetScriptGui
{
 public GeneratedGui(ZeusContext context) : base(context) {}

 //-----------------------------------------
 // The User Interface Entry Point
 //-----------------------------------------
 public override void Setup()
 {
  // ** UNCOMMENT CODE BELOW TO SEE UI **

  //ui.Width  = 100;
  //ui.Height = 100;
  //GuiLabel lblDemo = ui.AddLabel("lblDemo", "Demo", "Demo Tooltip");
  //ui.ShowGui = true;
 }

}

MyGeneration comes with a template library built in, so chances are, someone may have already done a template that does what you want. You can post your own templates online as well (MyGeneration can download templates from this site, so you don't need to actually go to the site to get them).

It is also on SourceForge: http://sourceforge.net/projects/mygeneration/, so you can download the source code for it and make changes or add features.

GIMP Button Templates - Web 2.0 Style

2009-04-10T19:28:00.003+01:00

Created some GIMP images that can be used as templates for creating buttons. Available in 64x64 and 256x64 sizes. Text can be altered and the background style changed (by altering visibility).

Raphaël - a JavaScript library for creating vector images

2009-04-05T16:39:00.006+01:00

Raphaël enables you to create geometric shapes / vector images in your web page without needing to know the syntax of Vector Markup Language (VML) or Scalable Vector Graphics (SVG). You can follow Raphaël on Twitter.

Sample code (example from website) shows how easy it is to work with.

// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);
// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");
// Sets the stroke attribute of the circle to white (#fff)
circle.attr("stroke", "#fff");

Animation of the shapes created can also be done with it (e.g. circles into squares).

Pure Accessible JavaScript Tabs

2009-03-11T17:40:00.001Z

Found some code I did a while ago (pre jQuery) of a simple tabbed navigation implementation using JavaScript and basic CSS. Posting if anyone is interested.

HTML

<ul id="tabnav">
 <li><a href="#tab1">Tab 1</a></li>
 <li><a href="#tab2">Tab 2</a></li>
 <li><a href="#tab3">Tab 3</a></li>
</ul>
<div id="tabs">
 <div id="tab1"><a name="tab1"></a>
  <h1>Tab 1</h1>
  This is the contents of Tab 1
 </div>
 <div id="tab2"><a name="tab2"></a>
  <h1>Tab 2</h1>
  This is the contents of Tab 2
 </div>
 <div id="tab3"><a name="tab3"></a>
  <h1>Tab 3</h1>
  This is the contents of Tab 3
 </div>
</div>

CSS

#tabnav {
 width: 100%;
 overflow: hidden;
 list-style-type: none;
 margin: 0;
 padding: 0;
}
#tabnav li {
 float: left;
 padding: 6px;
 margin: 0;
}
#tabnav li.activetab {
 font-weight: bold;
}

JavaScript (hopefully the inline comments should explain how it works). Add in script tag after HTML

// setup tabs, default is 'tab2'
setupTabs("tab2");
 
function setupTabs(tabDefault) {
 if (document.getElementById) {
  // get tab navigator
  var tabnav = document.getElementById('tabnav');
  if(tabnav) {
   // get list items in tab navigator
   var tablist = tabnav.getElementsByTagName('li');
   // loop through list items
   for (i=0;i<tablist.length;i++) {
    // get tab links (i.e. anchor tags)
    var tablinks = tablist[i].getElementsByTagName('a');
    // loop through tab links
    for (j=0;j<tablinks.length;j++) {
     // get hash for current tablink (i.e. the #tabname portion)
     var hash = tablinks[j].hash;
     // set onclick attribute to toggle the tabs (does not work in IE)
     tablinks[j].setAttribute("onclick","toggleTabs('"+hash.substring(1)+"'); return false;");
     // detect IE (other browsers don't support attachEvent)
     if (tablinks[j].attachEvent) {
      // set onclick to toggle tabs
      tablinks[j].onclick = Function("toggleTabs('"+hash.substring(1)+"'); return false;");
     }
     // if has is default tab
     if (hash == ("#" + tabDefault)) {
      // set parent nodes css class to 'activetab' (i.e. 'li' tag) and show tab
      tablinks[j].parentNode.className = "activetab";
      showTab(tabDefault);
     } else {
      // set parent nodes css class to empty (i.e. 'li' tag) and hide tab
      tablinks[j].parentNode.className = ""
      hideTab(hash.substring(1));
     }
    }
   }
  }
 }
}
function showTab(tabId) {
 if (document.getElementById) {
  // get current tab
  var currentTab = document.getElementById(tabId);
  // show tab by setting display style to blank string
  currentTab.style.display = "";
  // get anchor tags in current tab
  var currentTabAnchors = currentTab.getElementsByTagName('a'); 
  // loop through anchor tags
  for (k=0;k<currentTabAnchors.length;k++) {
   // if anchor tag has same name as current tag id, hide it
   if(currentTabAnchors[k].name==tabId) {
    currentTabAnchors[k].style.display = "none";
   }
  }
 }
}
function hideTab(tabId) {
 if (document.getElementById) {
  document.getElementById(tabId).style.display = "none";
 }
}
function toggleTabs(tabId) {
 if (document.getElementById) {
  // an array of all the sections
  var sectionnames = new Array();
  // get tab navigator
  var tabnav = document.getElementById('tabnav');
  // get list items in tab navigator
  var tablist = tabnav.getElementsByTagName('li');
  // loop through list items
  for (i=0;i<tablist.length;i++) {
   // get tab links (i.e. anchor tags)
   var tablinks = tablist[i].getElementsByTagName('a');
   // loop through tab links
   for (j=0;j<tablinks.length;j++) {
    // get hash for current tablink (i.e. the #tabname portion)
    var hash = tablinks[j].hash;
    // add has to sections array
    sectionnames.push(hash.substr(1));
    // if hash is selected tab
    if (hash == ("#" + tabId)) {
     // set parent nodes css class to 'activetab' (i.e. 'li' tag)
     tablinks[j].parentNode.className = "activetab";
    } else {
     // set parent nodes css class to empty (i.e. 'li' tag)
     tablinks[j].parentNode.className = ""
    }
   }
  }
  // get tabs
  var tabs = document.getElementById('tabs');
  // get tab sections
  var sections = tabs.childNodes;
  // loop through sections
  for (i=0;i<sections.length;i++) {
   // if node is not a div, then continue to next loop item
   if (sections[i].nodeName!='DIV') continue;
   // if current section id matches tabId show it
   if(sections[i].id==tabId) {
    showTab(sections[i].id);
   } else {
    // get child anchor nodes
    var atags = sections[i].getElementsByTagName("a");
    // if anchor nodes have been found
    if (atags.length > 0) {
     // loop through the section names
     for (j=0;j<sectionnames.length;j++) {
      // if first anchor tags name matches the current section id, hide the tab
      if(sectionnames[j] == atags[0].getAttribute("name")) {
       hideTab(sections[i].id);
      }
     }
    }
    
   }
  }
 }
 return false;
}

Shrink Image (JavaScript)

2009-01-22T17:57:00.003Z

This function shrinks an image, so its dimensions are no bigger than the maximum dimensions you define.

// get new dimensions so it fits within the maximum
// o = original dimensions / image, m = maximum dimensions
function shrink(o, m)
{
    // r = resized
    var r = {width: o.width, height: o.height};
    // if an image, rather than an object, resize it
    if(o.nodeName && o.nodeName.toLowerCase() == "img") r = o;
    if(r.width > m.width)
    {
        r.height = r.height * (m.width / r.width);
        r.width = m.width;
        if(r.height > m.height)
        {
            r.width = r.width * (m.height / r.height);
            r.height = m.height;
        }
    }
    else if(r.height > m.height)
    {
        r.width = r.width * (m.height / r.height);
        r.height = m.height;
    }
    return r;
}

To use, simply supply the image and the dimensions to constrain it to:

var image = document.getElementById("image");
var max = {width: 1024, height: 768};
shrink(image, max);

It also works with an object instead of an image, for non-image related dimension calculation.

var original = {width: 1200, height: 960};
var max = {width: 1024, height: 768};
var shrunk = shrink(original, max);

Changing jQuery UI's Dialog widget's default options

2009-01-22T12:37:00.005Z

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
});

Pixie – small, simple, website maker

2009-01-10T21:06:00.001Z

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

Google Gears Desktop API - Working with files

2009-01-07T17:57:00.001Z

The Google Gears Desktop API allows you to create shortcuts on your desktop (only to a page on the same site, not to another) and work with files. This example shows you how you can filter the file types when choosing files. gears_init.js required.

<!DOCTYPE html>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 <title>Google Desktop API - Working with files</title>
<script type="text/javascript" src="gears_init.js"></script>
<script type="text/javascript">
var fileformats = {

 // word document
 word: 'application/msword',
 // word 2007 document
 wpml: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',

 // excel spreadsheet
 excel: 'application/vnd.ms-excel',
 // excel 2007 spreadsheet
 ssml: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',

 // powerpoint presentation
 powerpoint: 'application/vnd.ms-powerpoint',
 // powerpoint 2007 presentation
 pml: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
 
 // jpeg
 jpeg: 'image/jpeg',
 
 // png
 png: 'image/png',
 
 // gif
 gif: 'image/gif',
 
 // tiff
 tiff: 'image/tiff'
}


// http://code.google.com/apis/gears/api_desktop.html
var desktop = google.gears.factory.create('beta.desktop');

function officeFiles()
{
 desktop.openFiles(openFilesCallback, {singleFile: false,
  filter: [fileformats.word, fileformats.wpml,
   fileformats.excel, fileformats.ssml,
   fileformats.powerpoint, fileformats.pml]
 });
}

function imageFiles()
{
 desktop.openFiles(openFilesCallback, {singleFile: false,
  filter: [fileformats.jpeg, fileformats.png,
   fileformats.gif, fileformats.tiff]
 });
}


function openFilesCallback(files)
{
 if(files.length == 0)
 {
  alert("No files selected");
 }
 else
 {
  var selectedFiles = [];
  for(var i = 0; i < files.length; i++)
  {
   selectedFiles.push(files[i].name + " (" + files[i].blob.length + " bytes)");
  }
  alert("Selected files: " + selectedFiles);
 }
}
</script>
 </head>
 <body>
  <p><a href="http://code.google.com/apis/gears/api_desktop.html">Google Gears Desktop API</a></p>
  <form action="" method="post">
   <input value="Select Office Files" type="button" id="selectofficefiles">
   <input value="Select Image Files" type="button" id="selectimagefiles">
  </form>
<script type="text/javascript">
var selectofficefiles = document.getElementById("selectofficefiles");
selectofficefiles.onclick = function()
{
 officeFiles();
 return false;
}

var selectimagefiles = document.getElementById("selectimagefiles");
selectimagefiles.onclick = function()
{
 imageFiles();
 return false;
}
</script>
 </body>
</html>

The benefit of using Google Gears is that you can get the file size before uploading the file, so a check can be done beforehand to see if the file is to big (e.g. if(files[i].blob.length > 1048576) alert(files[i].name + " too big (> 1MB)");.

Free Graph Paper (for printing)

2009-01-02T14:06:00.004Z

There are a few sites that offer paper (graph, maths, speciality) you can print off (as PDF) for free. Usually with a credit to the site at the bottom of the page.

Konigi offers various storyboard and wireframe PDF's available in 8.5" x 11" (no A4 available). So they are useful when creating a site design mockup or a story.

Print Free Graph Paper offers Cartesian, Engineering, Polar, Isometric, Logarithmic, Hexagonal, Probability and Smith Chart templates available in Letter and A4 sizes.

MathSphere also has paper types the previous site doesn't.

Incompetech.com has various paper generators for different page sizes (you can create a custom size as well), not just graph paper, but speciality and writing as well (Chinese, Japanese, Fretboard, Cornell etc). You can even define what colour the lines should be.

Useful when you don't need a full pad, the stationer doesn't sell the paper you want, or the shops are closed and you need paper before they are open again (you have a deadline or late submission).

jQuery newsticker Demo Page

2008-12-18T23:27:00.005Z

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't have this functionality, but should work fine in IE7.

jQuery Validation Plugin Tip: Highlight Field

2008-12-18T18:18:00.002Z

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

2008-12-15T18:47:00.003Z

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

2008-12-15T17:57:00.003Z

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)

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

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

2008-12-15T17:48:00.000Z

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 amet...</p>
   </div>
   <div id="footer"><a href="#top">Top of page</a></div>
  </div>
  <div id="bottom"></div>
 </div>
</body>
</html>

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 */
}

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

2008-12-03T17:44:00.002Z

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>

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)
{
....
}

jQuery 1.2.6 Text Clips for Programmer's Notepad 2

2008-11-28T17:43:00.001Z

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

GIMP Repeating Guidelines

2008-11-14T17:55:00.003Z

Update (18 Nov): bug fix - guides go up to both edges, if width/height is a multiple of the separation distance. max was set to height (if vertical guide) when it should have been width and vice versa for vertical.

The GIMP photo/image manipulation program allows you to add guides as an aid to image editing. It is fairly simple to add them - Image > Guides > New Guide or click on one of the rulers and drag onto the canvas. However, this can be time consuming if you need to add multiple guides, equally spaced.

Script-Fu however, allows you to do this via scripting. First of all, create a scm file (e.g. guides-repeat.scm) in your script folder (on Windows this would be C:\Program Files\GIMP-2.0\share\gimp\2.0\scripts (all users) or %USERPROFILE%\.gimp-2.6\scripts, then paste in the following code (use a plain text editor like Notepad)

(define (script-fu-guide-repeat image
                             drawable
                             direction
                             separation)
  (let* (
        (width (car (gimp-image-width image)))
        (height (car (gimp-image-height image)))
  (position 0)
  )
 ; set maximum otherwise the guides will be added indefinitely
 (if (= direction 0)
   (set! max height)
   (set! max width)
 )
 ; while the position is less than the maximum
 (while (<= position max)

  (if (= direction 0)
   ;; check position is inside the image boundaries
   (if (<= position height) (gimp-image-add-hguide image position))
   (if (<= position width) (gimp-image-add-vguide image position))
  )
  
 ; increment position by defined separation 
 (set! position (+ position separation)))
 (gimp-displays-flush)
  )
)

(script-fu-register "script-fu-guide-repeat"
  _"R_epeating Guide"
  _"Add multiple guides separated by specified number of pixels"
  "Sam Collett"
  "Sam Collett"
  "2008-11-18"
  "*"
  SF-IMAGE      "Image"      0
  SF-DRAWABLE   "Drawable"   0
  SF-OPTION     _"Direction" '(_"Horizontal" _"Vertical")
  SF-ADJUSTMENT _"Separation"  (list 40 1 MAX-IMAGE-SIZE 1 10 0 1)
)

(script-fu-menu-register "script-fu-guide-repeat"
                         "<Image>/Image/Guides")

After saving the script, either restart GIMP or Filters > Script-Fu > Refresh Scripts (GIMP 2.6, earlier versions use Xtns instead of Filters). Repeating Guides should now appear under Image > Guides

Searching Indexing Service (ASP.NET C#)

2008-11-07T17:35:00.001Z

Windows has an Indexing Service that can be used to index files on the server it is hosted on. Here is a simple way to query any catalogues (in this example, one called Data) you create and display the results in a repeater.

First of all, create a new page (in Visual Studio or Web Developer 2005), e.g. search.aspx. Create the search box and repeater within a form runat="server":

<form id="form1" runat="server">
<div>
 <asp:TextBox runat="server" ID="Search" />
 <asp:Button runat="server" Text="Search" OnClick="SearchDocuments" />
 <asp:Repeater ID="ResultsRepeater" runat="server">
  <HeaderTemplate>
   <table>
    <thead>
     <tr>
      <th>
       Filename
      </th>
      <th>
       Size
      </th>
      <th>
       Title
      </th>
      <th>
       Path
      </th>
      <th>
       Last Modified
      </th>
      <th>
       Rank
      </th>
     </tr>
    </thead>
    <tbody>
  </HeaderTemplate>
  <ItemTemplate>
   <tr>
    <td>
     <%# Eval("Filename") %>
    </td>
    <td>
     <%# Eval("size") %>
    </td>
    <td>
     <%# Eval("DocTitle") %>
    </td>
    <td>
     <%# Eval("path") %>
    </td>
    <td>
     <%# Eval("write") %>
    </td>
    <td>
     <%# Eval("rank") %>
    </td>
   </tr>
  </ItemTemplate>
  <FooterTemplate>
   </tbody> </table></FooterTemplate>
 </asp:Repeater>
</div>
</form>

Then in your code behind (search.aspx.cs) add:

protected void SearchDocuments(object sender, EventArgs e)
{
 String fileTypes = "\".doc\" OR \".rtf\"";
 String catalog = "Data";
 String q = Search.Text;
 q = q.Replace("'", "''");

 String query = "SELECT DocTitle,Filename,size,path,rank,write,vpath,url from SCOPE() WHERE FREETEXT('"+q+"') AND CONTAINS(Filename, '"+fileTypes+"') ORDER BY rank DESC, write DESC";

 OleDbConnection cn = new OleDbConnection("Provider=MSIDXS.1;Integrated Security .='';Data Source='Data'");

 OleDbDataAdapter cmd = new OleDbDataAdapter(query, cn);

 DataSet data = new DataSet();
 cmd.Fill(data);

 DataView results = new DataView(data.Tables[0]);

 ResultsRepeater.DataSource = results;
 ResultsRepeater.DataBind();

}

The results are sorted by rank (highest first), then date last modified (newest first). Only search Word documents (or more precisely, filenames containing .doc or .rtf) - but you can always add more types and refine the search further.

Link: jQuery + ASP.NET

2008-10-15T17:10:00.003+01:00

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.

Select box manipulation with jQuery - update to removeOption, new selectedOptions

2008-10-06T21:40:00.004+01:00

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

Easy database querying with dOOdads (C#, .NET)

2008-09-25T18:17:00.000+01:00

Been some time since I posted about MyGeneration and dOOdads. Still using it regularly, even though it is a few years old now. A few sites I do still use .NET 1.1, so it is still in use.

A brief (re)introduction - MyGeneration is a tool that can generate code for you, through the use of templates (you can create your own, and there is a template library). It comes bundled with the dOOdads data abstraction library, which allows you to update and query your database without knowing the intricacies of interacting with it (i.e. .NET classes to use, SQL to write etc). Both MyGeneration and dOOdads support multiple databases (SQL Server, MySQL, Oracle etc) and regeneration of code, changing the connection string is often all that is needed to move to another system.

It was freeware initially, but is now hosted on SourceForge and no longer actively maintained by the main developers.

A basic example of a query would be:

Employees e = new Employees();
e.Where.EmployeeID.Value = 1;
if(e.Query.Load())
{
    SurnameTextBox.Text = e.Surname;
}

You can even select multiple employees with different EmployeeID's:

Employees e = new Employees();
e.Where.EmployeeID.Value = "1,3,7";
e.Where.EmployeeID.Operator = WhereParameter.Operand.In;
if(e.Query.Load())
{
    ....
}

For columns of type 'bit' (e.g. true, false), where you want to treat NULL as false, you use a TearOff:

Employees e = new Employees();
e.Query.OpenParenthesis();
e.Where.DrivingLicense.Value = false;
WhereParameter driving = e.Where.TearOff.DrivingLicense;
driving.Operator = WhereParameter.Operand.IsNull;
// add conjunction and close parenthesis
driving.Conjuction = WhereParameter.Conj.Or;
e.Query.CloseParenthesis();
if(e.Query.Load())
{
    ....
}

Note: driving.Conjuction is correct, it is a typo in dOOdads.

jQuery UI draggables - helper CSS class

2008-09-25T17:49:00.001+01:00

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;
}

Place JavaScript code at bottom of page

2008-09-12T17:37:00.003+01:00

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 doSomething()
{
 return confirm("About to visit " + this.href + ", continue?");
}
</script>
</body>
</html>

In some circumstances, the script may query the CSS of an element and so the script may run before the associated stylesheet has downloaded (at least, I have experienced this in Google Chrome).

This does assume that you have not attached javascript functions inline (e.g. a onclick="doSomething()" as these would fail if the user interacts with elements before the function is available.

If you use 'DOM ready' events, then there is less benefit of doing this (as it should run when the page is ready anyway). As with any optimisations, it is always worth experimenting to reduce the time it takes for a page to be used and interacted with by visitors.

jQuery Quick Tip: In general $(this).attr("attribute") = this.attribute

2008-08-26T17:57:00.002+01:00

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)
maxlength    (maxLength)
cellspacing  (cellSpacing)

Doing this rather than using attr cuts down on code size and may improve performance.

Querying a SQLite 3 database using PHP

2008-08-14T17:50:00.002+01:00

Previously, I detailed a way of creating a database in A basic hit counter using PHP and SQLite 3 using PHP Data Objects and PHP 5. For most web sites, SQLite would be fine, but for very high volume (as in many hundreds of thousands of hits per day), there are better options - Appropriate Uses For SQLite (SQLite.org) has more details on when SQLite is a good option.

Here is an example of how to query the data and display it on a page (to see which pages are popular for example).

<?
$dbfolder = $_SERVER["DOCUMENT_ROOT"]."/data/";
$dbname = $_SERVER["HTTP_HOST"]."_log.sq3";

$logdb = new PDO("sqlite:".$dbfolder.$dbname);

$starttable = "<table>
<tr>
 <th>Page</th>
 <th>Counter</th>
</tr>";
$endtable = "</table>";
$tablecontents = "";
foreach ($logdb->query("SELECT * FROM hits ORDER BY counter DESC") as $row)
{
 $tablecontents .= "
 <tr>
  <td>{$row['page']}</td>
  <td>{$row['counter']}</td>
 </tr>";
}
echo $starttable.$tablecontents.$endtable;

// close connection
$logdb = null;
?>

A basic hit counter using PHP and SQLite 3

2008-08-12T17:55:00.003+01:00

SQLite is a lightweight database engine that is bundled with PHP 5. Using PHP Data Objects (PDO) you can create and edit SQLite databases and tables. A SQLite databases is just a single file that is stored in a folder that has modify rights applied to it (otherwise you can't change it).

This sample shows how to create a database, add a table to it and insert and update a record in it. By using PDO, you can easily change it to use different database engines (like MySQL, IBM DB2 etc [others, like MSSQL and Oracle are in a experimental stage though, check the PDO site (linked above) for more information]).

You can copy this code into a separate file and include it within pages that you want a counter on <? include("counter.php"); ?>.

<?
// logging page hits
$dbfolder = $_SERVER["DOCUMENT_ROOT"]."/data/";
$dbname = $_SERVER["HTTP_HOST"]."_log.sq3";

// check if database file exists first
if(!file_exists($dbfolder.$dbname))
{
 $logdb = new PDO("sqlite:".$dbfolder.$dbname);
 $logdb->exec("CREATE TABLE hits(page VARCHAR(255) PRIMARY KEY, counter INTEGER)");
}
else
{
 $logdb = new PDO("sqlite:".$dbfolder.$dbname);
}

$page = $_SERVER["SCRIPT_URL"];

// check if page is already in the hits table
$statement = $logdb->query("SELECT counter FROM hits WHERE page='$page'");
$record = $statement->fetchAll();

// if a record is found
if(sizeof($record) != 0)
{
 $counter = $record[0]['counter']++;
 $logdb->exec("UPDATE hits SET counter=$counter WHERE page='$page'");
 echo "Counter: ".$counter;
}
else
{
 $logdb->exec("INSERT INTO hits(page, counter) VALUES ('$page', 1)");
 echo "Counter: 1";
}

// close connection
$logdb = null;
?>

In writing this code, LiteWebsite was a valuable resource, containing many SQLite examples.

JavaScript dates and timezone offsets

2008-07-23T17:50:00.002+01:00

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 Datejs. 30kb download, under an MIT open source license.

There is also another library, a smaller download (so slightly less functionality) available with the jQuery datePicker plugin - http://code.google.com/p/jqueryjs/source/browse/trunk/plugins/datePicker/v2/demo/date.js, under a dual MIT / GPL license. For more localisations (as well as string and array manipulation), visit http://code.google.com/p/jqueryjs/source/browse/trunk/plugins/methods. Note: jQuery is not required for these libraries to work.

GPL Compatible Licenses

2008-07-23T17:35:00.001+01:00

There is a useful diagram on the GNU site that lists what licences are compatible with the GNU GPL: A Quick Guide to GPLv3: New Compatible Licenses, plus a comprehensive list with more detailed compatibility information.

Link: HTML Agility Pack (.NET)

2008-07-22T17:58:00.002+01:00

The HTML Agility Pack is an HTML parser for .NET, supporting XPATH and XSLT parsing. Basically the HTML equivalent of XmlDocument.

Example use (from site):

HtmlDocument doc = new HtmlDocument();
doc.Load("file.htm");
foreach(HtmlNode link in doc.DocumentElement.SelectNodes("//a[@href]")
{
    HtmlAttribute att = link["href"];
    att.Value = FixLink(att);
}
doc.Save("file.htm");

Portable GIMP and fonts

2008-07-15T17:58:00.001+01:00

GIMP (GNU Image Manipulation Program), the open source alternative to Photoshop can be downloaded as a portable version. However, due to being portable, the choice of fonts you can use is limited by what is on the operating system and part of the basic GIMP package, so if you use the font tool and choose a font that is not on another system, you may have problems. Thankfully, fonts are easy to copy (you can copy them from the Fonts applet in the control panel by just dragging them to another folder).

To make your fonts available wherever you use GIMP Portable, you just copy them to E:\PortableApps\GIMPPortable\App\gimp\share\gimp\2.0\fonts (where E: is the drive letter of your portable drive). Then you can go on any Windows PC (even without Office or OpenOffice installed) and still use your own fonts (those which you are licensed for).

JSON and JsonML

2008-07-07T18:15:00.002+01:00

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 DOM, instead of innerHTML). For jQuery developers, there is a plugin for working with JsonML: JSONML Array to DOM - jQuery.ml

An overview of jQuery.browser

2008-07-03T18:05:00.004+01:00

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
Firefox 3.0.1	jQuery.browser.mozilla = true	1.9.0.1
Safari 2.0.2	jQuery.browser.safari = true	416.11 / 416.12
Safari 2.0.4	jQuery.browser.safari = true	418.x - 419
Safari 3.0.x	jQuery.browser.safari = true	522+, 522.x, 523.x
Safari 3.1.x	jQuery.browser.safari = true	525.x, 526+
Opera x	jQuery.browser.opera = true	x

I have listed Opera as 'Opera x' as the version number 'x' is always returned by jQuery.browser.version (so no extra work is required, unlike Firefox and Safari).

This table is based on information from UserAgentString.com. There is a Firefox 1.5.0.12, but I am unsure of the version number, plus there are Safari versions with a slightly different rendering engine version number (i.e. 2.0.2 is not always 416.11). Basically, with Safari, if the version number returned is less than 418, it is Safari 2 or lower and if it is around 525/526 it is Safari 3.1.

Link: FreeTechBooks.com

2008-07-01T13:34:00.002+01:00

FreeTechBooks.com is a site that offers many computing and engineering related text books (topics include Computer Science, Mathematics, Programming etc) available to download for free./p>

Link: IconsPedia

2008-06-25T11:58:00.003+01:00

IconsPedia is a site with many icons free for download. Check the license first to see if you can use it for the purpose you want it for (some have conditions - not for commercial use, and/or must attribute (give credit to) the author). You can also upload any icons that you have produced (as long as they are free).

Link: A list of .NET Cheat Sheets

2008-06-19T12:27:00.002+01:00

.NET Cheat Sheets includes ".NET Format String Quick Reference", "ASP.NET 2.0 Page Life Cycle & Common Events", "Visual Studio 2005 Built-in Code Snippets (C#)" as well as links to several more.

Tabs without JavaScript

2008-06-17T23:26:00.004+01:00

It is possible to implement a tabbing system without needing to use JavaScript. All you need is CSS and standard (X)HTML. The downside is that you won't get styling on the active tab to indicate that it is active.

CSS:

div.tabcontainer {
 width: 500px;
 background: #eee;
 border: 1px solid #000000;
}
ul.tabnav {
 list-style-type: none;
 margin: 0;
 padding: 0;
 width: 100%;
 overflow: hidden;
}

ul.tabnav a {
 display: block;
 width: 100%;
}

ul.tabnav a:hover {
 background: #ccc;
}

ul.tabnav li {
 float: left;
 width: 125px;
 margin: 0;
 padding: 0;
 text-align: center;
}

div.tabcontents {
 height: 290px;
 background: #ccc;
 overflow: hidden;
 border-top: 1px solid #011;
 padding: 3px;
 
}

div.tabcontents div.content {
 float: left;
 width: 100%;
 height: 102%;
 overflow-y: auto;
}

div.tabcontents div.content h2 {
 margin-top: 3px;
}

HTML:

<div class="tabcontainer">
 <ul class="tabnav">
  <li><a href="#tab1">Tab 1</a></li>
  <li><a href="#tab2">Tab 2</a></li>
  <li><a href="#tab3">Tab 3</a></li>
  <li><a href="#tab4">Tab 4</a></li>
 </ul>
 <div class="tabcontents">
  <div class="content" id="tab1">
   <h2>Tab 1</h2>
  </div>
  <div class="content" id="tab2">
   <h2>Tab 2</h2>
  </div>
  <div class="content" id="tab3">
   <h2>Tab 3</h2>
  </div>
  <div class="content" id="tab4">
   <h2>Tab 4</h2>
  </div> 
 </div>
</div>

Demo page

Recursive Directory Listing (PHP)

2008-06-13T19:07:00.006+01:00

In PHP, it is possible to get a list of files and folders and save them into an array: PHP: List files in a directory. Building on this, I have added recursion to the dirList function detailed in the aforementioned link:

/**
* Return a list of all files within a directory
*
* @param string $directory The directory to search
* @param bool $recursive Go through child directories as well
* @return array
*/
function dirList($directory, $recursive = true) 
{
 // create an array to hold directory list
 $results = array();

 // create a handler for the directory
 $handler = opendir($directory);

 // keep going until all files in directory have been read
 while (false !== ($file = readdir($handler)))
 {
  // if $file isn't this directory or its parent, 
  // add it to the results array
  if ($file != '.' && $file != '..')
  {
   // if the file is a directory
   // add contents of that directory
   if(is_dir($directory.DIRECTORY_SEPARATOR.$file) && $recursive === true)
   {
    $results[] = array($file => dirList($directory.DIRECTORY_SEPARATOR.$file));
   }
   else
   {
    $results[] = $file;
   }
  }
 }

 // tidy up: close the handler
 closedir($handler);

 // done!
 return $results;

}

Now you can build a list of files/folders generated with dirList:

/**
 * Return an unordered html list of all files within a directory
 *
 * @param string $directory The directory to search
 * @param array $fileTypes Which fileTypes to show. To list all files use htmlDirList("mydir", array("*"))
 * @param bool $recursive Search through child directories as well
 * @param string $listClassName The class name to apply to the <ul>
 * @param function $displayName A function to call on the file to determine how it is displayed (e.g. change _ to space)
 * @return array
 */
function htmlDirList($directory, $fileTypes = null, $recursive = true, $listClassName = null, $displayName = null)
{
 // defaults (if null)
 // restrict by fileTypes
 $fileTypes = (is_null($fileTypes) ? array("doc","rtf","pdf") : $fileTypes);
 // the class name to apply to the <ul>
 $listClassName = (is_null($listClassName) ? "documents" : $listClassName);
 // set a default function for displayName
 $displayName = (is_null($displayName) ? create_function('$fileName,$extension', 'return str_replace("_", " ", $fileName);') : $displayName);
 
 // get list of files / folders
 $list = dirList($directory, $recursive);
 
 // use an array for building up the string
 $results = array();
 // create the list
 $results[] = "<ul class=\"$listClassName\">\n";
 foreach ( $list as $value )
 {
  // is a folder
  if(is_array($value))
  {
   $results[] = "<li class=\"directory\">".$displayName(key($value),"")."\n".htmlDirList($directory.DIRECTORY_SEPARATOR.key($value), $fileTypes, $recursive, $listClassName, $displayName)."</li>\n";
  }
  else
  {
   // the extension is after the last "."
   $extension = strtolower(array_pop(explode(".", $value)));
   // the file name is before the last "."
   $fileName = array_shift(explode(".", $value));
   // continue to next item if not one of the desired file types
   if(!in_array("*", $fileTypes) && !in_array($extension, $fileTypes)) continue;
   // add the list item
   $results[] = "<li class=\"file $extension\"><a href=\"".str_replace("\\", "/", $directory)."/$value\">".$displayName($fileName, $extension)."</a></li>\n";
  }
 }
 $results[] = "\n</ul>";
 
 // return the results as a string
 return implode("", $results);
}

So now you can get create documents within a folder and have a page listing all those documents, all linked to. In your PHP page:

<?php echo htmlDirList("documents") ?>

The generated code is not formatted, but doing so would add further complexity and be of no benefit (apart from readability).

<ul class="documents">
<li class="file doc"><a href="files/File1.doc">File1</a></li>
<li class="file pdf"><a href="files/File_2.pdf">File 2</a></li>
<li class="file rtf"><a href="files/File_3.rtf">File 3</a></li>
<li class="directory">more
<ul class="documents">
<li class="file doc"><a href="files/File4.doc">File4</a></li>
<li class="file pdf"><a href="files/File_5.pdf">File 5</a></li>
<li class="file rtf"><a href="files/File_6.rtf">File 6</a></li>
</ul></li>
</ul>

There are also more options available, e.g. you may want an image listing:

<?php echo htmlDirList("images", array("jpg","gif","png"), true, "images") ?>

Simple JavaScript/CSS gzipping

2008-06-13T18:02:00.001+01:00

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")
?>

Delete all cached thumbnails (thumbs.db on Windows system)

2008-06-06T17:55:00.003+01:00

Not web related, but possibly of interest.

thumbs.db is a file that caches the thumbnails of images stored within a folder. There are tools for deleting these files, but they are often through the use of an application to be downloaded or installed. There is an easy way to do this without resorting to that, just by using the command prompt.

del *thumbs.db /s /ah

This will delete all files (and folders) ending in thumbs.db (e.g. myappthumbs.db), so don't run this if you are unsure (or run it in a folder other than C:\). The /ah parameter searches hidden files and folders as well (so you may get access denied on C:\RECYCLER)

Disclaimer: Be very careful with this as a typo could prove disastrous. Do not run this if you are not completely sure and don't have a backup if a mistake is made.

Google now hosting JavaScript libraries (jQuery, Prototype et al)

2008-05-28T09:23:00.004+01:00

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

jQuery Quick Tip: Rollover images with jQuery

2008-04-17T17:20:00.003+01:00

Update: Demo page created

There are several sites that show you how to create rollover images with jQuery (just search Google, Ask, A9, Yahoo etc) for "rollover image jquery"), but they do sometimes have more code than needed (like using $(this).attr("src") instead of this.src for determining the image source. Here is another method that does not use jQuery unnecessarily (which may be faster if there are lots of images).

Create two images, for the 'off' state (when mouse is not over it) and the 'on' state (on mouse over). Name them button_off.gif and button_on.jpg (the button bit can be anything, as can the extension (.gif) - the important bit is the _off and _on suffix.

HTML code:

<a id="mylink" href="/go/somewhere/"><img src="/images/button_off.gif" alt="" title="" border="0" width="100" height="30" /></a>

Then in your $(document).ready:

$("#mylink img").hover(
 function()
 {
  this.src = this.src.replace("_off","_on");
 },
 function()
 {
  this.src = this.src.replace("_on","_off");
 }
);

Due to its generic nature, it can be applied to multiple images, e.g. those with a class .rollover set $("img.rollover").hover...

pastebin sites

2008-04-14T12:09:00.003+01:00

A pastebin is a site that allows you to share text with other, most commonly source code, but could be anything else as well (like prose or poetry - e.g. you are writing a novel or poem and want to share what you write). They are useful if you do not have a web site to post what you have written and want to share it to get any feedback (like spotting any bugs or spelling mistakes).

They allow you to post without registering or paying and the pastes normally expire after a set period (e.g after a month) so as to reclaim any lost disk space for the host. Source Code highlighting is often a feature of many as well. Some of them offer more than this, like comparison (e.g. diff's), password protection / encryption and notifications (to alert you of new pastes, or replies to pastes - normally through a chat system like IRC). The open nature of them could render them susceptible to spam though.

The following is a list of pastebin's I am aware of. All offer syntax highlighting.

pastebin.com - possibly the first site to do this, you can view recent pastes and search them
pastebin.ca - more features than pastebin.com: encryption, tags and description
nopaste.info - description, name, tab width
LodgeIt! - very simple interface, powered by jQuery, reply to pastes, view diff's, remote queries (XML-RPC). You can't see recent pastes or perform a search though (although this probably mitigates spam somewhat)
pastie - separate code into sections, mark as private, select a theme when viewing pastes
dpaste - associate a title and your name / email

jQuery Quick Tip: Select text on focus

2008-02-27T14:45:00.002Z

Just a quick tip on how to select all text when focus is given to a textarea or input (only if the value has not changed) .

$("input, textarea").focus(
 function()
 {
  // only select if the text has not changed
  if(this.value == this.defaultValue)
  {
   this.select();
  }
 }
)

ASP.NET: Binding alphabet to dropdown list

2008-01-31T13:00:00.001Z

Update: Added VB code.

There may be some cases where you want a DropDownList to list all the letters in the alphabet (i.e. A - Z). Rather than add the letter individually (through using <asp:ListItem>) you can create an ArrayList and bind to that.

In your ASPX page:

<asp:DropDownList ID="Letters" DataSource='<%# Alphabet %>' runat="server" />

In your code behind. Create your Alphabet property:

private ArrayList _Alphabet;
protected ArrayList Alphabet
{
 get
 {
  if (_Alphabet == null)
  {
   _Alphabet = new ArrayList();
   for (int i = 65; i < 91; i++)
   {
    _Alphabet.Add(Convert.ToChar(i));
   }
  }
  return _Alphabet;
 }
}

Protected ReadOnly Property Alphabet() As ArrayList
 Get
  If _Alphabet Is Nothing Then
   _Alphabet = New ArrayList()
   For i As Integer = 65 To 91 - 1
    _Alphabet.Add(Convert.ToChar(i))
   Next
  End If
  Return _Alphabet
 End Get
End Property

Bind on Page_Load:

private void Page_Load(object sender, EventArgs e)
{
 if(!Page.IsPostBack)
 {
  DataBind();
 }
}

Public Sub Page_Load() Handles MyBase.Load
 If Not Page.IsPostBack Then
  DataBind()
 End If
End Sub

This will show A - Z (capitals) in the dropdown. For a - z (lower case), change 65 to 97 and 91 to 123 in Alphabet

Adding rounded corners to your web pages

2008-01-08T17:55:00.000Z

There are several ways of adding rounded corners to your web page. There is a large list of methods found at Rounded Corners - css-discuss, but also a few other ways using JavaScript (some using jQuery):

The first (as far as I am aware) jQuery corner plugin (Dave Methvin)
An improved version (Mike Alsup) of the above plugin
curvyCorners - anti-aliased corners, supporting borders and background images
A modified version of curvyCorners made to work with jQuery.
The above plugin was rather big and couldn't be packed, so someone else made a futher modification that reduced its size and enabled it to be packed.
Cornerz - smooth, anti-aliased corners. Another jQuery plugin. Anti-aliased, but does not support backgrounds.
Rounded corners using <canvas>. <canvas> is a way of drawing/manipulating images via scripting (e.g. draw vector images, transformation, compositing, animations etc). There is a tutorial available on how to use it. Firefox 1.5+, Opera 9+, Safari only - excanvas adds support to Internet Explorer.

Implementations are not always heavily tested within different layouts and CSS, so while a preferred one may not work as expected, there should still be a way to add the effect (even if it involves more code).

A very light-weight way to do this would be via CSS 3 (as it supports multiple background images), but sadly only Safari supports this: demo. Could be some way off as the CSS 3 specification isn't finalized (but neither is CSS 2.1), although it is a useful feature that will likely not change (or be removed) and be adopted by newer versions of currently developed browsers (Firefox 3 and IE8 should hopefully have this).

Free Alternatives to Adobe Reader

2007-12-04T14:51:00.000Z

As the years have gone by, Adobe Reader (formally Adobe Acrobat Reader) has got bigger (version 5.05 is 8.6MB and will probably still handle many PDF's OK, the latest, 8.1.1 is 22.3MB) and invariably slower with each release. Thankfully there are free alternatives, that are both a smaller download and much faster at opening PDF's.

SumatraPDF (< 1MB, still in beta, open source)
Foxit Reader (around 2MB download)
PDF XChange Viewer (13MB, but still smaller than Adobe Reader and supports comments/annotations, filling in forms and exporting text and images)

Alternatively, you could still have Adobe Reader, and use a tool that disables the plugins that slow the startup - e.g. Adobe Reader SpeedUp or PDF SpeedUp (although I haven't tested either of these).

Analyse performance of web pages with YSlow

2007-12-03T12:20:00.000Z

YSlow is a plugin for Firefox developed by Yahoo that analyses your web pages and reports back on any performance issues (plus gives a grade). There is a performance report (which shows you areas which can be improved), stats (overview of what is loaded, cached/uncached, cookies and number of HTTP requests), components (page, CSS/JS,JPG etc - expiry, if gzip used, response time, ETag and file sizes) and various tools (view all CSS/JavaScript and a JSLint report).

This plugin depends on Firebug.

Form Layout Using CSS

2007-11-27T17:45:00.000Z

I have created a sample for laying out fields within a fieldset (so that the labels are all lined up) - I use a fieldset as they are handy for grouping related fields together. Nothing too fancy, but it can be used as a basic for something better. Works with Internet Explorer 6 and 7, Firefox 2 and Opera 9.02.

Clearing tempororary files

2007-11-27T17:29:00.000Z

Being a laptop user, disk space can be an issue and temporary files can be one of the things to clear out to free up some space. There are freeware applications that enable you do do this, but you can just use what is built into Windows to do the same thing. It is run from the command line and is the command rd or rmdir, which basically means 'remove directory'. It can be used to remove directories as well as its sub directories and files, by just typing rd C:\MyFolder\ /s /q (the /s switch is to include sub directories and /q prevents the prompt to remove a directory tree).

At first, I thought that running it on the temporary folders directory would remove it and somehow break windows, but it doesn't. This is because there are files within that directory that are in use, and as a result, it can't be deleted. However, all the files and sub directories that aren't locked are removed, freeing up space. I use a simple batch file that cleans up the temporary folders, which can be set to run as a scheduled task (assuming you have the computer on at the time).

cleanup.cmd

@echo off
rem clean up windows temp directory
rd C:\Windows\Temp\ /s /q
rem clean up users temp directory
rd %temp% /s /q

The advantage of doing it in a batch file is that you can easily add any directories that also have temporary files, for instance, to clean up you Internet Explorer temporary files add in rd "%homepath%\Local Settings\Temporary Internet Files\" /s /q (assuming you haven't moved the location of the temporary internet files folder).

You can also use the Disk Cleanup tool that is built into Windows: Right Click desired drive in 'My Computer', select 'Properties', then click the 'Disk Cleanup' button. This also compresses files that you don't access often, but takes some time.

Sorting Files by Name, Date, FileSize etc (C#)

2007-09-28T13:25:00.000+01:00

It is simple to get a list of files in .NET, you simply do:

string folder = "c:\\windows\\";
string[] files = Directory.GetFiles(folder);

This will get all the files in C:\Windows (does not include subdirectories). However, they are sorted by name (A-Z) and there aren't any options in the GetFiles method to return them in any other order. Luckily, the results are returned as an array and they can be sorted with a custom comparer. I have created a FileComparer class that can be used to sort the files (works in both .NET 1.1 and 2.0):

public class FileComparer : IComparer
{
 public enum CompareBy
 {
  Name /* a-z */,
  LastWriteTime /* oldest to newest */,
  CreationTime  /* oldest to newest */,
  LastAccessTime /* oldest to newest */,
  FileSize /* smallest first */
 }
 // default comparison
 int _CompareBy = (int)CompareBy.Name;
 
 public FileComparer()
 {
 }
 
 public FileComparer(CompareBy compareBy)
 {
  _CompareBy = (int)compareBy;
 }
 
 int IComparer.Compare( object x, object y )
 {
  int output = 0;
  FileInfo file1 = new FileInfo(x.ToString());
  FileInfo file2 = new FileInfo(y.ToString());
  switch(_CompareBy)
  {
   case (int)CompareBy.LastWriteTime:
    output = DateTime.Compare(file1.LastWriteTime, file2.LastWriteTime);
    break;
   case (int)CompareBy.CreationTime:
    output = DateTime.Compare(file1.CreationTime, file2.CreationTime);
    break;
   case (int)CompareBy.LastAccessTime:
    output = DateTime.Compare(file1.LastAccessTime, file2.LastAccessTime);
    break;
   case (int)CompareBy.FileSize:
    output = Convert.ToInt32(file1.Length - file2.Length);
    break;
   case (int)CompareBy.Name:
   default:
    output = (new CaseInsensitiveComparer()).Compare( file1.Name, file2.Name );
    break;
  }
  return output;
 }
}

To use it is fairly simple:

string folder = "c:\\windows\\";
string[] files = Directory.GetFiles(folder);
IComparer comp = new FileComparer(FileComparer.CompareBy.FileSize);
Array.Sort(files, comp);
foreach(string file in files)
{
 Console.WriteLine(file);
}

This will output a list of files in the C:\Windows directory, sorted smallest to largest. If you want it the other way round, just call Array.Reverse(files) after the sort.

Google Code uses jQuery

2007-09-18T17:15:00.000+01:00

Google Code is now another high profile site that uses jQuery. It is used to show Google Code Blog posts, featured projects and Google Tech Talks on the home page. It doesn't use jQuery's AJAX functionality to get the feeds though.

Select box manipulation with jQuery - new plugin: selectedValues

2007-09-12T14:21:00.000+01:00

A new plugin has been added for getting the values of options selected in a select box. More details and download from the Select Box Manipulation project page at the jQuery site.

CssCompact: A WebHandler for shrinking CSS files (ASP.NET)

2007-09-07T17:10:00.004+01:00

Update (20 Feb 2010): Static regular expression, compiled (performance improvement, but will be negligible for low volume sites). See Compacting CSS on-the-fly for an HttpHandler based on this.

Update (08 July 2009): Check file extension is CSS.

CssCompact is a simple WebHandler for sending smaller CSS files to the client. It simply removes linebreaks, tabs, spaces (before CSS properties) and comments. That way you can still have your commented CSS code, and also save bandwidth.

Use is simple, just pass on the stylesheet as a parameter when loading your stylesheet:

Add to <head>:

<link rel="stylesheet" type="text/css" href="/style/CssCompact.ashx?stylesheet=/style/style.css" />

<style type="text/css"> @import "/style/CssCompact.ashx?stylesheet=/style/style.css"; </style>

Create CssCompact.ashx:

<%@ WebHandler Language="C#" Class="CssCompact" %>

using System;
using System.Web;
using System.IO;
using System.Text.RegularExpressions;

public class CssCompact : IHttpHandler
{
 // remove linebreaks, whitespace and comments
 private static RemoveRegex = new Regex(@"^\s+|/\*([^*\\\\]|\*(?!/))+\*/|\r|\n|\t", RegexOptions.Multiline | RegexOptions.Compiled);
 public void ProcessRequest(HttpContext c)
 {
  string stylesheet = c.Request.QueryString["stylesheet"];
  c.Response.ContentType = "text/css";
  if (stylesheet != null)
  {
   string filename = c.Server.MapPath(stylesheet);
   FileInfo f = new FileInfo(filename);
   if(f.Extension == ".css" && f.Exists)
   {
    c.Response.AddHeader("Last-Modified", f.LastWriteTime.ToString("U"));
    c.Response.Expires = 0;
    if(c.Request.HttpMethod != "HEAD")
    {
     using (StreamReader cssStream = f.OpenText())
     {
      string cssContent = cssStream.ReadToEnd();
      cssContent = RemoveRegex.Replace(cssContent, "");
      c.Response.Write(cssContent);
      c.Response.End();
     }
    }
   }
  }
  c.Response.Write("/* No valid style sheet selected */");
  c.Response.End();
 }

 public bool IsReusable
 {
  get
  {
   return false;
  }
 }

}

Post update - Windows Scripting: Adding/removing network printers and drives

2007-08-31T10:11:00.000+01:00

Windows Scripting: Adding/removing network printers and drives has been updated to show you how to add entries to the event log in case of an error, rather than show a message box.

The JavaScript CompressorRater

2007-08-30T21:16:00.001+01:00

The JavaScript CompressorRater compares several popular tools used for compressing JavaScript. At the moment, it compares JSMin, Dojo shrinksafe, Packer and the YUI Compressor (which has been recently been released and has very good results so far). Dojo shrinksafe and YUI Compressor require Java and Rhino installing. Packer can be run online and JSMin is a command line tool (with code available in several languages for use within your own applications).

Before using any of these tools, it is best to check your syntax is correct (adding the optional semi-colons and checking the code with JSLint).

You can see the results of the compression with several popular JavaScript libraries: jQuery, Prototype, YUI and Scriptaculous. Mootools and Dojo are missing from the comparison. Rather than using one tool to compress your code, it may be better to try several and use the one that gives you the best results.

New Version of jQuery - 1.1.4

2007-08-24T09:56:00.000+01:00

A new version (1.1.4) of jQuery has been released - jQuery 1.1.4: Faster, More Tests, Ready for 1.2. There are several notable features in this release:

Any name jQuery - so you can use multiple versions of jQuery on the same page (though I wouldn't recommend that if at all possible) - e.g. myobj.jQuery = jQuery.noConflict(true)
It is also faster (yet again) - although it is only slow if you call the same query a lot (hundreds) of times (e.g. $("#myel").foo(); $("#myel").bar(); ... instead of $myel = $("#myid"); $myel.foo(); $myel.bar(); ...
New features: .slice() (works like the JavaScript array method slice), :has() (select element only if it has (an)other element(s) in it), recursive .extend() and .noConflict(true) (see first point)
Deprecated methods are also detailed in the blog post - i.e. they won't be in jQuery 1.2, with one exception, XPath attribute selector (deprecated in 1.1.4 and 1.2 - $("div[@attr]"))

jQuery Cheat Sheet (Excel and Google Spreadsheet)

2007-08-20T20:34:00.000+01:00

A cheat sheet for jQuery has recently been created by Matt Kruse and posted on the jQuery discussion list. It is available in Excel format via jQuery Tips (JavaScript Toolbox) or in Google Spreadsheet format (the Excel sheet created by Matt was converted into this format by George Blouin). Being in a spreadsheet format means it is easily editable, to add your own 'cheats'.

Select box manipulation with jQuery - update to removeOption

2007-07-27T14:20:00.000+01:00

The previous update to this collection of plugins introduced a cache when adding options (i.e. made it much faster if adding a lot of options). However, it was not cleared when remove options (causing possible conflicts). This is now done and an extra parameter has been added to removeOption (of boolean type), that when set to true, will only remove options if it matches any option(s) defined by the first parameter. More details and download from the Select Box Manipulation project page at the jQuery site. A demo is also available.

FileHelpers - a library for worked with CSV files (.NET)

2007-07-12T15:17:00.000+01:00

Best described in the words on the FileHelpers website:

The FileHelpers are a free and easy to use .NET library to import/export data from fixed length or delimited records in files, strings or streams.

It is a library that can be used to work with flat text files (e.g. Comma Separated Value (CSV) or Tab Separated Values (TSV) etc). Available for commercial and non-commercial use (under the LGPL). They also have a blog.

There is also a CSV parser on CodeProject if you can't use a library licensed under the LGPL: A Fast CSV Reader. Not as powerful as FileHelpers but still good nonetheless.

Text Clips for Programmers Notepad 2 (jQuery)

2007-07-11T12:44:00.000+01:00

I have not updated my jQuery Text Clips for Programmer's Notepad 2 for a while (since 1.0.2) so have added them for jQuery 1.1.2 @ Text Clips for Programmer's Notepad 2 (generated using the jQuery Text Clip Generator).

Sending emails with C#

2007-07-05T09:57:00.000+01:00

I'm sure many may already know how to do this, but for those that don't, sending an email using .NET is very easy and can be used in ASP.NET as well as Windows Forms or Console applications (assuming you have CDOSYS installed). This example also shows how to send an email to multiple recipients (requires you to import the namespace System.Collections).

.NET 1.0 / 1.1 (import the namespace System.Web.Mail)

MailMessage m;
SmtpMail.SmtpServer = "smtpservername";
ArrayList recipients = new ArrayList();
recipients.Add("fred@bloggs.com");
recipients.Add("jane@doe.com");
for (int i = 0;i < recipients.Count;i++)
{
 m = new MailMessage();
 m.To = recipients[i].ToString();
 m.From = "me@mysite.com";
 m.BodyFormat = MailFormat.Html;
 m.Subject = "Subject of the email";
 m.Body = String.Format(
  "<p style='font: 12px Arial'>Sending email to {0}</p>",
  recipients[i]
 );
 SmtpMail.Send(m);
}

.NET 2.0+ (import the namespace System.Net.Mail)

MailMessage m;
SmtpClient smtp = new SmtpClient("smtpservername");
ArrayList recipients = new ArrayList();
recipients.Add("fred@bloggs.com");
recipients.Add("jane@doe.com");
for (int i = 0;i < recipients.Count;i++)
{
 m = new MailMessage();
 m.To = recipients[i].ToString();
 m.From = "me@mysite.com";
 m.IsBodyHtml = true;
 m.Subject = "Subject of the email";
 m.Body = String.Format(
  "<p style='font: 12px Arial'>Sending email to {0}</p>",
  recipients[i]
 );
 smtp.Send(m);
}

Windows Scripting: Adding/removing network printers and drives

2007-06-15T13:09:00.000+01:00

While I normally make posts related to web development, I may occasionally post something that isn't used in web development, but still has some kind of relationship (normally the underlying technology used) - for example: VBScript - Set Homepage (MSIE) / Add Notepad to Send To.

In this case, it is VB Scripting and is an example of how to perform several common tasks (related to printers and drives) that network/server administrators may want to do, through a simple script (could be via login script, or executed directly on the client) rather than using the Windows GUI. It also demonstrates how to do basic error handling. Just take the following code (tweak as needed) and paste it in a script file (e.g. login.vbs). Only been tested in Windows XP (for Windows 98, you have to also define the driver name as a second parameter for AddWindowsPrinterConnection, it should work as is in Windows 2000).

Option Explicit
Dim WSHNetwork 
Dim WSHShell

On Error Resume Next

Set WSHNetwork = CreateObject("WScript.Network")
Set WSHShell = CreateObject("WScript.Shell")

rem Add a printer
WSHNetwork.AddWindowsPrinterConnection "\\HOSTNAME\PrinterShareName"
HandleError "Could Not Add Printer"

rem Set this as the default printer
WSHNetwork.SetDefaultPrinter "\\HOSTNAME\PrinterShareName"
HandleError "Could Not Set As Default Printer"

rem Remove an existing printer
WSHNetwork.RemovePrinterConnection "\\HOSTNAME\RemovePrinterShareName"
HandleError "Could Not Remove Printer / Printer Already Removed"

rem Map a drive
WSHNetwork.MapNetworkDrive "L:", "\\HOSTNAME\ShareName"
HandleError "Could Not Map Drive"

rem Remove a drive
WSHNetwork.RemoveNetworkDrive "M:"
HandleError "Could Not Remove Mapped Drive"


Function HandleError(Title)
 If Err.Number <> 0 Then
  rem Add to event log. First parameter can be:
  rem 0 (SUCCESS), 1 (ERROR), 2 (WARNING)
  rem 4 (INFORMATION), 8 (AUDIT_SUCCESS), 16 (AUDIT_FAILURE)
  WSHShell.LogEvent 1, "Error: " & Title & Chr(13) & "Error Number: " & Err.Number & Chr(13) _
   & "Description: " & Err.Description
  Err.Clear
 End If
End Function

You can call this from a batch file (e.g. login.cmd)

@echo off
set wsh=no
rem Loop through folders in path and check if cscript.exe exists
for %%p in (%path%) do if exist %%p\cscript.exe set wsh=yes
if %wsh%==no goto wshno
:wshyes
cscript login.vbs
goto finally
:wshno
echo Windows Scripting Not Installed
:finally
rem script has finished

Link: HTML Entity Character Lookup

2007-06-05T09:38:00.000+01:00

HTML Entity Character Lookup is a useful web based tool for looking up HTML entities codes for characters that you have an idea what they look like (e.g. a 'c'), but not sure what the entity code (e.g © for ©) to use is.

Controlling browser scrollbars

2007-05-25T14:14:00.000+01:00

In Firefox, the vertical scrollbar only shows when the page contents do not go beyond the height of the browser window (i.e. you just have a simple 'Hello World' or very little content on your page). On the other hand, the scrollbar always shows if you are using Internet Explorer. For consistency across these (and possibly other browsers as well), you can apply a little bit of CSS.

To make IE behave like Firefox (only show scrollbar when needed), just do this:

html {
   overflow-y: auto;
}

To always show the scrollbar (to prevent the layout changing when more content-rich pages are loaded on your site):

html {
   overflow-y: scroll;
}

I also use the same trick to only show scrollbars in <textarea>'s when needed:

textarea {
    overflow: auto;
}

jQuery Plugin: focus fields

2007-05-08T12:29:00.000+01:00

focus fields is a plugin for jQuery that adds an outline and background colour to a text input when it is given focus.

jQuery Plugin update: newsticker

2007-04-27T17:50:00.000+01:00

I've updated my news ticker plugin to fix a few bugs. Also included on the page are some examples of adding content dynamically and applying it to the added content.

jQuery Plugin update: jQIR (jQuery Image Replacement)

2007-04-17T14:11:00.000+01:00

jQIR (jQuery Image Replacement) has been updated to take into account hyperlinks (i.e. it wraps the image with them). You can also run a function when the image has loaded.

Select box manipulation with jQuery - update and new plugin

2007-04-05T13:43:00.000+01:00

In my plugins for working with select boxes, ajaxAddOption can now call a function after the options have been added. There is also a new plugin (containsOption) for checking if an option with a given value exists.

Iframes and jQuery - Working with an iframe's parent

2007-03-13T13:13:00.000Z

As I stated in my last post about iframe's and jQuery, the load event was only fired once in Internet Explorer, so this may be a problem in some situations (for instance, when you go to a new page in the iframe (which is the only reason I can think of for using one instead of includes)). You can put the code into the iframe and work with the page that contains it instead. This actually may be more desirable as it is simpler and works in more browsers (Firefox, Internet Explorer, Opera 8.54+ tested)

$( function() {
   var p = parent;
   $("a").click( function() {
       p.$("#myinput").val("Anchor clicked: " + this.href);
       return false;
   })
})

Iframes and jQuery - Working with an embedded iframe

2007-03-13T12:28:00.000Z

IFrames, while they can be bad for accessibility (i.e. bookmarking), can also be very handy.

What I found was that working with iframes proved troublesome. I initially thought it would be as simple as this:

JavaScript

$( function() {
 $("#myiframe").load( function(){
  alert("Number of anchors: " + this.$("a").size());
  alert("Document title: " + this.document.title);
 });
});

HTML

<iframe src="myiframe.html" id="myiframe" name="myiframe"></iframe>

However, this caused several errors: this.document has no properties (i.e. this.document is undefined) and this.$ is not a function, so I had to find another way. After some trial and error in Internet Explorer and Firebug in Firefox, I found a way (which also works in Opera 9 as well, unsure about Safari though).

$( function() {
   var myiframe = $($.browser.msie ? frames["myiframe"] : "#myiframe");
   // doesn't work in Opera < 9
   myiframe.load( function() {
       var w = this.contentWindow;
       if(!w) w = myiframe[0]; // IE
       alert("Number of anchors: " + w.$("a").size());
       alert("Document title: " + w.document.title);
   })
})

Several things to note:

In Internet Explorer, if you navigate to a different page in the iframe, the load event is not fired again.
The iframe needs the id and name attributes to both be present and the same.
The iframe page also needs to include jQuery

Registry-less Programmer's Notepad 2

2007-02-22T12:21:00.000Z

Programmer's Notepad 2 can be made to run without using the registry (i.e. make it portable, so you can use it on a removable hard drive / pen drive), but only with a development build. All it needs is a config.xml in its directory containing the following:

<config>
  <userSettings path="settings" />
  <storeType value="Xml" />
</config>

Alternatively, this batch file can be used to create the file and copy over your settings. Create a batch file e.g. pn2local.cmd and paste in the following code:

@echo off
if exist config.xml goto copysettings
echo ^<config^> > config.xml
echo    ^<userSettings path="settings" ^/^> >> config.xml
echo    ^<storeType value="Xml" ^/^> >> config.xml
echo ^<^/config^> >> config.xml
:copysettings
md settings
xcopy "%AppData%\Echo Software\PN2\*.*" settings\ /D /Q

Remove multiple options with removeOption

2007-02-20T12:26:00.000Z

removeOption, a plugin available along with my other select box manipulation ones can now take a regular expression as the parameter. This can be used to remove more than one option in one go (or even all of them).

Select box manipulation with jQuery

2007-02-14T17:57:00.000Z

If you read the jQuery mailing list, you may be aware that I have updated my plugins for working with select boxes. Summary of changes:

addOption replaces any options with the same value (so think of it as an add/replace options plugin
selectOptions selected options in addition to what was already selected, but there is now an option for it not to do this
There are two new methods:
- copyOptions which is for copying options between select boxes
- ajaxAddOption allows you to add options via AJAX (i.e. could be used for create options dynamically from a server script)

Adding a WebControl before or after another one (ASP.NET C#)

2007-02-05T17:12:00.000Z

ASP.NET does not directly allow you to add a WebControl after another one (i.e. you can't do MyRepeater.AddAfter(MyLiteral) to add MyLiteral after MyRepeater. These two simple functions allow you to do just that:

public void AddControlBefore(Control beforeControl, Control controlToAdd)
{
 Control container = beforeControl.NamingContainer as Control;
 container.Controls.AddAt(container.Controls.IndexOf(beforeControl), controlToAdd);
}
  
public void AddControlAfter(Control afterControl, Control controlToAdd)
{
 Control container = afterControl.NamingContainer as Control;
 container.Controls.AddAt(container.Controls.IndexOf(afterControl) + 1, controlToAdd);
}

jQIR - jQuery Image Replacement (updated)

2007-01-30T13:12:00.000Z

Get jQIR to replace contents of tags (e.g. headings) with images. Can now use class as well as id.

Firebug 1.0

2007-01-26T10:12:00.000Z

If you are a web developer and use Firefox, you are likely to have heard of Firebug. The final version of Firebug 1.0 is out, and offers a lot more than the previous version (0.4.1). So I would suggest you to Get Firebug if you haven't already.

It is great for debugging as you can edit/inspect HTML and CSS on the live page and set breakpoints in JavaScript. If only Internet Explorer had something like this (I am aware of the Microsoft Script Editor (comes with Office and is activated within Word/Excel etc by pressing Alt+Shift+F11) and Visual Studio, but they are external applications and don't allow debugging while in the browser).

Firebug is even handy for non-developers (if they are interested in moving into development) as you can see the scripts and CSS pages are using, as well as see what files are being downloaded by the browser (including those downloaded by Flash).

Getting jQuery Version

2007-01-19T17:30:00.000Z

There is a way of getting the jQuery version, but it is not through using jQuery.version as you may expect.

alert("jQuery version is: " + jQuery().jquery);

Here is a basic function that can be used to grab more valuable information from this.

function jQueryVersion()
{
 var ver = (new jQuery()).jquery;
 // if there are two .'s it is a bug fix release
 if(ver.match(/\./g).length == 2)
 {
  return {
   "version" : ver,
   "major" : ver.substr(0, ver.indexOf(".")),
   "minor" : ver.substr(ver.indexOf(".") + 1, ver.lastIndexOf(".") - ver.indexOf(".") - 1),
   "revision" : ver.substr(ver.lastIndexOf(".") + 1)
  }
 }
 // otherwise it is an initial release
 else
 {
  return {
   "version" : ver,
   "major" : ver.substr(0, ver.indexOf(".")),
   "minor" : ver.substr(ver.indexOf(".") + 1),
   "revision" : 0
  }
 }
}

This could be handy when developing plugins, as they could alert the user if they are using a version of jQuery not supported.

jQuery.fn.myplugin = function()
{
  var version = jQueryVersion();
  if(parseInt(version.minor) < 1)
  {
    alert("jQuery version 1.1 or higher is required for myplugin");
    return this;
  }

Link: Sites Using jQuery

2007-01-18T13:05:00.000Z

Several high profile sites use jQuery. The jQuery Wiki has a page listing those sites: Sites Using jQuery

Checkbox manipulation with jQuery

2007-01-16T17:42:00.000Z

Updated my plugins for working with checkboxes http://www.texotela.co.uk/code/jquery/checkboxes/

Toggle, check, uncheck and make them behave like radio buttons.

Works with jQuery 1.0 and 1.1.

You supply the container, and optionally return the check items (if using toggleCheckboxes or checkCheckboxes) or unchecked items (unCheckCheckBoxes):

$("#mycontainer").toggleCheckboxes().doSomethingWithMyContainer();
$("#mycontainer").toggleCheckboxes("[@name=foo]", true).doSomethingWithCheckedBoxes();

For turning a checkbox group --> radio style selection:

$.radioCheckboxGroup("fieldname")

jQuery Documentation

2007-01-15T17:20:00.000Z

Update 24 Feb 2007: Link to Sean O's jQueryHelp

Update 23 Feb 2007: Added links for PDF's of API

Update 29 Jan 2007: Jörn Zaefferer's API browser is no longer a draft. Link below. 22:10 it also is printer friendly and can be downloaded for offline viewing. Visual jQuery 1.1.1 is also now available (and can also be downloaded).

Update 18 Jan 2007: A PDF Version of the documentation is available. To download, go to JQuery documentation in PDF. Only for the latest version of jQuery (1.1), although those with experience with Java will probably be able to check out an older version to generate the documentation.

If you are a user of jQuery, it is likely that you are aware of Visual jQuery, which is an alternative reference for the jQuery API. What you may not know, is that on the site is documentation for other versions as well (so if you still use an older 1.0.x version, you can still see it on the site). Here are the links (that I know of) to the documentation of the various versions. Also included is the blog post announcing the release of each version, with details of bugs fixed, feature changes etc.

Visual jQuery 1.0.2 (jQuery blog post, minor API changes)
Visual jQuery 1.0.3 (jQuery blog post)
Visual jQuery 1.0.4 (jQuery blog post)
Visual jQuery 1.1 (jQuery blog post: 1.1a, 1.1b, 1.1 final
Visual jQuery 1.1.1 (jQuery blog post: 1.1.1 bug fix release )

There are also several other places that have their own version of the API documentation:

jQuery API (the original API page, hopefully it will still be kept up to date when new versions come out)
jQuery Documentation Wiki
~~Draft API~~ jQuery API Browser by Jörn Zaefferer (one of the key developers of jQuery) There is also an application you can download (no install required) that allows you to look up a function in this API browser by simply highlighting it and pressing Ctrl-Shift-J - Sean O's jQueryHelp
gotapi.com also has it (version 1.0.3), but unfortunately the jQuery API page on the site can't be bookmarked, so it has to be clicked on in the centre frame

It also available in PDF format:

There are probably more that I have missed which I will hopefully be able to add to this post.

What I have not seen yet, is a ~~PDF or~~ a CHM (HTML Help) version of the documentation. ~~Both~~ It would be valuable for browsing offline (although I doubt many web developers now are offline very often) and searching can be easier and faster. Thankfully there is an XML version of the documentation (available on the jQuery API page and in the post announcing 1.1) that could be used to generate a ~~PDF or~~ CHM file. I am not sure if the XML files for the older versions (i.e. 1.0.x) are still available though.

Associative Arrays in JavaScript

2007-01-03T11:52:00.000Z

Some developers misuse the Array constructor to create an associative array. However, this is not a good way of doing this as all the methods/properties available to an array (length, index, sort etc) will not work.

var foo = []; // [] is the same as 'new Array()'
foo["bar"] = "baz";
alert(foo.length);

When the alert fires, it will return '0' instead of '1'.

As it doesn't function as a proper array, you may as well use an object instead:

var foo = {}; // {} is the same as 'new Object()'
foo["bar"] = "baz";

However, you can't see how many items there are without looping through the object. I have written a simple class that can be used that offers this (through the function 'getSize()' as well as a few other methods). As a result, you can't have anything with the keys 'getSize', 'remove', 'toString' and 'toArray'.

var AssociativeArray = function()
{
 if(arguments.length == 1 && arguments[0].constructor == Object)
 {
  for(var item in arguments[0])
  {
   this[item] = arguments[0][item];
  }
 }
 this.getSize = function()
 {
  var length = 0;
  for(var item in this)
  {
   if(item in new this.constructor === false)
   {
    length++;
   }
  }
  return length;
 }
 this.remove = function(item)
 {
  if(item in new this.constructor === false)
  {
   delete this[item];
  }
 }
 this.toString = function()
 {
  return this.toArray().toString();
 }
 this.toArray = function()
 {
  var output = [];
  for(var item in this)
  {
   if(item in new this.constructor === false)
   {
    output[output.length] = item + "=" + this[item];
   }
  }
  return output;
 }
}

To use this is pretty simple:

var foo = new AssociativeArray();
foo["one"] = 1;
foo["two"] = new Date();
foo["three"] = "A string";
// the above can also be done like this:
// var foo = new AssociativeArray({"one":1,"two":new Date(),"three":"A string"});
alert(foo); // alerts a comma separated string containing the items added
alert(foo.getSize()); // alerts the size (i.e. 3)
foo.remove("one"); // remove item 'one'
alert(foo.getSize()); // alerts the new size (i.e. 2)
var ar = foo.toArray().sort(); // sorted array (by key)