PicnicTutorials Posted September 25, 2009 Report Posted September 25, 2009 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! Quote
falkencreative Posted September 25, 2009 Report Posted September 25, 2009 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. Quote
PicnicTutorials Posted September 25, 2009 Author Report Posted September 25, 2009 (edited) 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 September 25, 2009 by Eric Quote
falkencreative Posted September 25, 2009 Report Posted September 25, 2009 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); Quote
PicnicTutorials Posted September 25, 2009 Author Report Posted September 25, 2009 (edited) 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 September 25, 2009 by Eric Quote
falkencreative Posted September 25, 2009 Report Posted September 25, 2009 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? Quote
PicnicTutorials Posted September 25, 2009 Author Report Posted September 25, 2009 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! Quote
falkencreative Posted September 25, 2009 Report Posted September 25, 2009 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(); }); }; Quote
PicnicTutorials Posted September 25, 2009 Author Report Posted September 25, 2009 (edited) 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 September 25, 2009 by Eric Quote
falkencreative Posted September 25, 2009 Report Posted September 25, 2009 I'll take a look later today and see if I can get something working. Quote
PicnicTutorials Posted September 25, 2009 Author Report Posted September 25, 2009 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. Quote
falkencreative Posted September 26, 2009 Report Posted September 26, 2009 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. Quote
falkencreative Posted September 26, 2009 Report Posted September 26, 2009 *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. Quote
virtual Posted September 26, 2009 Report Posted September 26, 2009 Eric saidIn 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 Quote
PicnicTutorials Posted September 26, 2009 Author Report Posted September 26, 2009 (edited) *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 September 26, 2009 by Eric Quote
PicnicTutorials Posted September 26, 2009 Author Report Posted September 26, 2009 (edited) 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 September 26, 2009 by Eric Quote
PicnicTutorials Posted September 26, 2009 Author Report Posted September 26, 2009 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...? Quote
falkencreative Posted September 26, 2009 Report Posted September 26, 2009 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 /> Quote
PicnicTutorials Posted September 26, 2009 Author Report Posted September 26, 2009 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. Quote
falkencreative Posted September 26, 2009 Report Posted September 26, 2009 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. Quote
Recommended Posts
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.