Show Heading when Div is visible
I'm trying to display one of two headings depending on whether some DOM elements are available / visible on the page. For some reason, it's not working... Here's the live demo so far.
I've got the following code:
$('h3.list_heading').css('display', 'none');
$('h3#error').css('display', 'none');
开发者_运维百科 if ( $('div.availableNowListing').filter(':visible').length == 0) {
$('h3#error').css('display', 'block');
} else {
$('h3.list_heading').css('display', 'block');
}
At the moment, no matter what I select I only ever get one heading displayed...
EDIT Just to explain what should happen: When clicking on the store to sort by, it should only display entries that's associated with that store. If there's no fruit associated with that store, the heading:
Our Suggestion of the Best Available in xxxxx this Week
should change to
Bad Luck! It seems we could't find any good fruit at xxxxx store this week
EDIT 2 Tried using the following code, but nomatter which store I select to sort by, I just get the error message even if the div's I'm looking for are present...
$('h3.list_heading').hide();
$('h3#error').hide();
if ( $('div.availableNowListing:visible').length) {
$('h3#error').show();
} else {
$('h3.list_heading').show();
}
Try changing these lines in your switch
$('div.availableNowListing').not(':first').find('div.available_now_entry').fadeOut('fast');
check_heading();
to this instead, shifting the function call as a callback for fadeOut()
.
$('div.availableNowListing').not(':first').find('div.available_now_entry').fadeOut('fast', check_heading);
Not sure if it will help, but try changing the code to:
$('h3.list_heading').hide();
$('h3#error').hide();
if ($('div.availableNowListing:visible').length) {
$('h3#error').show();
} else {
$('h3.list_heading').show();
}
function onscreen_sort (get_store) {
var check = false;
$('div.availableNowListing').each( function() {
// Reset Display
var correct = $(this).children('.' + get_store).not(':first-child')
var incorrect = $(this).children(':not(.' + get_store + ') ').not(':first-child')
if(correct.length > 0) record = true;
correct.find(":hidden").fadeIn('fast'); //only hide which is not correct ->less dom overlow
incorrect.find(":visible").fadeOut('fast'); //any only show which is correct but hidden
});
check_heading(check)
}
function check_heading(boo) {
$('h3#error').hide();
$('h3.list_heading').hide();
if (boo) {
$('h3.list_heading').show();
} else {
$('h3#error').show();
}
}
switch ( store_selected ) {
case "all" :
var class_match = "in_all"
onscreen_sort(class_match);
$('span.store_change').text( ' All Stores' );
$('div.availableNowListing').not(':first').find('div.available_now_entry').fadeOut('fast');
//check_heading(); //no more needed!
break;
case "asda" :
...
...
...
I hope this works. God luck!
精彩评论