Tab & Panel (html to asp.net)

**lecfox** · Sep 8th, 2012, 08:58 PM

My fellow ASP.NET coders, I need a favor.

I have a website coming along. i have a set of code from a previous website that i did in html and i want to transfer that code to my asp.net website.
I tried it but the information on the panels wont show and everything is just not working right..

here is the HTML code for the tab..test it in your browser it should work
HTML Tabs.zip

here is my failed attempt at copy and pasting it in my asp.net page.

Code:

<asp:Content ID="HeadContent" ContentPlaceHolderID="HeadContent" Runat="Server">
<link rel="stylesheet" href="Styles/tabs-panes.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="Styles/tabs.css" type="text/css" media="screen" />
        <script type="text/javascript" src="Scripts/jquery.tools.min.js"></script>
</asp:Content>

<asp:Content ID="MainContent" ContentPlaceHolderID="MainContent" Runat="Server">

<div>
<!-- the tabs -->
<ul class="tabs">
	<li><a href="#">Tab 1</a></li>
	<li><a href="#">Tab 2</a></li>
	<li><a href="#">Tab 3</a></li>
</ul>

<!-- tab "panes" -->
<div class="panes">
	<div>First tab content. Tab contents are called "panes"</div>
	<div>Second tab content</div>
	<div>Third tab content</div>
</div>

<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>
</asp:Content>

Can someone please help me figure out why its not working well in asp.net...

**brin351** · Sep 9th, 2012, 07:17 PM

Because your using master pages there could be two problems.

1. the script and style URLs should be root relative like ( src="/folder/file.js" or src="~/folder/file.js") to ensure they are valid no matter where the content page is located

2. Although you place the call to the jquery function last the DOM may not be fully loaded in the browser so it's best to place your calls in a jquery document.ready method in the <head> section like

Code:

<script>
$(document).ready(function() {
   // put all your jQuery goodness in here.
   $("ul.tabs").tabs("div.panes > div");
 });
</script>

It may be something else but hopefully that helps

**lecfox** · Sep 11th, 2012, 07:46 PM

I used Ajax tab control instead

Thread: Tab & Panel (html to asp.net)

Thread Tools

Display

Tab & Panel (html to asp.net)

Re: Tab & Panel (html to asp.net)

Re: Tab & Panel (html to asp.net)

Posting Permissions