I have the following code:
function isVisible(selector) {
$(selector).is(':visible');
}
var isMapVisible;
var initialWindowWidth = window.innerWidth;
/* Window Resize Helper */
function handleWindowResize() {
isMapVisible = isVisible('.search__map');
if (window.innerWidth > 768) {
var windowHeight = window.innerHeight,
searchResultsHeight = windowHeight - $('.search__results').position().top,
searchMapHeight = windowHeight - $('.search__map').position().top;
$('.search__results').height(searchResultsHeight);
$('.search__map').height(searchMapHeight);
if (initialWindowWidth < 769) {
/*
This is a hack to trigger the map to show up if initial windowWidth causes the map to hide.
it only triggers once.
*/
resizeMap();
map.setZoom(map.getZoom() - 1);
initialWindowWidth = 1000;
}
} else {
$('.search__results').height('auto');
}
}
And in the function handleWindowResize(), I had a variable that I set globally as isMapVisible. and is calling another function isVisible(). I found out that when I replace that line of code with isMapVisible = $('.search__map').is(':visible'), I am able to get the correct result, but if my code is as copied above, I would get undefined. Any idea why?