Tabbing web parts in a SharePoint web part page using jQuery and jQueryUI

Like many others I found EasyTabs to be a great fix. It has matured into something really great but that is not always the right tool for me so I went looking for a simpler solution. I wrote some jQuery that trawled the page and moved content around. It worked just fine but then I came across some very similar code but that used jqueryUI to create more elegant tabs.

The original source for this along with some good comments can be found here.

The final code I used is below.

< !– Reference the jQueryUI theme’s stylesheet on the Google CDN. Here we’re using the “Start” theme — > 
< link  type=”text/css” rel=”stylesheet” href=”//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/start/jquery-ui.css” / > 
< script type=”text/javascript” src=”//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”>< /script>
< script type=”text/javascript” src=”//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js”>< /script> 

< script type=”text/javascript”>
    jQuery(document).ready(function($) {
// Visible title of each web part goes here.
        liTargetForTabs([“Web Part Title 1″,”Web Part Title 2”]);
    });

    function liTargetForTabs(TitlesOfWebParts)
    {
        for(index in TitlesOfWebParts)
        {
            var titlePassed = TitlesOfWebParts[index];
            $(“#liTargetForTabs”).append(‘< li>< a href=”#Tab’+index+'”>’+titlePassed+'< /a>< /li>’).after(‘< div id=”Tab’+index+'”>< /div>’);
            $(“span:contains(‘”+titlePassed+”‘)”).each(function(){
                if ($(this).text() == titlePassed){
                    $(this).closest(“span”).hide().closest(“[id^=’MSOZoneCell_WebPart’]”).appendTo($(“#Tab” + index));  }
            });
        }
        $(“#targetForTabs”).tabs();
}
< /script>
< div id=”targetForTabs”>
< ul id=”liTargetForTabs”>< /ul>
< /div>


Improving the user experience with password entry

Sometimes deploying a forms based registration / login solution for SharePoint, or anything else, makes me somewhat weary. Specifically, creating the system that enforces, for sometimes tens or hundreds of thousands of people, the mundane action of having to add a password no less than twice after panning ones brain for a username when registering for an account just seems so old schoolish and tedious…

Adding a bit of colour, literally, here is a good thing. Not to much, not too little and you can add the equivalent of a breath of fresh air. One great tool for this job is Chroma-Hash.

Chroma-Hash is a jQuery plugin that aims to offer a better password input experience with a standard password field replaces the entered characters with “‚óŹ” characters. The problem is “we never know if we made a typo or not until the form is submitted & a reply is received from the server”. Chroma-Hash, “converts the values entered” into a colored visualization.

A user filling the password field can easily recognize that if the colors are the usual equivalents of the password or not. And, anyone who sees the colors won’t have any idea what the actual password is.

The script can also be used to visualize password confirmations (password & confirm password fields).

A detailed info on the method & security concerns can be found at thedeveloper’s related post.

http://mattt.github.com/Chroma-Hash/