I had updated my first post but does not look like it went through. The #
red and div ids are the same. I will update that.
Second, we shouldn't have to use the same Ids as outlined in the example as
long as our jQuery is referencing the correct names one would assume
MorningZ wrote:
>
>
> Either one of your examples do not have a valid structure
>
> your first post has
>
> <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>
>
> I don't know where you saw any (official) example of the structure
> with the <div> you call "TabsMain" wrapped around the content divs,
> but they shouldn't be there
>
> you also don't have hyperlinks inside the <li> items (which even the
> second same code doesn't have), and even if you did, the id's you
> refer to in the <li>'s, "#Form1Content", "#Form2Content",
> "#Form3Content" don't match the IDs of the content divs of "PContent",
> "OContent", and "RContent"... so your first example doesn't have
> valid structure and isn't properly mapped, and your supposedly
> "straight from the docs" second example posted has <li>One</li>, which
> gives no clue what tabs to show/hide
>
> There is absolutely no reason why this code
>
> <div id="Tabs">
> <ul>
> <li id="PTab" runat="server"> #PContent One </
> li>
> <li id="OTab" runat="server"> #OContent Two </
> li>
> <li id="RTab" runat="server"> #RContent Three</
> a></li>
> </ul>
> <div id="PContent">form</div>
> <div id="OContent">examples</div>
> <div id="RContent">test</div>
> </div>
>
> won't work
>
> On Apr 3, 8:09 am, expresso <dschin...@gmail.com> wrote:
>> Klaus, a couple points:
>>
>> First, let me state that it appears that I do see content being changed
>> on
>> click of each tab. That is NOT my problem here.
>>
>> 1) if it's the span tags you're referring to, I tried that by wrapping
>> the
>> spans either around text or an image and it made no diff. When I click
>> on a
>> tab, I do see the content dive changing..the problem is still that the
>> dive
>> are not hidden and all 3 referenced divs are exposed as you can see in my
>> screen shot. So the clicking seems to work...it's that the divs are not
>> being hidden/shown correctly
>> 2) I even tried the code as I stated right out of the example on the
>> jquery
>> tabs page. Same results. Now you're saying I changed something there?
>> No
>> way man.
>>
>> So maybe you don't understand MY problem still? Yes frustrated and
>> sometimes we should all be allotted to be a little human at times ay?
>>
>>
>>
>> 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-tp22860795s27240p22867889.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
