Using tabs with opacity and AJAX content

[kevinm-3]

Hi,

I am having an issue where if I use  "fx: { opacity: 'toggle' } "
with tabs loading content via AJAX that I get a flicker.

The flicker is the content load before the opacity effect occurs.

I have been trying to figure out how to eliminate that. If anyone has
suggestions that would great

Some code snippet

$("#staticPortfolios > ul").tabs( { fx: {opacity: 'toggle' } });
<ul >
        <li><a href="myfile.html" title="portfolioDetails"
target="staticInfo"></li>
</ul>


<div id="staticPortfolios" >
    <div class="ui-tabs-panel">
    <div id="portfolioDetails"></div>
    </div>

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui-unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

[Ca-Phun Ung]

Kevin M wrote:
> The flicker is the content load before the opacity effect occurs.
>
>
>  
It might be worth using CSS to set the initial opacity.

Ca Phun Ung

Web: http://yelotofu.com


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui-unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

[Klaus Hartl-4]

The problem is maybe that the div of class "ui-tabs-panel" should be
the same as the target where the content is loaded into, which here is
the nested div with the id "portfolioDetails".

--Klaus


On Jul 21, 6:16 pm, Kevin M <sonicD...@...> wrote:

> Hi,
>
> I am having an issue where if I use  "fx: { opacity: 'toggle' } "
> with tabs loading content via AJAX that I get a flicker.
>
> The flicker is the content load before the opacity effect occurs.
>
> I have been trying to figure out how to eliminate that. If anyone has
> suggestions that would great
>
> Some code snippet
>
> $("#staticPortfolios > ul").tabs( { fx: {opacity: 'toggle' } });
> <ul >
>         <li><a href="myfile.html" title="portfolioDetails"
> target="staticInfo"></li>
> </ul>
>
> <div id="staticPortfolios" >
>     <div class="ui-tabs-panel">
>         <div id="portfolioDetails"></div>
>     </div>

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui-unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

[kevinm-3]

Hmm, Klaus and Ca both interesting solutions. Going to try both.  My
original code was based on an example but easy enough to change.
Opacity idea also interesting. Gonna try both now. will report back.

On Jul 22, 3:28 am, Ca Phun Ung <cap...@...> wrote:
> Kevin M wrote:
> > The flicker is the content load before the opacity effect occurs.
>
> It might be worth using CSS to set the initial opacity.
>
> Ca Phun Ung
>
> Web:http://yelotofu.com

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui-unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

[kevinm-3]

Ok neither of those techniques really solve the issue. But after
looking at the problem realize what the issue is, is that the inbuilt
AJAX functionality happens first, then the fx: opacity occcurs.And in
my case the content being loaded is so small its instantaneous.

This is where my jQuery stills are lacking. How to I delay the AJAX
loading to occur after the start of the the fade.

Should I just remove the fx: option and call a hide, then call ajax
load , then show on complete.  Not totally sure how to do, as still
learning.

Thanks
K

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui-unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

[Ca-Phun Ung]

Kevin M wrote:
> Should I just remove the fx: option and call a hide, then call ajax
> load , then show on complete.  Not totally sure how to do, as still
> learning.
>  

That's certainly possible. There are several Ajax events [1] which could
also help. You could use ajaxStart() to hide the ajax content initially
then show it inside an ajaxComplete() once loaded.

[1] http://docs.jquery.com/Ajax

Ca Phun Ung

Web: http://yelotofu.com


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@...
To unsubscribe from this group, send email to jquery-ui-unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

[Charles Wiese]

Kevin-

Did you ever solve this?  I am using Tabs 3.0 with Ajax (remote, no caching) ...just like the examples....and the fx: opacity and height toggle seesm to happen twice (flickers).

It is especially bad when using "nested" tab.  Time to div into Kluas's code I guess?

Thanks, Chuck

Ca-Phun Ung wrote:

Kevin M wrote:
> Should I just remove the fx: option and call a hide, then call ajax
> load , then show on complete.  Not totally sure how to do, as still
> learning.
>  

That's certainly possible. There are several Ajax events [1] which could
also help. You could use ajaxStart() to hide the ajax content initially
then show it inside an ajaxComplete() once loaded.

[1] http://docs.jquery.com/Ajax

Ca Phun Ung

Web: http://yelotofu.com


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to [e-mail]
To unsubscribe from this group, send email to [e-mail]
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

[Charles Wiese]

Also "toggle" is worse...this works okay:

fx: [null, { height: 'show', opacity: 'show' }]

sonicDivx wrote:

Hi,

I am having an issue where if I use  "fx: { opacity: 'toggle' } "
with tabs loading content via AJAX that I get a flicker.

The flicker is the content load before the opacity effect occurs.

I have been trying to figure out how to eliminate that. If anyone has
suggestions that would great

Some code snippet

$("#staticPortfolios > ul").tabs( { fx: {opacity: 'toggle' } });
<ul >
        <li></li>
</ul>


<div id="staticPortfolios" >
    <div class="ui-tabs-panel">
    <div id="portfolioDetails"></div>
    </div>

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to [e-mail]
To unsubscribe from this group, send email to [e-mail]
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---