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 »
