1 Replies - 1236 Views - Last Post: 16 October 2011 - 08:38 PM

#1 giggly kisses  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 80
  • View blog
  • Posts: 391
  • Joined: 29-March 09

JQuery UI tabs

Posted 26 September 2011 - 05:21 PM

I'm trying to get the UI tabs to work on my web page but I can't seem to get it to work. What I did was set up 5 divs that have an idea of tab-# that my tabs are addressed to using href. The problem is when I click the tabs it doesn't load the div in the content div under the tabs. I'm really confused on how to use tabs as I've seen them used many different ways but for some reason none of those ways work for me. Here is my HTML and JQuery:

html/query(in the head section):

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Kyle Hardware</title>
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script src="Scripts/mainScript.js" type="text/javascript"></script>
<script src="Scripts/modal.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>

<script src="Scripts/photoScript.js" type="text/javascript"></script>
<script src="Scripts/jquery.colorbox-min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
	$('#tabs').tabs();
	$('.sidebar1').removeClass(".ui-widget");
});
</script>
<link href="Styles/mainStyle.css" rel="stylesheet" type="text/css" />
<link href="Styles/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<link href="Styles/colorbox.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div class="container">
  <div class="header">
  <h1 id="mainTitle">Welcome to Kyle Hardware!</h1> 
    <!-- end .header --></div>
    
    <div id="tabs">
    <ul id="info-nav">
          <li><a href="#tab-1" >Home</a></li>
          <li><a href="#tab-2" >Project 2</a></li>
          <li><a href="#tab-3" >UI Design</a></li>
          <li><a href="#tab-4" >Photos</a></li>
          <li><a href="#tab-5" >Feedback</a></li>
    </ul>
    
    <div class="sidebar1">
    
    <form action="" method="get" name="signup" id="form1">
   	  <label  for="fName">First Name:</label><br />
    	<input type="text" class="textbox" name="fName" width="5px"><br />
        
        <label  for="lName">Last Name:</label><br />
        <input type="text" name="lName"><br />
        
        <label  for="email">e-mail:</label><br />
        <input type="text" class="textbox" name="email"><br />
        
        <label  for="uName">Username:</label><br />
        <input type="text" class="textbox" name="uName"><br />
        
        <label  for="password">Password:</label><br />
        <input type="password"class="textbox" name="password"><br />
        
        <label for="age">Age:</label>
        <select name="age">
            	<option>Select Age Group:</option>
            	<option>16-20</option>
                <option>21-25</option>
                <option>26-30</option>
                <option>31-35</option>
                <option>36-40</option>
                <option>41-50</option>
                <option>51-60</option>
                <option>61-70</option>
                <option>71+</option>
        </select><br />
        
        <label for="gender">Gender:</label><br />
        <input type="radio" name="gender" value="Male">Male<br />
        <input type="radio" name="gender" value="Female">Female<br />

    	<input type="Submit" value="Submit">
        <input type="reset">
    </form>
  <!-- end .sidebar1 --></div>
    
    <div id="tab-1">
  <div class="content">
  <h1 id="title">Home</h1>
  <a href="Images/me.jpg" class="lightbox"><img src="Images/me.jpg" alt="me" width="175" height="275" align="left" id="me"/></a>
  <p>
  My name is Kyle (if you couldn't guess that by now) I'm 21 years old, from Allentown Pennsylvania, and I love programming. It is one of my favorite hobbies, I'm constantly expanding my knowledge about the topic. I started programming when I was in 10th grade and knew it was what I wanted to do for my career right away. I currently know quite a few languages including Java, C++, PHP, SQL, VB, HTML, CSS, and Javascript. I will be starting my 3rd year at Pennsylvania College of Technology for a Bachelor's in Software Development next semester. I hope to finish this degree by next summer.

My other hobbies include going on forums (hardware and programming forums), snowboarding, fishing, buidling computers and hanging out with friends. During the warmer months (when I can't go snowboarding) I tend to write practice programs to keep expanding my knowledge and keep my programming abilities sharp. There is a list of a few programs that I have finished and am proud of on the portfolio page of this site. Once I'm out of school I hope to get a job programming application software somewhere local to where I live. Eventually I would like to go back to school and get my masters (and PhD if I can afford it). <br /><br />

If you would like to contact me feel free to email me <a href="mailto:kyle@gmail.com">here</a>.
  </p>
<!-- end .content --></div>
  <div class="footer">
    <p id="aboutWebMaster">About Web Master</p>
    <!-- end .footer --></div>
  <!-- end .container --></div>
  
  </div>
  
  <div id="tab-2">
  
  </div>
  
  <div id="tab-3">
    <div class="content">
    <h1 id="title">What is the UXMovement?</h1>
	<p>
    The UXMovement site is a site filled with articles that every web developer/designer should read. The articles explain good practices when designing a page, things to consider when implementing a new feature to your web page and things to always do when you add common elements to your web page.
    </p>
<div class="blade" id="bladeContent1">
<h2>Why Rounded Corners are Easier on the Eyes</h2>
<p id="p2">
Some experts say that rectangles with rounded corners are easier on the eyes than a rectangle with sharp edges because they take less cognitive effort to visually process. The fovea is fastest at processing circles. Processing edges involve more “neuronal image tools” in the brain [1]. Thus, rectangles with rounded corners are easier process because they look closer to a circle than a regular rectangle.<br /><br />

The rest of the article is <a href="http://uxmovement.com/thinking/why-rounded-corners-are-easier-on-the-eyes/" target="_new">here</a> (Source)
</p>
</div>

<div class="blade" id="bladeContent2">
<h2>The Danger of Using Home Page Login Fields</h2>
<p id="p2">
What happens when a website puts their login fields in the upper corner of the home page? Users can easily mistake the login fields for a site search box and get confused. The upper area of the home page is not a good spot for login fields because it’s where users often go to do site searches. Search boxes in the upper corner is a consistent user interface pattern found across web browsers, websites and applications.<br /><br />

The rest of the article is <a href="http://uxmovement.com/forms/the-danger-of-using-home-page-login-fields/" target="_new">here</a> (Source)
</p>
</div>

<div class="blade" id="bladeContent3">
<h2>Why Distinct Icon Outlines Help Users Scan Faster</h2>
<p id="p2">
Uniform outlines make the shape of your icons look the same. Since they all look the same, it’s hard for any particular icon to stand out when users scan them. Instead, they have to focus more intently on the icon pictures because of the visual noise surrounding the icons. The user’s visual path will hit the background borders first before they can fixate on the icon.<br /><br />

The rest of the article is <a href="http://uxmovement.com/content/why-distinct-icon-outlines-help-users-scan-faster/" target="_new">here</a> (Source)
</p>
</div>

<div class="blade" id="bladeContent4">
<h2>Why Hover Menus Do Users More Harm Than Good</h2>
<p id="p2">
Many designers seem to believe that when their menus open on hover, they’re faster and easier for most users to use. It certainly might seem this way at first, but when you look deeper you’ll notice that the opposite is true. Hover menus are actually slower and harder for most users to use. Menus that open on hover do save users a click, but that first click is necessary in letting the website know that the user wants a menu to open and is ready for it. It also confirms to the user that something is happening as a result of their click. This behavior matches the user’s mental model of how most websites work. Clicking for something you want has never been an issue for users. What’s an issue for users is getting something you don’t want or don’t expect simply on hover.<br /><br />

The rest of the article is <a href="http://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/" target="_new">here</a> (Source)
</p>
</div>

<div class="blade" id="bladeContent5">
<h2>Why the Contact Us Page Always Goes Last</h2>
<p id="p2">
Have you ever wondered why most websites put their Contact Us page last in their navigation? Most websites do this because users follow a natural pattern when they visit a new website. When users visit a new website, they need information to know if the website they’re on is worth their time or not. That is why links to pages that help users learn about your website, such as the About Us page, should always go first in your navigation. However, when users have learned enough about your website, that’s when they’re ready to take action. If the last link in your navigation is the Contact Us page, you’ll make it easy for users to take action after they’re done learning about your website.<br /><br />

The rest of the article is <a href="http://uxmovement.com/navigation/why-the-contact-us-page-always-goes-last/" target="_new">here</a> (Source)
</p>
</div>
    <!-- end .content --></div>
  <div class="footer">
    <p>Page was created on: 9/4/11</p>
	<p id="aboutWebMaster">About Web Master</p>
    <!-- end .footer --></div>
  <!-- end .container --></div>
  </div>
  
  <div id="tab-4">
    <div class="content">
    <div class="photos">
	<a href="Images/pc1.jpg" rel="comps"><img src="Images/pc1.jpg" height="200" width="175" /></a>
	<a href="Images/pc2.jpg" rel="comps"><img src="Images/pc2.jpg" height="200" width="175" /></a>
	<a href="Images/pc3.jpg" rel="comps"><img src="Images/pc3.jpg" height="200" width="175" /></a>
	<a href="Images/pc4.jpg" rel="comps"><img src="Images/pc4.jpg" height="200" width="175" /></a>
	<a href="Images/pc5.jpg" rel="comps"><img src="Images/pc5.jpg" height="200" width="175" /></a>
	<a href="Images/pc6.jpg" rel="comps"><img src="Images/pc6.jpg" height="200" width="175" /></a>
	<a href="Images/pc7.jpg" rel="comps"><img src="Images/pc7.jpg" height="200" width="175" /></a>
	<a href="Images/pc8.jpg" rel="comps"><img src="Images/pc8.jpg" height="200" width="175" /></a>
	</div>
	
    <!-- end .content --></div>
    <div class="footer">
    <p id="aboutWebMaster">About Web Master</p>
    <!-- end .footer --></div>
  <!-- end .container --></div>
  </div>
  
  <div id="tab-5">
  
  </div>
</body>
</html>




Any idea on why it isn't working? All it does is go to the div on the page.

Is This A Good Question/Topic? 0
  • +

Replies To: JQuery UI tabs

#2 sas1ni69  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 85
  • View blog
  • Posts: 431
  • Joined: 04-December 08

Re: JQuery UI tabs

Posted 16 October 2011 - 08:38 PM

Hi there,

I've looked into your code and your divs are actually all over the place. You need to keep the structure of the tab divs completely in order like so:


<script>
	$(function() {
		$( "#tabs" ).tabs();
	});
	</script>



<div class="demo">

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Tab 1</a></li>
		<li><a href="#tabs-2">Tab 2</a></li>
		<li><a href="#tabs-3">Tab 3</a></li>
	</ul>
	<div id="tabs-1">
           content of tab 1
	</div>
	<div id="tabs-2">
           content of tab 2
	</div>
	<div id="tabs-3">
           content of tab 3
	</div>
</div>

</div>



Your code should look a little more like this: (You still need to adjust this though)

      	<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Kyle Hardware</title>
		<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script>
$(document).ready(function() {
	$('#tabs').tabs();
	$('.sidebar1').removeClass(".ui-widget");
});
</script>
<link href="Styles/mainStyle.css" rel="stylesheet" type="text/css" />
<link href="Styles/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<link href="Styles/colorbox.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div class="container">
  <div class="header">
  <h1 id="mainTitle">Welcome to Kyle Hardware!</h1> 
    <!-- end .header --></div>
    


    
    <div class="sidebar1">
    
    <form action="" method="get" name="signup" id="form1">
   	  <label  for="fName">First Name:</label><br />
    	<input type="text" class="textbox" name="fName" width="5px"><br />
        
        <label  for="lName">Last Name:</label><br />
        <input type="text" name="lName"><br />
        
        <label  for="email">e-mail:</label><br />
        <input type="text" class="textbox" name="email"><br />
        
        <label  for="uName">Username:</label><br />
        <input type="text" class="textbox" name="uName"><br />
        
        <label  for="password">Password:</label><br />
        <input type="password"class="textbox" name="password"><br />
        
        <label for="age">Age:</label>
        <select name="age">
            	<option>Select Age Group:</option>
            	<option>16-20</option>
                <option>21-25</option>
                <option>26-30</option>
                <option>31-35</option>
                <option>36-40</option>
                <option>41-50</option>
                <option>51-60</option>
                <option>61-70</option>
                <option>71+</option>
        </select><br />
        
        <label for="gender">Gender:</label><br />
        <input type="radio" name="gender" value="Male">Male<br />
        <input type="radio" name="gender" value="Female">Female<br />

    	<input type="Submit" value="Submit">
        <input type="reset">
    </form>
  <!-- end .sidebar1 --></div>
        <div id="tabs">
		    <ul id="info-nav">
          <li><a href="#tab-1" >Home</a></li>
          <li><a href="#tab-2" >Project 2</a></li>
          <li><a href="#tab-3" >UI Design</a></li>
          <li><a href="#tab-4" >Photos</a></li>
          <li><a href="#tab-5" >Feedback</a></li>
    </ul>
    <div id="tab-1">
  <div class="content">
  <h1 id="title">Home</h1>
  <a href="Images/me.jpg" class="lightbox"><img src="Images/me.jpg" alt="me" width="175" height="275" align="left" id="me"/></a>
  <p>
  My name is Kyle (if you couldn't guess that by now) I'm 21 years old, from Allentown Pennsylvania, and I love programming. It is one of my favorite hobbies, I'm constantly expanding my knowledge about the topic. I started programming when I was in 10th grade and knew it was what I wanted to do for my career right away. I currently know quite a few languages including Java, C++, PHP, SQL, VB, HTML, CSS, and Javascript. I will be starting my 3rd year at Pennsylvania College of Technology for a Bachelor's in Software Development next semester. I hope to finish this degree by next summer.

My other hobbies include going on forums (hardware and programming forums), snowboarding, fishing, buidling computers and hanging out with friends. During the warmer months (when I can't go snowboarding) I tend to write practice programs to keep expanding my knowledge and keep my programming abilities sharp. There is a list of a few programs that I have finished and am proud of on the portfolio page of this site. Once I'm out of school I hope to get a job programming application software somewhere local to where I live. Eventually I would like to go back to school and get my masters (and PhD if I can afford it). <br /><br />

If you would like to contact me feel free to email me <a href="mailto:kyle@gmail.com">here</a>.
  </p>
<!-- end .content --></div>
  <div class="footer">
    <p id="aboutWebMaster">About Web Master</p>
    <!-- end .footer --></div>
  <!-- end .container --></div>
  

  
  <div id="tab-2">
  
  </div>
  
  <div id="tab-3">
    <div class="content">
    <h1 id="title">What is the UXMovement?</h1>
	<p>
    The UXMovement site is a site filled with articles that every web developer/designer should read. The articles explain good practices when designing a page, things to consider when implementing a new feature to your web page and things to always do when you add common elements to your web page.
    </p>
<div class="blade" id="bladeContent1">
<h2>Why Rounded Corners are Easier on the Eyes</h2>
<p id="p2">
Some experts say that rectangles with rounded corners are easier on the eyes than a rectangle with sharp edges because they take less cognitive effort to visually process. The fovea is fastest at processing circles. Processing edges involve more “neuronal image tools” in the brain [1]. Thus, rectangles with rounded corners are easier process because they look closer to a circle than a regular rectangle.<br /><br />

The rest of the article is <a href="http://uxmovement.com/thinking/why-rounded-corners-are-easier-on-the-eyes/" target="_new">here</a> (Source)
</p>
</div>

<div class="blade" id="bladeContent2">
<h2>The Danger of Using Home Page Login Fields</h2>
<p id="p2">
What happens when a website puts their login fields in the upper corner of the home page? Users can easily mistake the login fields for a site search box and get confused. The upper area of the home page is not a good spot for login fields because it’s where users often go to do site searches. Search boxes in the upper corner is a consistent user interface pattern found across web browsers, websites and applications.<br /><br />

The rest of the article is <a href="http://uxmovement.com/forms/the-danger-of-using-home-page-login-fields/" target="_new">here</a> (Source)
</p>
</div>

<div class="blade" id="bladeContent3">
<h2>Why Distinct Icon Outlines Help Users Scan Faster</h2>
<p id="p2">
Uniform outlines make the shape of your icons look the same. Since they all look the same, it’s hard for any particular icon to stand out when users scan them. Instead, they have to focus more intently on the icon pictures because of the visual noise surrounding the icons. The user’s visual path will hit the background borders first before they can fixate on the icon.<br /><br />

The rest of the article is <a href="http://uxmovement.com/content/why-distinct-icon-outlines-help-users-scan-faster/" target="_new">here</a> (Source)
</p>
</div>

<div class="blade" id="bladeContent4">
<h2>Why Hover Menus Do Users More Harm Than Good</h2>
<p id="p2">
Many designers seem to believe that when their menus open on hover, they’re faster and easier for most users to use. It certainly might seem this way at first, but when you look deeper you’ll notice that the opposite is true. Hover menus are actually slower and harder for most users to use. Menus that open on hover do save users a click, but that first click is necessary in letting the website know that the user wants a menu to open and is ready for it. It also confirms to the user that something is happening as a result of their click. This behavior matches the user’s mental model of how most websites work. Clicking for something you want has never been an issue for users. What’s an issue for users is getting something you don’t want or don’t expect simply on hover.<br /><br />

The rest of the article is <a href="http://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/" target="_new">here</a> (Source)
</p>
</div>

<div class="blade" id="bladeContent5">
<h2>Why the Contact Us Page Always Goes Last</h2>
<p id="p2">
Have you ever wondered why most websites put their Contact Us page last in their navigation? Most websites do this because users follow a natural pattern when they visit a new website. When users visit a new website, they need information to know if the website they’re on is worth their time or not. That is why links to pages that help users learn about your website, such as the About Us page, should always go first in your navigation. However, when users have learned enough about your website, that’s when they’re ready to take action. If the last link in your navigation is the Contact Us page, you’ll make it easy for users to take action after they’re done learning about your website.<br /><br />

The rest of the article is <a href="http://uxmovement.com/navigation/why-the-contact-us-page-always-goes-last/" target="_new">here</a> (Source)
</p>
</div>
    <!-- end .content --></div>
  <div class="footer">
    <p>Page was created on: 9/4/11</p>
	<p id="aboutWebMaster">About Web Master</p>
    <!-- end .footer --></div>
  <!-- end .container --></div>

  
  <div id="tab-4">
    <div class="content">
    <div class="photos">
	<a href="Images/pc1.jpg" rel="comps"><img src="Images/pc1.jpg" height="200" width="175" /></a>
	<a href="Images/pc2.jpg" rel="comps"><img src="Images/pc2.jpg" height="200" width="175" /></a>
	<a href="Images/pc3.jpg" rel="comps"><img src="Images/pc3.jpg" height="200" width="175" /></a>
	<a href="Images/pc4.jpg" rel="comps"><img src="Images/pc4.jpg" height="200" width="175" /></a>
	<a href="Images/pc5.jpg" rel="comps"><img src="Images/pc5.jpg" height="200" width="175" /></a>
	<a href="Images/pc6.jpg" rel="comps"><img src="Images/pc6.jpg" height="200" width="175" /></a>
	<a href="Images/pc7.jpg" rel="comps"><img src="Images/pc7.jpg" height="200" width="175" /></a>
	<a href="Images/pc8.jpg" rel="comps"><img src="Images/pc8.jpg" height="200" width="175" /></a>
	</div>
	
    <!-- end .content --></div>
    <div class="footer">
    <p id="aboutWebMaster">About Web Master</p>
    <!-- end .footer --></div>
  <!-- end .container --></div>

  
  <div id="tab-5">
  
  </div>
    </div>
</body>
</html>






Hope this helps.
Was This Post Helpful? 2
  • +
  • -

Page 1 of 1