Jump to content

How to slow down the fade in/out with jQuery tabs?


PicnicTutorials

Recommended Posts

Thanks Ben for your help. I've moved on to a different test page I'd like to get working. The fade is much more on par with what I'm after. Here is the test Page...

 

One glitch I need to get fixed before I can move on to implementing this. The IE Cleartype problem! You know, when you fade anything in and out with jQuery, IE loses it's cleartype feature. It makes the text look messy. I spent all morning testing and looking around at different demos (they all suffer from it!).

 

Although, there is seemingly an easy fix for it, seen with a search like this http://www.google.com/search?hl=en&q=IE+Cleartype+jquery+fix&sourceid=navclient-ff&rlz=1B3GGGL_enUS340US340&ie=UTF-8 But, for some reason I can't seem to make any progress with it. I must be placing it in the wrong place (or something???). I would very much like to get this figured out. So any help would be MUCH appreciated. Thanks! :)

 

Even the White House site is using the fix http://www.reynoldsftw.com/2009/02/jquery-on-whitehousegov-a-closer-look/

Edited by Eric
Link to comment
Share on other sites

Looks like you need to add this code (probably in an external .js file would be easiest) right after you include the jquery file. Maybe I'm just missing it, but I'm not seeing this code anywhere in your current test page.

 

(function($) {
   $.fn.customFadeIn = function(speed, callback) {
       $(this).fadeIn(speed, function() {
           if(jQuery.browser.msie)
               $(this).get(0).style.removeAttribute('filter');
           if(callback != undefined)
               callback();
       });
   };
   $.fn.customFadeOut = function(speed, callback) {
       $(this).fadeOut(speed, function() {
           if(jQuery.browser.msie)
               $(this).get(0).style.removeAttribute('filter');
           if(callback != undefined)
               callback();
       });
   };
})(jQuery);

Link to comment
Share on other sites

Hey, yeah it's not in there now, but I did try adding that right after the jquery script. I also tried moving it and various other tuts/code on the subject. All did nothing!

 

The only one I can see working is this one. http://mattberseth.com/blog/2007/12/ie7_cleartype_dximagetransform.html and demo http://mattberseth2.com/demo/Default.aspx?Name=IE7%2c+ClearType%2c+DXImageTransforms+and+Fade+Animation+Fuzziness&Filter=All click on the second button/demo. But you'll see it works sharply at the end in IE7 - doesnt look good.

 

Maybe I'll just give IE no fade. That way it does not kill the cleartype. like here http://stilbuero.de/jquery/tabs_3/#fragment-3 But so far I can't even figure out how to cancle the fade in IE. Argg - JS...

Edited by Eric
Link to comment
Share on other sites

Well, based on the comments, perhaps that doesn't work 100%. Have you looked at

 

http://malsup.com/jquery/fadetest.html

 

as an alternate method?

 

Cool - that seems to work perfect in all IE's. Now to figure out how to incorperate that with the tabs test page. Do you know how? Is it as simple as adding that js, or is it more than that? Thanks!

Link to comment
Share on other sites

Hopefully it is simple as copying and pasting... you'll have to experiement. I'd just place the code in a separate .js file and include it right after you include the jQuery library.

 

jQuery.fn.fadeIn = function(speed, callback) { 
   return this.animate({opacity: 'show'}, speed, function() { 
       if (jQuery.browser.msie)  
           this.style.removeAttribute('filter');  
       if (jQuery.isFunction(callback)) 
           callback();  
   }); 
}; 

jQuery.fn.fadeOut = function(speed, callback) { 
   return this.animate({opacity: 'hide'}, speed, function() { 
       if (jQuery.browser.msie)  
           this.style.removeAttribute('filter');  
       if (jQuery.isFunction(callback)) 
           callback();  
   }); 
}; 

jQuery.fn.fadeTo = function(speed,to,callback) { 
   return this.animate({opacity: to}, speed, function() { 
       if (to == 1 && jQuery.browser.msie)  
           this.style.removeAttribute('filter');  
       if (jQuery.isFunction(callback)) 
           callback();  
   }); 
}; 

Link to comment
Share on other sites

No go! Maybe you could do a quick copy and paste and see what you can make of it? Just add full path links to the scripts. Thanks!

 

