Web Developer Blog

Originally a one-man show, jQuery has evolved far enough to be managed by a team of developers (work on the jQuery code), evangelists (promoting the product - e.g. to developers using Cold Fusion, Drupal, Ruby on Rails etc), web developers (working on the jQuery website backend) and designers (jQuery website, frontend). For more information and a list of the members - jQuery: Blog: » Meet The People Behind jQuery .

A simple function for getting the contents of another page in your code behind private string GetHTML(string url) { WebRequest request = WebRequest.Create(url); // use logged in user credentials request.Credentials = CredentialCache.DefaultCredentials; try { // get the response HttpWebResponse response = (HttpWebResponse)request.GetResponse(); // set the content length int contentLength = (int)response.ContentLength; // get the stream Stream responseStream = response.GetResponseStream(); // Pipes the stream to a higher level stream reader with the required encoding format. StreamReader readStream = new StreamReader(responseStream, Response.ContentEncoding); // create a char array char[] data = new char[contentLength]; // load from the stream into the char array readStream.Read(data, 0, contentLength); // return the data as a string return new String(data); } catch(Exception ex) { return string.Empty; } return string.Empty; }

As detailed in the post jQuery: Blog: » jQuery 1.0.4 there are quite a few bug fixes as well as some enhancements to its AJAX functionality. While the new additions are useful, the fact it is a point/minor release (i.e. from 1.0.3 to 1.0.4 rather than to 1.1) can be of an issue as generally minor releases are for bug fixes only not API changes. Although, to be fair, it looks like nothing was removed from the API and if you tried to use the new features on a page using the old version, they simply would not work. Like in previous releases, a lot of the fixes have been provided by Jörn Zaefferer.

When you upgrade Firefox from 1.5 to 2 and are a user of the Firebug 1.0 beta, you may notice that when you inspect an element you can't see the styles - i.e. you get an error message - 'Unable to show styles. You must install DOM Inspector.'. This can happen even if you have the DOM Inspector installed. You may also notice that you cannot see the styles in that either. So the problem seems to be that the DOM Inspector is not upgraded to the latest version when you upgrade (or some old files are not removed). To get it working, simply close all instances of Firefox, navigate to the components directory in the Firefox application folder (i.e C:\Program Files\Mozilla Firefox\components and delete all files beginning with the word inspector . Once you have done this, reinstall Firefox to the same folder. When you start Firefox again, you should now be able to edit and disable styles within Firebug. What I have noticed, is that after reinstalling, the files that were deleted...

Finally an update to my Select box manipulation collection of plugins for jQuery. You can select options that match a given string or regular expression. The original code for this particular plugin was created by Mathias Bank , with a modification by me to use a regular expression as a parameter as well as a string. He wrote it over a month ago , but I have only just got round to implementing it.

While Firebug only works on Firefox, there is an option for other browsers (IE, Opera, Safari) called Firebug Lite . While not as powerful as the full Firebug, it is still a good way to debug for other browsers. You just include it on your page as you would any external JavaScript file and then press F12 on the page to show the console.

Firebug 1.0 is available as a beta version. Initially it was going to be a commercial extension, but it looks like it will be open source. Hopefully it will be maintained (and not just by one or two people), although I am not sure how it can be improved (aside from working on IE as well). Very good for debugging (JavaScript and CSS) as you can set breakpoints, view a box-model representation of any selected element, disable CSS (down to specific properties (i.e. font-size)) and more. Get Firebug and make a donation to show your appreciation for Joe Hewitt's hard work.

Mono Migration Analyzer (MoMA) is an application (requiring .NET 2.0 or Mono 1.2) that you can use to analyse your assemblies (.exe, .dll) to see if there are any incompatibilities with Mono. While it can't analyse web pages (.aspx, .ascx, .ashx etc), it can be used on any assemblies compiled for use within your website that are stored in the bin folder under your site root. Once done, you can submit a report (that only contains methods you call that are not implemented) which will help the Mono team prioritise their work (as it reflects real world applications).

Microsoft has released a Virtual PC Image containing Windows XP SP2 and IE6. It is free (so you don't need to buy another license for Windows). Finally there is an official way to test websites in both IE6 and IE7 without extra cost to you. For more details - IEBlog : IE6 and IE7 Running on a Single Machine . Expires on April 1, 2007 so hopefully they will release a new image, or a way to run IE6 without Virtual PC by then.

A WebHandler is a useful way for updating data without needed to resort to an ASP.NET page (with its additional overhead). You can decide what content type to send (so can send data as text/html, text/plain or even image/jpeg - all can be handled with the same file) and don't have to worry about view state, but you cannot use the WYSIWYG utilities you may normally use so they are more suited to those comfortable with coding by hand. Combine this with jQuery and you have an easy way to update records (or do any kind of processing on the server) without using postbacks (and it can result in a more efficient application). The ASP.NET page <%@ Page Language="C#" %> <!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>Test Page</title> <script src="...

You can use jQuery to show a live preview of comments before you post them (so you can see how they will display when you submit) and it is very simple to do. You can find more details on the Learning jQuery site: Really Simple Live Comment Preview . You can see how it works by filling in the comments form at the bottom of the aforementioned post. It could be improved if the live preview was styled like it would be if you posted the message (with your name and date before the comment), rather than just showing the comment and possibly malicious tags (script, object) not interpreted.

While I think PHP (and other open source languages) developers have more of a positive attitude to open source (perhaps because of a different mindset in general compared to .NET developers and the cost of Visual Studio) there is some software available under some kind of open source license and a lot of it can be found via: http://csharp-source.net/

As a user of jQuery ( jquery.com ) and Programmer's Notepad 2 ( www.pnotepad.org ) I find that the text clips feature of PN2 can help productivity (and also be used as a quick reference of the methods available), so I have created a command line tool (written in .NET 1.1) that can generate these clips. Source code (BSD style license) and a binary are available for download from jQuery - Text Clip Generator Hopefully this will be of use to someone.

Opera Developer Community - a community orientated site for web developers working with the Opera Web Browser. Includes several official JavaScript libraries created by Opera Software, including a Calendar, Feed Reader, Web Page Scraper and Tooltip library.

This snippet applies a class when you hover over a table row and removes it when you move the mouse out. Useful when you have a table with many rows and want to improve readability. Define your stylesheet in head : <style type="text/css"> <!-- #mytable { border-collapse: collapse; width: 300px; } #mytable th, #mytable td { border: 1px solid #000; padding: 3px; } #mytable tr.highlight { background-color: #eee; } //--> </style> JavaScript (also in head ) <script type="text/javascript"> <!-- $( function() { $("#mytable tr").hover( function() { $(this).addClass("highlight"); }, function() { $(this).removeClass("highlight"); } ) } ) //--> </script> Your table (with id mytable ) in body <table id="mytable"> <tr> <th>Foo</th> <td>Lorem</td> <td>Ipsum</td> </tr> <tr> <th...

JavaScript Management with ASP.NET outlines how you can make managing JavaScript easier in ASP.NET. It uses an XML file to store the JavaScript code (so only one file needs to be edited) and a HTTP Handler / Utility class to request and obtain the JavaScript code. The downside to this approach is that it is less portable than simply having separate files - you would need to write code for extracting the JavaScript from the XML file if you use another server side language like PHP.

jQuery is capable of creating elements without using the DOM (i.e. document.createElement). You can take advantage of this to preload images, and it involves less code that most other solutions - if you ignore the fact that jQuery has overhead and assume you are using jQuery for tasks other than preloading. jQuery.preloadImages = function() { for(var i = 0; i<arguments.length; i++) { jQuery("<img>").attr("src", arguments[i]); } } You can then preload images before the page has fully loaded. Useful for when you implement rollover images (as there will not be the usual delay you normally get after mousing over a rollover image). $.preloadImages("foo.jpg", "bar.gif", "baz.png"); $( function() { alert("document ready"); } )

Update: forgot the return false (without it, the page would open in a new window and replace the current page). In (X)HTML Strict, anchor tags linking to other pages are not allowed to have the target attribute. Because of this, links can not be opened in a new window if the page validates. However, with jQuery and the addition of a class to anchors that open in new windows: <a href="http://jquery.com" class="external">jQuery</a> you can do this in just one line of code: $("a.external").click(function(){window.open(this.href);return false;}); . If you add any more links dynamically (i.e. through AJAX), you would have to run this again, but preferably not anonymously (i.e. inline function). function openWindow() { window.open(this.href); return false; } // shorthand for $(document).ready(function(){...}) $( function() { $("a.external").click(openWindow); } )

It is easy to solve the problem with quotes in Internet Explorer (the problem being that they are not contained in quotation marks) by using jQuery. All it takes is one line of code: $("q").prepend("&#8220;").append("&#8221;"); However, that means there are two quotes for browsers that do support the tag. A browser sniff is all that is needed (generally it is a bad idea to do that, but some circumstances require it). if($.browser.msie) { $("q").prepend("&#8220;").append("&#8221;"); } Demo page

Google now allows you to search for source code via Google Code Search that is freely available under several open source licenses (e.g. (L)GPL, BSD, MIT, Apache etc).

An update of my text clips for Programmers Notepad 2 (jQuery version 1.0.1). Download .

A news ticker plugin using jQuery. Create a list of news items: <ul id="news"> <li>News Item 1</li> <li>News Item 2</li> <li>News Item 3</li> <li>News Item 4</li> <li>News Item 5</li> </ul> Then apply the plugin: $("#news").newsticker() to display each one in turn.

I have done a set of plugins for working with multiple checkboxes on a page (check, uncheck and toggle) - checkbox manipulation .

Learning jQuery is a new blog all about teaching the basics as well as tutorials, demos and perhaps advanced subjects in the future. There are only a few posts at the moment (because it is so new), but I expect it to be become more valuable (for beginners and intermediate/advanced jQuery developers alike).

jQuery, the JavaScript library by John Resig is now at version 1.0 and replaces the last stable release (dated May 12). For more information and to download, read about it on the jQuery Blog: jQuery 1.0 . Many new feature - including AJAX form submission and more methods for navigating the DOM. The main jQuery site is in the process of being updated, so at the time of this posting, the download links on the home page are for the older stable version.

Windows Live Writer is a tool for writing posts to your blog. It is targeted at Windows Live Spaces, but also works with other blogging services (like Blogger). It is a WYSIWYG editor (which generates better markup than Word or older versions of Frontpage), but you can also edit the HTML directly. Rather that knowing the link to the API used for publishing, you simple provide your blog address and username/password and it discovers what service you are using (although this will take a longer time that just providing the publishing API URL). It publishes a post on your blog to detect styles that are being used (so you may need to delete the post it makes). Overall, quite a good tool that is easy to use.

Web Devout is a useful site with comprehensive tables listing the state of standards support in various web browsers (Internet Explorer, Firefox, Opera, Safari and Konqueror). It includes the levels of HTML, CSS, DOM and ECMAScript (aka JavaScript) support for all these browsers. It also has other useful information, articles and tools.

osalt.com is a site that lists Open Source alternatives to commercial applications. It is broken down into the following categories: business communications databases development graphic applications internet & networking multimedia & audio security & privacy system utilities web development While most commercial products have an free alternative, there are sometimes features that the commercial product offers the the free one doesn't. For instance, you can generate PDF's with PDFCreator , but if you want to edit them (or add form fields), Adobe Acrobat is the only real option. Sometimes the Open Source counterpart can be more unstable and lack technical support (there will be exceptions to that though - generally when the release version is greater than 1.0). With each release though, stability normally gets better.

Currently, the way to create radio buttons dynamically in Internet Explorer is to use document.createElement("<input type='checkbox'>") . However, that is not very cross browser friendly. There is an easier way, that involves using jQuery and the correct DOM methods: First of all, the HTML: <form action="mypage.php"> <div id="radios"></div"> </form> Now add the radio buttons to the radios element. $(window).load( function() { $("#radios").each( function() { var radio = document.createElement("input"); radio.name = "myradio"; radio.type = "radio"; radio.value = "radio1"; this.appendChild(radio); for(i = 2; i To see it in action: Dynamically create radio buttons with DOM

A handy plugin for adding auto complete capabilities to your web pages - autocomplete . Start typing in a bird name to see it in action.

Often an array is used to figure out how many days there are in a month (and extra work is used to figure out how many days are in February (depending on the leap year)). This method uses the inbuilt Date object, so should be user locale friendly (assuming 12 months in a year). For instance, to find out how many days are in February 2008, you would do: daysInMonth(2008, 2) function daysInMonth(year, month) { // month is zero based, so take away 1 month = --month; // first day of the following month var nextDay; // if last month of year, then use first day of following year if(month == 11) { nextDay = new Date(++year, 0); } // otherwise use next day of current year else { nextDay = new Date(year, ++month); } // take away a millisecond to get required date var requiredDate = new Date(nextDay - 1); // return the day return requiredDate.getDate(); }

Google now offers hosting for your source code: Google Code - Project Hosting . It seems to use subversion for version control and you can use your Google username (the password is generated for you) to check out code. Labels are used instead of set categories - it would be better if they were used to complement categories instead. It has very few licenses to choose from (which in some ways is good as there are so many open source licenses to choose from) - it lists only the most popular ones. There are a few downsides though: Code has to be downloaded via SVN (browser or client application), no zip/exe/tar.gz releases Latest updates not shown on homepage (due to lack of releases feature - listing SVN updates would not be very helpful as they page will be constantly changing) No popularity / activity rating (listing most active and popular projects on home page) No Atom (Google don't use RSS) feeds (which is a bit of a surprise) No ability to request features Search page do...

Microsoft has a community site for code called CodePlex . Like SourceForge, you can create your own projects and download code from existing ones. The good think is that it does not require Microsoft Passport to register / sign in (unlike GotDotNet). However, it is not categorised - i.e. broken down by type (database, desktop, finance, games etc), programming language (C#, VB.NET) or interface (WinForms, WebForms). Despite that, it is a lot easier to navigate than SourceForge and contains several useful projects ( IronPython , Jad Engine - C# + MDX 3D Game Engine , "Atlas" Control Toolkit and more). It also allow GPL'd projects (which I don't think GotDotNet does) - Jad is under the LGPL. A bit of AJAX would help improve the site (as you need JavaScript just to sign in, so visitors will likely have it enabled). For instance, when you go to a project's page you see a series of tabs, which you then click on the go to another page. If instead of that it loaded the ...

From Coding Horror: What is "Modern Software Development"? . Old checklists (2000 and 1997), but still relevant today. Tags: Web Developer Blog

The HTML Color Code Combination Chooser is a very useful web based utility for picking a colour pallet with colours that compliment each other. Tags: Web Developer Blog

jQuery Plugin: sortOptions is a plugin that sorts the options in select dropdowns - either ascending (the default), or descending.

The jQuery plugin addOption now has a complementary plugin for doing the opposite: removeOption. Both available via jQuery Plugins: addOption/removeOption .

New plugin: addOption allows you to add items to a select dropdown list via jQuery.

I have done some jQuery text clips for use in Programmer's Notepad 2. Available, along with the others I have done at: Text Clips for Programmer's Notepad 2

Working with Files and Directories using ASP.NET . Handy reference (with snippets in C#) for when you want to do things (creating, renaming, deleting, moving, enumeration, getting properties (e.g. last modified) etc) with files and directories in ASP.NET Tags: Web Developer Blog , ASP.NET , CSharp

This function ( createCSSClass ) creates a new class with the given style. However, it does not work in version of Opera prior to 9, due to lack of support for document.styleSheets . For example, if you want all text in a pre element bold, you would do createCSSClass("pre", "font-weight: bold") . Note, that if you already have the rule defined, it will replace it, unless it is not a stylesheet with media type 'screen' (or media not set) or it is not the first linked/embedded screen stylesheet. So for example, if you had the following: <link rel="stylesheet" href="print.css" media="print" /> <link rel="stylesheet" href="screen.css" /> <style type="text/css">pre { border: 1px solid #000}</style> When you do createCSSClass("pre", "font-weight: bold") , it will replace the rule in screen.css (or add it if it does not exist). Any styles defined in print.css...

GoToWeek goes to the specific week in a year (e.g. GoToWeek(2006, 10) would go return the start day of week 10 in 2006 - 27th February). WeekOfYear returns the given dates Week Number (e.g. GoToWeek(DateTime.Now) would return 27). Uses the current threads culture, so will work with whatever culture you have set the current thread to (e.g. System.Threading.Thread.CurrentThread.CurrentCulture = new System.Globalization.CultureInfo("en-GB"); ). private DateTime GoToWeek(int year, int week) { // use the current culture System.Globalization.CultureInfo ci = System.Threading.Thread.CurrentThread.CurrentCulture; // get first day of week from culture DayOfWeek fdow = ci.DateTimeFormat.FirstDayOfWeek; // new empty Date (so starts 01/01/0001) DateTime d = new DateTime(); // year starts at 1, so take away 1 from desired year to prevent going to the next one d = d.AddYears(year - 1); // get day January 1st falls on int startDay = (int)d.DayOfWeek; // get the differe...

jQuery Sample: Collapsible List is a sample of how to do a collapsible list using jQuery. Tags: Web Developer Blog , jQuery

I have updated jQuery Plugin: numeric with a few bug fixes.

This function returns the date the week started from the supplied date. You can also supply which day is the start of the week through the overload. i.e. today is the 22nd June. StartOfWeek(DateTime.Now) would return 19th June. If the start day was Sunday, StartOfWeek(DateTime.Now, DayOfWeek.Sunday) would return 18th June. public static DateTime StartOfWeek(DateTime date) { return StartOfWeek(date, DayOfWeek.Monday); } public static DateTime StartOfWeek(DateTime date, DayOfWeek weekStart) { // get the difference in days between the start of the week and the supplied dates day of week int difference = (int)weekStart - (int)date.DayOfWeek; // if it is positive (i.e. in future), take away 7 if(difference > 0) { difference = difference - 7; } // return the new date return date.AddDays(difference); } Tags: Web Developer Blog , CSharp , DateTime

jQuery Plugin: numeric is a plugin for jQuery that allows only valid numbers in a text box input. There are a few limitations that I have not found the solution for though (listed on the page).

A plugin built on jQuery that replaces text with images (for prettier headings for example). Demo and code: jQIR - jQuery Image Replacement

A plugin built on jQuery that adds an outline when a text field gains focus. Demo and code: jQuery Plugin: outlineTextInputs Tags: Web Developer Blog , jQuery

You may have read Levels of CSS knowledge and Levels of HTML knowledge which rank users based on what they know about the technology in question. Higher ranks are not always better (unless they are one of the top two) - knowledge may be lacking in areas of importance (like standards, semantics and accessibility). Dean Edwards has done a version for JavaScript: Levels of JavaScript Knowledge . Filed under humour, so not to be taken too seriously. Tags: Web Developer Blog , JavaScript

Webride.org allows you to have discussions on any pages you visit on the World Wide Web. Requires JavaScript and cookies enabled to signup and login (so not fully accessible). Doesn't have a rating system though (for users or pages). Uses CAPTCHA in the signup process (so hopefully spam should not be a major problem). jQuery is used for some of its scripting backend. Provides an API so you can integrate some aspects of it on your own site (i.e. you could include comments people have made with Webride on your own pages, rather than visitors loading the Webride site). Tags: Web Developer Blog , Webride , jQuery

Silk Icons - under Creative Commons Attribution 2.5 License (use for any purpose, can modify, but have to credit author) Mini Icons - free for any purpose graphicPUSH: Free icons - under Creative Commons Attribution-ShareAlike 2.5 License (use for any purpose, can modify, but have to credit author and share modifications under same license). IconBuffet - free icons every month (registration required). You can also buy icons from them. No royalties to pay. Ganato - Free Icons - in PSD (Photoshop) format KDE-Look.org icons - under GPL (so not sure if that would mean the page they are on has to be as well, but I assume not as the format is different) Sweetie | Free icon set - under Creative Commons Attribution-ShareAlike 2.0 License There is also a list that is updated @ MaxPower - Free! Icons for your website or application There probably are more sites with free icons, which I will try to add if I find them. Tutorial on creating your own icons with GIMP: GIMP - Creati...

When you add a DropDownList (or any other web controls that inherit from ListControl) to a page and bind it on page load, the first value ends up being selected (or to be more accurate, no value gets selected, so by default the first item is shown) on PostBack (rather than the one you selected). One solution to this is to check if a PostBack has occured and only set up the DropDownList on initial page load. private void Page_Load(object sender, EventArgs e) { if(!IsPostBack) { SetupMyDropDown(); } } This helps in most cases, but not if you do a DataBind for the whole page. private void Page_Load(object sender, EventArgs e) { if(!IsPostBack) { SetupMyDropDown(); } BindData(); } This could cause a "Object reference not set to an instance of an object" error, because your DropDownList is bound to an object that needs to be set up on each page load (it is not persisted in view state). One solution would be to bind everything but the DropDownList, but that would not...

You can do just about anything with free software (freeware or open source). eConsultant has a big list: I want a Freeware Utility to ... 450+ common problems solved (does not include open source in the list). There is a seperate list for open source: Open Source Freeware : 400+ free applications and utilities Tags: Web Developer Blog , Freeware , Open Source

ToolMan DHTML Library is a useful JavaScript library that allow you to: drag and drop, sort (lists and toolbars) and edit in place (edit content by double clicking on it in the page). Tags: Web Developer Blog , JavaScript

From 4GuysFromRolla.com . 4 parts so far. And a feed of the series . Part 1 - membership basics, a look at the SqlMembershipProvider class. Part 2 - creating roles and assigning to users. Part 3 - adding membership related schemas to a SQL database using aspnet_regsql.exe . Part 4 - show messages to users who cannot login (i.e. why they can't), keep log of login failures. Tags: Web Developer Blog , ASP.NET

You can style forms using CSS and definition lists instead of tables. This has only been tested in IE6 and Firefox. As a basis I define the form in HTML as follows: <fieldset class="form"> <legend>Add Contact</legend> <dl> <dt>Forename: </dt> <dd><input type="text" name="forename" id="forename" /></dd> <dt>Surname: </dt> <dd><input type="text" name="surname" id="surname" /></dd> <dt>Email: </dt> <dd><input type="text" name="email" id="email" /></dd> <dt></dt> <dd><input type="submit" value="Add" /></dd> </dl> </fieldset> And the CSS: fieldset.form { width: 95%; border: 1px dotted #ccc; padding: 12px; } fieldset.form legend { font-weight: bold; background: #fff; } fieldset.form dl { flo...

It is possible to run The GIMP (an open source alternative to Photoshop) off an external USB drive. There are instruction on how to do it from Cemetech | View topic - Making The GIMP Portable and a Zip file (XGimp_2.2.10_all_lang.zip) from WinPenPack's Grafica section (Italian site, found via tech poetic » Blog Archive » portable GIMP by winpenpack.com ). The problem with these solutions is that they do not include the extras, and (in the case of the WinPenPack site) depend on a third party to update them when new versions of the software come out. Here is another way to do it manually, and should apply to future updates. First of all download The GIMP for Windows, GTK + Runtime Environment, GIMP Help 2 and GIMP Animation Package from http://gimp-win.sourceforge.net/stable.html . You will require approximately 90MB free disk space on your external drive, 100MB if you want to be on the safe side. After you have downloaded the files and confirmed that you have enough space...

Displaying the Sizes of Your SQL Server's Database's Tables . Uses ASP.NET to show you how much space you are using for each table in your SQL Server database. Returns table name, number of rows, reserved space, space used by table data, space used by table indexes and unused space. Tags: Web Developer Blog , SQL Server , ASP.NET

Helpful Links on JavaScript Closures . Some useful links on closures (what they are, how to write them etc). They are very useful, but can cause memory leaks (especially in Internet Explorer) and are not always appropriate. Tags: Web Developer Blog , JavaScript

Round-up of 30 AJAX Tutorials is a very useful list of tutorials for those just starting with Ajax, or lacking knowledge in some areas. Areas it covers: Client-Server Communication Drag and Drop Web Forms File Uploader (Java) Framework and Toolkit Getting Started Image Gallery (JavaScript, XML) Keyword Suggest Live Search Rounded Corner Sorting Tabbed Pages Tags: Web Developer Blog , JavaScript , Ajax

Ajax Toybox gives you simple examples of using client-side JavaScript (XmlHttpRequest) to get remote content (served by PHP). Includes a dynamic City/State lookup and an RSS News Ticker (using Magpie RSS and PHP to get remote feeds). Tags: Web Developer Blog , PHP , Ajax , JavaScript , PHP

I have a simple function for opening new windows. I want all anchors with the class external (or contained in a parent with this class name) to open links in a new window using this function. So I look at the various frameworks for doing it. In this case, I am comparing jQuery with Prototype (more may follow soon in an edit to this post). function popup() { window.open(this.href); return false; } This function is the same, regardless of framework used (so as to emulate a real world scenario). HTML code: <p>In a div</p> <div class="external"> <a href="http://www.google.com">Google</a> | <a href="http://search.yahoo.com">Yahoo</a> | <a href="http://search.msn.com">MSN</a> | <a href="http://www.ask.com">Ask</a> </div> <p>In a list</p> <ul class="external"> <li><a href="http://www.google.com">Google</a...

There are many frameworks to make working with web pages (via JavaScript) easier. All of them work cross browser, do events (window load, element click etc) and basic manipulation (get element, modify css, hide/show/move), but some do more than others. Syntax often differs between them. Choosing one to work with depends on what you want to do, and how much code you are willing to write yourself (sometimes it is more satisfying to figure out a solution to a problem yourself, rather than to rely on someone else's code). Like with any code, the more it does, the bigger the download for the client. So it may be best to go with the most minimal solution (no extra features you won't use). Here is a basic overview of what is available (that I know of) Prototype http://prototype.conio.net/ There is a useful reference for this at Prototype Dissected . As you can see from it, Prototype has quite a lot of features. Very widely used and quite a reasonably big file (approx 46kb). There...

Yahoo! Developer Network - PHP Developer Center - found via Quick Link: Yahoo's PHP Developer Center . A good resource for PHP developers, including snippets and useful links. Code is for interacting with Yahoo's Web services, but could be used as a learning tool for various common tasks (parsing XML, caching etc). Tags: Web Developer Blog , PHP , Yahoo

GreatNews is a free feed (RSS/Atom) reader that can work off portable drives and supports syncing with Bloglines.com , full page reading (newspaper style, Sage (Firefox feed reader) style, and others), labeling and news watches. Tags: Web Developer Blog , Feed Reader , RSS , Atom

Contining on from iTextSharp: Generating a Basic PDF file (ASP.NET/C#) , here is a demo of how to generate a PDF document with a table in it. TablePDF.ashx <%@ WebHandler Language="C#" Class="MyNamespace.TablePDF" %> using System; using System.IO; using System.Web; using iTextSharp.text; using iTextSharp.text.pdf; namespace MyNamespace { public class TablePDF: IHttpHandler { public bool IsReusable { get { return true; } } /// <summary> /// Font used for table headers /// </summary> private Font TableHeaderFont { get { return new Font(Font.HELVETICA, Font.DEFAULTSIZE, Font.BOLD); } } public void ProcessRequest(HttpContext ctx) { // make sure it is sent as a PDF ctx.Response.ContentType="application/pdf"; // make sure it is downloaded rather than viewed in the browser window ctx.Response.AddHeader("Content-disposition", "attachment; filename=TablePDF.pd...

Yahoo! User Interface Library is a JavaScript library (under the open source BSD license) that can be used to make a site more interactive. It is comprised of 'Core Utilities' and 'UI Controls'. Core Utilities Animation Connection Manager (XMLHttpRequest / AJAX) DOM (manipulating the elements (style, coordinates) in a loaded web page) Drag and Drop Event (adding them to existing elements on a page) UI Controls Calendar Slider TreeView Yahoo! Design Pattern Library is a set of solutions to common problems (breadcrumbs, autocomplete, drag/drop, pagination etc). There is no code, but it does demonstrate the solutions Yahoo uses for its sites. They also have a blog about it: Yahoo! User Interface Blog . Tags: Web Developer Blog , Yahoo , JavaScript , AJAX , XMLHttpRequest

Add .NET Framework Folder to PATH via batch file has been updated. This is a batch file that adds the .NET framework directory (i.e. where the command line compilers csc , vbc etc are in) to the PATH system variable. It does not add the path if it is already set, so it is of most use to those that have not done it manually (the SDK doesn't add the directory on install). Tags: Web Developer Blog , DotNet

It is fairly simple to generate an iCalendar file (for calendar clients like Microsoft Outlook or Mozilla Sunbird ) as it is just a plain text file with the extension 'ics'. A WebHandler is the best method of doing this. Update (10 Feb 2006) : Now works in Sunbird. When prompted to open / save the file, choose to download. Then in Sunbird, go to File > Import and browse for the saved file. iCalendar.ashx <%@ WebHandler Language="C#" Class="MyNamespace.iCalendar" %> using System; using System.Web; namespace MyNamespace { public class iCalendar: IHttpHandler { public bool IsReusable { get { return true; } } string DateFormat { get { return "yyyyMMddTHHmmssZ"; // 20060215T092000Z } } public void ProcessRequest(HttpContext ctx) { DateTime startDate = DateTime.Now.AddDays(5); DateTime endDate = startDate.AddMinutes(35); string organizer = "foo@bar.com"; string...

iTextSharp is free library for .NET that allows you to create PDF documents. It can be used to dynamically create PDF's which can be streamed to the user. As there is no HTML being sent to the user, a WebHandler (ashx file) is a more appropriate way to generate your PDF than an aspx page. Download itextsharp-3.0.10-dll.zip (latest version as of 08 Feb 2006) and save the dll in the archive to your websites bin directory. Here is a basic sample of creating a PDF (more complex samples may follow in future posts). BasicPDF.ashx <%@ WebHandler Language="C#" Class="MyNamespace.BasicPDF" %> using System; using System.IO; using System.Web; using iTextSharp.text; using iTextSharp.text.pdf; namespace MyNamespace { public class BasicPDF: IHttpHandler { public bool IsReusable { get { return true; } } /// <summary> /// Font used for any hyperlinks added to the PDF /// </summary> private Font LinkFont { get ...

Alternatives to innerHTML (slayeroffice article) gives many examples of working with the DOM and modifying a document without resorting to innerHTML. The problem with innerHTML is that it could cause issues with strict XHTML documents (served with the correct mime type, application/xhtml+xml) and also can result in illegible code (may be hard to decipher another developers code). Tags: Web Developer Blog , JavaScript , innerHTML

Clean Word Html has been updated with a few bug fixes. Tags: Web Developer Blog

Textbook Revolution is a site that keeps track of free books in electronic form and has a section for computer / technology ones. Electronic books, while they can be useful, are not a substitute for the real thing (which are easier to read and can be read anywhere). Tags: Web Developer Blog , Free Books

What do you get if you cross the DOM Inspector with the JavaScript console and a JavaScript interpreter? A very useful extension for debugging/analysing web pages in Firefox called FireBug . Features include (more details on each feature can be found on the site): Log DOM Elements With Your Mouse Log Objects From The Command Line Log Objects From Your Web Page Scripts XMLHttpRequest Spy Contextual Error Display Error Status Bar Indicator Error Filtering With the addition of CSS errors to the JavaScript console (which can't be filtered out), this is a very welcome extension with its error filtering. Tags: Web Developer Blog , Firefox , Firefox Extension

This command line tool is based on the code from Cleaning Word's Nasty HTML , and has been backported to .NET 1.1. To compile, download Snippet Compiler (the version for .NET 1.1). Then do File > New > Default.cs and clear the contents. Paste in the following code, then click Build > Build Current To File and call it CleanWordHtml . Open the Command Prompt at the location it was saved to and type CleanWordHtml for help. Edit (18-Jan-06) : remove u tags. Not all empty tags were removed. Does not remove empty table cells (as they may be used for column/row layout). Quoted class attributes are removed. Edit (2-Feb-06) : As a side effect of removing u tags, ul tags where also removed. So they are no longer removed. When reading in text from a file, line breaks were not read in, but now they are. You can now drag files onto the application (rather than resorting to the command line). CleanWordHtml.cs using System; using System.Reflection; using System.Collections.Sp...

Adobe Acrobat isn't the only tool able to create PDF documents, there are others, some of them free. Two good ones are: PDFCreator (many features, can be intimidating to less tech-savvy users). Download . PrimoPDF (less features than PDFCreator, but easier to use) Tags: Web Developer Blog , PDF

The developer of Programmer's Notepad has setup some forums where you can discuss the program, ask for help etc. Uses bbPress , a very light-weight forum software by some of the developers of WordPress (which powers pnotepad.org ). Tags: Web Developer Blog , Programmer's Notepad , PN2

If you have a file ( /myapp/page.aspx ) which references a user control ( /myapp/controls/control.ascx ) that contains a HyperLink, you find that the link generated is relative to the control, not the page. For example if the following code was in the control: <asp:HyperLink Text="Foo" NavigateUrl="bar.aspx" runat="server" /> The following output would be generated: <a href="controls/bar.aspx">Foo</a> This may not the desired outcome. You can set the link relative to the server root (by using /myapp/bar.aspx ), site root (by using ~/bar.aspx ), or even the control itself ( ../bar.aspx ) but if you want to make it relative to the calling page more work is involved. For doing this you can use the Uri class and Request.Url : <asp:HyperLink id="lnkFoo" Text="Foo" NavigateUrl='<%#(new Uri(Request.Url,"bar.aspx")).AbsolutePath%>' runat="server" /> If the link is in a R...

Wraps a node with an anchor (i.e. HyperLink, JavaScript prompt). // 'node' can be an existing node, or a string (id of node) // 'anchor' can be a URL string, or a precreated anchor // 'target' is the target frame to go to, and is optional function anchorWrap(node,anchor,target) { if(!document.createElement) return; var newanchor,parent,sibling; if(typeof(node) == "string") { node = document.getElementById(node); } if(!node || !node.parentNode) return; if(typeof(anchor) == "string") { newanchor = document.createElement("a"); newanchor.href = anchor; } else { newanchor = anchor; } if(!newanchor) return; // if href is not set (which may be the case when it performs a javascript action), set it to #, so the link is seen if(!newanchor.href) newanchor.href = "#"; // if target is defined, set it if(typeof(target) == "string") { newanchor.target = target; } // get the sibling and the parent...