Categories
Programmer's Mindset

Chrome Not Displaying All Flash Objects On My Page

So, I had a very strange thing happening only in chrome.  Phoneburner.com 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.

$().ready(function()
{
$(“object”).css(‘display’, ‘inline’);
$(“object”).css(‘display’, ‘inline’);
$(“object”).css(‘display’, ‘inline’);
$(“object”).css(‘display’, ‘inline’);
$(“object”).css(‘display’, ‘inline’);
$(“object”).css(‘display’, ‘inline’);
});

Categories
post

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

Categories
post

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

HTML:

 

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

<img class='YouTubeScreen' rel='VIDEOID' src='http://img.youtube.com/vi/VIDEOID/0.jpg' border='0' />

</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>');

});

Categories
post

jQuery Panel Slide Out

I was looking for some code to do slide out panels and found http://www.building58.com/examples/tabSlideOut.html

I created a patch that will allow you load the content through AJAX, instead of statically in the HTML.

In the HTML you need to add another element (DIV) that wraps the content to be loaded. Change the example on the page above with the two lines left aligned below.

     <div class=”slide-out-div”>
          <a class=”handle” href=”http://link-for-non-js-users.html”>Content</a>
          <h3>Contact me</h3>
<div id=”CONTENT_TO_REPLACE”>
          <p>Thanks for checking out my jQuery plugin, I hope you find this useful.</p>
          <p>This can be a form to submit feedback, or contact info</p>
</div>
     </div>

And then in the initialization step:

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js” type=”text/javascript”></script>
<script src=”http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js”></script>

     <script type=”text/javascript”>
      $(function(){
           $(‘.slide-out-div’).tabSlideOut({
                tabHandle: ‘.handle’, //class of the element that will become your tab
                pathToTabImage: ‘images/contact_tab.gif’, //path to the image for the tab //Optionally can be set using css
                imageHeight: ‘122px’, //height of tab image //Optionally can be set using css
                imageWidth: ’40px’, //width of tab image //Optionally can be set using css
      tabLocation: ‘left’, //side of screen where tab lives, top, right, bottom, or left
                speed: 300, //speed of animation
                action: ‘click’, //options: ‘click’ or ‘hover’, action to trigger animation
                topPos: ‘200px’, //position from the top/ use if tabLocation is left or right
                leftPos: ’20px’, //position from left/ use if tabLocation is bottom or top
                fixedPosition: false, //options: true makes it stick(fixed position) on scroll
‘contentURL’: ‘http://URL_TO_YOUR_CONTENT’,
‘contentDiv’: ‘CONTENT_TO_REPLACE’ //This is the id of the content box above in the HTML
          });
});

      </script>

Below is the patch to v1.3

— jquery.tabSlideOut.v1.3.js 2009-09-21 00:00:53.000000000 -0400
+++ jquery.tabSlideOut.ajax.js 2011-02-25 08:38:47.000000000 -0500
@@ -35,11 +35,19 @@
pathToTabImage: null,
imageHeight: null,
imageWidth: null,
– onLoadSlideOut: false
+ onLoadSlideOut: false,
+ contentLoaded: false,
+ contentURL: null,
+ contentDiv: ”
}, callerSettings||{});

settings.tabHandle = $(settings.tabHandle);
var obj = this;
+
+ if (settings.contentURL) {
+ settings.contentDiv = $(settings.contentDiv);
+ }
+
if (settings.fixedPosition === true) {
settings.positioning = ‘fixed’;
} else {
@@ -142,6 +150,10 @@
};

var slideOut = function() {
+
+ if (settings.contentURL && (settings.contentLoaded === false)) {
+ settings.contentDiv.load(settings.contentURL, function() { settings.contentLoaded = true; });
+ }

if (settings.tabLocation == ‘top’) {
obj.animate({top:’-3px’}, settings.speed).addClass(‘open’);