asked on

JQuery tabs not working in SharePoint

I am using this page to try and create tabs in Sharepoint: http://www.endusersharepoint.com/2010/10/28/wp-tabify-transform-a-sharepoint-web-part-zone-into-tabs/comment-page-1/#comment-114526

I have put everything it says to, and it still does not work for me. I am sure I am missing something simple, but I need it to work asap. I do not have any experience with jQuery so appreciate any help.

<HEAD>
<META name="WebPartPageExpansion" content="full">
<META Name="GENERATOR" Content="Microsoft SharePoint">
    <META Name="ProgId" Content="SharePoint.WebPartPage.Document">
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
    <META Name="CollaborationServer" Content="SharePoint Team Web Site">
    <META HTTP-EQUIV="Expires" content="0">
     
<Title>Deepwater</Title>
<script src="http://marketing.web.miswaco.com/marcom/dw/tabs.js"></script>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<script src="http://midhouhqapp06.net.smith.com/_layouts/1033/owsbrows.js"></script>
<SharePoint:CssLink DefaultUrl="/_layouts/styles/corefixup.css" runat="server"/>
<Link REL="stylesheet" Type="text/css" HREF="http://midhouhqapp06.net.smith.com/_layouts/1033/styles/ows.css">
   
    <script><!--
if (browseris.mac && !browseris.ie5up)
{
    var ms_maccssfpfixup = "/_layouts/1033/styles/owsmac.css";
    document.write("<link rel='stylesheet' Type='text/css' href='" + ms_maccssfpfixup + "'>");
}
//--></script>
<style>
v\:*         { behavior: url(#default#VML) }
o\:*         { behavior: url(#default#VML) }
.shape       { behavior: url(#default#VML) }
</style>
<style type="text/css">
<!--
a { color: #009!important; }a:hover { color: #666!important; }
-->
</style>
<link type="text/xml" rel='alternate' href="http://midhouhqapp06.net.smith.com/completionfluidinfo/_vti_bin/spdisco.aspx" />
<script>$(document).ready(function(){
  $('.my-web-part-tabs').wpTabify();
});</script>

</HEAD>

Open in new window

dirknibleck

Are you intending to use jqueryUI tabs or tabify, which I assume is contained in this script tag:

<script src="http://marketing.web.miswaco.com/marcom/dw/tabs.js"></script>

If you are using the script from the tag and it is reliant on jquery, this script tag should probably appear after the jquery script tag.

If you are using jqueryUI tabs, you should be calling $('.my-web-part-tabs').tabs(); instead of $('.my-web-part-tabs').wpTabify();

ASKER CERTIFIED SOLUTION

rebejones

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial