Programmer's Mindset

Chrome Not Displaying All Flash Objects On My Page

So, I had a very strange thing happening only in chrome. has a way for people to record voicemail messages that they want to leave while making phone calls.  On the page that lists them for the members to listen to before using, we do a simple object embed of a small flash player.

This has worked flawlessly for a long time.  All of a sudden, we noticed in Chrome that some would randomly not show.  In this one account, there are about 20 of these embedded flash players and only 3-5 would show up.  The weird part is that if I refreshed, a different mix of 3-5 would show.  Some would disappear, others would appear.

There were no errors in the Developer Console.  I played with the flash plugins and noticed if I disabled both, reloaded the page, and then enabled the plugins all would show up…

Debugging things that don’t make sense is VERY difficult.  So I went to the javascript console and decided to use jQuery to hide them all and then reshow.  Sometimes that worked.  Ok… getting closer, CSS may be the answer.  I then tried just showing, not hiding first.  Most would show, but not always all of them.  But if I ran it a few times, they would eventually all show up.  WTF?!?!??!!

So I added a dirty hack to make it work.

$(“object”).css(‘display’, ‘inline’);
$(“object”).css(‘display’, ‘inline’);
$(“object”).css(‘display’, ‘inline’);
$(“object”).css(‘display’, ‘inline’);
$(“object”).css(‘display’, ‘inline’);
$(“object”).css(‘display’, ‘inline’);


Just had my first GitHub pull request put…

Just had my first GitHub pull request put into a project. Happy to contribute, even in small ways.


Lazy Loading Images with JQuery

I am trying to speed up a website every way that I can. I decided to look into lazy loading which I have read about numerous times.

Lazy loading is basically not wasting time loading images that are off the screen, or out of the viewport.

This got me thinking, why do the browsers not do this for us? They would be better equipped to handle this than a JS developer. Especially since the browser is doing the rendering, it knows what it needs in order to display the screen.


I am proud of my progress with Javascript…

I am proud of my progress with Javascript. I used to consider myself a javascript hacker. I could put other people’s components to work, but wasn’t comfortable writing my own.

I would consider myself much more proficient today. I can write maintainable/reusable Javascript. I have become more capable of writing routines that can be used on multiple widgets easily.

My latest code has been able to work on multiple “widgets” within one page. This was exciting for me, and I ended up staying late at work the other night as I got near completion. I was sooo happy with my accomplishment, but being the only programmer, it can be tough. Nobody really appreciates the successes that I feel are so exciting. It’s not their fault by any means, they just are not into the tech as much as I am.

At the end of the day, I tell my wife. She is the best cheerleader a guy could have. While she doesn’t fully understand, she puts on a smile and tells me how great it is when I do accomplish the small things. She tries so hard to be understanding and just there for me. I am a lucky lucky man.


Patch for VisualSearch.js To Prevent AutoSearching

I learned about VisualSearch today when I listened to The Javascript Show podcast.

I started using it for some backend work. However, I did not like the fact that as soon as you completed a facet, it did the search automatically. Don’t get me wrong, it is great for the way DocumentCloud is using it. Very ajax responsive, but for what I am trying to do, I needed that to stop.

I changed it so that I could pass autosearch: false as a parameter to VisualSearch. Now it will only search after hitting enter.

--- visualsearch.js        2011-08-04 13:16:46.000000000 -0400
+++ visualsearch.js     2011-08-04 13:23:21.000000000 -0400
@@ -30,6 +30,7 @@
     var defaults = {
       container   : '',
       query       : '',
+      autosearch  : true,
       unquotable  : [],
       callbacks   : {
         search          : $.noop,
@@ -543,7 +544,9 @@
         var originalValue = this.model.get('value');
         if (originalValue != ui.item.value || != ui.item.value) {
+            if ( {
+      ;
+            }
         return false;
       }, this)


jQuery Multiple Column AutoComplete (multicolumn)

I was searching for a way to do a jQuery multicolumn autocomplete with a search box, and kept coming up short. The solutions out there were more table based, with a single row of similar data.

On I wanted to have 3 distinct columns when someone searched, the first was for product, the second for articles, and the third column would contain any matching pro shops.

Here’s how I did it, not saying this is elegant, but it works.
1) Create a custom autocomplete widget, based on the one that comes with jQueryUI.
2) Override the _renderMenu function
a) This sets up my columns, and their headers
b) Used CSS to format and float them so that they are side by side.
c) Used $.each to run through the items, examine item.category (set via Ajax data) and appended that to the appropriate column
3) Created a _renderItem that creates each individual item.
a) This creates the div of the item to be appended. It checks for certain pieces such as an image and uses that to create the view

Using jQueryUI autocomplete:

$.widget(“custom.catcomplete”, $.ui.autocomplete, {
_renderMenu: function( ul, items ) {
var self = this;
ul.css(‘z-index’, ‘99999’);
ul.append(“<div id=’productColumn’><div class=’autoCellHeader’>Products</div></div>” +
“<div id=’articleColumn’><div class=’autoCellHeader’>BowlVersity Articles</div></div>” +
“<div id=’proshopColumn’><div class=’autoCellHeader’>Pro Shop Locator</div></div>” +
“<div style=’clear:both;’></div>”);
$.each( items, function( index, item ) {
var column = “#” + item.category + “Column”;
self._renderItem( ul.find(column), item);
_renderItem: function( appendTo, item) {
if (item.image) {
var cell = $(“<div class=’autoCell’></div>”); “item.autocomplete”, item )
var reviews = ”;
var image = ”;
var video = ”;
if (item.image) {
image = “<div class=’imgCell’><a href='” + item.value + “‘><img src='” + item.image + “‘ align=’left’ height=’35’ width=’35’/></a></div>”;
if ( {
reviews = “<br/><a href='” + item.value +”&reviews=1#tabs’><img class=’reviews’ src='” + + “‘ alt=’Read Reviews’ title=’Read Reviews’ />(” + item.reviewCount + ” reviews)<br/><img class=’reviews’ src=’’ alt=’Read Reviews’ title=’Read Reviews’ /></a>”;
if ( {
video = “<a href='” + item.value + “&video=1#tabs’><img class=’video’ src=’’ style=’padding-left: 15px;’ alt=’Watch Video’ title=’Watch Video’ /></a>”;
cell.append( image + ‘<div><a href=”‘ + item.value + ‘”>’ + item.label + ‘</a>’ + reviews + video + ‘</div><div style=”clear:both;”></div>’ )
cell.appendTo( appendTo );
return cell;
else {
return $( “<div class=’autoCell’></div>” )
.data( “item.autocomplete”, item )
.append( ‘<a href=”‘ + item.value + ‘”>’ + item.label + ‘</a>’ )
.appendTo( appendTo );


My inspiration and guide came from which was using a table to align information.


Do You Foresee Any Problems With This Approach To YouTube Videos?

I am trying to squeeze every excess byte out of my downloads. I noticed that even with the iFrame version of YouTube videos, users have to download almost 200K worth of data.

I decided to use the screenshot stored at YouTube (replace all occurrences of VIDEOID with a youtube video):



<div align=center id='vidVIDEOID' stlye='clear: both; margin:0; padding:0;'>

<img class='YouTubeScreen' rel='VIDEOID' src='' border='0' />


And use jQuery javascript like this:

$(".YouTubeScreen").click(function(e) {

var vid = $(this).attr('rel');

$("#vid" + vid).html('<iframe title="YouTube video player" width="640" height="390" src="' + vid + '?autoplay=1" frameborder="0" allowfullscreen></iframe>');