rmurphey

Solution for Google Map contents not showing

Posted

I just spent more time than was reasonable trying to figure out why some Javascript I was using to show a Google map on one site wasn't working to show the map on another site. The map controls and copyright were rendering, but there was no actual map. Turns out the problem wasn't with my Javascript; I had a CSS rule that was setting overflow:hidden on all divs within a container, and the divs created by the Google map API were getting that rule too. No good. I wrote a new CSS rule to set overflow:visible on all divs inside the map container -- problem solved.

Fix for slow-loading Google ads

Posted

Google's AdSense ads, and lots of others, are added to pages using Javascript, and if that Javascript appears early in the page's HTML, it can seriously slow down the rendering of the rest of the page. That's because browsers generally refuse to do any further rendering of the page until they have a requested Javascript file in hand. We ran into this with the ad in the left column of some pages on DailyStrength.org, which appears above the page content in the HTML; when we switched to a new ad provider, which required fetching multiple Javascript files, the issue was even more pronounced. Since these ads only work when Javascript is enabled anyway, I decided to use some DOM manipulation (via jQuery, which is already on the page) to load the ad script in a hidden div at the bottom of the HTML, and then relocate the Javascript-generated iframe containing the ad to an empty, visible div where the ad needed to be:

Now, loading the Javascript doesn't slow down the rendering of the content, and the ad appears right after the page is loaded.

HTML entities from AJAX into input fields using jQuery

Posted

I was receiving a JSON string that contained an HTML entity, like this:

I was supposed to put the value of myValue into a text input. I assigned the value to a variable and tried: but that was putting the string, literally, into the input: — this in spite of the fact that this works just fine: I'm not sure if this is a case of jQuery getting a little overzealous in its helpfulness or what — some Googling didn't turn up much, and I needed to move on. So here's what I did: It's a little hacky, but not so hacky that I feel bad about it, and I guess I'm telling myself that its hacky-ness is not very heavy, and it's outweighed by the time I'd have had to spend to solve the root problem.

jQuery IE7 "Operation Aborted" error

Posted

I just got done troubleshooting an issue with a page with some jQuery on it. The jQuery was in a script called from the head of the document, and its job was to rearrange some elements into tabs once the page was loaded. In unpredictable cases (sequential reloads had different results), loading the page in IE7 would lead to an "Operation aborted" error that provided no additional information. Through some googling, I found out that this was probably related to IE choking when some script was run against the DOM before the DOM was fully loaded. What puzzled me was that I was using $.ready() to wrap my jQuery, which was supposed to wait for the DOM, but it didn't seem to matter. Then I found this -- it turns out that interacting with the DOM via javascript from within a table can make IE all sorts of angry, while interacting with the DOM via javascript from within a div is just fine. While my case doesn't directly match the example above, it seems very possible that the table-based template I was writing for was the source of the headaches. Changing the base HTML template for the page I was working on wasn't immediately in the cards, so I split the offending js file into two pieces -- one in the head of the document that contains some basic functions but didn't actually do anything, and another right before the closing body tag that does the actual talking to the DOM -- and that seemed to fix it.