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="http://www.google.com/jsapi"></script>

<script>

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

$(document).ready(function(){

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

a.innerText

jQuery(a).text()

'').toLowerCase().indexOf((m[3]

'').toLowerCase())>=0"

});





$("table.ms-listviewtable tr.ms-viewheadertr").each(function()

{
if($("td.ms-vh-group", this).size() > 0){return;}
var tdset = "";var colIndex = 0;
$(this).children("th,td").each(function()

{

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

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

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

colIndex++;
});

var tr = "<tr class='vossers-filterrow'>" + tdset + "</tr>";
$(tr).insertAfter(this);
});



$("input.vossers-filterfield")

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

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();
}

});

$(inputClosure).parents("tr.vossers-filterrow").nextAll("tr").each(function()

{

var mismatch = false;


$(this).children("td").each(function(colIndex)
{
if(mismatch) return;

if(filterValues[colIndex])
{
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;

}

}

});


if(mismatch)

{

$(this).hide();

}

else

{

$(this).show();

}

});



}, 250);

});

});


});


</script>

Thanks to http://instantlistfilter.codeplex.com/

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 = {};
  $("td.ms-formbody").each(function(){
      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;
}
</script>

Reference:  http://sharepointjavascript.wordpress.com/2009/10/03/modify-formlabel-in-sharepoint-form/
(By Alexander)

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

//Download all the necessary plugins from Jquery UI: http://jqueryui.com/download

<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 li.active, html ul.tabs li.active 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;

}

    </style>

   

   

<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>

</ul>

<div class="tab_container">

    <div id="tab1" class="tab_content">

        <!--Content-->

                This is a Colloboration site for Page 1 Team Members. This is the Content in Page 1 &amp; Tab 1

    </div>

    <div id="tab2" class="tab_content">

       <!--Content-->

       This is the Home Page for Page 2. This is the Content in Page 1 &amp;     Tab2

    </div>

</div>

<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;

    });

});

</script>