March 12, 2012

Kalendae - new javascript utility for calendars

An alternative to jQuery UI datepicker is Kalendae. (MIT License). Highly customizable and no dependencies to other javascript libraries. Here is the highlights:

Kalendae is an attempt to do something that nobody has yet been able to do: make a date picker that doesn’t suck. Kalendae provides the following features:

Fully portable, no dependencies. No jQuery, no Prototype, no MooTools; just add the script and the stylesheet and you’re good to go.

Fully and easily skinable. The default theme uses only one image file (a mask for the previous and next buttons), everything else is styled using CSS.

Supports all modern browsers and IE8.

Support single day, multiple day, or day range selection.

Configurable number of months to be displayed at once.

Can be displayed on the page as an inline widget, or attached to one or more input fields as a popup control.

Can be attached to any page element, not just named elements.

Configurable blackouts, defined either as an array of dates or via a callback function

Output selected dates in a variety of formats

Leverages moment.js for smart and easy date parsing.

Found through daily.js

March 8, 2012

fallback for html5 placeholders

Placeholders are very handy in html5, we don’t need to fool with input values. But in SharePoint and IE we must provide fallback for placeholders if we want use them in other browsers. Here is an jQuery extension to do that:

(function ($) {
  $.fn.extend({
    ensurePlaceholders: function () {
      var input = document.createElement('input');
      var placeholderSupported = ('placeholder' in input);
      if (placeholderSupported) {
        return;
      }
      function setHints(elem) {
        var $elem = $(elem);
        var value = $elem.val();
        if (value == "") {
          var placeholder = $elem.attr("placeholder");
          $elem.val(placeholder);
          $elem.addClass("empty-text");
        }
      }
      function removeHints(elem) {
        var $elem = $(elem);
        $elem.removeClass("empty-text");
        var value = $elem.val();
        var placeholder = $elem.attr("placeholder");
        if (value == placeholder) {
          $elem.val("");
        }
      }
      this.find("\[placeholder\]").each(function() {
        setHints(this);			
      });
      this.on("focus", "\[placeholder\]", function(e) {
        removeHints(this);
      });
      this.on("blur", "\[placeholder\]", function(e) {
        setHints(this);
      });
    }
  });
})(jQuery);
```Then "ensure placeholders" by running this function on a wrapper element which contains fields with the placeholder attribute:

jQuery("#form-wrapper").ensurePlaceholders();

March 8, 2012

SP.UI.Notify in Modal Dialog

If you open a custom page (not a list item form) in a modal dialog, your notification won’t be shown. The reason is that the notification area (#notificationArea) is inside a hidden div (#s4-ribbonrow). To show this notificationArea we must display the notification area:

var $ribbon = jQuery("#s4-ribbonrow");
if ($ribbon.is(":hidden")) {
	$ribbon.css({"min-height": 0, "height": "0px"})
          .show().children().hide()
          .filter("#notificationArea").show()
}

Comments from Wordpress.com

Jens Malmberg - Jan 3, 2013

March 6, 2012

private variables in javascript

Found a nice post about private variables and “methods” in javascript. Consider this example:

function Pizza() {
  var price = 0;
  this.setPrice = function(p) {
    price = p;
  };
  this.getPrice = function() {
    return price;
  };
}
```Every variable and function inside the main function is private unless it is appended to "this".

March 3, 2012

javascript: Umbrella pattern

There are two great patterns for organizing javascript code: Prototype and Module pattern. More about them later in this post. But in reality I still see much of spagghetti Just an example: SharePoint 101 code samples. They are indeed very simple and isolated examples. And many projects use this simple way in mind when they begin. But when javascript code grows, it becomes a monster. Have you seen this biest? How is this monster created? Through good intentions (like everything else) in form of KISS mantra, to little time and the “commit and run”-behavior, or the worst: “I am c#-er, not Front-End-Developer”-spirit. In this post I’ll introduce a kind of compromise the Umbrella pattern. But before that, let’s see how to recognize the spagghetti monster in javascript:

March 3, 2012

Hello world in node.js

I know, node.js has been present for a while. But I actually had no time to try it. I was surprised that now it is very straight forward to start with node.js. Allright, everything begins with Hello world. Eventhough it is available for allmost all combinations of operating systems and servers, the easiest way to test it was actually Ubuntu. To install just run:

sudo apt-get install nodejs
```Then make a new directory and create the hello.js:

mkdir hello cd hello vi hello.js

March 2, 2012

New functions in jQuery 1.7+ on and off

A simpler interface for event handling in jQuery. Just read Dan Wahlin’s blog.

February 28, 2012

cross browser console.log

console.log is the best tool for debugging javascript. In Firefox Firebug and Chrome Dev Tools you can even log objects which are represented as tree nodes of properties. If Firebug or Dev Tools in Chrome and IE9 are not opened, all these messages are ignored. But IE8 doesn’t understand console (if Dev Tools are closed) and raises an error: To avoid these errors, just declare an empty function just for IE8–:

February 28, 2012

javascript: passing arguments from popup to main window

To show a popup, we just have to invoke “window.open”, and provide some options to prevent opening this in a new tab:

var wnd = window.open('', '\_blank', 'width=750, height=400, location=no, resizable=1, menubar=0, scrollbars=0');
wnd.document.write('');
wnd.document.close(); wnd.document.close(); wnd.focus();

To communicate between parent and child we can refer to parent as window.opener. We can even invoke a function from parent window. Let’s create the most useful function:

February 26, 2012

javascript: serialize as xml

Why should we need to serialize javascript objects as XML. I don’t know. It is of course more a server side need. And there actually a need for javascript serialization as xml in node.js. To serialize as json is very simple: JSON.stringify(myobjects). I was just curious if there was a tool for xml serialization in javascript. There is a nice javascript tool called XMLWriter, developed by Ariel Flesler. Consider you have articles and want to serialize them as xml, let’s create a function for serializing: