Hey there,

I have a visualforce page with different Jquery functions. One is for highlighting rows and the other is for fixing a header whilst scrolling. For some reason, when implimenting the code in bold, it prevents me from navigating between tabs and even if I remove two of the four scripts....it will still not fix the header like it does in the second example. please help

Tabbed VF page (navigation/fixed header, highlihgting not working)

<apex:page standardController="Office__c"  showHeader="true"
tabStyle="Office__c"  >
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"/>
<apex:stylesheet value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script src="{!URLFOR($Resource.jquery_vfFloatingHeaders)}"></script>

<script>
$j = jQuery.noConflict();
function highlightElem(elem){
$j(elem).parent().parent().parent().find('tr').removeClass('ui-state-highlight');
$j(elem).parent().parent().addClass('ui-state-highlight');
}
</script>

<style>
.activeTab {background-color: #892034; color:White;
background-image:none}
.inactiveTab { background-color: #00204E; color:white;
background-image:none}
</style>

<style>
input[name=newNote] {
    display: none;
}
input[name=attachFile] {
    display: none;
}
</style>

<style>
        .tableContainer
        {
            height:70px;
            width: 100%;
            overflow: auto;
        }      
        .floatingStyle
        {
            position:relative;
        }
    </style>
<script>
    $(document).ready(function() {
        $('.floatingHeaderTable').vfFloatingHeaders();
    });
    </script> 
  


<apex:tabPanel switchType="client" value="{!BLANKVALUE($CurrentPage.parameters.tab,'Offdetails')}"
id="OfficeTabPanel" tabClass="activeTab"
inactiveTabClass="inactiveTab">
<apex:tab label="Details" name="Offdetails" id="tabdetails" >
<apex:detail inlineEdit="True" relatedList="true" title="true"/>
</apex:tab>


<apex:tab label="Office Commissions" rendered="{!$ObjectType.Office_Commission__c.Accessible}" name="Office Commissions" id="tabOfficeCommissions" >
<apex:pageBlock title="Office Commissions" >
<apex:form >
<apex:outputPanel styleClass="tableContainer" layout="block">
<apex:pageBlockTable value="{!Office__c.Office_Commissions__r}" var="OffCom" styleclass="floatingHeaderTable">
<apex:column headerValue="Office Commissions" >
<apex:commandLink rerender="OffComdetails" oncomplete="highlightElem(this);"> {!OffCom.Name}
<apex:param name="OffComid" value="{!OffCom.id}"/>
</apex:commandLink>
</apex:column>
<apex:column value="{!OffCom.Upfront_Bonus_Average__c}"/>
<apex:column value="{!OffCom.Ongoing_Bonus_Average__c}"/>

<apex:column value="{!OffCom.Commission_Period_Start__c}"/>
<apex:column value="{!OffCom.Commission_Period_End__c}"/>
</apex:pageBlockTable>
</apex:outputPanel>
</apex:form>
</apex:pageBlock>
<apex:outputPanel id="OffComdetails">
<apex:detail subject="{!$CurrentPage.parameters.OffComid}" relatedList="False" inlineEdit="True" title="false"/>
</apex:outputPanel>
</apex:tab>


Test VF page - fixed header working

<apex:page standardController="Office__c"  >

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script src="{!URLFOR($Resource.jquery_vfFloatingHeaders)}"></script>
   
<style>
        .tableContainer
        {
            height:70px;
            width: 100%;
            overflow: auto;
        }      
        .floatingStyle
        {
            position:relative;
        }
    </style>

    <script>
    $(document).ready(function() {
        $('.floatingHeaderTable').vfFloatingHeaders();
    });
    </script>  

<apex:pageBlock title="Office Commissions" >
<apex:form >
<apex:outputPanel styleClass="tableContainer" layout="block">
<apex:pageBlockTable value="{!Office__c.Office_Commissions__r}" var="OffCom" styleclass="floatingHeaderTable">
<apex:column headerValue="Office Commissions" >
<apex:commandLink rerender="OffComdetails" > {!OffCom.Name}
<apex:param name="OffComid" value="{!OffCom.id}"/>
</apex:commandLink>
</apex:column>
<apex:column value="{!OffCom.Upfront_Bonus_Average__c}"/>
<apex:column value="{!OffCom.Ongoing_Bonus_Average__c}"/>

<apex:column value="{!OffCom.Commission_Period_Start__c}"/>
<apex:column value="{!OffCom.Commission_Period_End__c}"/>
</apex:pageBlockTable>
</apex:outputPanel>
</apex:form>
</apex:pageBlock>
<apex:outputPanel id="OffComdetails">
<apex:detail subject="{!$CurrentPage.parameters.OffComid}" relatedList="False" inlineEdit="True" title="false"/>
</apex:outputPanel>

</apex:page>