1 Attachment(s)
Tab & Panel (html to asp.net)
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
Attachment 91227
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...
Re: Tab & Panel (html to asp.net)
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 :)
Re: Tab & Panel (html to asp.net)
I used Ajax tab control instead :D
