Friday, June 30, 2006

Create CSS Class (JavaScript)

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 and the following <style> will not be replaced.

The function itself:

function createCSSClass(selector, style)
{
 // using information found at: http://www.quirksmode.org/dom/w3c_css.html
 // doesn't work in older versions of Opera (< 9) due to lack of styleSheets support
 if(!document.styleSheets) return;
 if(document.getElementsByTagName("head").length == 0) return;
 var stylesheet;
 var mediaType;
 if(document.styleSheets.length > 0)
 {
  for(i = 0; i<document.styleSheets.length; i++)
  {
   if(document.styleSheets[i].disabled) continue;
   var media = document.styleSheets[i].media;
   mediaType = typeof media;
   // IE
   if(mediaType == "string")
   {
    if(media == "" || media.indexOf("screen") != -1)
    {
     styleSheet = document.styleSheets[i];
    }
   }
   else if(mediaType == "object")
   {
    if(media.mediaText == "" || media.mediaText.indexOf("screen") != -1)
    {
     styleSheet = document.styleSheets[i];
    }
   }
   // stylesheet found, so break out of loop
   if(typeof styleSheet != "undefined") break;
  }
 }
 // if no style sheet is found
 if(typeof styleSheet == "undefined")
 {
  // create a new style sheet
  var styleSheetElement = document.createElement("style");
  styleSheetElement.type = "text/css";
  // add to <head>
  document.getElementsByTagName("head")[0].appendChild(styleSheetElement);
  // select it
  for(i = 0; i<document.styleSheets.length; i++)
  {
   if(document.styleSheets[i].disabled) continue;
   styleSheet = document.styleSheets[i];
  }
  // get media type
  var media = styleSheet.media;
  mediaType = typeof media;
 }
 // IE
 if(mediaType == "string")
 {
  for(i = 0;i<styleSheet.rules.length;i++)
  {
   // if there is an existing rule set up, replace it
   if(styleSheet.rules[i].selectorText.toLowerCase() == selector.toLowerCase())
   {
    styleSheet.rules[i].style.cssText = style;
    return;
   }
  }
  // or add a new rule
  styleSheet.addRule(selector,style);
 }
 else if(mediaType == "object")
 {
  for(i = 0;i<styleSheet.cssRules.length;i++)
  {
   // if there is an existing rule set up, replace it
   if(styleSheet.cssRules[i].selectorText.toLowerCase() == selector.toLowerCase())
   {
    styleSheet.cssRules[i].style.cssText = style;
    return;
   }
  }
  // or insert new rule
  styleSheet.insertRule(selector + "{" + style + "}", styleSheet.cssRules.length);
 }
}

Monday, June 26, 2006

Date Manipulation - GoToWeek and WeekOfYear (C#)

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 difference between the first day of the week, and the day January 1st starts on
 int difference = (int)fdow - startDay;
 // if it is positive (i.e. after first day of week), take away 7
 if(difference > 0)
 {
  difference = difference - 7;
 }
 
 // already on week 1, so add desired number of weeks - 1 * days in week
 if(week > 1)
 {
  d = d.AddDays((week - 1) * 7 + difference);
 }
 
 return d;
}

private int WeekOfYear(DateTime date)
{
 // use the current culture
 System.Globalization.CultureInfo ci = System.Threading.Thread.CurrentThread.CurrentCulture;
 // use current culture's calendar
 System.Globalization.Calendar cal = ci.Calendar;
 // get the calendar week rule (i.e. what determines the first week in the year)
 System.Globalization.CalendarWeekRule cwr = ci.DateTimeFormat.CalendarWeekRule;
 // get the first day of week for the current culture
 DayOfWeek fdow = ci.DateTimeFormat.FirstDayOfWeek;
 // return the week
 return cal.GetWeekOfYear(date, cwr, fdow);
}

Tags: , , , ,

Friday, June 23, 2006

jQuery Sample: Collapsible List

jQuery Sample: Collapsible List is a sample of how to do a collapsible list using jQuery.


Tags: ,

jQuery Plugin: numeric (update)

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

Thursday, June 22, 2006

StartOfWeek - get start of the week for supplied date (C#)

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

Tuesday, June 20, 2006

jQuery Plugin: numeric

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

Monday, June 12, 2006

jQIR - jQuery Image Replacement

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

jQuery Plugin: outlineTextInputs

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


Tags: ,

Friday, June 02, 2006

Dean Edwards - Levels of JavaScript Knowledge

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