?
Solved

Can not get the tabs to display?

Posted on 2011-04-22
4
Medium Priority
?
209 Views
Last Modified: 2012-05-11
Can not get the tabs to display? help..
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="<link rel="STYLESHEET" href="../../../../1.7.3/development-bundle/themes/base/ui.all.css" type="text/css">">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jQuery UI Tabs Example 1</title>
  </head>
  <body>
	<div id="myTabs"> 
	  <ul>
  	    <li><a href="#a">Tab 1</a></li>
    	<li><a href="#b">Tab 2</a></li>
      </ul>
      <div id="a">This is the content panel linked to the first tab, it is shown by default.</div>
      <div id="b">This content is linked to the second tab and will be shown when its tab is clicked.</div>
    </div>
    <script type="text/javascript" src="../../WebInterface/jquery/customer_theme/js/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="../../WebInterface/jquery/customer_theme/development-bundle/ui/jquery.ui.core.js"></script>
    <script type="text/javascript" src="../../WebInterface/jquery/customer_theme/development-bundle/ui/jquery.ui.tabs.js"></script>
    <script type="text/javascript">
	  //define function to be executed on document ready
	  $(function(){ 
	    //create the tabs
	    $("#myTabs").tabs();
	  });
	</script>
  </body>
</html>

Open in new window

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="../../../../1.7.3/development-bundle/themes/base/ui.all.css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jQuery UI Tabs Example 1</title>
  </head>
  <body>
	<div id="myTabs"> 
	  <ul>
  	    <li><a href="#a">Tab 1</a></li>
    	<li><a href="#b">Tab 2</a></li>
      </ul>
      <div id="a">This is the content panel linked to the first tab, it is shown by default.</div>
      <div id="b">This content is linked to the second tab and will be shown when its tab is clicked.</div>
    </div>
    <script type="text/javascript" src="../../WebInterface/jquery/customer_theme/js/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="../../WebInterface/jquery/customer_theme/development-bundle/ui/jquery.ui.core.js"></script>
    <script type="text/javascript" src="../../WebInterface/jquery/customer_theme/development-bundle/ui/jquery.ui.tabs.js"></script>
    <script type="text/javascript">
	  //define function to be executed on document ready
	  $(function(){ 
	    //create the tabs
	    $("#myTabs").tabs();
	  });
	</script>
  </body>
</html>

Open in new window

tabs.bmp
0
Comment
Question by:areyouready344
  • 2
4 Comments
 
LVL 4

Accepted Solution

by:
Slim81 earned 2000 total points
ID: 35450199
So the tabs are showing up as bullet points instead of actual "tabs"?

Sounds like you are not pulling the css file correctly, where is the css file on your server in relation to the page you are displaying the tabs?

Based on your code, it looks like page is quite a few folder deep, compared to your css file....
"../../../../1.7.3/development-bundle/themes/base/ui.all.css"

rootLocation/Folder1/Folder2/Folder3/1.7.3/development-bundle/themes/base/ui.all.css
0
 
LVL 27

Expert Comment

by:Lukasz Chmielewski
ID: 35450258
If you verify the paths, try using

$(document).ready(function(){
$("#myTabs").tabs();
});

Open in new window


instead of

$(function(){ 
	    //create the tabs
	    $("#myTabs").tabs();
	  });

Open in new window

0
 

Author Comment

by:areyouready344
ID: 35450551
Same problem after using the fully-qualified path and replacing the function to the $(document). ready function

I got this code example from the ebook called Jquery UI 1.7 chapter 3 and using there version it works.

The only difference here is that I"m using jquery UI version 1.8.11 and base jquery version 1.5.1  

The only  difference I noticed between these different version is the naming change...

For example, jquery 1.3.2 uses name as ---> ui.core.js
jquery 1.5.1 uses name as ---> jquery.ui.core.js
0
 

Author Comment

by:areyouready344
ID: 35450805
Slim81 was right, it was a path problem. Is there tool that can test a html src path?
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

839 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