[jQuery] [jQuery Tabs] Select tab from link
Good day everyone.
I'm using Jquery Tabs UI and loading content via Ajax. I'm now trying
to select one of the tabs from a link on another page. I'm not having
any luck with the example on the jquery docs page.
When I assign the #standard as an ID on the A tag it does not load the
content of that tab. Example: Users
Does anyone have any suggestions?
Thanks!!
Stephen
// Jquery Stuff
$(document).ready(function(){
var $tabs = $("#tabs-container").tabs();
$('#standard').click(function() { // bind click event to link
$tabs.tabs('select', 2); // switch to third tab
return false;
});
});
// HTML Stuff
Administrators
Users
Process Users
User Activity
Database Backup
// Jquery Documentation
http://docs.jquery.com/UI/Tabs#...select_a_tab_from_a_text_link_instead_of_clicking_a_tab_itself
[jQuery] Jquery Tabs FOUC (Hide inactive tab panel)
Does anyone have any experience with the Jquery tab system? Below is
the instructions they've suggested to help prevent FOUC. Obviously, by
adding this CSS code all it does is hide the div's completely.
I'm trying to find out how to hide the inactive Tabs upon page load
and then remove/activate them when a user clicks the tab.
http://docs.jquery.com/UI/Tabs#options
...prevent a FOUC (Flash of Unstyled Content) before tabs are
initialized
Add the necessary classes to hide an inactive tab panel to the HTML
right away - note that this will not degrade gracefully with
JavaScript being disabled:
...
...
Required CSS:
.ui-tabs .ui-tabs-hide {
display: none;
}
Re: [jQuery] Jquery Tabs
try to use this tabs plugin http://www.etmvc.cn/project/show/63 http://www.etmvc.cn/project/show/63 StephenJacob wrote: > > I'm having an issue, which seems common, when loading tab content > using the Jquery Tab plugin. It seems the content loads on the page > prior to being "tabbed". This causes the page to jump around for a > split second before the content loads completely. > > Is there any way of fixing this issue? > > http://docs.jquery.com/UI/Tabs > > Thanks! > > -- View this message in context: http://old.nabble.com/Jquery-Tabs-tp26321361s27240p26328731.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
Re: [jQuery] jquery tabs not on the same row! help please!
You're missing ui.tabs.css
- Richard
2009/11/12 AdyLim
> Hi there,
>
> I'm just starting to learn jquery and trying to implement tabs onto my
> aspx page...The problem is that the tabs are showing up one on top of
> anotherhow do i get the tabs to line up in a row? I'm using
> jquery 1.2.6...all the js's (ui.core.js, ui.tabs.js) are included in
> my masterpage.
>
> any help is appreciated!
> thanks!
>
> my code follows:
>
> ASPX:
>
> <%@ Page Title="" Language="C#" MasterPageFile="~/Master.Master"
> AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs"
> Inherits="ctc3.test.WebForm1" %>
>
>
> runat="server">
>
> runat="server">
>
>
>
> $(function() {
> $("#tabs").tabs();
> });
>
>
>
>
>
>
>
>Nunc tincidunt
>Proin dolor
>Aenean lacinia
>
>
>
>Proin elit arcu, rutrum commodo, vehicula tempus, commodo
> a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris.
> Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem.
> Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo.
> Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam
> sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat.
> Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci
> tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
>
>
>Morbi tincidunt, dui sit amet facilisis feugiat, odio
> metus
> gravida ante, ut pharetra massa metus id nunc. Duis scelerisque
> molestie turpis. Sed fringilla, massa eget luctus malesuada, metus
> eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet
> fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam.
> Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis.
> Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra
> nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas
> feugiat, tellus pellentesque pretium posuere, felis lorem euismod
> felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et
> purus.
>
>
>Mauris eleifend est et turpis. Duis id erat. Suspendisse
> potenti.
> Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat,
> eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent
> taciti sociosqu ad litora torquent per conubia nostra, per inceptos
> himenaeos. Fusce sodales. Quisque eu urna vel enim commodo
> pellentesque. Praesent eu risus hendrerit ligula tempus pretium.
> Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.
>Duis cursus. Maecenas ligula eros, blandit nec, pharetra
> at,
> semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra
> justo vitae neque. Praesent blandit adipiscing velit. Suspendisse
> potenti. Donec mattis, pede vel pharetra blandit, magna ligula
> faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque.
> Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi
> lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean
> vehicula velit eu tellus interdum rutrum. Maecenas commodo.
> Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus
> hendrerit hendrerit.
>
>
>
>
>
>
>
>
Re: [jQuery] jquery tabs not on the same row! help please!
You have a lot of you "facts" wrong.
> Floats are a pain as soon as you try to use proper positionning (relative /
> absolute) along with proper overflow.
Nope, they are not. Floats do not have any effect on positioning.
Positioning works the way it should around and inside floats.
(Except for a weird IE bug, where sometimes a floated element sibling
to a absolutely positioned element will make one of them disappear. If
I remember correctly the absolutely positioned one. The fix is to ad
another neutral element between them, lets say, wrap the positioned
element with a )
> Floats should be used to place content alongside inline content to make said
> content flow around the floating element, adapting to its shape. It's
> perfect for, say, inserting a visual illustration within the paragraph it
> illustrates,
I wholeheartedly agree with you here
> and can be used in various hacks to keep a text-free zone to
> dress an element around some background-image decoration.
Lets say ok... though I'm not sure what you mean by this.
> What it shouldn't be used for however is replacing inline-block, because
> contrary to inline-blocks, floating elements aren't placed inside the inline
> flow but in the twilight-zone-ish floating flow.
Yes, flow doesn not replace inline-block, and float does not want to do that.
Yes, they are not in the normal flow, be it inline or block. Its not a
twilightish area.
They are in a... lets call it "float" flow.
> This means floating
> elements won't behave like real blocks nor real inline. For exemple they
> won't be taken in account by their block parent when it comes to deciding
> it's size, or for overflow (which causes various *nasty* "I scroll the div
> but the flows don't move" or "why the fuzz aren't they wrapping" bugs in
> various implementations of IE),
This is how you can force an element to take its flowed children into
consideration regarding their size:
1. If the parent is a float, it worked as expected.
2. If the parent is a block, you need to do the following:
a) Force the element to calculate its boundaries (by declaring an
overflow value usually) or (proffered)
b) Use a clearer and
c) Enable hasLayout of IE
Example code:
HTML
CSS
.block { display: inline-block; overflow: hidden; }
.block { display: block; }
**
Of overflow doesn't work with the current Layout you are building, change it to:
CSS:
.block:after { content: '.'; display: block; clear: both; height: 0;
visibility: hidden; }
**
Setting the display property to inline-block enables hasLayout for IE,
then we can change it back on the following declaration.
Note. You can not reset it in the same declaration. It wont work.
And yes, we could use height or width or any other property that
activates hasLayout. I like this method because it won't force me to
use IE proprietary code and it doesn't scar my CSS code (by that I
mean setting a height or width when I do not want one. You can reset
the display property to whatever you need, and the hasLayout remains
active
> and positioning elements inside can be a
> pain (try it, you probably won't like it).
It works like a charm. Please give an example, and I'll show you where
you made a mistake.
> On the other hand, inline-block is exactly the way an behaves plus
> the advantages of proper positionning and reserving space as one should, and
> as far as IE is concerned it works great using a little initial and
> non-intrusive hack to make it IE7 compliant (I'm not too sure about IE6, but
> hey, it's already officially made obsolete by its maker...).
Glad to hear that you can afford to dodge IE6 so soon. The vast
majority of us still need to support it. And probably will need to for
a few more years. Probably around 3-5, depending on the scope of the
projects at hand.
> Plus it's the
> standard way to do things, so sooner or later IE will make a gre... a goo...
> a job of it.
Here is what you have got it the most wrong. Floats are NOT designed
for Layouts, and inline-block is NOT designed for Layouts.
For "real" Layouting we need to wait for the CSS3 Layout module.
See http://www.w3.org/TR/2009/WD-css3-layout-20090402/ and
http://www.css3.info/introducing-the-flexible-box-layout-module/ for
some ideas and implementations.
> Hope it helps.
Right now, floats and positioning are the best tools we have for
layouting. I'm not sure that inline-block can do a better job. It
might work good. I'm curious about the price tough.
--
Andrei Eftimie
http://eftimie.com
+40 758 833 281
Punct
http://designpunct.ro
[jQuery] Jquery Tabs
I'm having an issue, which seems common, when loading tab content using the Jquery Tab plugin. It seems the content loads on the page prior to being "tabbed". This causes the page to jump around for a split second before the content loads completely. Is there any way of fixing this issue? http://docs.jquery.com/UI/Tabs Thanks!
Re: [jQuery] jquery tabs not on the same row! help please!
Floats are a pain as soon as you try to use proper positionning (relative /
absolute) along with proper overflow.
Floats should be used to place content alongside inline content to make said
content flow around the floating element, adapting to its shape. It's
perfect for, say, inserting a visual illustration within the paragraph it
illustrates, and can be used in various hacks to keep a text-free zone to
dress an element around some background-image decoration.
What it shouldn't be used for however is replacing inline-block, because
contrary to inline-blocks, floating elements aren't placed inside the inline
flow but in the twilight-zone-ish floating flow. This means floating
elements won't behave like real blocks nor real inline. For exemple they
won't be taken in account by their block parent when it comes to deciding
it's size, or for overflow (which causes various *nasty* "I scroll the div
but the flows don't move" or "why the fuzz aren't they wrapping" bugs in
various implementations of IE), and positioning elements inside can be a
pain (try it, you probably won't like it).
On the other hand, inline-block is exactly the way an behaves plus
the advantages of proper positionning and reserving space as one should, and
as far as IE is concerned it works great using a little initial and
non-intrusive hack to make it IE7 compliant (I'm not too sure about IE6, but
hey, it's already officially made obsolete by its maker...). Plus it's the
standard way to do things, so sooner or later IE will make a gre... a goo...
a job of it.
Hope it helps.
Michel Belleville
2009/11/12 Andrei Eftimie
> Sorry for thread-hijacking, but why would you say that floats are
> complicated?
>
> Right now (as in current browser implementations) floats work really
> reliably.
> (with 1 small IE bug with an easy fix)
>
> inline-block needs to be hacked in multiple browsers
>
> 2009/11/12 Michel Belleville :
> > Also, you'd better not use floating positioning (easier on the very short
> > term, a lot more complicated in mid-long term).
> >
> > Michel Belleville
> >
> >
> > 2009/11/12 Andrei Eftimie
> >>
> >> This is a CSS issue, not really related to jQuery.
> >>
> >> Do something like this in your CSS file:
> >>
> >> /* Forcing the ul to take not of its floated children. */
> >> #tabs ul { display: inline-block; overflow: hidden; }
> >> #tabs ul { display: block; }
> >>
> >> /* Floating the children */
> >> #tabs li { float: left; }
> >>
> >>
> >> 2009/11/12 AdyLim :
> >> > Hi there,
> >> >
> >> > I'm just starting to learn jquery and trying to implement tabs onto my
> >> > aspx page...The problem is that the tabs are showing up one on top of
> >> > anotherhow do i get the tabs to line up in a row? I'm using
> >> > jquery 1.2.6...all the js's (ui.core.js, ui.tabs.js) are included in
> >> > my masterpage.
> >> >
> >> > any help is appreciated!
> >> > thanks!
> >> >
> >> > my code follows:
> >> >
> >> > ASPX:
> >> >
> >> > <%@ Page Title="" Language="C#" MasterPageFile="~/Master.Master"
> >> > AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs"
> >> > Inherits="ctc3.test.WebForm1" %>
> >> >
> >> >
> >> > >> > runat="server">
> >> >
> >> > >> > runat="server">
> >> >
> >> >
> >> >
> >> > $(function() {
> >> > $("#tabs").tabs();
> >> > });
> >> >
> >> >
> >> >
> >> >
> >> >
> >> >
> >> >
> >> >Nunc tincidunt
> >> >Proin dolor
> >> >Aenean lacinia
> >> >
> >> >
> >> >
> >> >Proin elit arcu, rutrum commodo, vehicula tempus, commodo
> >> > a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris.
> >> > Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem.
> >> > Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo.
> >> > Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam
> >> > sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat.
> >> > Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci
> >> > tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
> >> >
> >> >
> >> >Morbi tincidunt, dui sit amet facilisis feugiat,
> odio
> >> > metus
> >> > gravida ante, ut pharetra massa metus id nunc. Duis scelerisque
> >> > molestie turpis. Sed fringilla, massa eget luctus malesuada, metus
> >> > eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet
> >> > fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam.
> >> > Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis.
> >> > Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra
> >> > nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas
> >> > feugiat, tellus pellentesque pretium posuere, felis lorem euismod
> >> > felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et
> >> > purus.
> >> >
> >> >
> >> >Mauris eleifend e
Re: [jQuery] jquery tabs not on the same row! help please!
Sorry for thread-hijacking, but why would you say that floats are complicated?
Right now (as in current browser implementations) floats work really reliably.
(with 1 small IE bug with an easy fix)
inline-block needs to be hacked in multiple browsers
2009/11/12 Michel Belleville :
> Also, you'd better not use floating positioning (easier on the very short
> term, a lot more complicated in mid-long term).
>
> Michel Belleville
>
>
> 2009/11/12 Andrei Eftimie
>>
>> This is a CSS issue, not really related to jQuery.
>>
>> Do something like this in your CSS file:
>>
>> /* Forcing the ul to take not of its floated children. */
>> #tabs ul { display: inline-block; overflow: hidden; }
>> #tabs ul { display: block; }
>>
>> /* Floating the children */
>> #tabs li { float: left; }
>>
>>
>> 2009/11/12 AdyLim :
>> > Hi there,
>> >
>> > I'm just starting to learn jquery and trying to implement tabs onto my
>> > aspx page...The problem is that the tabs are showing up one on top of
>> > anotherhow do i get the tabs to line up in a row? I'm using
>> > jquery 1.2.6...all the js's (ui.core.js, ui.tabs.js) are included in
>> > my masterpage.
>> >
>> > any help is appreciated!
>> > thanks!
>> >
>> > my code follows:
>> >
>> > ASPX:
>> >
>> > <%@ Page Title="" Language="C#" MasterPageFile="~/Master.Master"
>> > AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs"
>> > Inherits="ctc3.test.WebForm1" %>
>> >
>> >
>> > > > runat="server">
>> >
>> > > > runat="server">
>> >
>> >
>> >
>> > $(function() {
>> > $("#tabs").tabs();
>> > });
>> >
>> >
>> >
>> >
>> >
>> >
>> >
>> > Nunc tincidunt
>> > Proin dolor
>> > Aenean lacinia
>> >
>> >
>> >
>> > Proin elit arcu, rutrum commodo, vehicula tempus, commodo
>> > a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris.
>> > Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem.
>> > Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo.
>> > Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam
>> > sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat.
>> > Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci
>> > tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
>> >
>> >
>> > Morbi tincidunt, dui sit amet facilisis feugiat, odio
>> > metus
>> > gravida ante, ut pharetra massa metus id nunc. Duis scelerisque
>> > molestie turpis. Sed fringilla, massa eget luctus malesuada, metus
>> > eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet
>> > fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam.
>> > Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis.
>> > Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra
>> > nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas
>> > feugiat, tellus pellentesque pretium posuere, felis lorem euismod
>> > felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et
>> > purus.
>> >
>> >
>> > Mauris eleifend est et turpis. Duis id erat.
>> > Suspendisse potenti.
>> > Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat,
>> > eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent
>> > taciti sociosqu ad litora torquent per conubia nostra, per inceptos
>> > himenaeos. Fusce sodales. Quisque eu urna vel enim commodo
>> > pellentesque. Praesent eu risus hendrerit ligula tempus pretium.
>> > Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.
>> > Duis cursus. Maecenas ligula eros, blandit nec,
>> > pharetra at,
>> > semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra
>> > justo vitae neque. Praesent blandit adipiscing velit. Suspendisse
>> > potenti. Donec mattis, pede vel pharetra blandit, magna ligula
>> > faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque.
>> > Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi
>> > lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean
>> > vehicula velit eu tellus interdum rutrum. Maecenas commodo.
>> > Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus
>> > hendrerit hendrerit.
>> >
>> >
>> >
>> >
>> >
>> >
>> >
>> >
>>
>>
>>
>> --
>> Andrei Eftimie
>> http://eftimie.com
>> +40 758 833 281
>>
>> Punct
>> http://designpunct.ro
>
>
--
Andrei Eftimie
http://eftimie.com
+40 758 833 281
Punct
http://designpunct.ro
Re: [jQuery] jquery tabs not on the same row! help please!
Also, you'd better not use floating positioning (easier on the very short
term, a lot more complicated in mid-long term).
Michel Belleville
2009/11/12 Andrei Eftimie
> This is a CSS issue, not really related to jQuery.
>
> Do something like this in your CSS file:
>
> /* Forcing the ul to take not of its floated children. */
> #tabs ul { display: inline-block; overflow: hidden; }
> #tabs ul { display: block; }
>
> /* Floating the children */
> #tabs li { float: left; }
>
>
> 2009/11/12 AdyLim :
> > Hi there,
> >
> > I'm just starting to learn jquery and trying to implement tabs onto my
> > aspx page...The problem is that the tabs are showing up one on top of
> > anotherhow do i get the tabs to line up in a row? I'm using
> > jquery 1.2.6...all the js's (ui.core.js, ui.tabs.js) are included in
> > my masterpage.
> >
> > any help is appreciated!
> > thanks!
> >
> > my code follows:
> >
> > ASPX:
> >
> > <%@ Page Title="" Language="C#" MasterPageFile="~/Master.Master"
> > AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs"
> > Inherits="ctc3.test.WebForm1" %>
> >
> >
> > > runat="server">
> >
> > > runat="server">
> >
> >
> >
> > $(function() {
> > $("#tabs").tabs();
> > });
> >
> >
> >
> >
> >
> >
> >
> >Nunc tincidunt
> >Proin dolor
> >Aenean lacinia
> >
> >
> >
> >Proin elit arcu, rutrum commodo, vehicula tempus, commodo
> > a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris.
> > Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem.
> > Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo.
> > Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam
> > sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat.
> > Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci
> > tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
> >
> >
> >Morbi tincidunt, dui sit amet facilisis feugiat, odio
> metus
> > gravida ante, ut pharetra massa metus id nunc. Duis scelerisque
> > molestie turpis. Sed fringilla, massa eget luctus malesuada, metus
> > eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet
> > fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam.
> > Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis.
> > Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra
> > nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas
> > feugiat, tellus pellentesque pretium posuere, felis lorem euismod
> > felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et
> > purus.
> >
> >
> >Mauris eleifend est et turpis. Duis id erat.
> Suspendisse potenti.
> > Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat,
> > eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent
> > taciti sociosqu ad litora torquent per conubia nostra, per inceptos
> > himenaeos. Fusce sodales. Quisque eu urna vel enim commodo
> > pellentesque. Praesent eu risus hendrerit ligula tempus pretium.
> > Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.
> >Duis cursus. Maecenas ligula eros, blandit nec,
> pharetra at,
> > semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra
> > justo vitae neque. Praesent blandit adipiscing velit. Suspendisse
> > potenti. Donec mattis, pede vel pharetra blandit, magna ligula
> > faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque.
> > Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi
> > lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean
> > vehicula velit eu tellus interdum rutrum. Maecenas commodo.
> > Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus
> > hendrerit hendrerit.
> >
> >
> >
> >
> >
> >
> >
> >
>
>
>
> --
> Andrei Eftimie
> http://eftimie.com
> +40 758 833 281
>
> Punct
> http://designpunct.ro
>
Re: [jQuery] jquery tabs not on the same row! help please!
This is a css question rather than jQuery, though the answer goes as follow
:
1. you're using an ul with li inside
2. ul work as block elements containing li which are block elements too
3. block elements pile up on top of one another unless told otherwise
What you need is made them act as inline, the best way (a bit harder in the
short term, a lot easier in the long term) is to use inline-block
positioning, and hack IE (remember, no matter what you do in css, you'll
probably have to hack IE).
This may help :
http://homepage.ntlworld.com/spartanicus/ie_block_level_element_inline-block_hack.htm
Michel Belleville
2009/11/12 AdyLim
> Hi there,
>
> I'm just starting to learn jquery and trying to implement tabs onto my
> aspx page...The problem is that the tabs are showing up one on top of
> anotherhow do i get the tabs to line up in a row? I'm using
> jquery 1.2.6...all the js's (ui.core.js, ui.tabs.js) are included in
> my masterpage.
>
> any help is appreciated!
> thanks!
>
> my code follows:
>
> ASPX:
>
> <%@ Page Title="" Language="C#" MasterPageFile="~/Master.Master"
> AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs"
> Inherits="ctc3.test.WebForm1" %>
>
>
> runat="server">
>
> runat="server">
>
>
>
> $(function() {
> $("#tabs").tabs();
> });
>
>
>
>
>
>
>
>Nunc tincidunt
>Proin dolor
>Aenean lacinia
>
>
>
>Proin elit arcu, rutrum commodo, vehicula tempus, commodo
> a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris.
> Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem.
> Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo.
> Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam
> sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat.
> Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci
> tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
>
>
>Morbi tincidunt, dui sit amet facilisis feugiat, odio
> metus
> gravida ante, ut pharetra massa metus id nunc. Duis scelerisque
> molestie turpis. Sed fringilla, massa eget luctus malesuada, metus
> eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet
> fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam.
> Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis.
> Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra
> nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas
> feugiat, tellus pellentesque pretium posuere, felis lorem euismod
> felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et
> purus.
>
>
>Mauris eleifend est et turpis. Duis id erat. Suspendisse
> potenti.
> Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat,
> eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent
> taciti sociosqu ad litora torquent per conubia nostra, per inceptos
> himenaeos. Fusce sodales. Quisque eu urna vel enim commodo
> pellentesque. Praesent eu risus hendrerit ligula tempus pretium.
> Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.
>Duis cursus. Maecenas ligula eros, blandit nec, pharetra
> at,
> semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra
> justo vitae neque. Praesent blandit adipiscing velit. Suspendisse
> potenti. Donec mattis, pede vel pharetra blandit, magna ligula
> faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque.
> Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi
> lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean
> vehicula velit eu tellus interdum rutrum. Maecenas commodo.
> Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus
> hendrerit hendrerit.
>
>
>
>
>
>
>
>
Re: [jQuery] jquery tabs not on the same row! help please!
This is a CSS issue, not really related to jQuery.
Do something like this in your CSS file:
/* Forcing the ul to take not of its floated children. */
#tabs ul { display: inline-block; overflow: hidden; }
#tabs ul { display: block; }
/* Floating the children */
#tabs li { float: left; }
2009/11/12 AdyLim :
> Hi there,
>
> I'm just starting to learn jquery and trying to implement tabs onto my
> aspx page...The problem is that the tabs are showing up one on top of
> anotherhow do i get the tabs to line up in a row? I'm using
> jquery 1.2.6...all the js's (ui.core.js, ui.tabs.js) are included in
> my masterpage.
>
> any help is appreciated!
> thanks!
>
> my code follows:
>
> ASPX:
>
> <%@ Page Title="" Language="C#" MasterPageFile="~/Master.Master"
> AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs"
> Inherits="ctc3.test.WebForm1" %>
>
>
> runat="server">
>
> runat="server">
>
>
>
> $(function() {
> $("#tabs").tabs();
> });
>
>
>
>
>
>
>
> Nunc tincidunt
> Proin dolor
> Aenean lacinia
>
>
>
> Proin elit arcu, rutrum commodo, vehicula tempus, commodo
> a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris.
> Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem.
> Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo.
> Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam
> sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat.
> Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci
> tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
>
>
> Morbi tincidunt, dui sit amet facilisis feugiat, odio metus
> gravida ante, ut pharetra massa metus id nunc. Duis scelerisque
> molestie turpis. Sed fringilla, massa eget luctus malesuada, metus
> eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet
> fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam.
> Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis.
> Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra
> nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas
> feugiat, tellus pellentesque pretium posuere, felis lorem euismod
> felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et
> purus.
>
>
> Mauris eleifend est et turpis. Duis id erat. Suspendisse
> potenti.
> Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat,
> eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent
> taciti sociosqu ad litora torquent per conubia nostra, per inceptos
> himenaeos. Fusce sodales. Quisque eu urna vel enim commodo
> pellentesque. Praesent eu risus hendrerit ligula tempus pretium.
> Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.
> Duis cursus. Maecenas ligula eros, blandit nec, pharetra at,
> semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra
> justo vitae neque. Praesent blandit adipiscing velit. Suspendisse
> potenti. Donec mattis, pede vel pharetra blandit, magna ligula
> faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque.
> Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi
> lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean
> vehicula velit eu tellus interdum rutrum. Maecenas commodo.
> Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus
> hendrerit hendrerit.
>
>
>
>
>
>
>
>
--
Andrei Eftimie
http://eftimie.com
+40 758 833 281
Punct
http://designpunct.ro
[jQuery] jquery tabs not on the same row! help please!
Hi there,
I'm just starting to learn jquery and trying to implement tabs onto my
aspx page...The problem is that the tabs are showing up one on top of
anotherhow do i get the tabs to line up in a row? I'm using
jquery 1.2.6...all the js's (ui.core.js, ui.tabs.js) are included in
my masterpage.
any help is appreciated!
thanks!
my code follows:
ASPX:
<%@ Page Title="" Language="C#" MasterPageFile="~/Master.Master"
AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs"
Inherits="ctc3.test.WebForm1" %>
$(function() {
$("#tabs").tabs();
});
Nunc tincidunt
Proin dolor
Aenean lacinia
Proin elit arcu, rutrum commodo, vehicula tempus, commodo
a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris.
Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem.
Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo.
Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam
sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat.
Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci
tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
Morbi tincidunt, dui sit amet facilisis feugiat, odio metus
gravida ante, ut pharetra massa metus id nunc. Duis scelerisque
molestie turpis. Sed fringilla, massa eget luctus malesuada, metus
eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet
fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam.
Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis.
Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra
nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas
feugiat, tellus pellentesque pretium posuere, felis lorem euismod
felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et
purus.
Mauris eleifend est et turpis. Duis id erat. Suspendisse
potenti.
Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat,
eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Fusce sodales. Quisque eu urna vel enim commodo
pellentesque. Praesent eu risus hendrerit ligula tempus pretium.
Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.
Duis cursus. Maecenas ligula eros, blandit nec, pharetra at,
semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra
justo vitae neque. Praesent blandit adipiscing velit. Suspendisse
potenti. Donec mattis, pede vel pharetra blandit, magna ligula
faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque.
Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi
lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean
vehicula velit eu tellus interdum rutrum. Maecenas commodo.
Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus
hendrerit hendrerit.
[jQuery] jQuery Tabs -- Long content in hidden tabs
I am using jQuery tabs and when I have very long content within the tabs, my browsers scroll bar reflects the content in the tab with the most content. Example, "Tab 1" & "Tab 3" has a very long scroll bar, even though it has no content (because of Tab 2) and you can scroll down through the empty space http://psylicyde.com/misc/tabs-test Is there a way I can hide the content in Tab 2 so that my browsers scroll bar displays correctly in relation to the content in the active tab? -- View this message in context: http://old.nabble.com/jQuery-TabsLong-content-in-hidden-tabs-tp26275988s27240p26275988.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] jQuery Tabs - retain tabs on browser refresh
I have created a page that uses the jQuery UI tabs widget and an accordion. I'm creating tabs dynamically when an item is clicked in the accordion and loading a page into the tab. I have seen that there is a cookie facility for the tabs to provide the ability to retain the selected tab but I'm wondering if there is a way to retain my dynamic tabs when the browser is refreshed?
[jQuery] jquery tabs
I have created a tabbed item. There are 2 tabs on called first the other second. Now when tab1 is clicked it should show the tab1 item and the same for tab2. This is working however I have run into a little problem. Once the page loads it should show what is on the tabs which is also working fine. Now this page gets data from another source. When tab2 is clicked again it reloads the data that was already there, which I do not want to happen. Say for example if you were on tab1 reading a page and tab2 had a form to send in an email. If you were to switch to tab2 it would show the form. Now if you were to start filling in the form and click back on tab1 and then back on tab2 again it would reload that page and erase what you had already started. I do not want this to happen. Once the page loads I want the data to be static. Is this possible using the tab ui, and if so how? -- View this message in context: http://www.nabble.com/jquery-tabs-tp25828777s27240p25828777.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Jquery tabs load external file that uses a jquery plugin
I have a set of jqueryui tabs that, when clicked, load in their content dynamically. It works great, except that one of the pages uses a jquery plugin itself. This results in two issues: - The main page that holds the tabs throws an error when loaded because there is js that refers to elements that haven't loaded yet (those elements are in the external file that contains the code that relies on the plugin). - If I embed the js that triggers the plugin functionality into the external file, it is outside of the document.ready function from the main page and therefore isn't usable. Basically I am looking for a technique that allows me to ajax load an external html file into the DOM while not crapping out the main page itself because JS that is already there is expecting HTML which is not yet there. Thanks.
[jQuery] jquery tabs :: ul li a animation
Hello all,
I am using the tabs with a fade in/out effect for the "panels", it
works nice.
$(function() {
$("#tabs").tabs({
collapsible: true,fx: { opacity: 'toggle'}, selected: -1
});
});
What I would like to do is a type of animation for the tab titles (>
ul li a), so that when I click to one of those the selected one would
appear in a smoother way, fadein/out etc..
I have tried various things, adding code lines in the inline script or
trying to put something like fadeIn('slow') in the ui.tabs.js where it
adds the "selected" class, but I haven't managed to achieve
anything...
Any ideas?
Thanks
[jQuery] jquery tabs doesn't work under IE
here is my site: http://testlayout.cba.pl/ tabs don't work under IE - all div's are visible. I should add some code? I thought that jquery works under all browsers...
[jQuery] jQuery Tabs Not Working in ASP
I'm having a problem getting jQuery tabs to work. I'm using a master
file along with an aspx that includes a placeholder.
Relevant Parts of Master File:
$(function(){
// Tabs
$('#traveltabs').tabs();
});
.
.
.
On the .aspx file:
Home
Menu
test
test2
This is appearing as this and not tabbed:
http://img.photobucket.com/albums/v57/kaje103/tabs.png
Any help is appreciated!
[jQuery] Jquery Tabs moves to 2nd row when tab is clicked on Fireforx 3
Hi. Can anybody help me on this. I have 2 issues with the JQuery Tabs. 1.) I am using a JQuery tabs with 4 tabs which works well with IE6 & 7 and safari. But not perfectly in Fireforx. When it first loaded, the tabs are lined up correctly, and can see the first tab's content. When I click the 2nd, 3rd or 4th tab, the tabs moves 1 row down, and I see a small light color spacer on the first row that may have pushed down the other tabs. I can see the content of the tabs from one to the other without problem. 2.) Some of my tabs make the local reference () call while others via remote () call. I am using the class="ui-tabs-hide" to hide the div section of the local reference call so it will not show up during the load. This works, but how do I hide the UL list? While the tabs is loading, I can see the unordered list. Looking to hear from someone. Thanks, Son
[jQuery] Jquery Tabs moves to 2nd row when tab is clicked on Fireforx 3
Hi. Can anybody help me on this. I have 2 issues with the JQuery Tabs. 1.) I am using a JQuery tabs with 4 tabs which works well with IE6 & 7 and safari. But not perfectly in Fireforx. When it first loaded, the tabs are lined up correctly, and can see the first tab's content. When I click the 2nd, 3rd or 4th tab, the tabs moves 1 row down, and I see a small light color spacer on the first row that may have pushed down the other tabs. I can see the content of the tabs from one to the other without problem. 2.) Some of my tabs make the local reference () call while others via remote () call. I am using the class="ui-tabs-hide" to hide the div section of the local reference call so it will not show up during the load. This works, but how do I hide the UL list? While the tabs is loading, I can see the unordered list. Looking to hear from someone. Thanks, Son
[jQuery] jquery tabs (loading remote content and form submit)
Hello, I am incredibly new to the world of jquery. What I am trying to do is create tabs (using the tabs plug-in) that load dynamic content via AJAX (so it makes a call to a jsp). What this does is this loads a new part of a form. What I want to do is when the user clicks on a new tab, I also want to submit the data that was in the original form. I wanted to do this with one request (i.e. the request does the save, then loads up the new content). However, I have no idea how to do this. Please help!
[jQuery] jquery tabs
Hi, I am new to jquery but am quite familiar with JavaScript. What I am trying to do is create tabs (using the tabs plug-in) that load dynamic content via AJAX (so it makes a call to a jsp). What this does is this loads a new part of a form. What I want to do is when the user clicks on a new tab, I also want to submit the data that was in the original form. I wanted to do this with one request (i.e. the request does the save, then loads up the new content). I am stuck as how to do this. Any ideas? -- View this message in context: http://www.nabble.com/jquery-tabs-tp24176366s27240p24176366.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] jquery tabs (ajax tabs with a form submit)
Hello, I am incredibly new to the world of jquery. What I am trying to do is create tabs (using the tabs plug-in) that load dynamic content via AJAX (so it makes a call to a jsp). What this does is this loads a new part of a form. What I want to do is when the user clicks on a new tab, I also want to submit the data that was in the original form. I wanted to do this with one request (i.e. the request does the save, then loads up the new content). However, I have no idea how to do this. Any help would be greatly appreciated.
[jQuery] jquery tabs 3 - problems to send the hash to url
Hi, my first posting in this group. Hope someone can give me a hint.
Is it right, that there is no hash sended to the url in jquery "TABS
3" by default ? means the hash is not visible in the url? I'm new on
this stuff ...
I've read that I can send the hash with this to url.. select: function
(event,.
.tabs({ selectedClass: 'active', select: function(event, ui)
{ window.location = ui.tab.href; }, cookie: { expires: 0}, fx: fx })
this will send the hash to url, but add it like this mysite#hash AND
the worst thing is, that the tab content is not changing anymore..
Could someone help my to fix this...
Add the hash as an url-segment like this mysite/#hash
Thanks
[jQuery] Jquery Tabs problem with Tabs width
Hi All, I need to spread tabs evenly on one row and make the text wrap, when I am using fixed width for .ui-tabs-nav li the panel and nav are not aligned. I don't want the tabs to shift to the next line. PLEASE HELP!! Kobi
[jQuery] Jquery Tabs, want to remove white line under selected tab, without removing line under unselected tab
Hello,
My Jquery Tags are working perfectly. But the only problem I am now
experiencing is the selected tabs have a 1px white line underneath
them. I have matched the colour of the tab and pane, but the 1px
line underneath makes the tabs look separate from the pane. Has
anyone
encountered this issue and know of a quick fix?
Please bear in mind that I would like to keep the line under the
unselected tab...
Here is my CSS
ui-tabs .ui-tabs-hide {
display: none;
}
#tabs ul li a {
background:#ECEDFC none repeat scroll 0 0; /* first tab is
blue like
the panel */
/* background: none; */
text-indent:0;
font-size:100.01%;
line-height:1.4;
padding:0.5em 1em;
}
#tabs ul li a.tabTwo {
background:#FFCCFF none repeat scroll 0 0; /* second tab is
pink
like the second panel */
}
.ui-widget-header {
background: none;
border: none;
}
/* interaction states */
.ui-state-default, .ui-widget-content .ui-state-default { border: 1px
solid #d3d3d3; background: #e6e6e6 url(images/ui-
bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x; font-weight: normal;
color: #55; outline: none; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default
a:visited { color: #55; text-decoration: none; outline: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-
focus, .ui-widget-content .ui-state-focus { border: 1px solid #99;
background: #dadada url(images/ui-bg_glass_75_dadada_1x400.png) 50%
50% repeat-x; font-weight: normal; color: #212121; outline: none; }
.ui-state-hover a, .ui-state-hover a:hover { color: #212121; text-
decoration: none; outline: none; }
.ui-state-active, .ui-widget-content .ui-state-active { border: 1px
solid #aa; background: #ff url(images/ui-
bg_glass_65_ff_1x400.png) 50% 50% repeat-x; font-weight: normal;
color: #212121; outline: none; }
.ui-state-active a, .ui-state-active a:link, .ui-state-active
a:visited { color: #212121; outline: none; text-decoration: none; }
Martin
[jQuery] Jquery Tabs, want to remove white line under selected tab
Hello, My Jquery Tags are working perfectly. But the only problem I am now experiencing is the selected tabs have a 1px white line underneath them. I have matched the colour of the tab and pane, but the 1px line underneath makes the tabs look separate from the pane. Has anyone encountered this issue and know of a quick fix? Martin
[jQuery] Jquery Tabs shown Horizontally in Firefox but shown Vertically in IE...?
Hello, I am using Jquery Tabs in a webpage and the problem I am having is that the tabs are shown correctly in Firefox (Horizontally), but incorrectly in IE (Vertically). Does anyone know a simple solution to this problem? My html is very vanilla (see below) Tab 1 Title Tab 2 Title Tab 1 Tab 2 How can I get the tabs in IE to be shown vertically. I assumed it was a width issue, associated with the a links, but that didnt make much difference... Regards Martin Ikediashi
[jQuery] jQuery tabs problem with language
Hi, I have a problem implementing jQuery tabs using hebrew content in the li and div elements. I get the error "jQuery UI Tabs: Mismatching fragment identifier" when clicking on the tabs. Everything works perfect when the text is english but when I have hebrew in it it returns the above error. I am using jQuery 1.2.6 and UI version 1.5.3. Code: דוגמא דוג דגמא עוד דוגמא דוגמא דוגמא עברית עברית עברית עברית עברית Is there a tweak or some option to internationalize the tabs? I am using UTF-8 encoding on the page. Thanks
[jQuery] jquery tabs ajax mode
Hello. I need some help with tabs jQuery v2.7.4 of stilbuero. I want to use Ajax Mode and open the links in a given container. For example: Tab one Tab two Tab three ... Can you tell me how to do it? Sorry for my bad English. A greeting.
[jQuery] jQuery Tabs
Anyone having trouble with getting tab event callbacks to work? I'm on jQuery 1.3 and jQuery UI 1.6rc4 and none of the tab event callbacks are working.
[jQuery] Jquery Tabs issue, linking to another tab from within the same document...
I'm having a problem with Jquery's tab plugin. Specifically, I've got a page with a couple of tabs. On that page, in one of the tabs, is a link to another tab. However, the link doesn't work. Additionally, I've noticed that on my main navigation, if I'm on the page with multiple tabs, and I click a link to a specific tab, it will not load. For example: The page is page.html. With in that page are 3 tabs, #tab1, #tab2, and #tab3. If within the div for #tab1 I want to link to #tab3 by using "a href="#tab3", it doesn't work. Additionally, if I'm on page.html, and I want to load #tab3 by clicking on the main navigation that has "page.html#tab3 as the link, it doesn't work. Anyone know of a fix for this? Thanks, Ted
[jQuery] jQuery Tabs -- Are disjointed tabs possible?
Is this possible with jQuery tabs? To seperate certain tabs and push them to the right? http://www.nabble.com/file/p20924502/Untitled-1.jpg -- View this message in context: http://www.nabble.com/jQuery-TabsAre-disjointed-tabs-possible--tp20924502s27240p20924502.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] jQuery Tabs -- Are disjointed tabs possible?.
-- View this message in context: http://www.nabble.com/jQuery-TabsAre-disjointed-tabs-possible-.-tp20924475s27240p20924475.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Jquery Tabs 2 CSS styles?
Hi,
I am using JQuery tabs and I have a problem as I want to sets of tabs
on the same page, I need to specify 2 different css styles for the
tabs specifically the container width.
I read a reply by your to a similar issue in google groups but didnt
understand it as im quite new to css and JQuery.
Here is my CSS and script for the 1st set which is working
.tabs-container {
margin-top:0px;
margin-left:2px;
/* declare background color for container to avoid distorted fonts in
IE while fading */
background-color:transparent;
width:636px;
}
$(function() {
$('#container-1').tabs();
});
Test
Here is my CSS and script for the ndt set which is working
.tabs-container2 {
margin-top:0px;
margin-left:2px;
/* declare background color for container to avoid distorted fonts in
IE while fading */
background-color:transparent;
width:100px;
}
$(function() {
$('#container2').tabs();
});
Test 2
The 2nd tabs take the css defined for the 1st tabs with the contaier
width set to 646 instead of the desired 150px
f you could point out my error or give me an example of how to achieve
this i would be very grateful.
Thanking You
Mike Walshe
[jQuery] jQuery tabs - anyway to fire the script prior to onload?
I use jQuery tabs for a carousel (see link below) but the problem is the script doesn't fire until the page is fully loaded. On slower connections, or depending on if my ad network is piping through giant ads, this can make for some long, awkward moments when all the divs are revealed until the script finally fires. Is there any way to make the script fire immediately, even if the page isn't fully loaded? Thanks!
[jQuery] jQuery tabs: want ajax call to only fire once
I'm using jQuery tabs and wanted to load the non-active tab content via ajax. It looks like the default method loads the remote content each time. What I'd like to do is have it load only once when the respective tab is clicked. I haven't explored other options yet but I imagine I can write a custom json call just bypass the jQuery tabs implementation. Suggestions?
[jQuery] jQuery Tabs: CSS Bug
I am having problems with the gray line that is supposed to appear at the bottom of the tabs. Instead it is appearing at the top of the tabs as shown here: http://www.nabble.com/file/p20471209/tabs-bug.jpg I have a copy of this displaying correctly, when I add it to my site it gets tweaked. Ive DISABLED all CSS except for the jQuery tabs CSS and its still showing like this. Ive also tried to use FireBug to examine the CSS that is used and I cant find the problem. -- View this message in context: http://www.nabble.com/jQuery-Tabs%3A-CSS-Bug-tp20471209s27240p20471209.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] jquery tabs on ajaxed content
I have this markup structure:
Some Title
...some content...
more spans like this (around 100, depends on particular ajax
page I am loading, might change due to the content changes)
Some Title
...some content...
...some content...
... and so on (every 40 spans should be one tab)
What I was trying to do is following:
$("#ajaxcontentarea").load(valuetostr, function () {
$(".phone_holder:first-child").each(function(){
$(this).before("");
});
$(".phone_holder:nth-child(40n)").each(function(){
$(this).after("");
});
$(".phone_holder:last-child").each(function(){
$(this).after("");
});
});
And then I was thinking with this to start making tabs.
But it also doesn't work (it doesn't add any markup where I want it
to, only closing after 40n child, but not even all markup I am
giving it.
And also now I realize that I can't actually apply tabs after I have
this markup ready... If I would have it...
I am sorry for my english, it is not my mother tongue, but I am
keeping on learning.
Please help with direction or idea, where should I go with this.
[jQuery] jquery tabs cannot put inside the tab
Hi, I have followed the tutorial here http://apricotstudios.wordpress.com/2008/08/29/jquery-tabs-tutorial/ everything is working except one thing when i put another div inside the tab it doesn't display the div at all? is this a limitation of jquery or have i done something fundamentally wrong? <%= render :partial => 'calculator', :id=> @user.id, :object => [EMAIL PROTECTED],@lineprice}%> However if i do this <%= render :partial => 'calculator', :id=> @user.id, :object => [EMAIL PROTECTED],@lineprice}%> <%= render :partial => 'calculator', :id=> @user.id, :object => [EMAIL PROTECTED],@lineprice}%> works properly
[jQuery] jQuery tabs not working in IE. Functioning in FF.
Hi my name is Craig and I am a copywriter who has never done any previous web design (so be kind) In the past two weeks I have been trying to build a website for my girlfriend who is a photographer. I have used a plugin called stepCarousel from dynamic drive for the gallery- after some misses I finally got that to work in IE. See my example at: www.tessaholding.co.za/home.html Next I used the tabs ui plugin to make the content tabbed and to fade in and out. However I didn't want the tabbed navigation, i wanted to link from a seperate div to the tabbed content. As I haven't done any javascript, css or html before this it's been a bit of a steep learning curve. Anyway I got it to work the way I want it to in Firefox, but when I tested it in IE, Opera and Chrome. Only the stepCarousel script seems to work, the tabs donnot function and in IE's case, the positioning is completely broken. See my example at: www.tessaholding.co.za/testing/home.html The galleries at this point are all the same images, I will change them later, if I can get this all to work. Otherwise I may have to pay someone else to build this thing for me and get the credit from my girlfriend... Oh yes I also tried to get a rollover fade in header to work, but that also only works in Firefox and not in IE, see my example here: www.tessaholding.co.za/test/test.html Thanks in advance for any help, any at all!
[jQuery] Jquery Tabs inside a Tab
Hi,
I am using
http://cse-mjmcl.cse.bris.ac.uk/blog/jQueryNestedMenus/nested.html
for jquery nested tabs.
But for my requirement i need to selected default "1st sub tab" when
i click on parent tab.
$('#ddetail_tabs ul').tabs({ selected: 0});
this works only for the parent tab. not for the subtab
[jQuery] jQuery Tabs - Sync rotation with a 'loader' animation?
I'm using tabs to facilitate a carousel to rotate content on my site, and I wanted to add an animated GIF 'loader' graphic that is timed with the loader. On Firefox 3 this works perfectly - it seems to be smart enough to not start the GIF animation until the script shows each frame. With other browsers...not as much :-) The animation starts when the GIF loads and isn't tied to the script at all. Is there a way to fix this? Maybe set the GIF load on each tab to be dynamic so it loads/starts only when shown? Thanks! --Illah
[jQuery] jQuery Tabs
Does anyone have a COMPLETE set of css elements and working HTML for
the UI tabs?
I have spent the last two days trying to get the CSS to work for a
simple set of tabs and it just doesnt want to play (all my fault - I'm
useless with CSS).
My page looks like this (its basically the example page).
http://www.w3.org/1999/xhtml";>
Untitled Document
$(document).ready(function(){
$("#tabsEx1 > ul").tabs();
});
.ui-tabs-nav {
/*resets*/
font-family: Verdana, Arial, sans-serif;
float: left;
position: relative;
z-index: 1;
border-right: 1px solid #09c7f6;
bottom: -1px;
}
.ui-tabs-nav-item {
/*resets*/
float: left;
border: 1px solid #09c7f6;
border-right: none;
}
.ui-tabs-nav-item a, li {
float: left;
font-size: 10px;
font-weight: normal;
text-decoration: none;
padding: .5em 1.7em;
color: #55;
background-color : #e6e6e6;
background-repeat : repeat-x;
background-position : 0 50%;
background-image : url(flat_75.gif);
}
.ui-tabs-nav-item a:hover {
background-color : #d2dadf;
background-repeat : repeat-x;
background-position : 0 50%;
background-image : url(glass_75.gif);
outline: 0;
color: #212121;
}
.ui-tabs-selected {
border-bottom-color: #ff;
background-color:#CC;
outline: 0;
}
.ui-tabs-selected a, .ui-tabs-selected a:hover {
background-color: #ff;
background-image: url(glass_65.gif);
background-repeat:repeat-x;
background-position : 0 50%;
color: #22;
outline: 0;
}
.ui-tabs-panel {
font-family: Verdana, Arial, sans-serif;
clear:left;
border: 1px solid #09c7f6;
background: #ff;
color: #22;
padding: 1.5em 1.7em;
}
.ui-tabs-hide {
display: none;/* for accessible hiding: position: absolute; left:
-px*/;
}
.ui-tabs-nav li {
display : inline;
margin : 0;
padding : 0;
}
.ui-tabs-nav ul {
list-style : none;
margin : 0;
padding : 10px 0px 0 0px;
}
One
Two
Three
First tab is active by default
Second tab is active
Alternative ways to specify the active tab will overrule this
argument, listed in the order of their precedence:
If a fragment identifier (hash) in the URL of the page
refers to
the id of a tab panel of a tab interface the corresponding tab will
become the initial tab.
Same if you use the cookie option to save the latest
selected
tab in.
Last not least you can set the selected tab by attaching the
selected tab class
class (default: "ui-tabs-selected") to one of the
li
elements
representing a single tab.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.
/* Page End
I've use the ThemeRoller to generate the CSS and that works. When I
take just the tabs section from it and include it into my page, it all
breaks.
Please someone HELP!
Thanks in advance
P
[jQuery] jQuery Tabs
RE: My earlier post Never mind - problem(s) solved... P
[jQuery] jQuery tabs and cookies
Dear list,
I am trying to remember the last selected tab using cookies but it doesn't
seem to work no matter what I do.
My code is the following:
$(function()
{
$('#tabCont > ul').tabs({fx: {opacity: 'toggle', duration: 500, cookie:
{expires: 7, path: '/'}}});
});
Should this be enough to gain the wanted result or do I need to add custom
code which handles the automated selecting on page reload?
Many thanks
--
Isaak Malik
Web Developer
[jQuery] jquery tabs: removing old loaded content from DOM
Hi, If I have JQuery Tabs, say I select tab 2, it loads HTML, and then I select tab 3. How when selecting tab 3 can I remove from the DOM the content loaded by tab 2? - Dave
[jQuery] jQuery tabs - create 'modal' or 'force-focused' tab?
I am creating a simple application that allows uploading of images in a popup window, when completing a form. The popup returns the filename to the the parent form when closed, works great. But I'd like to move this function to a jquery tab instead. Has anyone had success, or care to share example, of doing something like this? I need to - add a new tab to a tabbed form, via a link in the first panel (easy) - automatically give focus to that tab as soon as it is created (not sure about this one) - disable other tabs and the form's submit button until specified action - file upload in this case - has completed (no idea, looking for inspiration!) I am using the jquery UI tabs, pretty much unmodified at this point. Any help, examples or suggestions greatly appreciated.
[jQuery] jquery tabs bind to tabselect
Hello, I'm trying to incorporate jquery tabs to a project at work. I
read in the documentation that you can bind to stages of the tab. I
would like to bind to the tabselect stage i.e.
$('.ui-tabs-nav').bind('tabsselect', function(event, ui) {
ui.instance // internal widget instance
ui.options // options used to intialize this widget
ui.tab // anchor element of the currently shown tab
ui.panel // element, that contains the contents of the currently
shown tab
});
My question is that I really need to be able to figure out the index
of the ui element in all tabs inside of the bind statement. Could
someone shine some light as what's the best way to do it? I looked
closely at the ui object but didn't find anything. Perhaps I just
missed it.
Help is appreciated.
Thanks!
[jQuery] jquery tabs: For ajax tabs, how do I trigger event handler when tab loads?
Hi,
I'm using Jquery tabs from here --
http://www.stilbuero.de/2006/05/13/accessible-unobtrusive-javascript-tabs-with-jquery/.
I'm using the AJAX feature so that clicking on a tab loads content
from another page on my server. How do I set up an event handler so
that when the content loads into the tab, the event handler is fired?
Thanks, - Dave
Here's my code so far ...
var tabSelected = $('#tabcontent >
ul').tabs().bind('select.ui-tabs', function(e, ui)
{
...
}).bind('show.ui-tabs', function(e, ui) {
...
}).data('selected.ui-tabs');
[jQuery] jQuery Tabs - Can I Do This?
I'm using the Tabs plugin, and have a question. My First Tab My Second Tab http://www.someothersite.com/";>My Third Tab // my content // my other content Is it possible to get that third tab to actually go to the off-site URL when clicked? I tried this, but the link was ignored, so I'm not sure if I've done something wrong, or if it's just not possible as written. Thanks in advance. Matt
[jQuery] JQuery Tabs not loading on first click
Tabs are not loading on the first click. I have a link which is like:
Headlines
when user clicks on this it calls the following function:
function loadTabs(filename) {
$('head').append('');
$.getScript(webroot + "script/ui.tabs.js");
$.get(webroot + "html/"+filename+".htm", function(data){
$("#cbody").html(""+data+"");
$("#newscontainer ul").tabs({ remote: true, fxSlide: true,
fxFade:
true, fxSpeed: 'normal' });
});
}
this function loads the required css and javascript tabs file to
display tabs; but when I click on it it gives me the following error:
$("#newscontainer ul").tabs is not a function
[Break on this error] $("#newscontainer ul").tabs({ remote: true,
fxSlide: true, fxFade: true, fxSpe...
However, it does work when I click on the link again. Any idea why
this is happening? This wasn't happening on my dev server. Here is the
link to the actual site: http://www.ranglapunjab.net/
Thanks in advance.
[jQuery] jquery Tabs plugin
hi, someone has used this plugin here?, I've looked that at Firefox it works great, but at I.explorer 6 it doen't. Someone know to fix it? I've yet posted a bug at jquery bugtrack site.
[jQuery] jQuery Tabs onmouseover
I was wondering if there was a way that I could have the jQuery tabs plugin (http://stilbuero.de/jquery/tabs/) select a tab onmouseover. I didn't find anything when I tried a few searches here or on Google. Thanks!
[jQuery] jQuery tabs and onClick
Hi all,
I'm using the amazing jQuery tabs plugin, but I'm having problem
with this code:
$('#container-1').tabs(2,{
fxFade: true,
fxSpeed: 'fast',
onClick: function() {
alert("Clicked!");
}
});
I know this code is wrong, but I want enable the event onClick only on
a specific tab. How I can do it ... if is possible?
--
Massimiliano Marini - http://www.linuxtime.it/massimilianomarini/
"It's easier to invent the future than to predict it." -- Alan Kay
[jQuery] jQuery Tabs Alignment
On my website: http://www.rose-hulman.edu/~bryantms/prizes.html (temporary host) As you can see the content on each tab is not rendering properly in IE (6 or 7). It appears to the right of the tabs themselves. Does anyone know how to resolve this issue? This renders properly in Firefox, so I'm assuming it's a CSS fix but I can't seem to find the right "hack" to solve this. I figure someone here may have some experience working with applications like this and may be able to hep. Thanks
[jQuery] jQuery Tabs Issue in Internet Explorer
If this is a duplicate post, I apologize. The website I'm working on is here: http://www.rose-hulman.edu/~bryantms/prizes.html (temporary host) I'm working with jQuery tabs found here: http://www.stilbuero.de/ As you can see in IE, it is not displaying properly. I believe this is CSS related, but don't know enough to be able to fix it. If you view it in Firefox, it works just as I want. Can anyone help me in troubleshooting this issue? I appreciate the help.
[jQuery] jQuery Tabs in IE and Firefox Issues
I'm having an issue with my site: http://www.rose-hulman.edu/~bryantms/prizes.html (temporary host) As you can see, the Tabs aren't aligning properly in IE and there is a gap in Firefox. In IE, the content appears to the right of the Tabs. In Firefox, there is a large gap underneath that I would like to eliminate. I'm still pretty new to programming and am looking for some information to make it appear how it should (http://stilbuero.de/ jquery/tabs/). I think it may be CSS related, but again, I don't know. Has anyone else run into similar problems? For reference, the only comments in the markup are JQUERY EXAMPLE and JQUERY INFO as to eliminate searching. Any help you could provide is appreciated.
[jQuery] jQuery Tabs with AJAX and href="javascript:..."
Hi,
I am using the jquery tabs with dynamically generated divs (the AJAX
variant):
link
...
When the user clicks on the tab nav, I want to display a loading image
in the content area (=the dynamically generated div). I tried to bind
an onclick function ("$('tablink').click(...)) to the a-tag, but it
doesn't work correctly: there is no defined order in which my onclick
and jquery tab's onclick are called (sometimes the loader is displayed
AFTER the content was loaded!).
My solution would be to simply use a href="javascript:loadMyContent()"
instead of the "somefile.htm" above. My JS function would then call
the loader and the AJAX reload in the correct order. Unfortunately
this does not work. Can you help me?
[jQuery] jquery tabs: creating tabs without triggering onShow action
Hi,
I noticed when I create my JQuery tabs, the "onShow" callback function
is automatically invoked.
$('#container').tabs(tab_id, {
remote: true,
fxFade: true,
fxSpeed: 'fast',
onShow: function(clicked, shown, hidden) {
clickTabAction(shown);
}
});
Is there a way to create the tabs without having the "onShow" action
invoked the first time? Note, if people start clicking on the tabs, I
would like the function called.
Thanks, - Dave
[jQuery] jquery tabs: editing tab title in place
Hi, Regarding JQuery tabs, I would like the ability to click on the text of the selected tab, and have it replaced by a text field where I can edit the text that composes the tab. Then, if I click outside the text field or hit "Enter", what was typed in the text field would be the new tab text. How can I do this? Thanks, - Dave
[jQuery] jquery tabs and IE 6
Hi, I have been using JQuery and it is great. I have a problem which is related to viewing more than anything else. When I click on the tab the text of the div appears on the right of the last tab rather under the tabs. When I use FireFox the text is displayed correctly. I have tried using a table and setting the alignment to left. Or just setting the text to left and using a . None of these worked. Any suggestions. Regards, --jh
[jQuery] jquery tabs: changing color of unselected tabs
Hi, This should be simple, I know, but I'm having problems. Using the default stylesheet that accompanies the Jquery Tabs example, how do I change the color of unselected links? I tried adding a "color:" directive to the ".tabs-nav a" class, but to no avail. The links still appear as the standard link color in both IE and Firefox. Thanks for any advice, - Dave
[jQuery] jquery tabs: adding a tab on the fly
Hi,
Regarding JQuery Tabs (http://stilbuero.de/2006/05/13/accessible-
unobtrusive-javascript-tabs-with-jquery/), is there an elegant way to
add a new tab after the page has loaded and the tabs have already been
constructed? That is, I have already made this call
$('#container').tabs(1, {
remote: true,
fxFade: true,
fxSpeed: 'fast',
onShow: function(clicked, shown, hidden) {
clickTabAction(shown, p_checkForNewTab);
}
});
but now I want to dynamically add another tab to the mix and have it
behave like the others.
Thanks, - Dave
[jQuery] jquery tabs: setting tab width on IE
Hi,
Regarding the JQuery tabs plug-in, I want to have variable width tabs,
depending on how long the tab text is. So, using the default style
sheet from the example (http://www.stilbuero.de/jquery/tabs/
jquery.tabs.css), I removed the "width: 64px;" line of the following
CSS block
.tabs-nav a {
display: block;
position: relative;
top: 1px;
z-index: 2;
padding: 6px 10px 0;
width: 64px;
height: 18px;
color: #27537a;
font-size: 12px;
font-weight: bold;
line-height: 1.2;
text-align: center;
text-decoration: none;
background: url(tab.png) no-repeat;
}
But on PC IE 7, now each tab takes up one horizontal line, each line
occupying 100% width of the viewable area. On Firefox, all the tabs
are correctly displayed on the same horizontal plane. How can I keep
the tabs on the same horizontal plane on IE while allowing for
variable length tabs?
Here is the other relevant HTML is it is useful ...
General (7)
Learning Management (2)
New Tab (0)
New Taww (0)
New Tab (0)
Thanks, - Dave
[jQuery] jquery tabs: custom html structure?
Hi, I wanted to get clarification around the "Custom HTML structure" of the JQuery tabs plug-in. Specifically, it is mentioned in the docs "If some HTML structure is required that differs from the default one" Does this mean for the tabs themselves or the container holding the content after you click on a tab? Thanks, - Dave
[jQuery] jquery tabs: How to make the tab contain both text and a small image
Hi, With regards to the plugin (http://stilbuero.de/jquery/tabs/), I want the text of one of my tabs to contain both text and a small, clickable "x" image on the same line. Is this possible? It seems if I put anything more advanced than One Two Three within my tags, I get weird exceptions. In particular, Firefox tells me uncaught exception: [Exception... "Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIXMLHttpRequest.open]" nsresult: "0x80070057 (NS_ERROR_ILLEGAL_VALUE)" location: "JS frame :: javascript: eval(__firebugTemp__); :: anonymous :: line 1" data: no] if my contains a table. Thanks for any advice, - Dave
[jQuery] jQuery Tabs: activate on rollover instead of click?
Is it possible to change Karl's tab plugin to activate the tabs and their content when rolling over a tab, instead of clicking on it? I browsed the source and didn't see anything that stuck out as a config option to change this, and I'd like to avoid changing the core.
