I use Feedly.com as my RSS reader and have a good amount of content coming in there that I browse each day or so. I certainly don’t remember each and everything I read, but even skimming the content and articles means that one day when I run into a work problem, I might remember “Oh yeah, there’s a solution out there just for this.” So such a thing happened and wanted to share the fix with you.
The problem showed up in a Real Estate website I oversee. The site pulls content from a national data feed and then populates the page(s) based on that data. The site’s issue was that sometimes the Google Map container on the page would show up empty (leaving just an empty frame on display). This was either because the feed data was entered incorrectly, or the address being sent to Google Map’s API just couldn’t be found as perhaps the data only referred to a Lot number and not a proper street address, or the address was just too rural for Google Maps to identify. Anyways, empty boxes on a website look broken and unprofessional, so something had to be done.
Normally, being in control of a site’s content, I would just check to see if variable data existed and then echo it:
<?php
if (!empty($value)){
echo $value;
}
?>
But in this odd case that the data itself was being loaded through a API call the page wouldn’t know ahead of time if the Google Map API found a real address or not (ie. the page gets rendered and the correct information may appear in the map container… or may not).
I played a little with the Javascript for the Google Map API call thinking that I may be able to ascertain whether or not Google found a real address (and therefore would display the map properly) but was unsuccessful. Either because I don’t know my way around Javascript that well or because there was still data in the returned API call even if it was a “failed” address, I couldn’t get that way to work. And then I remembered a trick I read through my RSS feed weeks back that referenced a CSS pseudo-element for not displaying empty table cells (:empty).
As it turns out this worked exactly as expected, and exactly as I needed it to!
When the map api didn’t find a “known street address” nothing was returned:
<div id="map-canvas"></div>
When it found the address and built the map it would of course fill in the content for the map to be displayed:
<div id="map-canvas">Map content displayed here.</div>
So for me to solve the issue of having an empty box appear on the page when an address wasn’t found all I had to so was add the CSS:
#map-canvas:empty {
display: none;
}
This exact example might not be applicable to you. But in my case I had a border, min-height, and outer glow on the map containter so it looked quite bad when the API returned nothing. Now I’m just waiting for more uses for the pseudo-element :empty!
TL;DR: The CSS pseudo-element :empty will be applied to an empty element on the page.