In return, I can turn you on to this 4 sided/1 image plug-in-play shadow I just perfected. http://www.visibilityinherit.com/projects/ams/index.php Simply add the css, the divs to your existing markup, and duplicate your wrapper width on the .shadow, and your done. One size fits all, fully transparent, no more image editing with each change.

Edited by Eric
Link to comment
Share on other sites

Thanks a lot Ben! I've got 4 different tab pages now, and they all do it to varring degrees. I even tried to reverse engined that fadetest page, that usually works for me, but no luck this time. Strange, in the source on that page, the code that they highlight is seemingly noware in sight. And the links that toggle, are seemingly no different from one another. And they have no call function in them, only a href? Obviously I'm missing something. If a light doesn't go on for you, no biggy, I can live with it, it's not that bad.

Link to comment
Share on other sites

Eric said

In return, I can turn you on to this 4 sided/1 image plug-in-play shadow I just perfected. http://www.visibilityinherit.com/projects/ams/index.php Simply add the css, the divs to your existing markup, and duplicate your wrapper width on the .shadow, and your done. One size fits all, fully transparent, no more image editing with each change.

 

Cool tool, I'll try it out

Link to comment
Share on other sites

*sigh* Nope, doesn't work for me on IE. I'll look at it again, but I'm not sure there is much I can do.

 

No, that seemed to work! Although, now that I've enabled this demo, it seems to perform the same as http://stilbuero.de/jquery/tabs_3/ basically the only difference between that link (and yours) and this link http://www.roseindia.net/ajax/jquery/fadeEffectTab.html#T-3 is that in IE7 the cleartype stays gone after you fade. In your link, and the enabled demo code below, the cleartype snaps back after the fade is complete (like in IE8). the links are full paths below if you care to see...

 

The only dif between them is the one that works in IE7 is using ui.core.js also, and $(function() {

$('#container-4 > ul').tabs({ fx: { opacity: 'toggle', duration: 'slow' } });

});

 

The one that doesn't work in IE7 is not using the core.js and it's toggle stuff looks like... $(function() {$('#div-1').tabs({ fxFade: true, fxSpeed: 'slow' });

});

 

What does ui.core.js do?

 

>







jQuery UI Tabs



