When document.ready doesn't mean document.ready

I'm doing several things with the functions below in jQuery Tabs UI - changing images according to a data attr, pulling a random quote and collapsing some divs - all on a tab change in jQuery UI Tabs. And I'm also changing the layout via CSS, in the first function.

Problem is that document ready doesn't really work. If I go back to the 0 tab from another page using the #hash URL, the first bind event gets skipped and the CSS doesn't change.

Is there a way to make document.ready really work? And make the CSS changes consistently?

$(document).ready(function () {

    $('#tabs').bind('tabsshow', function (event, ui) {

    var $tabs = $("#tabs").tabs();

        $('#wrapper').css('width', '586px'); //show certain CSS for the 0 tab
        $('#wrapper').css('margin', '80px auto');
        $('#col2, #footer, #headermain h1, .hide').css('display', 'none');

        if (ui.index != 0) {
            $('#wrapper').css('width', '875px'); //show certain CSS for all other tabs
            $('#wrapper').css('margin', '15px auto');
            $('#col2, #footer, #headermain h1, .hide').css('display', 'block');

        }
    });

    $(function () { //tab change fx
        $('#tabs').tabs({
            fx: {
                opacity: 'toggle'
            },


            select: function (event, ui) {
                $(".entry-content").hide('fast'); //collapse any open divs in other tabs on tab change
                $(".bkcontent").hide('fast');


                $('div#quotescontainer').load('quotes.html', function () {
                    var $quotes = $(this).find('div.quote'); //pull a random quote for the sidebar
                    var n = $quotes.length; //on any tab change
                    var random = Math.floor(Math.random() * n);
                    $quotes.hide().eq(random).fadeIn();
                });

  开发者_StackOverflow社区              var img = $(ui.panel).data("image");
                $("#headerwrapper").animate({
                    opacity: 'toggle'
                }, function () { //change header image to the 
                    $(this).css("background-image", "url(" + img + ")") //data attr of the tabs div
                    .animate({
                        opacity: 'toggle'
                    });
                });
            }

        });
    });
});

http://bugs.jqueryui.com/ticket/3867

Try binding before you call .tabs()

EDIT

That's because you're using the "select" event for those functions. Meaning they only fire when a tab is clicked on. You also want them to fire when a user goes directly to a tab via the hash in the URL.

I think using show instead of select may put you on the right track.

I also think it may make more sense to do something like:

var $tabs = $('#tabs').bind('tabsshow', function (event, ui) {

            $('#wrapper').css('width', '586px'); //show certain CSS for the 0 tab
            $('#wrapper').css('margin', '80px auto');
            $('#col2, #footer, #headermain h1, .hide').css('display', 'none');

            if (ui.index != 0) {
                $('#wrapper').css('width', '875px'); //show certain CSS for all other tabs
                $('#wrapper').css('margin', '15px auto');
                $('#col2, #footer, #headermain h1, .hide').css('display', 'block');

            }
        }).tabs({
            fx: {
                opacity: 'toggle'
            },


            show: function (event, ui) {
                $(".entry-content").hide('fast'); //collapse any open divs in other tabs on tab change
                $(".bkcontent").hide('fast');


                $('div#quotescontainer').load('quotes.html', function () {
                    var $quotes = $(this).find('div.quote'); //pull a random quote for the sidebar
                    var n = $quotes.length; //on any tab change
                    var random = Math.floor(Math.random() * n);
                    $quotes.hide().eq(random).fadeIn();
                });

                var img = $(ui.panel).data("image");
                $("#headerwrapper").animate({
                    opacity: 'toggle'
                }, function () { //change header image to the 
                    $(this).css("background-image", "url(" + img + ")") //data attr of the tabs div
                    .animate({
                        opacity: 'toggle'
                    });
                });
            }


    });

Did I get the brackets right? :)

Anyway, the important thing is that those functions need to becalled when the tab content is showing, not just selected. If show doesn't work, you may need to write a function that looks for the url hash (meaning the viewer is opening directly to a tab) and fires those others functions depending on what it sees.