Wednesday, July 28, 2010

Filter multiple List Columns & also by specific columns

Add a Content Editor webpart to the page with the following script in the Source Editor:

<script src=""></script>


google.load("jquery", "1.2.6");google.setOnLoadCallback(function() {


jQuery.extend(jQuery.expr[':'], { containsIgnoreCase: "(a.textContent







if($("", this).size() > 0){return;}
var tdset = "";var colIndex = 0;


//modify the test columns here....
if( ($(this).hasClass("ms-vh-icon")) ||($(this).text()== "col2") || ($(this).text() == "col3") )

{// attachment
tdset += "<td></td>";

{// filterable
tdset += "<td><input type='text' class='vossers-filterfield' filtercolindex='" + colIndex + "' /></td>";


var tr = "<tr class='vossers-filterrow'>" + tdset + "</tr>";


.css("border", "1px solid #7f9db9")
.css("width", "100%").css("margin", "2px")
.css("padding", "2px").keyup(function()
var inputClosure = this;

window.VossersFilterTimeoutHandle = setTimeout(function()


var filterValues = new Array();

$("input.vossers-filterfield", $(inputClosure).parents("tr:first")).each(function()


if($(this).val() != "")

filterValues[$(this).attr("filtercolindex")] = $(this).val();




var mismatch = false;

if(mismatch) return;

var val = filterValues[colIndex];

// replace double quote character with 2 instances of itself

val = val.replace(/"/g, String.fromCharCode(34) + String.fromCharCode(34));

if($(this).is(":not(:containsIgnoreCase('" + val + "'))"))

mismatch = true;













}, 250);





Thanks to

Monday, July 12, 2010

Modify form labels, Hide or remove columns in SharePoint form

In the CEWP or on the new item page or on the Display.aspx add the following script

<script type="text/javascript" src="http://YourServer/sites/yourSubsite/JQuery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">

fields = init_fields();

var dateTypeLabel = "<div style='color:red'>Please enter the Date Type. (...custom text added by adressing the formlabel with jQuery!)</div>"
var applicationLabel = "<div style='color:red;font-size:9px;'><i>Please enter the Application Name</i></div>";

//Can change more field labels similarly & all the variables defined are the field Internal names

$(fields['DateType']).find(".ms-formlabel h3").after(dateTypeLabel);
$(fields['ApplicationName']).find(".ms-formlabel h3").after(applicationLabel);
// after appends the content whereas .text() changes the existing field label to new label

//Can also append text to labels on hover

//$(fields['DateType']).find(".ms-formlabel h3").hover(
//   function(){     $(fields['DateType']).find(".ms-formlabel h3").append(dateTypeLabel);  },
//   function(){     $(fields['DateType']).find(".ms-formlabel h3").text("DateType");       }

// Hide the Current user label display ( to show only selected labels )
//$(fields['Current_x0020_User']).find(".ms-formlabel h3").parent().parent().hide();
////$(fields['Current_x0020_User']).find(".ms-formlabel h3").parent().parent().hide();

//Set Status(like color,font...) of  Few or Many columns at a time
var arrCFC = ["Col1", "Col2",  "Col3", "Col8", "Col9", "Col12", "Col13", "Col14"];

           //  All these columns, labels here are turned blue
          jQuery.each(arrCFC, function() {
               $(fields[this]).find(".ms-formlabel h3").parent().parent().css("color","Blue");
               $(fields[this]).find(".ms-formlabel h3").css("color","Blue");

function init_fields(){
  var res = {};
      if($(this).html().indexOf('FieldInternalName="')<0) return;
      var start = $(this).html().indexOf('FieldInternalName="')+19;
      var stopp = $(this).html().indexOf('FieldType="')-7;
      var nm = $(this).html().substring(start,stopp);
      res[nm] = this.parentNode;
  return res;

(By Alexander)

Wednesday, July 7, 2010

Jquery - Adding Tabs with each tab refers to a new page

//Download all the necessary plugins from Jquery UI:
<script type="text/javascript" src="Javascript/JQuery/jquery-1.4.2.js"></script>
    <script type="text/javascript" src="Javascript/JQuery/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="Javascript/JQuery/jquery.ui.tabs.js"></script>
    <link type="text/css" href="Javascript/JQuery/jquery-ui-1.8.2.custom.css" rel="stylesheet" >
    <style type="text/css" >
    ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 32px; /*--Set height of tabs--*/
    border-bottom: none;
    border-left: 1px solid #999;
    width: 100%;
ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 31px; /*--Subtract 1px from the height of the unordered list--*/
    line-height: 31px; /*--Vertically aligns the text within the tab--*/
    border: 1px solid #999;
    border-left: none;
    margin-bottom: -1px; /*--Pull the list item down 1px--*/
    overflow: hidden;
    position: relative;
    background: #e0e0e0;
ul.tabs li a {
    text-decoration: none;
    color: #000;
    display: block;
    font-size: 1.2em;
    padding: 0 20px;
    border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
    outline: none;
ul.tabs li a:hover {
    background: #ccc;
html ul.tabs, html ul.tabs a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
    background: #fff;
    border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
    .tab_container {
    border: none;
    overflow: hidden;
    clear: both;
    float: left; width: 100%;
    background: #fff;
.tab_content {
    padding: 20px;
    font-size: 1.2em;

<ul class="tabs">
    <li><a href="#tab1" onClick="parent.location='/sites/.../..../AllItems.aspx'">Tab 1</a></li>
    <li><a href="#tab2" onClick="parent.location='/.../.../Page2.aspx'">Tab 2</a></li>
    <li><a href="#tab3" onClick="parent.location='/sites/.../.../Page3.aspx'">Tab 3</a></li>
    <li><a href="#tab4" onClick="parent.location='/sites/.../.../Page4.aspx'">Tab 4</a></li>

<div class="tab_container">
    <div id="tab1" class="tab_content">
                This is a Colloboration site for Page 1 Team Members. This is the Content in Page 1 &amp; Tab 1
    <div id="tab2" class="tab_content">
       This is the Home Page for Page 2. This is the Content in Page 1 &amp;     Tab2

<script type="text/javascript">
$(document).ready(function() {

    //When page loads...
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab & li:eq(1) to show second url
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {

        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content
        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active ID content
        return false;