Thank you. There are a LOT of docs to read. One only goes by assuming what makes sense until he is able to read it all.
I am doing what I can to "read up" and certainly would not take an entire day working on this if I was not reading what I thought I needed to read. Maybe this link should be included in each of the widget doc pages as well so it's not overlooked for us newbies. Thanks. Jonathan-179 wrote: > > > I would suggest http://jqueryui.com/docs/Getting_Started > > It talks about how to get all the dependencies for the widgets and > about the Theme CSS. > > Stop assuming and read docs, it'll be much less frustrating for > everyone. > > > On Apr 3, 11:01 am, expresso <dschin...@gmail.com> wrote: >> In fact you know what the problem is? The damn documentation doesn't >> tell >> you that you MUST use the stylesheets given. All I assumed was is that I >> had to have the matching IDs and correct jQuery which I DID. >> >> What if we do not want to use those styles. I assumed the jQuery behind >> this injected the active styles it needs out of the box. It was not >> inferred that I must use that specific style sheet. In fact, now that I >> know this, that should be updated in the documentation because most of us >> will not use those styles. I'm using images in mine. But to know that >> if >> you remove those styles in the demo would break this? No way would I >> infer >> that. >> >> I was focusing on the mark-up, not the CSS which is also what the docs >> are >> doing. >> >> expresso 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 >> >> ... >> >> read more » > > -- View this message in context: http://www.nabble.com/All-div-content-showing-up-in-jQuery-Tabs-tp22860795s27240p22873928.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
