javascript load just before body end tag in DOM

jackmaessen

how can i load a javascript just before the body end tag ?

I am developing a new plugin in which a javascript should be loaded just before the body end tag

<script src="/plugins/Headroom/js/headroom2.js"></script>

I can do it manually by adding this into the default.master.tpl of the theme, but is this also possible without manually adding it?

vrijvlinder

Make a plugin to add the script or add it to theme hooks . on load it the variable possibly look at jquery docs

jackmaessen

But which fire-event should i use so that is loaded just before the endtag body?

x00

Why do you want this priority? You can set priority with AddScript but I have to question why this is necessary with one script.

What are you trying to do? Show us the code.

R_J

Use base_afterBody_handler(): https://github.com/vanilla/vanilla/blob/master/applications/dashboard/views/default.master.tpl#L42

It might not work for custom themes...

vrijvlinder

If you can try adding it like this. Create a plugin to add the script. Make a file and call it something myscript.js and add this jquery bellow code to that file and save it in the new plugin folder. Then create the plugin default.php and have it load the the script.

jQuery( document ).ready(function( $ ) {
  $('<script>')
    .attr('type', 'text/javascript')
    .text('/plugins/Headroom/js/headroom2.js')
    .appendTo('.Foot');
})


public function Base_Render_Before($Sender){

$Sender->AddJsFile('myscript.js', 'plugins/NameofNewPlugin');

 }

jackmaessen

Thanks guys (@x00 @R_J @vrijvlinder )for the support. I did already find a solution for it.
It was all about a javascript that should be at the end of the DOM and called immediately.

(function() {
var header = document.querySelector("#header");
    if(window.location.hash) {
      header.classList.add("slide--up");
    }

    new Headroom(header, {
        tolerance: {
          down : 10,
          up : 20
        },
        offset : 205,
        classes: {
          initial: "slide",
          pinned: "slide--reset",
          unpinned: "slide--up"
        }
    }).init();

}() );

While i was thinkig about this, i thought: why not put it in the ready handler and load this script into the head tags?
That's what i did:

$(document).ready(function(){
 var header = document.querySelector("#header");
    if(window.location.hash) {
      header.classList.add("slide--up");
    }

    new Headroom(header, {
        tolerance: {
          down : 10,
          up : 20
        },
        offset : 205,
        classes: {
          initial: "slide",
          pinned: "slide--reset",
          unpinned: "slide--up"
        }
    }).init();

});

It was all about this plugin: http://vanillaforums.org/addon/headroom-plugin

x00

although querySelector is well supported you might as well use $("#header")[0] that is how would get the native DOM element from the jquery object.