1

I have a tabbed element on a website, and in each tab the jQuery Masonry script is used. The only problem is that the Masonry grid will only work for the content in the first tab, but I need it to work for the content in every tab.

I have tried renaming the containers for each tab, but nothing seems to work.

Here is the website: http://joltentertainment.com/services-2/

Here is my code:

    <ul class="services-tabs">
        <li><a href="#tab1">Entertainment</a></li>
        <li><a href="#tab2">Ambiance & Décor</a></li>
        <li><a href="#tab3">Success</a></li>
        <li><a href="#tab4" class="av">A/V Rentals</a></li>
    </ul>

    <div id="services-wrap">

        <div id="tab1" class="tab">

            <div id="services-container">

                <div class="module">
                    <h3 class="service">Emcees</h3>
                    <div class="mini-gallery">
                        <div class="big-thumb"><img src="<?php bloginfo('template_url'); ?>/scripts/timthumb.php?src=http://joltentertainment.com/wp-content/gallery/the-worlds-best-prom/em1_2782_1.jpg&amp;h=172&amp;w=278&amp;zc=1"  title="" width="278" height="172" /></div>
                        <div class="med-thumb"><img src="<?php bloginfo('template_url'); ?>/scripts/timthumb.php?src=http://joltentertainment.com/wp-content/gallery/the-worlds-best-prom/em1_2443_0.jpg&amp;h=82&amp;w=188&amp;zc=1"  title="" width="188" height="82" /></div>
                        <div class="med-thumb"><img src="<?php bloginfo('template_url'); ?>/scripts/timthumb.php?src=http://joltentertainment.com/wp-content/gallery/the-worlds-best-prom/em1_2787_1.jpg&amp;h=82&amp;w=188&amp;zc=1"  title="" width="188" height="82" /></div>
                    </div>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                </div>

                <div class="module">
                    <h3 class="service">Percussionists</h3>
                    <div class="mini-gallery">
                        <div class="big-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                    </div>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today. Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd!
                    </p>
                </div>

                <div class="module">
                    <h3 class="service">Elegant Event Furniture</h3>
                    <div class="mini-gallery">
                        <div class="big-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                    </div>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                </div>

                <div class="module">
                    <h3 class="service">Fabric Backdrops</h3>
                    <div class="mini-gallery">
                        <div class="big-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                    </div>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                </div>

                <div class="module">
                    <h3 class="service">Photobooths</h3>
                    <div class="mini-gallery">
                        <div class="big-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                    </div>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                </div>

                <div class="module">
                    <h3 class="service">Videography</h3>
                    <div class="mini-gallery">
                        <div class="big-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                    </div>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                </div>

                <div class="clear"></div>

            </div>

        </div>

        <div id="tab2">
            <h2 class="services">Entertainment</h2>
            <p>sdlfkjgskjfgl</p>
        </div>

        <div id="tab3">
            <h2 class="services">Entertainment</h2>
            <p>s,djghlkfg</p>
        </div>

        <div id="tab4" class="tab">

            <div id="services-container">

                <div class="module">
                    <h3 class="service">Emcees</h3>
                    <div class="mini-gallery">
                        <div class="big-thumb"><img src="<?php bloginfo('template_url'); ?>/scripts/timthumb.php?src=http://joltentertainment.com/wp-content/gallery/the-worlds-best-prom/em1_2782_1.jpg&amp;h=172&amp;w=278&amp;zc=1"  title="" width="278" height="172" /></div>
                        <div class="med-thumb"><img src="<?php bloginfo('template_url'); ?>/scripts/timthumb.php?src=http://joltentertainment.com/wp-content/gallery/the-worlds-best-prom/em1_2443_0.jpg&amp;h=82&amp;w=188&amp;zc=1"  title="" width="188" height="82" /></div>
                        <div class="med-thumb"><img src="<?php bloginfo('template_url'); ?>/scripts/timthumb.php?src=http://joltentertainment.com/wp-content/gallery/the-worlds-best-prom/em1_2787_1.jpg&amp;h=82&amp;w=188&amp;zc=1"  title="" width="188" height="82" /></div>
                    </div>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                </div>

                <div class="module">
                    <h3 class="service">Percussionists</h3>
                    <div class="mini-gallery">
                        <div class="big-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                    </div>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today. Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd!
                    </p>
                </div>

                <div class="module">
                    <h3 class="service">Elegant Event Furniture</h3>
                    <div class="mini-gallery">
                        <div class="big-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                    </div>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                </div>

                <div class="module">
                    <h3 class="service">Fabric Backdrops</h3>
                    <div class="mini-gallery">
                        <div class="big-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                    </div>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                </div>

                <div class="module">
                    <h3 class="service">Photobooths</h3>
                    <div class="mini-gallery">
                        <div class="big-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                    </div>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                </div>

                <div class="module">
                    <h3 class="service">Videography</h3>
                    <div class="mini-gallery">
                        <div class="big-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                        <div class="small-thumb"></div>
                    </div>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                    <p>
                        Great for all events, an Emcee can liven up events, help with announcements, encourage participants in team building or audience participation exercises, and excite your crowd! Hire our high-quality Emcee's from Jolt Entertainment for your wedding, school dance, corporate event today.
                    </p>
                </div>

                <div class="clear"></div>

            </div>

        </div><!-- END TAB A/V RENTALS -->

        <script type="text/javascript">
            $(function(){
                $('#services-container').masonry({
                  itemSelector: '.module',
                });
            });

        </script>

    </div>
halfer
  • 19,824
  • 17
  • 99
  • 186
Jordan Gold
  • 21
  • 1
  • 8

1 Answers1

3

I had the same problem.

Listen for the click event on the tabs and then fire the masonry effect.

var $j = jQuery.noConflict();
    $j(document).ready(function() {
        $j('.services-tabs li a').click(function() {
            var container = $j('.mini-gallery');

            container.imagesLoaded( function(){
            container.masonry({
                itemSelector : '.small-thumb'
              });
            });
        })
});
redconservatory
  • 21,438
  • 40
  • 120
  • 189
  • In my case this causes all the instances of Masonry to be overlap all selectors even on the first tab. No error/conflict in console. It re-arranges when clicked second time. Any ideas, how to prevent that? http://codepen.io/crs1138/pen/DLFrA – crs1138 Aug 09 '13 at 12:52
  • 1
    There is a better way to achieve this, see : https://stackoverflow.com/a/15434926/782013 – gordie Jun 17 '17 at 11:13