Firefox + Greasemonkey + jQuery + jQuery UI + SharePoint = something weird or useful?

by Kai 21. March 2012 03:39

Hi all!

If you are using Firefox, know about Firefox Greasemonkey add-on, love javascript and jQuery, and (sometimes) you love SharePoint then this post is directly for you. If you are not using Firefox, you just can see what can be done with Greasemonkey and SharePoint, and may be you immediately start using Firefox Smile. Let’s start.

During SharePoint development I have to click a lot in SharePoint UI. And most actions or clicks used more frequently as others. For example Site Actions –> Site Settings –> Site Features, Site Actions –> Site Permissions, Site Actions –> More Options, All Site Content, Edit Page and so on… One day I decided that this is too many clicks for me Smile per day. To reduce number of clicks I’ve wrote Greasemonkey script to automate and increase speed of some routine actions in SharePoint. Script you can download in the download section of the post.

Currently here is main highlights of script features:

   1. Site Actions drop down replaced with “actions” link:

image

when mouse hover the “actions” dialog window appear (jQuery UI Dialog, it is draggable), which contains list of most used links:

image

More...

Tags: , , ,

SharePoint 2010 | jQuery | jQuery UI | JavaScript

jQuery just4fun: element rotator and text shuffler plugins.

by Kai 13. January 2012 10:38

Hi all. About a year ago when I only start learning jQuery I wrote a couple of fancy plugins, just to learn more about jQuery plugin creation,  css and javascript. I’m going to describe two of them: one I called “element rotator” and the other “text shuffler”.

1. Element rotator.

  Small demo: click to this square and holding left mouse button try to rotate it around the axis.  

square_rotMore...

Tags: , ,

JavaScript | jQuery

SharePoint 2010 autocomplete lookup

by Kai 8. January 2012 08:53

Hello all!

If you are working with SharePoint you are using lookups a lot. SharePoint renders lookup field in list forms as html <select> element. And you may know, that if items count in lookup list become more than 20, something interesting happens with lookup render mechanism. In IE (and in IE only), html <select> become an <input> with image (complex select-like control). Consider following images:

IE FireFox

As you can see, lookup renders differently for different browsers. IE renders lookup as <input> and image, binds a couple of events to this controls to simulate auto complete behavior. This is pretty cool solution, but has its drawbacks: it works in IE only, you can’t style it, autocomplete appears when items more than 20 and you can’t control it.   I've written small jQuery plugin to fix this.

There are two methods in my plugin: fixLookup and lookupAutoComplete.

More...

Tags: , , , ,

jQuery | jQuery UI | SharePoint 2010

GreaseMonkey + jQuery + jQuery plugins – it’s easier that you might think.

by Kai 26. April 2011 09:00

Today I'm going to explain how to use Firefox GreaseMonkey add-on, jQuery and jQuery plugins with GreaseMonkey.  Since version 0.8 GreaseMonkey have such a nice meta-parameter as @require. Using this parameter you can easily include any type of objects in your scripts, for example, other scripts. I develop some jQuery plugins and want to test it in internet pages using GreaseMonkey. @require attribute helps me. Here is an example how to include your scripts into GreaseMonkey:

// ==UserScript==
// @name           Google rotator
// @namespace      http://userscripts.ru/js/faviconize-google/
// @description    Use this script to rotate google logo.
// @include        http://www.google.*
// @include  http://*google.*
// @require https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js
// @require http://127.0.0.1:8000/jQueryDivRotator/scripts/custom/jquery.divrotator.js
// ==/UserScript==

My jQuery plugin can rotate any element around the axis using mouse, I’ll write blog post about it later. To make it work I need a jQuery library and my plugin code. All this files includes in GreaseMonkey using two @require attributes. One great aspect – all file that included in @require attribute downloaded only once, when you install script. You can navigate to physical path of script and make sure in this. User scripts usually situated at C:\Documents and Settings\<user name>\Application Data\mozilla\Firefox\Profiles\<guid in format XXXXXX>.<profile name>\gm_scripts\<name of script> (for Win systems). Or you can run search by your system drive using mask <name of script>.user.js. As you can see in my example I use localhost path to locate my script. I write code in Aptana Studio and use Aptana’s built-in web server (you can use any other web-server for this purposes). GreaseMonkey easy download scripts and place their in folder mentioned above. Now you can modify file straight in this folder and this changes affect in your GreaseMonkey script immediately. That’s great I think. jQuery 1.4.* had some troubles with GreaseMonkey, but in 1.5 all works fine for me.

This is my GreaseMonkey script, that use jQuery and my jQuery plugin:

$("#hplogo").MakeItRotated();


Rather simple, isn’t it? And the result Smile

Tags: ,

GreaseMonkey | jQuery