Solved

JQuery tabs not working in SharePoint

Posted on 2010-11-30
2
1,469 Views
Last Modified: 2012-05-10
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

0
Comment
Question by:ksa1016
2 Comments
 
LVL 15

Expert Comment

by:dirknibleck
ID: 34239227
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();

0
 
LVL 5

Accepted Solution

by:
rebejones earned 125 total points
ID: 34258026
I recommend trying this version. It is easy to setup and use. You also don't have to modify your code in your page to do it.
 http://sp2010.pathtosharepoint.com/SharePoint-User-Toolkit/Pages/Easy-Tabs-v5.aspx  
0

Featured Post

Complete VMware vSphere® ESX(i) & Hyper-V Backup

Capture your entire system, including the host, with patented disk imaging integrated with VMware VADP / Microsoft VSS and RCT. RTOs is as low as 15 seconds with Acronis Active Restore™. You can enjoy unlimited P2V/V2V migrations from any source (even from a different hypervisor)

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Summary In SharePoint 2010 it is easy to create custom color themes to jazz up a site. Theme colors can also be created in PowerPoint 2010 with a few clicks. But how do the chosen colors actually look in the SharePoint site? The attached PowerPoint…
We had a requirement to extract data from a SharePoint 2010 Customer List into a CSV file and then place the CSV file into a directory on the network so that the file could be consumed by an AS400 system. I will share in Part 1 how to Extract the Da…
In an interesting question (https://www.experts-exchange.com/questions/29008360/) here at Experts Exchange, a member asked how to split a single image into multiple images. The primary usage for this is to place many photographs on a flatbed scanner…

791 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question