Web Developer Blog

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

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

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?

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

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

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. C# protected void Page_Load(object sender, EventArgs e) { MembershipUser u = Membership.FindUsersByName("Username")["Username"]; u.UnlockUser(); u.ChangePassword(u.ResetPassword(), "newpassword"); } VB 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....

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

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

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

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

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

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

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

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

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

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

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

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