John Congdon

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

https://github.com/EmilStenstrom/jQuery-animate_from_to

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 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.

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');
         this.set(ui.item.value);
         if (originalValue != ui.item.value || this.box.val() != ui.item.value) {
-          this.search(e);
+            if (this.options.app.options.autosearch) {
+                this.search(e);
+            }
         }
         return false;
       }, this)

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 http://www.bowlingball.com 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>”);

cell.data( “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 (item.reviews) {

reviews = “<br/><a href=’” + item.value +”&reviews=1#tabs’><img class=’reviews’ src=’” + item.reviews + “‘ alt=’Read Reviews’ title=’Read Reviews’ />(” + item.reviewCount + ” reviews)<br/><img class=’reviews’ src=’http://c0004111.cdn.cloudfiles.rackspacecloud.com/ReadReviews_95x12.png’ alt=’Read Reviews’ title=’Read Reviews’ /></a>”;

}

if (item.video) {

video = “<a href=’” + item.value + “&video=1#tabs’><img class=’video’ src=’http://c0004111.cdn.cloudfiles.rackspacecloud.com/WatchVideo_90x12.png’ 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 http://stackoverflow.com/questions/2744747/quick-example-of-multi-column-results-with-jqueryuis-new-autocomplete which was using a table to align information.

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):
http://img.youtube.com/vi/VIDEOID/0.jpg

HTML:

 

</div>

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="http://www.youtube.com/embed/' + vid + '?autoplay=1" frameborder="0" allowfullscreen></iframe>');

});