0

I got js from FAQ module where nodes are loaded collapsed, with "faq-answer ... collapsable collapsed" and when toggled "faq-answer ... collapsable ("collapsed" disappears).

I suspect that since .collapsed includes 'display: none;' the lazy loading script for images is not triggered.

Therefore, I'm trying to execute that script lazy.js after any faq is toggled but can't make it work.

A) Inside lazy.js i gave it a name (function runblazy($) { and inside faq.js I inserted runblazy(); just after $(this).next('div.faq-dd-hide-answer').toggleClass("collapsed"); but this interrupts the entire script, which prevents the page from properly loading ie. render links etc.

B) I also tried to run it when the class "collapsed" disappeared, but it's only being run once (during page load) and I neither could figure out how to possibly make it work with a while loop

var x = document.getElementsByClassName("faq-answer");
if (x[0].classList.contains("collapsed")) { //do nothing }
else { runblazy(); }

Which would be the better / correct approach, what am I missing? Here is the js from faq.js : 

(function ($) {

 Drupal.behaviors.initFaqModule = {
  attach: function (context) {
   // Hide/show answer for a question.
   var faq_hide_qa_accordion = Drupal.settings.faq.faq_hide_qa_accordion;
   $('div.faq-dd-hide-answer', context).addClass("collapsible collapsed");

   if (!faq_hide_qa_accordion) {
     $('div.faq-dd-hide-answer:not(.faq-processed)', context).addClass('faq-processed').hide();
   }
   $('div.faq-dt-hide-answer:not(.faq-processed)', context).addClass('faq-processed').click(function() {
     if (faq_hide_qa_accordion) {
      $('div.faq-dt-hide-answer').not($(this)).removeClass('faq-qa-visible');
     }
     $(this).toggleClass('faq-qa-visible');
     $(this).parent().addClass('faq-viewed');
     $('div.faq-dd-hide-answer').not($(this).next('div.faq-dd-hide-answer')).addClass("collapsed");
     if (!faq_hide_qa_accordion) {
       $(this).next('div.faq-dd-hide-answer').slideToggle('fast', function() {
        $(this).parent().toggleClass('expanded');
       });
     }
     $(this).next('div.faq-dd-hide-answer').toggleClass("collapsed"); 
//ADD "runblazy();" HERE?    
     // Change the fragment, too, for permalink/bookmark.
     // To keep the current page from scrolling, refs
     // http://stackoverflow.com/questions/1489624/modifying-document-location-hash-without-page-scrolling/1489802#1489802
     var hash = $(this).find('a').attr('id');
     var fx, node = $('#' + hash);
     if (node.length) {
       fx = $('<div></div>')
         .css({position: 'absolute', visibility: 'hidden', top: $(window).scrollTop() + 'px'})
         .attr('id', hash)
         .appendTo(document.body);
       node.attr('id', '');
     }
     document.location.hash = hash;
     if (node.length) {
       fx.remove();
       node.attr('id', hash);
     }

     // Scroll the page if the collapsed FAQ is not visible.
     // If we have the toolbar so the title may be hidden by the bar.
     var mainScrollTop = Math.max($('html', context).scrollTop(), $('body', context).scrollTop());
     // We compute mainScrollTop because the behaviour is different on FF, IE and CR
     if (mainScrollTop > $(this).offset().top) {
       $('html, body', context).animate({
         scrollTop: $(this).offset().top
        }, 1);
     }
     return false;

 });
Markus
  • 458
  • 4
  • 16

1 Answers1

0

I almost can't believe it, after many hours of trying, I found a very simple fix that worked.

I remembered that I suspected display:none to be the issue for lazy loading not working and read here that this should be avoided, thus changing the .css to use the below instead worked:

.faq .collapsed {
 /*display: none;*/
 position: absolute !important;
 top: -9999px !important;
 left: -9999px !important;
}

I would be still interested if there is another way as per question to run the lazy.js after the toggle?

Markus
  • 458
  • 4
  • 16