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 to http://www.jqueryui.com/demos/tabs/#default copied 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"> #Form3Content >> >>> >> Images/Product/tab3.gif </li> >> >>> >> </ul> >> >>> >> <div id="TabsMain"> >> >>> >> <div id="PContent"> >> >>> >> form >> >>> >> </div> >> >>> >> <div id="OContent"> >> >>> >> examples >> >>> >> </div> >> >>> >> <div id="RContent"> >> >>> >> test >> >>> >> </div> >> >>> >> </div> >> >>> >> </div> >> >> >>> >> So when this loads, I see the 2 tabs and then the text shows up >> below >> >>> >> like >> >>> >> this: >> >> >>> >> form >> >>> >> examples >> >>> >> test >> >> >>> >> instead of just "form" and the rest hidden. >> >>> >> -- >> >>> >> View this message in >> >> >>> >> context:http://www.nabble.com/All-div-content-showing-up-in-jQuery-Tabs-tp228... >> >>> >> Sent from the jQuery General Discussion mailing list archive at >> >>> >> Nabble.com. >> >> >>> -- >> >>> View this message in >> >>> >> context:http://www.nabble.com/All-div-content-showing-up-in-jQuery-Tabs-tp228... >> >>> Sent from the jQuery General Discussion mailing list archive at >> >>> Nabble.com. >> >> -- >> View this message in >> context:http://www.nabble.com/All-div-content-showing-up-in-jQuery-Tabs-tp228... >> Sent from the jQuery General Discussion mailing list archive at >> Nabble.com. > > -- View this message in context: http://www.nabble.com/All-div-content-showing-up-in-jQuery-Tabs-tp22860795s27240p22873530.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
