Putting flexslider configuration JS on bottom

[Toccamonium]

Hi Pascal, thanks for this useful extension. Right now I have an issue with the dynamic flexslider configuration JS code, which is written into the page. Due to page speed optimization all my JS loads before the closing body tag. Hence I'd like to know how to move the code, written after the slider (append), to the absolute end of the page, like page.jsFooterInline does. Thanks!

[laxap]

If you use the (newer) typoscript based setup for the grids you may remove the TS for the script added after each slider markup.

tt_content.gridelements_pi1.20.10.setup.slider.append >

Then you may initiate the sliders on the page using the class instead of the id. The slider configuration would be fix for all sliders in this case.

page.jsFooterInline.10 = TEXT
page.jsFooterInline.10.value (

( function($) {
  $(document).ready(function() {
    $('.flexslider').flexslider({
      direction: "vertical",
      animation: "fade",
      controlNav: true,
      initDelay: 0,
    });
  });
}) (jQuery);

)

Maybe it's possible to use LOAD_REGISTER to save the configuration set in the flexform and use it to build the script on the bottom of the page. Never tried it.

[timri]

I had this problem also and found another solution: I use a queue for the append-functions, by changing the append-wrap:

# create a queue for domready-functions, since jQuery was moved to the footer:
page.jsInline.1234 = TEXT
page.jsInline.1234.value = var domReadyQueue = [];

# append the initializers for sliders to the queue
# (the default-setup triggers a "jQuery is undefined"-error)
lib.bootstrap_grids.slider.append.wrap (
<script>
  domReadyQueue.push( function($) {
 |
  });
</script>
)
# if this is in your own template, copy the change to tt_content:
tt_content.gridelements_pi1.20.10.setup.slider.append.wrap < lib.bootstrap_grids.slider.append.wrap

# run the queue in the footer
page.jsFooterInline.1234 = TEXT
page.jsFooterInline.1234.value (
jQuery(function(){
      while (domReadyQueue.length) {
        domReadyQueue.shift()(jQuery);
      }
    });
)

Idea is taken from http://stackoverflow.com/questions/1220956/move-jquery-to-the-end-of-body-tag This has the advantage to keep the generated append-blocks and thus keeping the configured settings in the flexform.

[Toccamonium]

Thanks @timri I will check this solution out. To reprogram it via LOAD_REGISTER seems to be not that easy.

[Moongazer]

@timri Brilliant solution, thanks a lot for sharing!

[Moongazer]

BTW: Yesterday night after everything was ready and working I came up with an even better idea. I having my problems with this spreaded JavaScript code for the domReadyQueue: init var domReadyQueue = []; in the header, rendering the Flexslider config code somewhere inside the document, and process the domReadyQueue in the footer area... That's working but I'd like to seperate things to stay clean.

So if I have time, I will try to render the Flexslider config code into a HTML data-attribute of the <div> tag. Than I only need a document.ready() script which is looking for the all occurings of $('.flexslider'), grab the config from the data attribute of each and init the flexslider. This way should be easier and cleaner than the domReadyQueue solution. Any else suggestions?

[laxap]

Interesting. No hurry, please. :) I just re-opend the issue because I'd prefere to load jQuery in the footer too. I'll wait to see your improved version!