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>
Your first line of html includes as part of the inline css:
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.