Solved

JQuery tabs not working in SharePoint

Posted on 2010-11-30
2
1,451 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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

If you create your solutions on SharePoint sooner or later you will come upon a request to set  permissions of the item depending on some of the item's meta-data - the author, people assigned as approvers, divisions, categories etc. The most natu…
I thought I'd write this up for anyone who has a request to create an anonymous whistle-blower-type submission form created using SharePoint 2010 (this would probably work the same for 2013). It's not 100% fool-proof but it's as close as you can get…
This Micro Tutorial demonstrates using Microsoft Excel pivot tables, how to reverse engineer competitors' marketing strategies through backlinks.
Internet Business Fax to Email Made Easy - With eFax Corporate (http://www.enterprise.efax.com), you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, fr…

863 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now