December 19, 2011

Vertically align input text in IE

Well, input and IE aren’t friends, are they? I found a solution: not defining input height. The only shortcoming of this solution is…, well the solution itself, sometimes you need to define the input height. However, don’t set height, just define, font-size for text inside and padding, and it will be aligned:

input {
  font-size:20pt;
  padding: 10px;
}

Do you know some better ways to do it, Tell me.

December 19, 2011

accesskey

accesskey provides keyboard shortcuts. The restriction is that accesskey works well only with anchors. To bind keyboard shortcuts to other html elements, follow Scott Klarr. Here is an example of binding Alt and L:

var isAlt = false;
function addShortcuts() {
	//add keyboard shortcut
	document.onkeyup = function (e) {
		if (e.which == 18) isAlt = false;
	};
	document.onkeydown = function (e) {
		if (e.which == 18) isAlt = true;
		// Alt-L
		if (e.which == 76 && isAlt == true) {
			$("#add-item").click();
			return false;
		}
	};       
}

December 17, 2011

javascript Module pattern

Want organize your js code in a kind of namespaces, or modules, then use the module pattern. I’ll take the dummy example for getting the current anchor. Let’s look how it would be if the prototype based approach is used:

var Contoso.Utils = function() {};
Contoso.Utils.prototype = {
  getCurrentAnchor: function() {
    var url = window.location;
    var anchor=url.hash; //anchor with the # character
    var anchor2=url.hash.substring(1); //anchor without the # character
    return anchor2;
  }
};
var util = new Contoso.Utils();
var anchor = util.getCurrentAnchor();
```The [prototype pattern](http://weblogs.asp.net/dwahlin/archive/2011/08/01/techniques-strategies-and-patterns-for-structuring-javascript-code-the-prototype-pattern.aspx) reminds the classic object oriented programming. Now, how would it look in the module pattern:

December 16, 2011

Get the current anchor in javascript

To get the current anchor, we can use hash property::

var url = window.location;
var anchor=url.hash; //anchor with the # character
var anchor2=url.hash.substring(1); //anchor without the # character

December 15, 2011

Pass arguments from/to Modal Dialog

To pass arguments from a ModalDialog is easy. Provide some buttons and invoke close function:

SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, someValue);
```The first argument is result, [it is a enumeration with three alternatives](http://msdn.microsoft.com/en-us/library/ff409060.aspx): cancel, invalid and OK. The value you pass back to the main window can be a simple string, or a complex javascript object. In this example I'll create a html element which is hidden (id="modal-form" [class="s4-die"](/2011/10/14/s4-die/)):

In options you pass to SP.UI.ModalDialog.showModalDialog you can define args property. It can be any object with any complexity.

December 15, 2011

Get current user and handle a success callback

In my previous post I needed the accound id of the current user for posting new list items. To retrieve the id, we can push this to the client from the code behind, or get the current user using Client Object Model. To provide a more generic way we can write a js function which get the current user. But we must even provide some callback functionality, otherwise we don’t know if the operation was successful or not. Let’s be inspired by success and error properties in $.ajax:

December 15, 2011

jQuery tmplItem and no ids

tmplItem() works even without ids. To get the current data:

$(this).tmplItem().data;
```If you want to remove, just invoke the ajax and remove with [$.parents](http://api.jquery.com/parents/):

$(this).parents(“li”).remove();


##### Updating data inside tmplItems

If you want to achieve some fancy dependency tracking, consider [knockout.js](http://knockoutjs.com/). But if you just want to update the data object inside a tmplItem, just change the object and call update:

var t = $(this).tmplItem(); var obj = t.data; obj.Address = “hello avenue”; t.update();

December 15, 2011

Update list items with listdata.svc

In one of my previous posts I showed how to retrieve data from listdata.svc with jQuery $.getJSON method. Getting data is very simple, listdata.svc provides a powerful restful interface with filtering, expanding and other features. Read the best and short introduction to listdata.svc by Suneet Sharma or a more detailed and technical article about filters, functions and operators by Mike Flasko at Microsoft with short examples here. Now back to listdata.svc in the SharePoint environment. Corey Roth provides a good images and sample results. For REST the “http verbs” are very important: GET, POST, PUT, DELETE.. SharePoint RESTful interface defines these verbs like that:

December 14, 2011

Add content to a provisioned publishing page

We can use PublishingPageContent Property to write content to a page:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
 <Module Name="Pages" Url="$Resources:cmscore,List\_Pages\_UrlName;" >
 <File Path="Pages\\Help.aspx" Url="Help.aspx" Type="GhostableInLibrary">
 <Property Name="Title" Value="Contoso Help Page" />
 <Property Name="PublishingPageLayout" Value="~SiteCollection/\_catalogs/masterpage/ContosoPageLayout.aspx, Text page" />
 <Property Name="ContentType" Value="$Resources:cmscore,contenttype\_welcomepage\_name;" />
 <Property Name="PublishingPageContent" Value="hello world"/>
 </File>
 </Module>
</Elements>

December 14, 2011

The cleanest auto resize for a textarea

The cleanest way to auto-resize a textarea while typing (like wall post on Facebook) is George Papadakis solution. It uses only standard javascript and provides eventlisteners for IE (attachEvent) and other browsers (addEventListener): [sourcecode language=“javascript”] window.onload = function() { var t = document.getElementsByTagName(’textarea’)[0]; var offset= !window.opera ? (t.offsetHeight - t.clientHeight) : (t.offsetHeight + parseInt(window.getComputedStyle(t, null).getPropertyValue(‘border-top-width’))) ; var resize = function(t) { t.style.height = ‘auto’; t.style.height = (t.scrollHeight + offset ) + ‘px’; } t.addEventListener && t.addEventListener(‘input’, function(event) { resize(t); }); t[‘attachEvent’] && t.attachEvent(‘onkeyup’, function() { resize(t); }); } [/sourcecode] Other solutions are <a href=“https://github.com/padolsey/jQuery.fn.autoResize/blob/master/jquery.autoresize.js, jQuery.autogrow, elastic