Question

I’m fairly new to jQuery and I’m using the script below. Basically it uses two unordered lists to create tab functionality (one for tabs, one for content). Right now when you click through the tabs, the output is switched from “display:list-item;” to “display:none;”. I’m trying to change this to “position:absolute;left:-10000px;” and “position:relative;left:0;” so that all the content gets rendered but just moves off the page rather than be hidden.

I’m having the issue you see at the bottom of the page here http://jqueryui.com/demos/tabs/ except it’s not being controlled in the CSS. It’s being controlled in the script below somehow that I’m unfamiliar with. Any help would be appreciated.

//INITIALIZATION

$.featureList(
        $(".tabs li a"),
        $(".output > li"), {
            start_item  :   0
        }
    );

//SCRIPT
         (function($) {
            $.fn.featureList = function(options) {
                var tabs    = $(this);
                var output  = $(options.output);

                new jQuery.featureList(tabs, output, options);

                return this;    
            };

            $.featureList = function(tabs, output, options) {
                function slide(nr) {
                    if (typeof nr == "undefined") {
                        nr = visible_item + 1;
                        nr = nr >= total_items ? 0 : nr;
                    }

                    tabs.removeClass('current').filter(":eq(" + nr + ")").addClass('current');

                    output.stop(true, true).filter(":visible").fadeOut();
                    output.filter(":eq(" + nr + ")").fadeIn(function() {
                        visible_item = nr;  
                    });
                }

                var options         = options || {}; 
                var total_items     = tabs.length;
                var visible_item    = options.start_item || 0;

                options.pause_on_hover      = options.pause_on_hover        || true;
                options.transition_interval = options.transition_interval   || 0;

                output.hide().eq( visible_item ).show();
                tabs.eq( visible_item ).addClass('current');

                tabs.click(function() {
                    if ($(this).hasClass('current')) {
                        return false;   
                    }

                    slide( tabs.index( this) );
                });

                if (options.transition_interval > 0) {
                    var timer = setInterval(function () {
                        slide();
                    }, options.transition_interval);

                    if (options.pause_on_hover) {
                        tabs.mouseenter(function() {
                            clearInterval( timer );

                        }).mouseleave(function() {
                            clearInterval( timer );
                            timer = setInterval(function () {
                                slide();
                            }, options.transition_interval);
                        });
                    }
                }
            };
        })(jQuery);

Answer 1

The action in that script is happening with .FadeIn and .Fadeout, which animate opacity. Fadeout applies display:none at the end of the opacity animation. Correspondingly, FadeIn only works on elements that are set to display:none. Fadein just won’t work on visibility: hidden or opacity:0. Check out the jquery documentation, it’s mostly pretty good.

So you want to substitute a css position change for those two lines of code. There are a bunch of different ways to do this, depending mostly on whether or not you want the elements to animate off the page of just leap there.

Also FYI The easiest way to share this sort of stuff for troubleshooting is to make a jsfiddle with a reduced subset of your code, just the relevant stuff, and then everybody can poke away at it until it works. 🙂