IE7 & IE8 calibri font blurry Sharepoint jQuery

Using jQuery in Sharepoint became a second nature to me. I was using a div with fadeIn(), nothing special and everything went well on our development environment and integration environment. Until we went to UAT and received lots of complains from users saying that the fonts look pixelated and blurry. I went down on site and saw that the fonts was indeed very blurry (especially true on their screens).

Bad news for me as I had a 7 level depth of div and span tags, not to mentioned it was in a webpart and Sharepoint corev4.css had this div.ms-WPBody that likes to screw my styles up.

After deep investigation, since safari, chrome and IE9 didn't had any blurry fonts, I downgraded my IE9 to IE8 and managed to replicate the issue. Hours past and I did a side-by-side comparison between chrome and IE8. Then I saw something within the top level div which I used the fadeIn() effect. div id="divContainer" style="filter: alpha bla bla bla,....."

It caught my attention and I used IE developer tools and went straight to the CSS tab and looked for the "filter". I turned it off by clicking on the checkbox. The fonts immediately sharpened. Hmm, http://blogs.msdn.com/b/e7/archive/2009/06/23/engineering-changes-to-cleartype-in-windows-7.aspx


So I've read up a lot and found out that jQuery might actually add in the filter somehow. I managed to solve it by putting:

document.getElementById('divContiner').style.removeAttribute('filter');

But I later found out that it only work for IE8. After some more frustrating hours, I discarded the fadeIn() effect and the fonts were sharp and crisp :)

Facebook detect movement before loading new feeds

If you are eagle-eyed enough, you would have noticed that facebook actually doesn't poll unnecessarily from the server. Somehow it knows that you are away for sometime and when you are active and start to move your mouse, newer feeds starts loading.


<script type="text/javascript">
  document.onmousemove = (function() {
    var onmousestop = function() {
      $('h1').css("color", "white");
    }, thread;
    return function() {
      $('h1').css("color", "red") clearTimeout(thread);
      thread = setTimeout(onmousestop, 200);
    };
  })();


Read more on this: Closures
I've embedded this scrip into the blog -> Blue H1, so don't panic if you see the h1 starts turning blue :)

Mimic wikipedia for SharePoint 2010 search

Recently, there was a user requirement for customizing SharePoint 2010 Enterprise wiki search control. 

Objective: Mimicking Wikipedia search box functionality, whereby when a user enters a wiki page title, if there is an exact hit, we should redirect the user to the page, instead of displaying SharePoint's default result page. (Less the autocomplete)

Using jQuery & a bit of digging into SP.js, i found that internally, SharePoint actually uses a javascript function called "SubmitSearchRedirect", which actually redirects the user to "/_layouts/searchresults.aspx" and appending the search keyword as the querystring. 

So a seemingly difficult request was actually completed in less than 10 mins.

function applyCustomSearch() {

            $("#onetIDGoSearch").attr("onclick", ""); //user click on search img
            $("#idSearchString").attr("onkeydown", ""); //user keystroke

            $("#onetIDGoSearch").click(function() {
                <Your AJAX function to check if the page exists>($("#idSearchString").val(), function(exactHit){
                    if(exactHit== true) { //simulate got exact hit
                        window.location = "http://"+ document.domain +"/<Your Enterprise Wiki Homepage>/" + $("#idSearchString").val() + ".aspx?ContextId=" + $.queryString("ContextId");
                    } else { 
                        SubmitSearchRedirect("http://"+ document.domain +"/_layouts/searchresults.aspx");
                    }           
                });
            });

            $("#idSearchString").keydown(function (event) {                
                if (event.keyCode == '13') {
                    event.preventDefault();
                    <Your AJAX function to check if the page exists>($("#idSearchString").val(), function(exactHit){
                    if(exactHit== true) { //simulate got exact hit
                        window.location = "http://"+ document.domain +"/<Your Enterprise Wiki Homepage>/" + $("#idSearchString").val() + ".aspx?ContextId=" + $.queryString("ContextId");
                    } else { 
                        SubmitSearchRedirect("http://"+ document.domain +"/_layouts/searchresults.aspx");
                    }           
                });
            });
        }

The logic is dead simple. 

For my project, i used an event receiver to track all the articles by saving them into a database and creating a tag cloud. So i had the benefit of knowing exactly how many article pages and how they are being named. So all i did was a simple $.getJSON() to my custom RESTful WCF service, which returns a boolean, and the rest is straightforward.

For simpler projects, you can either use http://spservices.codeplex.com/ to query the wiki pages library for the article existence.

I shall do a blogpost on how to embed jQuery library into SharePoint 2010 in the subsequent posts.

GSPMigrator source code release

After leaving the source codes for this tool, i've decided to put it on CodePlex with the GNU v2 licence, hoping that it will support and help any one that needs to migrate files into SharePoint 2007 (and in the future 2010).

GSPMigrator is basically a migration tool that allows anyone within the network to connect to a network drive and view it with a tree view.

There are several problems (although there are still some minor ones) that i went through before coming out with this version:

• Lazy-loading vs eager-loading on generating tree views

Lazy-loading will give better user experience.

Customising SharePoint 2010 enterprise wiki

Requirements:

There are 3 different business context:

1. Work
2. Personal
3. Entertainment

When a user comes into the wiki site, there will be a visual webpart embedded in the form to scope this document to 1 of the above 3 context. So if the user would like to post a Work-related wiki article, he can select an option (dropdown list or radio button etc, but on my POC it's only a textbox :P) and when he click on the sharepoint save & close button

the permission of the article will be restricted based on predefined rules.

Solution (after some thoughts):

1. Event receiver to set permissions
2. Using HttpContext in EventReceiver synchronous events (itemAdding & itemUpdating) to get the value to b
3. Customising the master page to include a VWP (visual webpart) to allow user select "context"