[jQuery] Re: jQuery UI Tabs Flash
I searched the archives, but I couldn't find an answer. For some
reason the tabs, when initialized flashes, three times. Any idea why?
http://www.chris-gwen.com/
I fixed it. I need this at the end of document.ready()
$('body').append('style type=text/css.ui-tabs-hide {display:none}/
style');
[jQuery] Re: jQuery UI Tabs Flash
Hi,
I am trying to slove a problem. If someone has idea to solve the
problem, I would appreciate.
I uses the fade in-out effect using the following.
$(function() {
$('#tabs ul').tabs({ fx: { opacity: 'toggle', duration: 'fast' } })
});
The effect works fine but the content in the tabs flashes because in
the CSS, instead of 'display:none', I need to use 'position:
absolute;left: -1px;' to hide the hidden tab's content
.
The reason I need to use 'position: absolute;left: -1px;' is that
I need to use Sifr on the hidden tab and If I use 'display:none', Sifr
stops working.
If I don't use fade effect, the conten doesn't falsh and Sifr also
works but ideally, I would like to use fade effect as well as Sifr.
Is there any way to make both Sifr and fade effect work together? or
Do I need to choose whether Sifr or Fade effect?
Sorry for bad english but if someone knows how to solve the problem, I
really appreciate.
Thanks
Slake424
On Feb 2, 8:54 pm, Chris cpot...@siolon.com wrote:
Thanks Klaus. I think what it is is the CSS necessary to make the
scrollbar plugin work.
.ui-tabs-hide {
position: absolute;
left: -1px;
display: block;
}
If it's set to display: none; then it doesn't flash but the content
doesn't show. I did add the class beforehand to the second tabbed
area.
I've updated it athttp://chris-gwen.com.
I know now it's the scrollbar plugin, but I don't know how to get them
to play together.
[jQuery] Re: jQuery UI Tabs Flash
The reason I need to use 'position: absolute;left: -1px;' is that I need to use Sifr on the hidden tab and If I use 'display:none', Sifr stops working. This is exactly my situation also. Please share if you've found a fix.
[jQuery] Re: jQuery UI Tabs Flash
Thanks Klaus. I think what it is is the CSS necessary to make the
scrollbar plugin work.
.ui-tabs-hide {
position: absolute;
left: -1px;
display: block;
}
If it's set to display: none; then it doesn't flash but the content
doesn't show. I did add the class beforehand to the second tabbed
area.
I've updated it athttp://chris-gwen.com.
I know now it's the scrollbar plugin, but I don't know how to get them
to play together.
[jQuery] Re: jQuery UI Tabs Flash
On Feb 2, 2:09 am, Klaus Hartl klaus.ha...@googlemail.com wrote:
Add the class ui-tabs-hide to your panels beforehand. I will not
encourage bad practice (usage of inline styles).
Note to self: Make FAQ for this.
--Klaus
Thanks Klaus. I think what it is is the CSS necessary to make the
scrollbar plugin work.
.ui-tabs-hide {
position: absolute;
left: -1px;
display: block;
}
If it's set to display: none; then it doesn't flash but the content
doesn't show. I did add the class beforehand to the second tabbed
area.
I've updated it at http://chris-gwen.com.
[jQuery] Re: jQuery UI Tabs Flash
On Jan 12, 9:29 am, tlphipps tra...@brandyandtravis.com wrote: This is because of how browsers work. What's happening is that the browser is downloading all the HTML and beginning to display it. Then when the DOM is 'ready', jquery is running the code you've specified which creates the tab interface. To avoid this issue you have to use CSS to 'hide' the content that you don't want displayed on page load. So if you have 3 tabs, you would use standard CSS to 'hide' (display: none) the 2nd and 3rd tabs so the browser would never display them to begin with. Then when the tabs load, jquery takes over showing/hiding the content. I tried hiding the content, but then it doesn't show. I'm a little confused on what's going on.
[jQuery] Re: jQuery UI Tabs Flash
Add the class ui-tabs-hide to your panels beforehand. I will not encourage bad practice (usage of inline styles). Note to self: Make FAQ for this. --Klaus On 2 Feb., 05:38, Chris cpot...@siolon.com wrote: On Jan 12, 9:29 am, tlphipps tra...@brandyandtravis.com wrote: This is because of how browsers work. What's happening is that the browser is downloading all the HTML and beginning to display it. Then when the DOM is 'ready', jquery is running the code you've specified which creates the tab interface. To avoid this issue you have to use CSS to 'hide' the content that you don't want displayed on page load. So if you have 3 tabs, you would use standard CSS to 'hide' (display: none) the 2nd and 3rd tabs so the browser would never display them to begin with. Then when the tabs load, jquery takes over showing/hiding the content. I tried hiding the content, but then it doesn't show. I'm a little confused on what's going on.
[jQuery] Re: jQuery UI Tabs Flash
This is because of how browsers work. What's happening is that the browser is downloading all the HTML and beginning to display it. Then when the DOM is 'ready', jquery is running the code you've specified which creates the tab interface. To avoid this issue you have to use CSS to 'hide' the content that you don't want displayed on page load. So if you have 3 tabs, you would use standard CSS to 'hide' (display: none) the 2nd and 3rd tabs so the browser would never display them to begin with. Then when the tabs load, jquery takes over showing/hiding the content. On Jan 11, 10:24 pm, Chris cpot...@siolon.com wrote: On Jan 11, 12:02 pm, Chris cpot...@siolon.com wrote: I searched the archives, but I couldn't find an answer. For some reason the tabs, when initialized flashes, three times. Any idea why? http://www.chris-gwen.com/ No ideas?
[jQuery] Re: jQuery UI Tabs Flash
On Jan 11, 12:02 pm, Chris cpot...@siolon.com wrote: I searched the archives, but I couldn't find an answer. For some reason the tabs, when initialized flashes, three times. Any idea why? http://www.chris-gwen.com/ No ideas?
