Javascript - Stop an event from bubbling up

In javascript, when you handle an event, allowing this event to bubble further up afterwards may cause undesirable effects.

I had some HTML that was created when clicking a butten and hidden when clicking anywhere but on that HTML itself. The buttons click event created the HTML, which was then immediately removed again because the click event bubbled on triggering the buttons parent, who then called for the removal.

The solution is to stop the event from continuing after being processed by calling this function in your own click handler:

function stopPropagation(e){
  var e = e || event; //Because of IE
  e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true; //Cancel the event
}

This solution however did not seem te work in Firefox. When using jQuery though, there is one that does:

e.stopImmediatePropagation();

Javascript - Find an elements position

To find the exact position of an element in the browser window, you'd use it's offsetLeft and offsetTop properties. These report their position relative to their parent, which you'll retrieve with the offsetParent property.

Loop through the parents adding all the offsets, and you'll end up with the absolute position of the element in question.

Javascript

This function does just that:

function findPos(element){
  var left = top = 0;
  if(element.offsetParent){
    do{
      left += element.offsetLeft;
      top += element.offsetTop;
    } while(element = element.offsetParent);
  }
  return [left, top];
}

jQuery

But then, if you're using jQuery there's an even simpler way:

var pos = element.offset();
alert(pos.left + ';' + pos.top);

C# - A basic localization system

For small tools I don't want to setup resource files for localization, so I developed this basic one-class system that's very easy to setup and use.

The dictionary

First off, a language enum:

public enum Language {
  Dutch = 0,
  English = 1,
  French = 2
}

Then the static class that does the rest:

public static class Dictionary {
  public static Language Language { get; set; }

  public static string Book {
    get { return GetEntry("Boek", "Book", "Livre"); }
  }

  private static string GetEntry(params string[] entries) {
    if (entries.Length > (int)Language)
      return entries[(int)Language];
    else
      return string.Empty;
  }
}

The Language parameter must be set first.
The actual literals are static properties that can be used just like they are in a resource file.
The GetEntry method helps the literals to return the right translation.

Usage

Usage of this class is very simple.
First set the language you want to use:

Dictionary.Language = theUsersLanguage;

Then use the dictionary like a resource file:

this.Title = Dictionary.Book;

Extension - Format a version number

An interesting extension for a .NET-application is a one that formats a version object into a string that contains only the used parts of the version number; meaning:

• 1.0.0.0 becomes 1.0,
• 1.0.1.0 becomes 1.0.1.

Let's say I get the version of the application like so:

Version version = Assembly.GetExecutingAssembly().GetName().Version;
string formattedVersion = version.GetFormattedString();

This extension would then be the following:

public static string Format(this Version version)
{
    var result = new StringBuilder();
    result.Append(version.Major).Append('.').Append(version.Minor);

    if (version.Build > 0 || version.Revision > 0)
        result.Append('.').Append(version.Build);

    if (version.Revision > 0)
        result.Append('.').Append(version.Revision);

    return result.ToString();
}

ASP.NET MVC - Return views from any view folder

Normally in ASP.NET MVC you return a view like this:

return View("Edit");

This view will be found in either:

• Views/Category/Edit,
• or Views/Shared/Edit.

You can however also return a view from another location,
like this:

return View("~\\Views\\Administration\\CategoryEdit.cshtml");

IE - HTML or CSS rules specific to Internet Explorer

If you want to put some HTML or CSS rules in a page specific to Internet Explorer — I never needed this for any other browser — you can put the following in the page:

<!--[if gte IE 7]>
  <style type="text/css">
    #SearchButton{ height:23px; }
  </style>
<![endif]-->

This CSS rule would be applied only by IE7 and later.