Apply jQuery plugin to hidden elements

Question

I have a page which has a number of hidden divs in it. These divs are hidden using the CSS handler .div {display: none}.

Within each of these hidden divs is a jQuery powered slideshow, built using a jQuery plugin called TN3.

Each hidden div is linked to a photo which is visible on the page. Clicking on the photo shows the corresponding hidden div and slides it into place. Clicking on the photo again, or on a close button within the hidden div, slides it back up and hides it again. This is done using a simple jQuery show/hide toggle script.

My problem is that when you click a photo and the 'hidden' div becomes visible, the jQuery slideshow in the now visible div does not work.

I think this is because the script for the slideshow uses a $(document).ready() function. As the hidden divs are not part of the DOM (as they are set to display:none) - the jQuery needed to run the slideshow does not fire.

I think this leaves me with two options:

Hide the hidden divs on page loading with jQuery, rather than setting CSS to display: none. I think this would mean the hidden divs would all be visible for a fraction of second on page load, and then they get hidden with the jQuery code - that would look clunky and is not desirable.
Somehow set the jQuery code needed to operate the slideshow to fire when the user clicks the photo to toggle the visibility of the hidden div. This is where I come unstuck - I'm not sure how to do this.

My knowledge of JavaScript is limited to jQuery, and generally limited to using functions that have $(document).ready(). I don't know how to trigger the code on another event other than the page loading.

The code for the slideshow is below.

Any ideas would be much appreciated

$(document).ready(function () {
    $('.tn3-gallery').tn3({
        image: {
            transitions: [{
                type: "fade",
                easing: "easeInQuad",
                duration: 423
            }]
        },
        thumbnailer: {
            overMove: false
        },
        mouseWheel: false
    });
}); // end ready

Proper formatting makes your code easier to read and to understand. — Felix Kling
"As the hidden divs are not part of the DOM" That is incorrect. The elements are part of the document. Their styling does not have any influence on that. I'm pretty sure the elements are found by jQuery. The problem could be that the plugin reads the dimensions of the element which might return inaccurate values since they are not visible. It would be great if you could set up a jsfiddle.net demo for your problem. It would make it a lot easier for us to help you. — Felix Kling

paulitto paulitto · Accepted Answer · 2013-06-10T12:16:53

The elements with display:none are present in DOM, but when you apply gallery plugin for them, it probably calculates height/width of those element to be used for gallery dimantions, and since element is not displayed it takes 0.

jquery's .width() or .height() will return 0 for elements with display:none

If that's the case then possible solutions would be:

1) init gallery only after the 'hidden' div becomes visible first time

2) temporarily set element display:block, but with visiblility:hidden before gallery initialization - this will allow to take correct height/width of the element

Example for 2nd:

$('.tn3-gallery')
       .css({'display':'block','visibility':'hidden'})
       .tn3({
           //your tn3 options
          init:function(){
           //turn element back to display:none after gallery is built
            $('.tn3-gallery').css({'display':'none','visibility':'visible'})
          }
       });

Apply jQuery plugin to hidden elements

1 Answers