[RESOLVED] Defining CSS and jQuery code inside body

[akhileshbc]

Hi

I was wondering would it be good to depict the CSS inside the body and also to use jQuery code after that(within the body), instead of it in the head portion.

SambaNeko once told me that(in one of my questions), it is better to define the CSS before applying jQuery code.

So in my case, I am defining the CSS in the body portion and just after that, I am coding the jQuery code inside the document ready state.

In jQuery, we can define multiple document ready states. But what would be the order of compilation. I mean, when the browser parses the page, would it first consider the head portion then finds all document ready states in jQuery even in the body, and then only consider the CSS code in the body ?

Or will it be sequential ?
This seems to be stupid question. But I am confused !

In my project, I have separated all common CSS and jQuery code to separate files and link them in the head portion of the common header file. But in subsequent inner pages, the CSS and jQuery code would vary. And I don't want to create confusion by defining the CSS of these pages in the common CSS file, or in a separate file and attaching it. Because it is hard to keep track of the class/id names.

But defining them inside these pages is lot more easier and convenient to me atleast.

What do you guys think ?

Thanks in advance

[SambaNeko]

When a page is being parsed, it goes from top to bottom. Loading and parsing of external scripts occurs synchronously. onload and the jQuery $(document).ready() method do not necessarily wait for CSS to be rendered prior to execution; this only causes problems in cases where actions performed by your scripts are dependent on the CSS having been rendered already (like the case that I'd advised you on before).

Presumably, if you've got two sets of CSS and JS - that which is global to the site, and that which is used on individual pages - then the elements that they effect should correlate. In other words, your global JS affects elements which are styled by the global CSS, and your individual page JS affects elements styled by the individual page CSS. If this is the case, it'll probably work out to put the CSS prior to the JS in both sets. Does that make sense?

[szlamany]

Are you saying you have more than one .Ready function on a single page?

Why do that to yourself - what is the benefit?

[SambaNeko]

There's nothing wrong with having more than one $(document).ready(), and the benefit's usually convenience in the way of separating script chunks (like for global scripts and per-page scripts).

[akhileshbc]

When a page is being parsed, it goes from top to bottom. Loading and parsing of external scripts occurs synchronously. onload and the jQuery $(document).ready() method do not necessarily wait for CSS to be rendered prior to execution; this only causes problems in cases where actions performed by your scripts are dependent on the CSS having been rendered already (like the case that I'd advised you on before).

Presumably, if you've got two sets of CSS and JS - that which is global to the site, and that which is used on individual pages - then the elements that they effect should correlate. In other words, your global JS affects elements which are styled by the global CSS, and your individual page JS affects elements styled by the individual page CSS. If this is the case, it'll probably work out to put the CSS prior to the JS in both sets. Does that make sense?

Yeah. I have used to do the naming of elements in different, so that they won't get congested.

Thanks

[szlamany]

There's nothing wrong with having more than one $(document).ready(), and the benefit's usually convenience in the way of separating script chunks (like for global scripts and per-page scripts).

So you are saying that you have .Ready events in different .JS script files - and want each to be raised when the .Ready moment happens - right?

[akhileshbc]

So you are saying that you have .Ready events in different .JS script files - and want each to be raised when the .Ready moment happens - right?

Tutorials:Multiple $(document).ready()

[szlamany]

I've only ever written a single jQuery app (I've been developing it for about 18 months now).

It's a single page - never leaves the page - all async access to web methods.

My single .Ready event looks like this. Would it benefit from any changes??

$(document).ready(function() {

    $("#acs-tabset").tabs({ show: function(event, ui) { resizeStuff() } }).data("lastpanel", "1");
    initializeTab();

    $("#acs-close-tracker").button({ text: false, icons: { primary: "ui-icon-triangle-1-s"} }).click(function() {
        $("#acs-work").removeClass("acs-work-full-size");
        $("#acs-tracker").toggle(0, trackerToggle);
        return false;
    });

    $("#acs-show-binder").button({ text: true, icons: { primary: "ui-icon-triangle-1-e"} }).attr('disabled', 'disabled').click(function() {
        //$("#acs-work").removeClass("acs-work-full-size");
        if ($("#acs-tracker").is(':hidden')) {
            $("#acs-work").removeClass("acs-work-full-size");
            $("#acs-tracker").toggle(0, trackerToggle);
        }
        $("#acs-binder-panel").toggle(0, binderToggle);
        return false;
    });

    $("#acs-logout").button({ text: true, icons: { primary: "ui-icon-power"} }).attr('disabled', 'disabled').click(function() {
        $("#acs-binder-info").html('Logging out...<img src="Images/ajax-loader-small.gif" />');
        closeAll();
        $("#acs-binder-info").html('');
        g_warning = false;
        return false;
    });

    $("#acs-show-reflectors").button({ text: false, icons: { primary: "ui-icon-gear"} }).click(function() {
        showReflectors();
        return false;
    });

    $("#acs-clear-spcache").button({ text: false, icons: { primary: "ui-icon-wrench"} }).click(function() {
        ctrlWebService("spcache", "clear", "", "");
        return false;
    });

    $('.acs-panel-btn-add').live('click', addClick);
    $('.acs-panel-btn-delete').live('click', deleteClick);
    $('.acs-panel-btn-edit').live('click', editClick);
    $('.acs-panel-btn-open').live('click', openClick);
    $('.acs-operator-button-event').live('click', operatorClick);
    $('.acs-panel-btn-clear').live('click', clearClick);
    $('.acs-panel-btn-sort').live('click', sortClick);
    $('.acs-panel-btn-reader').live('click', readerClick);
    $('.acs-panel-btn-next').live('click', nextClick);
    $('.acs-panel-btn-prev').live('click', prevClick);
    $('.acs-panel-btn-reader-next').live('click', nextReaderClick);
    $('.acs-panel-btn-reader-prev').live('click', prevReaderClick);
    $('.acs-panel-btn-close').live('click', closeClick);
    $('.acs-panel-btn-newwindow').live('click', newwindowClick);
    $('.acs-panel-btn-closetab').live('click', closetabClick);
    $('.acs-panel-btn-save').live('click', saveClick);
    $('.acs-panel-btn-undo').live('click', undoClick);
    $('.acs-panel-btn-popup').live('click', popupClick);
    $('.acs-panel-btn-refresh').live('click', refreshClick);
    $('.acs-panel-btn-print').live('click', printClick);
    $('.acs-panel-btn-run').live('click', runClick);
    $('.acs-reader-aggbtn').live('click', aggbtnClick);
    $('.acs-input-field').live('focusin', focusinField);
    $('.acs-input-field').live('change', changeField);
    $('.acs-input-setThisPay').live('change', setThisPay);
    $('.awc-prob').live('change', setThisPay);
    $('.acs-panel-btn-page').live('click', pageClick);
    $('.acs-grid-btn-reqapp').live('click', reqappClick);
    $('.acs-grid-btn-operator').live('click', gridOperatorClick);
    $('.acs-grid-chk-hdr').live('click', checkboxhdrClick);
    $('.slick-cell-checkboxsel').live('click', checkboxClick);
    $('.acs-sproc-button').live('click', sprocClick);
    $('.acs-saveadd-button').live('click', saveaddClick);
    $('.acs-saveclose-button').live('click', savecloseClick);
    $('.acs-savenext-button').live('click', savenextClick);

    $('.awc-prob').live('click', probClick);

    $('.acs-download').live('click', downloadClick);

    $('#acs-error').dialog({ autoOpen: false, modal: true, position: { my: "left top", at: "left center", of: "#acs-work"} });
    $('#acs-prompt').dialog({ autoOpen: false, modal: true, position: { my: "left top", at: "left center", of: "#acs-work"} });
    $('#acs-formula').dialog({ autoOpen: false, modal: true, position: { my: "left top", at: "left center", of: "#acs-work" }, minWidth: 970 });
    $('#dlgChartType').dialog({ autoOpen: false, modal: true, position: { my: "left top", at: "left center", of: "#acs-work"} });
    $('#dlgAddWhat').dialog({ autoOpen: false, modal: true, position: { my: "left top", at: "left center", of: "#acs-work"} });
    $('#dlgChoice').dialog({ autoOpen: false, modal: true, closeOnEscape: false, position: { my: "left top", at: "left center", of: "#acs-work"} });
    $('#dlgReloadGrid').dialog({ autoOpen: false, modal: true, position: { my: "left top", at: "left center", of: "#acs-work"} });

    var options = {};
    options.drop = dropOn;

    $('#acs-panel1').parent().droppable(options);

    $(window).resize(resizeStuff);
    resetWindowSize();

    $.extend($.ui.autocomplete, {
        escapeRegex: function(value) {
            return value.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
        },
        filter: function(array, term) {
            var matcher = new RegExp($.ui.autocomplete.escapeRegex(term), "i");
            var arraytoreturn = $.grep(array, function(value) {
                return matcher.test(value.label || value.value || value);
            });
            if (arraytoreturn.length > 200) {
                arraytoreturn = [{ label: "Please be more specific - " + arraytoreturn.length + " matching entries!", value: ""}];
            }
            return arraytoreturn;
        }
    });

    urlParams.id = urlParams.id || "";

    $("#acs-username,#acs-password").keyup(function(e) {
        loginKeyUp(e, this);
    });

    if (urlParams.id === "") {
        $('#dlgLogin').dialog({ title: 'Log in', modal: true, closeOnEscape: false, buttons: { 'Log in': function() { loginClick(this) } } });
    } else {
        $("#acs-login-error").html('<img src="Images/ajax-loader-small.gif" />');
        ctrlWebService("userid", urlParams.id, "", "");
    }

    window.onbeforeunload = function() {
        if (g_warning) {
            return 'You have made changes on this page that you have not yet confirmed.  If you navigate away from this page you will lose your unsaved changes';
        }
    }

});