Results 1 to 8 of 8

Thread: [RESOLVED] Defining CSS and jQuery code inside body

  1. #1

    Thread Starter
    Freelancer akhileshbc's Avatar
    Join Date
    Jun 2008
    Location
    Trivandrum, Kerala, India
    Posts
    7,652

    Resolved [RESOLVED] Defining CSS and jQuery code inside body

    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

    If my post was helpful to you, then express your gratitude using Rate this Post.
    And if your problem is SOLVED, then please Mark the Thread as RESOLVED (see it in action - video)
    My system: AMD FX 6100, Gigabyte Motherboard, 8 GB Crossair Vengance, Cooler Master 450W Thunder PSU, 1.4 TB HDD, 18.5" TFT(Wide), Antec V1 Cabinet

    Social Group: VBForums - Developers from India


    Skills: PHP, MySQL, jQuery, VB.Net, Photoshop, CodeIgniter, Bootstrap,...

  2. #2
    Frenzied Member
    Join Date
    Apr 2009
    Location
    CA, USA
    Posts
    1,516

    Re: Defining CSS and jQuery code inside body

    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?

  3. #3
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    Re: Defining CSS and jQuery code inside body

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

    Why do that to yourself - what is the benefit?

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  4. #4
    Frenzied Member
    Join Date
    Apr 2009
    Location
    CA, USA
    Posts
    1,516

    Re: Defining CSS and jQuery code inside body

    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).

  5. #5

    Thread Starter
    Freelancer akhileshbc's Avatar
    Join Date
    Jun 2008
    Location
    Trivandrum, Kerala, India
    Posts
    7,652

    Re: Defining CSS and jQuery code inside body

    Quote Originally Posted by SambaNeko View Post
    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

    If my post was helpful to you, then express your gratitude using Rate this Post.
    And if your problem is SOLVED, then please Mark the Thread as RESOLVED (see it in action - video)
    My system: AMD FX 6100, Gigabyte Motherboard, 8 GB Crossair Vengance, Cooler Master 450W Thunder PSU, 1.4 TB HDD, 18.5" TFT(Wide), Antec V1 Cabinet

    Social Group: VBForums - Developers from India


    Skills: PHP, MySQL, jQuery, VB.Net, Photoshop, CodeIgniter, Bootstrap,...

  6. #6
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    Re: Defining CSS and jQuery code inside body

    Quote Originally Posted by SambaNeko View Post
    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?

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  7. #7

    Thread Starter
    Freelancer akhileshbc's Avatar
    Join Date
    Jun 2008
    Location
    Trivandrum, Kerala, India
    Posts
    7,652

    Re: Defining CSS and jQuery code inside body

    Quote Originally Posted by szlamany View Post
    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()


    If my post was helpful to you, then express your gratitude using Rate this Post.
    And if your problem is SOLVED, then please Mark the Thread as RESOLVED (see it in action - video)
    My system: AMD FX 6100, Gigabyte Motherboard, 8 GB Crossair Vengance, Cooler Master 450W Thunder PSU, 1.4 TB HDD, 18.5" TFT(Wide), Antec V1 Cabinet

    Social Group: VBForums - Developers from India


    Skills: PHP, MySQL, jQuery, VB.Net, Photoshop, CodeIgniter, Bootstrap,...

  8. #8
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    Re: [RESOLVED] Defining CSS and jQuery code inside body

    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??

    Code:
    $(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';
            }
        }
    
    });

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width