内容在页面加载时消失

Question

So I have this simple issue and I can't figure it out how to get this done. Okay, the thing is that I have this JavaScript which works on to display the content with respect to the menu. Like for example If I choose any thing from the menu it filters the content and shows me the selected item. In my case, when the page loads, the content comes for a second and then disappears. I am not sure why is this happening?

The JS

var CombinationFilters = function() {
    var filters = {};
    var container = null;
    var initEvents = function()
    {
        // filter buttons
        jQuery('.isotope-filter-none li').click(function() {  
            // don't proceed if already selected
            if (jQuery(this).hasClass('selected')) {
                return;
            }

            var optionSet = jQuery(this).parent();
            // change selected class
            optionSet.find('.selected').removeClass('selected');
            jQuery(this).addClass('selected');

            var group = optionSet.attr('data-filter-group');             
            filters[ group ] = jQuery(this).children("a").attr('data-filter-value');
            // convert object into array
            var isoFilters = [];
            for (var prop in filters) {
                isoFilters.push(filters[ prop ]);
            }
            var selector = isoFilters.join('');            
            container.isotope({filter: selector});

            return false;
        });

        // remove selected category
        jQuery('.remove-selected-category').click(function() {  
            jQuery(".isotope-filter-drop-down li[menu-top-index='"+jQuery(this).attr('menu-group')+"']").trigger('click');
        });

        // filter buttons from drop down
        jQuery('.isotope-filter-drop-down li').click(function() {  
            // don't proceed if already selected 
            if (jQuery(this).hasClass('choosen')) {
                return false;
            }

            var choosenCategoryName = jQuery(this).attr('choosen-category-name');
            var menuGroupIndex = jQuery(this).attr('menu-group-index');
            if(choosenCategoryName == "") {
                jQuery(".choosen-category[menu-group='"+menuGroupIndex+"']").hide();
            } else {
                jQuery(".choosen-category[menu-group='"+menuGroupIndex+"'] > div").html(choosenCategoryName);
                jQuery(".choosen-category[menu-group='"+menuGroupIndex+"']").show();
            }

            var optionSet = jQuery(this).parent().closest("div");
            // change selected class
            optionSet.find('.choosen').removeClass('choosen');
            jQuery(this).addClass('choosen');

            var group = optionSet.attr('data-filter-group');  

            filters[ group ] = jQuery(this).children("a").attr('data-filter-value');
            // convert object into array
            var isoFilters = [];
            for (var prop in filters) {
                isoFilters.push(filters[ prop ]);
            }
            var selector = isoFilters.join('');            
            container.isotope({filter: selector});            
            return false;
        });

    };

    var initContainer = function() {
        container = jQuery('#container').isotope({
        itemSelector: '.isotope-item' /*,            
            masonry: {
                columnWidth: 80
            } */
        });
    };

    return {
        init: function()
        {              
            initContainer();
            initEvents();
        }
    };
}();

jQuery(CombinationFilters.init);

The HTML

This is the HTML for one the entity in the content, there are more. I am just providing one so that I could let you guys know about the classes.

<div class="isotope-item grid-item one-quarter iphone mood symptoms" style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 3520px, 0px);">
<article class="tools archive grid four-column">
<div class="image">
<img src="http://localhost/newwplms/wp-content/uploads/2013/09/Symple.jpeg">

<div class="hover">

<a class="action" href="http://localhost/newwplms/tools/symple-symptom-tracker-health-diary/">

<i class="icon-chevron-right"></i></a><a class="action fancybox" href="http://localhost/newwplms/wp-content/uploads/2013/09/Symple.jpeg">
<i class="icon-search"></i></a></div></div><div class="meta">
<h4 class="title">

<a href="http://localhost/newwplms/tools/symple-symptom-tracker-health-diary/">Symple</a></h4>

</div>
</article>
</div>

Answer 1

Your first line of html includes as part of the inline css:

transform: translate3d(0px, 3520px, 0px);

I'm guessing that you don't have a screen that's 3520 pixels tall! So you're sending the div off the screen. Remove that and you'll see your div.