You will recieve your password to this address. Address is not made public.

Your preferred username that is used when logging in.

Tab panes not showing Created Nov 12, 2009

This thread is solved

Views: 1181     Replies: 2     Last reply Nov 12, 2009  
You must login first before you can use this feature

kdesilva

Posts: 9

Registered:
Nov 3, 2009

Tab panes not showing

Posted: Nov 12, 2009

For some reason, I can't get the tab panes to show .. the tabs show fine, but the panes are not showing up..

here is the code:

kdesilva

Posts: 9

Registered:
Nov 3, 2009

HTML

Posted: Nov 12, 2009

Reply to: Tab panes not showing, from kdesilva

<div class="content-area"> 
 
 
 
 
         <a href='/raceday/Account/Login'>Log In</a> | 
         <a href="/raceday/Event/Edit">Create A New Event</a> | 
         <a href="/raceday/Account/Create">Create A New Account</a> | 
         <a href="/raceday/Event/List">View Events</a> | 
         <a href="/raceday/Event/Manage">Events Created By You</a> 
 
 
 
         
   
   <h1>Create A New Raceday Account</h1> 
   
   <form action="/raceday/Account/Create" method="post"> 
   
      <div></div> 
   
         <ul class="tabs"> 
            <li><a href="#">Basic</a></li> 
            <li><a href="#">Detailed</a></li> 
         </ul> 
         
         <div class="panes"> 
            <div> 
               <label> 
                  Personal Info
                  <label for="FirstName" id="FirstName_Label">First Name:</label><input class="required" id="FirstName" name="FirstName" type="text" value="" /> 
                  <label for="LastName" id="LastName_Label">Last Name:</label><input id="LastName" name="LastName" type="text" value="" /><br /> 
                  <label for="Gender" id="Gender_Label">Gender:</label><select class="required" id="Gender" name="Gender"><option value="">Not Specified</option><option value="F">Female</option><option value="M">Male</option></select><br /> 
                  <label for="DateOfBirth" id="DateOfBirth_Label">Date of birth:</label><input class="date-input" id="DateOfBirth" name="DateOfBirth" type="text" value="11/15/1999" /><br /> 
               </label> 
               <label> 
                  Account Details
                  <label for="EmailAddress" id="EmailAddress_Label">Email:</label><input class="required email" id="EmailAddress" name="EmailAddress" type="text" value="" /><br /> 
                  <label for="Password" id="Password_Label">Password:</label><input class="required" id="Password" name="Password" type="password" value="" /><br /> 
                  <label for="PasswordConfirmation" id="PasswordConfirmation_Label">Confirm:</label><input class="required" id="PasswordConfirmation" name="PasswordConfirmation" type="password" value="" /> 
               </label>  
               <p> 
               <input class="submit" id="Create_Account" name="Create_Account" type="submit" value="Create Account" /> 
               </p> 
            </div> 
            
            <div> 
                <label> 
                  Address
                  <label for="Address_Line1" id="Address_Line1_Label">Street Number, Name:</label><input id="Address_Line1" name="Address.Line1" type="text" value="" /><br /> 
                  <label for="Address_Line2" id="Address_Line2_Label">Address Line 2:</label><input id="Address_Line2" name="Address.Line2" type="text" value="" /><br /> 
                  <label for="Address_CountryId" id="Address_CountryId_Label">Country:</label><select id="Address_CountryId" name="Address.CountryId"><option value="">Select A Country</option><option value="100">Bermuda</option></select><br /> 
                  <label for="Address_RegionId" id="Address_RegionId_Label">State, Province or Region:</label><select id="Address_RegionId" name="Address.RegionId"><option value="">Select A Region</option></select><br /> 
                  <label for="Address_CityId" id="Address_CityId_Label">City:</label><select id="Address_CityId" name="Address.CityId"><option value="">Select A City</option></select><br /> 
                  <label for="Address_PostalCode" id="Address_PostalCode_Label">Postal Code:</label><input id="Address_PostalCode" name="Address.PostalCode" type="text" value="" /><br /> 
                  <input id="OnlyShowLocalEvents" name="OnlyShowLocalEvents" type="checkbox" value="true" /><label for="OnlyShowLocalEvents" id="OnlyShowLocalEvents_Label">Show only events from here</label><input id="OnlyShowLocalEvents_Hidden" name="OnlyShowLocalEvents" type="hidden" value="false" /> 
                </label> 
                <label> 
                  Other Details
                  <label for="PhoneNumber" id="PhoneNumber_Label">Phone:</label><input id="PhoneNumber" name="PhoneNumber" type="text" value="" /> 
                </label> 
               <p> 
               <input class="submit" id="Create_Account" name="Create_Account" type="submit" value="Create Account" /> 
               </p> 
            </div> 
         </div> 
   </form> 
   
   <!-- This JavaScript snippet activates those tabs --> 
    <script> 
     
    // perform JavaScript after the document is scriptable.
    $(function() {
	    // setup ul.tabs to work as tabs for each div directly under div.panes
	    $("ul.tabs").tabs("div.panes > div");
    });
    </script> 
   
 
 
								</div> 
								<!-- end content --> 
						

kdesilva

Posts: 9

Registered:
Nov 3, 2009

CSS

Posted: Nov 12, 2009

Reply to: HTML, from kdesilva

/* root element for tabs  */
ul.tabs { 
	list-style:none; 
	margin:0 !important; 
	padding:0;	
	border-bottom:1px solid #666;	
	height:30px;
}

/* single tab */
ul.tabs li { 
	float:left;	 
	text-indent:0;
	padding:0;
	margin:0 !important;
	list-style-image:none !important; 
}

/* link inside the tab. uses a background image */
ul.tabs a { 
	background: url(../images/blue.png) no-repeat -420px 0;
	font-size:11px;
	display:block;
	height: 30px;  
	line-height:30px;
	width: 134px;
	text-align:center;	
	text-decoration:none;
	color:#333;
	padding:0px;
	margin:0px;	
	position:relative;
	top:1px;
}

ul.tabs a:active {
	outline:none;		
}

/* when mouse enters the tab move the background image */
ul.tabs a:hover {
	background-position: -420px -31px;	
	color:#fff;	
}

/* active tab uses a class name "current". it's highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
	background-position: -420px -62px;		
	cursor:default !important; 
	color:#000 !important;
}

/* Different widths for tabs: use a class name: w1, w2, w3 or w2 */

/* width 1 */
ul.tabs a.s 			{ background-position: -553px 0; width:81px; }
ul.tabs a.s:hover 	{ background-position: -553px -31px; }
ul.tabs a.s.current  { background-position: -553px -62px; }

/* width 2 */
ul.tabs a.l 			{ background-position: -248px -0px; width:174px; }
ul.tabs a.l:hover 	{ background-position: -248px -31px; }
ul.tabs a.l.current  { background-position: -248px -62px; }

/* width 3 */
ul.tabs a.xl 			{ background-position: 0 -0px; width:248px; }
ul.tabs a.xl:hover 	{ background-position: 0 -31px; }
ul.tabs a.xl.current { background-position: 0 -62px; }

/* initially all panes are hidden */ 
div.panes div.pane {
	display:none;		
}