1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Where is the best place to call a JS file so It is called before the body.

Discussion in 'XenForo Questions and Support' started by EQnoble, Nov 13, 2010.

  1. EQnoble

    EQnoble Well-Known Member

    As the the title says I am curious if anyone has figured the best place to call a JS file so that it will be loaded before the body of every XenForo powered page?

    I would rather ask before I confuse myself learning the wrong way. My first inclination was to add

    Code:
     <script type="text/javascript" src="js/jquery/jq.EQ.1.8.x.custom.js"></script>  
    to: page_container_js_head
    right after
    Code:
    <script type="text/javascript" src="{$jQuerySource}"></script>
    <script type="text/javascript" src="js/jquery/jquery.xenforo.rollup.js?_v={$xenOptions.jsVersion}"></script>
    <script type="text/javascript" src="js/xenforo/xenforo.js?_v={$xenOptions.jsVersion}"></script>  
    and before
    Code:
    <!--XenForo_Require:JS-->
    leaving me with:
    Code:
        <script type="text/javascript" src="{$jQuerySource}"></script>
        <script type="text/javascript" src="js/jquery/jquery.xenforo.rollup.js?_v={$xenOptions.jsVersion}"></script>
        <script type="text/javascript" src="js/xenforo/xenforo.js?_v={$xenOptions.jsVersion}"></script>
        <script type="text/javascript" src="js/jquery/jq.EQ.1.8.x.custom.js"></script>
    <!--XenForo_Require:JS-->
      
    Can anyone tell me if this would work or if there is a different place/way to add it to the script?
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    You've got it exactly correct. page_container_js_head is the right spot for what you want.
     
    EQnoble likes this.
  3. EQnoble

    EQnoble Well-Known Member

    Awesome thanks brutha :)
     
  4. EQnoble

    EQnoble Well-Known Member

    OK ... I got it working

    One more question - where would be the best place to include styling information that is to be loaded on every XenForo powered page (I am trying to extract the style from a css doc and include it in the xenforo script in order to scrap the .css file.)





    Now is there anyone out there with skype that want's to talk dev in relation to the mod I am trying to make here. 50/50 credit for any who can sort out some of these minor code related unfavorable activities. PM me if think you can offer ANY assistance...be it grand or minute, any communication made may spark the imagination to figure out the minimal discomfort this code is giving me. Also this mod I'm working on is still in early dev so I am open to suggestions, corrections, and influence seeing as I am making this with you in mind, the end user of XenForo.

    It is media related and is in a working state now.


    Includes:
    (custom BB-code made using the KingK bbcode manager)
    (can use between 1-3 template edits - trying to find the best configuration for this setup , again it IS working now)
     
  5. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Admin CP -> Appearance -> Templates -> PAGE_CONTAINER

    You can see the CSS link that is included on every page:

    Code:
    	<link rel="stylesheet" type="text/css" href="css.php?css=xenforo,form,public&amp;style={xen:urlencode $_styleId}&amp;d={$visitorStyle.last_modified_date}" />
    
    That includes these CSS templates:

    xenforo.css
    form.css
    public.css


    So you can add your code to one of those CSS templates. Or create a new template for your code and then reference it in the code above:

    Admin CP -> Appearance -> Templates -> Create New Template
     
    EQnoble likes this.
  6. EQnoble

    EQnoble Well-Known Member


    Thanks again my friend!!!

    Everywhere I look your helping someone. Just awesome...keep it up...that is what community is all about :)

    Jake for Moderator - Anyone else with me on this?
     
  7. Jaxel

    Jaxel Well-Known Member

    Why would you ever want to call your JS BEFORE the body? For good page design, your JS should always be loaded after the page... otherwise you can slow the loading of your pages, as well as create problems with silent failures and graceful degradation (very important that JS degrades gracefully).

    Use the following, instead of html code to make sure your stuff is loaded when it should be:
    Code:
    <xen:require css="" /> (this pulls from template)
    <xen:require js="" /> (this pulls from an actual file on the server)
    These codes will also prevent files/templates from loading more than once.
     
    EQnoble likes this.
  8. EQnoble

    EQnoble Well-Known Member

    The nature of the script requires it be loaded before the body or it will not work properly as far as I know and have seen. Your also talking to someone with noobabilities so I will be google searching the breakdown of your response there as I'm sure it makes perfect sense but I have not the comprehension yet with regards to scripting to break it down from my acquired knowledge. I'll update this post if I manage to figure out how to implement the same outcome with your method there, but I must admit I have no formal experience so what I know is what I know and to tell you the truth I don't even know half of the correct terms I should know to be able to do the little that I can so it's not looking good for today, tomorrows forecast: see todays.
    :)

    I do thank you though but your way above my level, I went through one of your mods when you first released it and was blown away by the amount of things going on in it. On the other hand I spend 24 hours to debug 40 lines of code that you could probably write off the top of your head in minutes sans the errors I end up needing to fix.

    I got very sick and was having problems in other personal areas in my life literally just got back into the xen of things yesterday (though still sick, my throat is open enough to breathe now so we're up and running) but that doesn't change me needing an a-z walk-through of the inner workings of the XF script itself and/or a professional to tell me what to go learn myself in an order that is comparable to what a formal education would teach. Otherwise the professional advice your giving me would just need to be dumbed down for me personally although I am quite sure this helps someone who actually codes but me...I am just trying.

    Again thank you for your response, I will before I post in this thread again try and figure out how exactly you are intending me to use this but give me some time as I necessitate a new scholastic subject called noobanomics and the learning curve is great.

    @Jaxel If you would like I can pm you the location where I have my mod running and you can take a look yourself and tell me what you think about my approach to it.
     
  9. Jaxel

    Jaxel Well-Known Member

    Well I hope you're feeling better...

    I too consider myself a "noob" when it comes to programming. I've always been a flat procedural programmer, and XenForo is completely object oriented... which is very different. I too can't figure anything out on my own... unless there is some sort of documentation, or existing code I can look at and reverse engineer. Right now there is still a major lack of documentation in XenForo...

    If you want to PM me your mod... I can look into it for you. What you're probably going to want to do, is add the JS to the XenForo parser... then load it with an INIT function. This way it will degrade gracefully if the user doesn't have javascript enabled on their particular platform.
     

Share This Page