9. Including JQuery plugins

04-CUSTOM-HEADER.php

This part of the framework has a number of purposes:

1) In this file you can include the HTML elements for your custom banner for the page (though you may have other ideas and not want to have a banner as such at all. It’s completely up to you.

2) As part of the setup to get your styling in 02-ADVANCED-STYLING.css working without conflicts, it is important to leave in the included javascript line which adds the class of “custom-design” to your body tag, allowing for custom styling.

document.getElementsByTagName('body')[0].className+=' custom-design';

3) This section is also a good spot to include any custom javascript for the page. Of course this is quote early in the DOM structure for the page to be including javascript, so you may need to add some commands within the window.onload listener. This is crucial if you are wanting to use the jQuery library included in the bundle.js / bundled scripts that Event Creator loads into the page. Don’t load jQuery or modernizr yourself – these are already included in the bundled scripts in the footer.

4) If you want to load a jQuery plugin, such a slideshow script (example included in the framework is Nivo Slider http://dev7studios.com/plugins/nivo-slider/), this obviously needs to happen after the jQuery library has loaded. As you cannot include the script with a <script> tag further down the page, the workaround for including jQuery plugins is to use the jQuery .getScript() function with window.onload:

<script type="text/javascript">

      window.onload = function(){

      // load/include plugin script
      $.getScript("http://media.gofundraise.com.au.s3.amazonaws.com/custom-framework/nivo-slider/jquery.nivo.slider.js",

           // and once loaded, initialise

           function( data, textStatus, jqxhr ) {

                        $('#slider').nivoSlider();

            });

      }

</script>

Because of the way Event Creator pages are locked down, this is the only way to include and run your jQuery and jQuery plugins. It’s a workaround, but works well.

Event Creator Location: copy and paste into Menu & Content > Pages & Content > Layout Options > Header