<br />            /* Caution! Ensure accessibility in print and other media types... */<br />@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */<br />    .ui-tabs-hide {<br />        display: none;<br />    }<br />}<br /><br />/* Hide useless elements in print layouts... */<br />@media print {<br />    .ui-tabs-nav {<br />        display: none;<br />    }<br />}<br /><br />/* Skin */<br />.ui-tabs-nav, .ui-tabs-panel {<br />    font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif;<br />    font-size: 12px;<br />}<br />.ui-tabs-nav {<br />    list-style: none;<br />    margin: 0;<br />    padding: 0 0 0 4px;<br />}<br />.ui-tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */<br />    display: block;<br />    clear: both;<br />    content: " ";<br />}<br />.ui-tabs-nav li {<br />    float: left;<br />    margin: 0 0 0 1px;<br />    min-width: 84px; /* be nice to Opera */<br />}<br />.ui-tabs-nav a, .ui-tabs-nav a span {<br />    display: block;<br />    padding: 0 10px;<br />    background: url(tab.png) no-repeat;<br />}<br />.ui-tabs-nav a {<br />    margin: 1px 0 0; /* position: relative makes opacity fail for disabled tab in IE */<br />    padding-left: 0;<br />    color: #27537a;<br />    font-weight: bold;<br />    line-height: 1.2;<br />    text-align: center;<br />    text-decoration: none;<br />    white-space: nowrap; /* required in IE 6 */    <br />    outline: 0; /* prevent dotted border in Firefox */<br />}<br />.ui-tabs-nav .ui-tabs-selected a {<br />    position: relative;<br />    top: 1px;<br />    z-index: 2;<br />    margin-top: 0;<br />    color: #000;<br />}<br />.ui-tabs-nav a span {<br />    width: 64px; /* IE 6 treats width as min-width */<br />    min-width: 64px;<br />    height: 18px; /* IE 6 treats height as min-height */<br />    min-height: 18px;<br />    padding-top: 6px;<br />    padding-right: 0;<br />}<br />*>.ui-tabs-nav a span { /* hide from IE 6 */<br />    width: auto;<br />    height: auto;<br />}<br />.ui-tabs-nav .ui-tabs-selected a span {<br />    padding-bottom: 1px;<br />}<br />.ui-tabs-nav .ui-tabs-selected a, .ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active {<br />    background-position: 100% -150px;<br />}<br />.ui-tabs-nav a, .ui-tabs-nav .ui-tabs-disabled a:hover, .ui-tabs-nav .ui-tabs-disabled a:focus, .ui-tabs-nav .ui-tabs-disabled a:active {<br />    background-position: 100% -100px;<br />}<br />.ui-tabs-nav .ui-tabs-selected a span, .ui-tabs-nav a:hover span, .ui-tabs-nav a:focus span, .ui-tabs-nav a:active span {<br />    background-position: 0 -50px;<br />}<br />.ui-tabs-nav a span, .ui-tabs-nav .ui-tabs-disabled a:hover span, .ui-tabs-nav .ui-tabs-disabled a:focus span, .ui-tabs-nav .ui-tabs-disabled a:active span {<br />    background-position: 0 0;<br />}<br />.ui-tabs-nav .ui-tabs-selected a:link, .ui-tabs-nav .ui-tabs-selected a:visited, .ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */<br />    cursor: text;<br />}<br />.ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active,<br />.ui-tabs-nav .ui-tabs-deselectable a:hover, .ui-tabs-nav .ui-tabs-deselectable a:focus, .ui-tabs-nav .ui-tabs-deselectable a:active { /* @ Opera, we need to be explicit again here now... */<br />    cursor: pointer;<br />}<br />.ui-tabs-disabled {<br />    opacity: .4;<br />    filter: alpha(opacity=40);<br />}<br />.ui-tabs-panel {<br />    border-top: 1px solid #97a5b0;<br />    padding: 1em 8px;<br />    background: #fff; /* declare background color for container to avoid distorted fonts in IE while fading */<br />}<br />.ui-tabs-loading em {<br />    padding: 0 0 0 20px;<br />    background: url(loading.gif) no-repeat 0 50%;<br />}<br /><br />/* Additional IE specific bug fixes... */<br />* html .ui-tabs-nav { /* auto clear, @ IE 6 & IE 7 Quirks Mode */<br />    display: inline-block;<br />}<br />*:first-child+html .ui-tabs-nav  { /* @ IE 7 Standards Mode - do not group selectors, otherwise IE 6 will ignore complete rule (because of the unknown + combinator)... */<br />    display: inline-block;<br />}<br /><br /><br />/* Not required for Tabs, just to make this demo look better... */<br />            body, h1, h2 {<br />                font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif;<br />            }<br />            h1 {<br />                margin: 1em 0 1.5em;<br />                font-size: 18px;<br />            }<br />            h2 {<br />                margin: 2em 0 1.5em;<br />                font-size: 16px;<br />            }<br />            p {<br />                margin: 0;<br />                padding: 0 0 .5em;<br />                max-width: 40em;<br />            }<br />            /*pre, pre+p, p+p {<br />                margin: 1em 0 0;<br />            }<br />            code {<br />                font-family: "Courier New", Courier, monospace;<br />            }*/<br />        




<br />            $(function() {<br />                $('#container-1 > ul').tabs();<br />                $('#container-2 > ul').tabs({ selected: 1 });<br />                $('#container-3 > ul').tabs({ fx: { height: 'toggle' } });<br />                $('#container-4 > ul').tabs({ fx: { opacity: 'toggle', duration: 'slow' } });<br />                $('#container-5 > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });<br />                $('#container-6 > ul').tabs({<br />                    fx: { opacity: 'toggle', duration: 'fast' },<br />                    select: function(ui) {<br />                        alert('select');<br />                    },<br />                    show: function(ui) {<br />                        alert('show');<br />                    }<br />                });<br />                $('#container-7 > ul').tabs({ fx: [null, { height: 'show', opacity: 'show' }] });<br />                $('#container-8 > ul').tabs();<br />                $('#container-9 > ul').tabs({ disabled: [2] });<br />                $('<p><a href="#">Remove 4th tab<\/a><\/p>').prependTo('#fragment-22').find('a').click(function() {<br />                    $('#container-9 > ul').tabs('remove', 3);<br />                    return false;<br />                });<br />                $('<p><a href="#">Insert new tab at 2nd position<\/a><\/p>').prependTo('#fragment-22').find('a').click(function() {<br />                    $('#container-9 > ul').tabs('add', '#inserted-tab', 'New Tab', 1);<br />                    return false;<br />                });<br />                $('<p><a href="#">Append new tab<\/a><\/p>').prependTo('#fragment-22').find('a').click(function() {<br />                    $('#container-9 > ul').tabs('add', '#appended-tab', 'New Tab');<br />                    return false;<br />                });<br />                $('<p><a href="#">Disable 3rd tab<\/a><\/p>').prependTo('#fragment-22').find('a').click(function() {<br />                    $('#container-9 > ul').tabs('disable', 2);<br />                    return false;<br />                });<br />                $('<p><a href="#">Enable 3rd tab<\/a><\/p>').prependTo('#fragment-22').find('a').click(function() {<br />                    $('#container-9 > ul').tabs('enable', 2);<br />                    return false;<br />                });<br />                $('<p><a href="#">Select 3rd tab<\/a><\/p>').prependTo('#fragment-22').find('a').click(function() {<br />                    $('#container-9 > ul').tabs('select', 2);<br />                    return false;<br />                });<br />                $('<p><a href="#">Get selected tab<\/a><\/p>').prependTo('#fragment-22').find('a').click(function() {<br />                    alert( $('#container-9 > ul').data('selected.tabs') );<br />                    return false;<br />                });<br />                $('#container-10 > ul').tabs({ selected: null, unselect: true });<br />                $('#container-11 > ul').tabs({ event: 'mouseover' });<br />            });<br />        



jQuery UI Tabs



One
Two

Three



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.



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.




</pre>
<ul>
Download
Documentation
Rotating tabs demo
Nested tabs demo
</ul>
<br><br><h2>Start With Custom Tab</h2>
<br><br><div id="container-2">

One
Two
Three


               Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.



Second tab is active:
$('#container-2 > ul').tabs({ selected: 1 });


                   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, 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>
<br><br><h2>Slide Effect</h2>
<br><br><div id="container-3">

One
Two
Three




                   Use a slide effect to switch tabs.
                   You can optionally specify the speed for the animation with the option fxSpeed: value.
                   The value is either a string of one of the predefined speeds in jQuery (slow,
normal, fast) or an integer value specifying the duration for the animation
                   in milliseconds. If omitted it defaults to normal.

$('#container-3 > ul').tabs({ fx: { height: 'toggle' } });


               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.
               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>
<br><br><h2>Fade Effect</h2>
<br><br><div id="container-4">

One
Two
Three




                   Use a fade effect to switch tabs.
                   You can optionally specify the speed for the animation with the option fxSpeed: value.
                   The value is either a string of one of the predefined speeds in jQuery (slow,
normal, fast) or an integer value specifying the duration for the animation
                   in milliseconds. If omitted it defaults to normal.

$('#container-4 > ul').tabs({ fx: { opacity: 'toggle' } });


               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.
               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>
<br><br><h2>Slide and Fade Effect Combined</h2>
<br><br><div id="container-5">

One
Two
Three



Use a combined slide and fade effect to switch tabs:
$('#container-5 > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });


               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.
               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>
<br><br><h2>Callbacks</h2>
<br><br><div id="container-6">

One
Two
Three




                   Define callback functions that are invoked at different points in time during the tab switch process.


                   If the select callback returns false, the clicked tab won't be selected. This is useful if switching
                   tabs requires form validation before for example.

$('#container-6 > ul').tabs({
   select: function(ui) {
       alert('select');
   },
   show: function(ui) {
       alert('show');
   }
});


               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.
               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>
<br><br><h2>Custom animation</h2>
<br><br><div id="container-7">

One
Two
Three



Define your own custom animation:
$('#container-7 > ul').tabs({ fx: [null, { height: 'show', opacity: 'show' }] });


               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.
               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>
<br><br><h2>Ajax tabs</h2>
<br><br><div id="container-8">

One
Two
Three

</div>
<br><br><h2>Triggering, Enabling, Disabling, Adding and Removing Tabs</h2>
<br><div id="container-9">

One
Two
Three


$('#container-9 > ul').tabs('select', 2); // simulate click on 3rd tab
$('#container-9 > ul').tabs('enable', 2); // enable 3rd tab
$('#container-9 > ul').tabs('disable, 2); // disable 3rd tab
$('#container-9 > ul').tabs('add', '#new-tab', 'New Tab'); // add new tab at the end
$('#container-9 > ul').tabs('add', '#new-tab', 'New Tab', 1); // add new tab at 2nd position
$('#container-9 > ul').tabs('remove', 3); // remove 4th tab


                   One or more tabs can also be disabled immediatly by simply setting the disabling class for the lielement
                   representing that particular tab:

<li class="ui-tabs-disabled">…</li>

Or by using the disabled option:
$('#container-9 > ul').tabs({ disabled: [1, 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.


               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>
<br><br><h2>Start with all tabs unselected/allow toggle visibility</h2>
<br><br><div id="container-10">

One
Two
Three


$('#container-10 > ul').tabs({ selected: null }); // start with all tabs hidden
$('#container-10 > ul').tabs({ unselect: true }); // selected tab closes on click


               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.
               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>
<br><br><h2>Custom event</h2>
<br><br><div id="container-11">

One
Two
Three



Define mouseover event to switch tabs
$('#container-11 > ul').tabs({ event: 'mouseover' });


               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.
               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>
<br><br><h2>Changelog</h2>
<br><br><ul>
3.5 (jQuery UI 1.5) - simplified API, truly events based callback system, all things zero-based for consistency, removed hide callback (obsolete, wasn't used by anyone), set selected tab via selected option, set all tabs unselected via selected: null instead of another redundant option, simplified effects options - one fx option (which mirrors jQuerys default animate options) instead of a bunch of others to remember.
3.0 - release
</ul>
<br><br><h2>Tested with</h2>
<br><br><ul>
Firefox 2
Safari 2.0.4
Opera 9.24
IE 7
IE 6
</ul>
<br

Edited by Eric
Link to comment
Share on other sites

No! I take that back. If you enlarge some text and make it 28px like a heading, then you can really see how yours works. All my demos just destroy the text on fade and return. Your demo does not. It changes slightly, but keeps the text clear while it's doing it. So how do I add that to a tabs setup Ben???

Edited by Eric
Link to comment
Share on other sites

OK. I was hoping to remove that glitch where the antiailiasing on the text (cleartype) gets removed when the text is faded, but I did some research and apparently that isn't possible. In order to get the same effect as in my setup, add this to your code after you have included the jQuery library (I've placed it within

 

        <br />        (function($) { <br />            // IE fixes<br />            jQuery.fn.fadeIn = function(speed, callback) { <br />                return this.animate({opacity: 'show'}, speed, function() { <br />                    if (jQuery.browser.msie)  <br />                        this.style.removeAttribute('filter');  <br />                    if (jQuery.isFunction(callback)) <br />                        callback();  <br />                }); <br />            }; <br />             <br />            jQuery.fn.fadeOut = function(speed, callback) { <br />                return this.animate({opacity: 'hide'}, speed, function() { <br />                    if (jQuery.browser.msie)  <br />                        this.style.removeAttribute('filter');  <br />                    if (jQuery.isFunction(callback)) <br />                        callback();  <br />                }); <br />            }; <br />             <br />            jQuery.fn.fadeTo = function(speed,to,callback) { <br />                return this.animate({opacity: to}, speed, function() { <br />                    if (to == 1 && jQuery.browser.msie)  <br />                        this.style.removeAttribute('filter');  <br />                    if (jQuery.isFunction(callback)) <br />                        callback();  <br />                }); <br />            };<br />        })(jQuery);<br />        

Link to comment
Share on other sites

Awesome - thanks a lot Ben! I need to call that from the anchors right? So do I need to include the class hide/show in the anchor?

 

Although, seems I was misguided again. The large text I was testing in my test pages was fubaring because I didn't put a background color on the fading container. I saw your comments in there about it.

Link to comment
Share on other sites

Awesome - thanks a lot Ben! I need to call that from the anchors right? So do I need to include the class hide/show in the anchor?

 

The only code that is required is listed above -- the rest of the code in my example was simply to make the fading in/out functional. The code above overrides jQueries default fadeIn/fadeOut/fadeTo methods. Just include that code just after you include the jquery library, and it will "fix" your issues whenever you use .fadeIn, .fadeOut and .fadeTo.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...