Yes, the code works from the demo.
I found that it was not my actual mark-up which was the issue. It was that you had to add the specific actual stylesheet in order to get them to work. It's just when you're looking at the examples, the explaination and code that tells you how to "get it to work" focuses only on the mark-up. Sure, the CSS link is in there but one would assume that you are not tied to that CSS for tabs to work. So as long as I have my ids matching and the initial jQuery in there to work on the tabs, that's all you would need. Now that I've added that CSS (either download the css from the lates UI API: <link href="~/Content/CSS/jquery-ui-1.7.1.custom.css" rel="stylesheet" type="text/css" /> or link to this which is shown: <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css"; rel="stylesheet" />) then it starts to work. now I have to figure out how to get rid of these imposed styles. Jonathan-179 wrote: > > > I'm not the tabs author this is just a guess but perhaps it needs more > then matching IDs, perhaps it needs to follow a certain ID convention > such as #tabs-n like was shown in the example. Like I said I'm not the > author but I did copy the code from the site, the same code you > claimed was broken and it worked perfect. I also took both of your > examples and with a little tweaking of the IDs to follow the example > it worked perfectly. > > On Apr 3, 10:58 am, expresso <dschin...@gmail.com> wrote: >> Dude, where is my mark-up wrong? My do have matching IDs. Where are >> you >> NOT seeing this. >> >> Jonathan-179 wrote: >> >> > Wow. People are giving up their free time to try and help you and this >> > is the response? >> >> > I went tohttp://www.jqueryui.com/demos/tabs/#defaultcopied the code >> > exactly and it works perfectly. The problem IS YOUR MARKUP like others >> > have stated to obviously deaf ears. You are monkeying with the markup >> > and are breaking it and have the nerve to rant about it? >> >> > Fix your LIs to have <a's> with the proper ID as stated in the >> > examples >> > <li> #tabs-1 Nunc tincidunt </li> >> > <li> #tabs-2 Proin dolor </li> >> > <li> #tabs-3 Aenean lacinia </li> >> >> > And It works fine. You want to use different IDs? Write your own tabs >> > widget. >> >> > On Apr 3, 10:34 am, expresso <dschin...@gmail.com> wrote: >> >> Maybe I should just give up on jQuery Tabs altogether if this is the >> kind >> >> of >> >> attitude and response I'll get from simply trying everything stated >> and >> >> the >> >> syntax IS correct per my last post and has been. I just posted some >> >> things >> >> wrong. >> >> >> Anyway, take a look at the screen video I posted so you can actually >> see >> >> what it's doing. >> >> >> expresso wrote: >> >> >> > It doesn't make a damn bit of difference. I've tried all the things >> >> > everyone's said here all along. Take this example for instance: >> >> >> > <script type="text/javascript"> >> >> > $(document).ready(function() { >> >> > $('#Tabs').tabs({ fx: { opacity: 'toggle'} }); >> >> > }); >> >> > </script> >> >> >> > <div id="Tabs"> >> >> > <ul> >> >> > <li runat="server"> #FContent >> >> > /Content/Images/Product/tabset1_persform_on.gif </li> >> >> > <li runat="server"> #PContent >> >> > /Content/Images/Product/tabset1_otherpers.gif </li> >> >> > <li runat="server"> #RContent >> >> > /Content/Images/Product/tabset1.gif </li> >> >> > </ul> >> >> > <div id="FContent"> >> >> > form >> >> > </div> >> >> > <div id="OContent"> >> >> > examples >> >> > </div> >> >> > <div id="RContent"> >> >> > test >> >> > </div> >> >> > </div> >> >> >> > For some reason this forum renders html as html so the hyperlinks >> above >> >> > and the image shows instead of my code. Are there some code markup >> >> tags I >> >> > can wrap my code in when posting to this forum? >> >> >> > So it doesn't matter if I try uppercase #Tabs or lower-case #tabs. >> I >> >> > prefer uppercase for my id and that should be just fine as long as >> it >> >> > matches up. Besides I tried lower case also and it made no fing >> >> > difference. >> >> >> > Second, I stated before. It seems to function as far as when you >> click >> >> on >> >> > a tab, I can see the content change via the fade effect. It's just >> >> that >> >> > still, all 3 div content is showing up regardless of which tab I >> >> select. >> >> > If I click on tab 2 for instance, I see that it flashes from Tab 1 >> to >> >> Tab >> >> > 2 but still all 3 of those div contents are showing up, none are >> being >> >> > hidden and shown per what tab you are selecting. >> >> >> > THE PROBLEM: So I'm trying to figure out why all the content is >> >> displaying >> >> > and not just the tab you're on. Doesn't matter whether I try >> >> > $('#Tabs').tabs(); or adding the fade..I see the same thing. >> >> >> > In fact here is a video clip of it in action if this helps any: >> >> >http://www.codezest.com/post/tabs.avi >> >> >> > Here's a post about getting tabs to work but I thought this >> switching >> >> and >> >> > showing each tab content works out of the box as shown in the jQuery >> >> > documentation? >> >> >http://mikehodgson.com/index.cfm/2008/11/25/Really-Simple-JQuery-Tabs >> >> >> > Klaus Hartl-4 wrote: >> >> >> >> There's no need for all this ranting. You're simply not meeting the >> >> >> markup requirements to make the tabs work. >> >> >> >> A tab has to look like: >> >> >> >> <li> #fragment-identifier A Tab </li> >> >> >> >> I m pretty sure the documentation is showing this fact and I don't >> >> >> understand why you took "straight code out of the example" and then >> >> >> changed it to not work. Indeed "Nowhere in >> >> >> the docs does it say you need to add code to show the first default >> >> >> tab and >> >> >> div." because you don't need to as long as you're using the proper >> >> >> markup. >> >> >> >> --Klaus >> >> >> >> On 3 Apr., 07:32, expresso <dschin...@gmail.com> wrote: >> >> >>> I mean really if you take the straight code out of the example and >> >> try >> >> >>> to run >> >> >>> this, it doesn't even work! So how are we to even use the docs? >> >> Under >> >> >>> the >> >> >>> "Example" here:http://docs.jquery.com/UI/Tabs#events that code >> works >> >> >>> there >> >> >>> but when I try this in my own page, I get the same issues. >> >> >> >>> <!DOCTYPE html> >> >> >>> <html> >> >> >>> <head> >> >> >>> <link type="text/css" >> >> >>> href="http://jqueryui.com/latest/themes/base/ui.all.css"; >> >> >>> rel="stylesheet" /> >> >> >>> <script type="text/javascript" >> >> >>> src="http://jqueryui.com/latest/jquery-1.3.2.js";></script> >> >> >>> <script type="text/javascript" >> >> >>> src="http://jqueryui.com/latest/ui/ui.core.js";></script> >> >> >>> <script type="text/javascript" >> >> >>> src="http://jqueryui.com/latest/ui/ui.tabs.js";></script> >> >> >>> <script type="text/javascript"> >> >> >>> $(document).ready(function(){ >> >> >>> $("#tabs").tabs(); >> >> >>> }); >> >> >>> </script> >> >> >>> </head> >> >> >>> <body style="font-size:62.5%;"> >> >> >> >>> <div id="tabs"> >> >> >>> <ul> >> >> >>> <li>One</li> >> >> >>> <li>Two</li> >> >> >>> <li>Three</li> >> >> >>> </ul> >> >> >>> <div id="fragment-1"> >> >> >>> <p>First tab is active by default:</p> >> >> >>> <pre><code>$('#example').tabs();</code></pre> >> >> >>> </div> >> >> >>> <div id="fragment-2"> >> >> >>> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, >> sed >> >> >>> diam >> >> >>> nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam >> erat >> >> >>> volutpat. >> >> >>> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, >> sed >> >> >>> diam >> >> >>> nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam >> erat >> >> >>> volutpat. >> >> >>> </div> >> >> >>> <div id="fragment-3"> >> >> >>> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, >> sed >> >> >>> diam >> >> >>> nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam >> erat >> >> >>> volutpat. >> >> >>> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, >> sed >> >> >>> diam >> >> >>> nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam >> erat >> >> >>> volutpat. >> >> >>> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, >> sed >> >> >>> diam >> >> >>> nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam >> erat >> >> >>> volutpat. >> >> >>> </div> >> >> >>> </div> >> >> >>> </body> >> >> >>> </html> >> >> >> >>> Thanks. And this is what really "gets to me" about the docs. >> >> Nowhere >> >> >>> in >> >> >>> the docs does it say you need to add code to show the first >> default >> >> tab >> >> >>> and >> >> >>> div. In fact the docs show you an example with example code of >> tabs >> >> >>> working >> >> >>> without it. >> >> >> >>> So then why should we assume we have to write all this extra code >> >> just >> >> >>> to >> >> >>> specify the default to load and others hidden when the docs don't >> >> even >> >> >>> show >> >> >>> that? >> >> >> >>> I can see all the events, etc. on that page, but nowhere >> especially >> >> in >> >> >>> the >> >> >>> examples does it say you have to do anything other than add the >> >> >>> following >> >> >>> script to your page along with the structure of hyperlink-to-div >> id >> >> >>> matchup: >> >> >> >>> $(document).ready(function(){ >> >> >>> $("#tabs").tabs(); >> >> >>> }); >> >> >>> </script> >> >> >> >>> so how does one "infer" to have to create all this extra code to >> get >> >> >>> basic >> >> >>> features to work when the own docs are showing you none of that!? >> >> >> >>> If I have to hack in more jQuery to do this, then the docs should >> be >> >> >>> forthcoming and tell me this instead of giving me examples that >> >> >>> essentially >> >> >>> point me in a direction of "it works like this" instead of "you >> need >> >> to >> >> >>> code >> >> >>> a ton more to get this to work like this" type of deal. How do I >> >> know >> >> >>> that? >> >> >>> I'm not trying to do anything here outside of get the basic tabs >> >> working >> >> >>> and >> >> >>> default <div> to show! By what I infer from the docs, this is all >> I >> >> >>> need! >> >> >> >>> I mean is that example ONLY working because it's using the jquery >> css >> >> >>> (<link >> >> >>> type="text/css" >> >> href="http://jqueryui.com/latest/themes/base/ui.all.css"; >> >> >>> rel="stylesheet" />) in there and the jQuery tabs plugin can work >> >> like >> >> >>> that >> >> >>> IF you only use that css and anything outside that you must code >> your >> >> >>> own >> >> >>> logic to your own css? I don't get this or infer that! >> >> >> >>> thedad...@gmail.com wrote: >> >> >> >>> > maybe this tutorial can help you . >> >> >> >> >http://15daysofjquery.com/jquery-online-movie-tutorial-by-john-resig/29/ >> >> >> >>> > On 4月3日, 上午10时24分, expresso <dschin...@gmail.com> wrote: >> >> >>> >> For some reason, when my first div loads, I'm seeing all 3 text >> >> show >> >> >>> up >> >> >>> >> even >> >> >>> >> though they're in different <div> containers: >> >> >> >>> >> <script type="text/javascript"> >> >> >>> >> $(document).ready(function() { >> >> >>> >> $('#Tabs div:Form1Content').show(); >> >> >>> >> $('#Tabs').tabs({ fx: { opacity: 'toggle'} }); >> >> >>> >> }); >> >> >>> >> </script> >> >> >>> >> <div id="Tabs"> >> >> >>> >> <ul> >> >> >>> >> <li id="PTab" runat="server"> #Form1Content >> >> >>> >> Images/Product/tab1.gif </li> >> >> >>> >> <li id="OTab" runat="server"> #Form2Content >> >> >>> >> Images/Product/tab2.gif </li> >> >> >>> >> <li id="RTab" runat="server"> >> >> ... >> >> read more » > > -- View this message in context: http://www.nabble.com/All-div-content-showing-up-in-jQuery-Tabs-tp22860795s27240p22873808.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
