1

I have a view in node-view mode that has another view (a view slideshow) embedded into that view. I am using jquery and setTimeout to slideDown the hidden div that contains the view a few seconds after the page loads. The problem that I am running into is when the div slides down to show the view, the slideshow is not showing.

Here's my jquery

Drupal.behaviors.landing = function (context) {
if($('#portslide-wrap').children().children().next().hasClass('portfolio-direct')){

    setTimeout( function getSlide(){
        $('#portslide-wrap:not(.landing-processed)', context).addClass('landing-processed').each(function(){

            $('#portslide-wrap').slideDown();
            $.scrollTo('165','0');
            Drupal.attachBehaviors(context);

        });
    }   ,700)
  };

}

2 Answers 2

0

Are you using a Drupal module like Views Slideshow to create your slideshow?

Usually slideshows will need to dynamically calculate the height/width of the content in the slides in order to render correctly. If the slideshow is hidden when the slideshow's javascript is loaded, then there will effectively be no content for the slideshow's javascript to render, thus the slideshow will never render correctly.

Does the slideshow render with no problems if you remove your CSS and/or JS that hides (and then slides down) the slideshow?

I haven't dealt with this sort of issue directly, but hopefully I can point you in the right direction. I would guess that somewhere you are using JS or CSS to hide the #portslide-wrap div (i.e. display: none;) until it is ready to slide down? I would suggest trying to hide that div behind some other element using z-index rather than display:none(so that the slideshow can render while being obscured) and then hide it using JS after the slideshow has processed (probably a class like "slideshow-process" is added to a wrapping div, which you can use to hide the slideshow via CSS).

1
  • Yep, I'm using the views slideshow module...and it does render correctly if I remove display:none from the class. I think this is a good start. I'll give it a try.
    – user2014
    Dec 15, 2011 at 19:25
0

Old question, but if someone finds this via Google then this should help. The above JavaScript is close. Try:


(function($) {
  Drupal.behaviors.myFuncName = {
    attach: function(context, settings) {
      console.log('Do stuff');
    }
  };
})(jQuery);

There is no need to call Drupal.attachBehaviors unless you are returning new elements for the DOM. In that case your context variable would be the new elements. It's also worth noting that you are missing the "settings" object in the arguments of the function you are trying to attach.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.