You are not logged in. Please login or register.
Hi, I just released our new video tutorial course on Flash CS4.
Stefan
How do I slow down the fade in/out with jQuery tabs? I would like the fade out, and the fade in, to both slow down and be equal in duration. Here is my test page. To a keen eye, It's probably a simply couple of added lines. Can you tell me? Thanks!
Looks like it is just using hide() and fadeIn() for the effects. You can specify the length of the animation for both. Examples:
http://docs.jquery.com/Effects/hide#speedcallback
http://docs.jquery.com/Effects/fadeIn
For example:
$("p").hide(2000);That would hide the "p" element within 2000 milliseconds.
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& … p;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/jque … oser-look/
Last edited by Eric (2009-09-25 08:35:18)
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);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 … sform.html and demo http://mattberseth2.com/demo/Default.as … 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...
Last edited by Eric (2009-09-25 10:14:45)
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?
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!
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();
});
}; 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.
Last edited by Eric (2009-09-25 12:45:51)
I'll take a look later today and see if I can get something working.
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.
Take a look at this example, and see if it works for you:
http://www.falkencreative.com/forum/fade-test.html
Unfortunately I'm not at a computer that has easy access to IE at the moment, so I can't test it myself, but I'll do that when I get back to my regular computer.
*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.
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
*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/fa … b.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?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>jQuery UI Tabs</title>
<style type="text/css" media="screen, projection">
/* Caution! Ensure accessibility in print and other media types... */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
.ui-tabs-hide {
display: none;
}
}
/* Hide useless elements in print layouts... */
@media print {
.ui-tabs-nav {
display: none;
}
}
/* Skin */
.ui-tabs-nav, .ui-tabs-panel {
font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif;
font-size: 12px;
}
.ui-tabs-nav {
list-style: none;
margin: 0;
padding: 0 0 0 4px;
}
.ui-tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
display: block;
clear: both;
content: " ";
}
.ui-tabs-nav li {
float: left;
margin: 0 0 0 1px;
min-width: 84px; /* be nice to Opera */
}
.ui-tabs-nav a, .ui-tabs-nav a span {
display: block;
padding: 0 10px;
background: url(tab.png) no-repeat;
}
.ui-tabs-nav a {
margin: 1px 0 0; /* position: relative makes opacity fail for disabled tab in IE */
padding-left: 0;
color: #27537a;
font-weight: bold;
line-height: 1.2;
text-align: center;
text-decoration: none;
white-space: nowrap; /* required in IE 6 */
outline: 0; /* prevent dotted border in Firefox */
}
.ui-tabs-nav .ui-tabs-selected a {
position: relative;
top: 1px;
z-index: 2;
margin-top: 0;
color: #000;
}
.ui-tabs-nav a span {
width: 64px; /* IE 6 treats width as min-width */
min-width: 64px;
height: 18px; /* IE 6 treats height as min-height */
min-height: 18px;
padding-top: 6px;
padding-right: 0;
}
*>.ui-tabs-nav a span { /* hide from IE 6 */
width: auto;
height: auto;
}
.ui-tabs-nav .ui-tabs-selected a span {
padding-bottom: 1px;
}
.ui-tabs-nav .ui-tabs-selected a, .ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active {
background-position: 100% -150px;
}
.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 {
background-position: 100% -100px;
}
.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 {
background-position: 0 -50px;
}
.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 {
background-position: 0 0;
}
.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... */
cursor: text;
}
.ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active,
.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... */
cursor: pointer;
}
.ui-tabs-disabled {
opacity: .4;
filter: alpha(opacity=40);
}
.ui-tabs-panel {
border-top: 1px solid #97a5b0;
padding: 1em 8px;
background: #fff; /* declare background color for container to avoid distorted fonts in IE while fading */
}
.ui-tabs-loading em {
padding: 0 0 0 20px;
background: url(loading.gif) no-repeat 0 50%;
}
/* Additional IE specific bug fixes... */
* html .ui-tabs-nav { /* auto clear, @ IE 6 & IE 7 Quirks Mode */
display: inline-block;
}
*: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)... */
display: inline-block;
}
/* Not required for Tabs, just to make this demo look better... */
body, h1, h2 {
font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif;
}
h1 {
margin: 1em 0 1.5em;
font-size: 18px;
}
h2 {
margin: 2em 0 1.5em;
font-size: 16px;
}
p {
margin: 0;
padding: 0 0 .5em;
max-width: 40em;
}
/*pre, pre+p, p+p {
margin: 1em 0 0;
}
code {
font-family: "Courier New", Courier, monospace;
}*/
</style>
<script src="http://stilbuero.de/jquery/tabs_3/jquery-1.2.6.js" type="text/javascript"></script>
<script src="http://stilbuero.de/jquery/tabs_3/ui.core.js" type="text/javascript"></script>
<script src="http://stilbuero.de/jquery/tabs_3/ui.tabs.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#container-1 > ul').tabs();
$('#container-2 > ul').tabs({ selected: 1 });
$('#container-3 > ul').tabs({ fx: { height: 'toggle' } });
$('#container-4 > ul').tabs({ fx: { opacity: 'toggle', duration: 'slow' } });
$('#container-5 > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });
$('#container-6 > ul').tabs({
fx: { opacity: 'toggle', duration: 'fast' },
select: function(ui) {
alert('select');
},
show: function(ui) {
alert('show');
}
});
$('#container-7 > ul').tabs({ fx: [null, { height: 'show', opacity: 'show' }] });
$('#container-8 > ul').tabs();
$('#container-9 > ul').tabs({ disabled: [2] });
$('<p><a href="#">Remove 4th tab<\/a><\/p>').prependTo('#fragment-22').find('a').click(function() {
$('#container-9 > ul').tabs('remove', 3);
return false;
});
$('<p><a href="#">Insert new tab at 2nd position<\/a><\/p>').prependTo('#fragment-22').find('a').click(function() {
$('#container-9 > ul').tabs('add', '#inserted-tab', 'New Tab', 1);
return false;
});
$('<p><a href="#">Append new tab<\/a><\/p>').prependTo('#fragment-22').find('a').click(function() {
$('#container-9 > ul').tabs('add', '#appended-tab', 'New Tab');
return false;
});
$('<p><a href="#">Disable 3rd tab<\/a><\/p>').prependTo('#fragment-22').find('a').click(function() {
$('#container-9 > ul').tabs('disable', 2);
return false;
});
$('<p><a href="#">Enable 3rd tab<\/a><\/p>').prependTo('#fragment-22').find('a').click(function() {
$('#container-9 > ul').tabs('enable', 2);
return false;
});
$('<p><a href="#">Select 3rd tab<\/a><\/p>').prependTo('#fragment-22').find('a').click(function() {
$('#container-9 > ul').tabs('select', 2);
return false;
});
$('<p><a href="#">Get selected tab<\/a><\/p>').prependTo('#fragment-22').find('a').click(function() {
alert( $('#container-9 > ul').data('selected.tabs') );
return false;
});
$('#container-10 > ul').tabs({ selected: null, unselect: true });
$('#container-11 > ul').tabs({ event: 'mouseover' });
});
</script>
</head>
<body>
<h1><a href="http://ui.jquery.com">jQuery UI</a> Tabs</h1>
<div id="container-1">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div id="fragment-1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div id="fragment-2">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div id="fragment-3">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
<ul>
<li><strong><a href="http://ui.jquery.com/download">Download</a></strong></li>
<li><strong><a href="http://docs.jquery.com/UI/Tabs">Documentation</a></strong></li>
<li><strong><a href="rotate.html">Rotating tabs demo</a></strong></li>
<li><strong><a href="nested.html">Nested tabs demo</a></strong></li>
</ul>
<h2>Start With Custom Tab</h2>
<div id="container-2">
<ul>
<li><a href="#fragment-4"><span>One</span></a></li>
<li><a href="#fragment-5"><span>Two</span></a></li>
<li><a href="#fragment-6"><span>Three</span></a></li>
</ul>
<div id="fragment-4">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-5">
<p>Second tab is active:</p>
<pre><code>$('#container-2 > ul').tabs({ selected: 1 });</code></pre>
<p>
Alternative ways to specify the active tab will overrule this argument, listed in the order of their precedence:</p>
<ol>
<li>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.</li>
<li>Same if you use the cookie option to save the latest selected tab in.</li>
<li>Last not least you can set the selected tab by attaching the selected tab class
class (default: "ui-tabs-selected") to one of the <code>li</code> elements
representing a single tab.</li>
</ol>
</div>
<div id="fragment-6">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
<h2>Slide Effect</h2>
<div id="container-3">
<ul>
<li><a href="#fragment-7"><span>One</span></a></li>
<li><a href="#fragment-8"><span>Two</span></a></li>
<li><a href="#fragment-9"><span>Three</span></a></li>
</ul>
<div id="fragment-7">
<p>
Use a slide effect to switch tabs.
You can optionally specify the speed for the animation with the option <code>fxSpeed: value</code>.
The value is either a string of one of the predefined speeds in jQuery (<code>slow</code>,
<code>normal</code>, <code>fast</code>) or an integer value specifying the duration for the animation
in milliseconds. If omitted it defaults to <code>normal</code>.
</p>
<pre><code>$('#container-3 > ul').tabs({ fx: { height: 'toggle' } });</code></pre>
</div>
<div id="fragment-8">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-9">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
<h2>Fade Effect</h2>
<div id="container-4">
<ul>
<li><a href="#fragment-10"><span>One</span></a></li>
<li><a href="#fragment-11"><span>Two</span></a></li>
<li><a href="#fragment-12"><span>Three</span></a></li>
</ul>
<div id="fragment-10">
<p>
Use a fade effect to switch tabs.
You can optionally specify the speed for the animation with the option <code>fxSpeed: value</code>.
The value is either a string of one of the predefined speeds in jQuery (<code>slow</code>,
<code>normal</code>, <code>fast</code>) or an integer value specifying the duration for the animation
in milliseconds. If omitted it defaults to <code>normal</code>.
</p>
<pre><code>$('#container-4 > ul').tabs({ fx: { opacity: 'toggle' } });</code></pre>
</div>
<div id="fragment-11">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-12">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
<h2>Slide and Fade Effect Combined</h2>
<div id="container-5">
<ul>
<li><a href="#fragment-13"><span>One</span></a></li>
<li><a href="#fragment-14"><span>Two</span></a></li>
<li><a href="#fragment-15"><span>Three</span></a></li>
</ul>
<div id="fragment-13">
<p>Use a combined slide and fade effect to switch tabs:</p>
<pre><code>$('#container-5 > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });</code></pre>
</div>
<div id="fragment-14">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-15">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
<h2>Callbacks</h2>
<div id="container-6">
<ul>
<li><a href="#fragment-16"><span>One</span></a></li>
<li><a href="#fragment-17"><span>Two</span></a></li>
<li><a href="#fragment-18"><span>Three</span></a></li>
</ul>
<div id="fragment-16">
<p>
Define callback functions that are invoked at different points in time during the tab switch process.
<br>
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.
</p>
<pre><code>$('#container-6 > ul').tabs({
select: function(ui) {
alert('select');
},
show: function(ui) {
alert('show');
}
});</code></pre>
</div>
<div id="fragment-17">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-18">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
<h2>Custom animation</h2>
<div id="container-7">
<ul>
<li><a href="#fragment-19"><span>One</span></a></li>
<li><a href="#fragment-20"><span>Two</span></a></li>
<li><a href="#fragment-21"><span>Three</span></a></li>
</ul>
<div id="fragment-19">
<p>Define your own custom animation:</p>
<pre><code>$('#container-7 > ul').tabs({ fx: [null, { height: 'show', opacity: 'show' }] });</code></pre>
</div>
<div id="fragment-20">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-21">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
<h2>Ajax tabs</h2>
<div id="container-8">
<ul>
<li><a href="ahah_1.html" title="Tab one"><span>One</span></a></li>
<li><a href="ahah_2.html" title="Tab two"><span>Two</span></a></li>
<li><a href="ahah_3.html"><span>Three</span></a></li>
</ul>
</div>
<h2>Triggering, Enabling, Disabling, Adding and Removing Tabs</h2>
<div id="container-9">
<ul>
<li><a href="#fragment-22"><span>One</span></a></li>
<li><a href="#fragment-23"><span>Two</span></a></li>
<li><a href="#fragment-24"><span>Three</span></a></li>
</ul>
<div id="fragment-22">
<pre><code>$('#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</code></pre>
<p>
One or more tabs can also be disabled immediatly by simply setting the disabling class for the <code class="html">li</code> element
representing that particular tab:
</p>
<pre><code class="html"><li class="ui-tabs-disabled">…</li></code></pre>
<p>Or by using the <code>disabled</code> option:</p>
<pre><code class="javascript">$('#container-9 > ul').tabs({ disabled: [1, 2] });</code></pre>
</div>
<div id="fragment-23">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-24">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
<h2>Start with all tabs unselected/allow toggle visibility</h2>
<div id="container-10">
<ul>
<li><a href="#fragment-25"><span>One</span></a></li>
<li><a href="#fragment-26"><span>Two</span></a></li>
<li><a href="#fragment-27"><span>Three</span></a></li>
</ul>
<div id="fragment-25">
<pre><code>$('#container-10 > ul').tabs({ selected: null }); // start with all tabs hidden
$('#container-10 > ul').tabs({ unselect: true }); // selected tab closes on click</code></pre>
</div>
<div id="fragment-26">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-27">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
<h2>Custom event</h2>
<div id="container-11">
<ul>
<li><a href="#fragment-28"><span>One</span></a></li>
<li><a href="#fragment-29"><span>Two</span></a></li>
<li><a href="#fragment-30"><span>Three</span></a></li>
</ul>
<div id="fragment-28">
<p>Define mouseover event to switch tabs</p>
<pre><code>$('#container-11 > ul').tabs({ event: 'mouseover' });</code></pre>
</div>
<div id="fragment-29">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-30">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
<h2>Changelog</h2>
<ul>
<li>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 <code>selected</code> option, set all tabs unselected via <code>selected: null</code> instead of another redundant option, simplified effects options - one <code>fx</code> option (which mirrors jQuerys default animate options) instead of a bunch of others to remember.</li>
<li>3.0 - release</li>
</ul>
<h2>Tested with</h2>
<ul>
<li>Firefox 2</li>
<li>Safari 2.0.4</li>
<li>Opera 9.24</li>
<li><abbr title="Internet Explorer">IE</abbr> 7</li>
<li><abbr title="Internet Explorer">IE</abbr> 6</li>
</ul>
</body>
</html>Last edited by Eric (2009-09-26 07:52:18)
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???
Last edited by Eric (2009-09-26 08:24:27)
Here is a perfect example of what I am seeing with the enlarged text. Try demo http://flowplayer.org/tools/demos/tabs/skins.html yours does not appear to suffer from this. But how to add it...?
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 <script> blocks for readability, but this probably should go in an external file?):
<script type="text/javascript">
(function($) {
// IE fixes
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();
});
};
})(jQuery);
</script>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.
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.
Posts [ 20 ] - Views [ 752 ]
Copyright © 1996-2009 Killersites.com
[ Generated in 0.084 seconds, 9 queries executed ]