Getting Highslide JS to assign an id to an iframe

After many days of working on a slick AJAX enabled video pop-up, I threw in the towel and decided to switch to using an iframe to call in the Flash video player. Ultimately, the end result is the same. The Ajax call was refusing to run the SWFObject which rewrites the div and embeds the Flash player. The window would open, but no video was present. The benefit of using SWFObject to embed the video far outweighs the benefit of using a true AJAX call for launching the videos. Iframe was the logical contingency.

The problem with using an iframe in Highslide was when the window was closed/hidden in IE, the video continues to play and the audio could be heard despite the fact that the video was not present. I tried various methods of rewriting the video div upon closing using getElementById, but these would end up breaking things when subsequent videos on the same page were played. I also tried reloading the iframe upon closing which would cause the video to stop playing, however since Highslide's instance of create.Element doesn't assign an ID, my efforts were met with further resistance by IE.

Ultimately, I ended up adding some code to highslide-html.js file telling it to assign an id to the iframe (~line 202, last line is my addition and assigns the iframe an id="videoframe") :


this.iframe = hs.createElement('iframe', { frameBorder: 0 },
{ width: this.objectWidth +'px', height: this.objectHeight +'px' },
this.objContainer);
this.iframe.id='videoframe'; // added to assign id


With this addition the Highslide generated iframe would now have an ID attribute which I could target with some simple DOM scripting telling the iframe to reload itself:


function reloadFrame() { // This reloads the iframe upon closing in order to stop video in IE
var objFrame = document.getElementById("videoframe");
objFrame.src = objFrame.src;
}


I trigger this event by appending it to the close text of my Highslide div. As the video is close the iframe is reloaded thus stopping the video from playing:



onclick="reloadFrame();return hs.close(this)



Now this code works for my purposes and gets around IE's quirky behavior. Ultimately, if you have multiple iframes you would need to assign them different IDs and would need to find a way to assign and pass the IDs dynamically. But hardcoding them in works for me.
•

[5] comments (11867 views) |  [0] Trackbacks   [0] Pingbacks

Google! Woot!

Whoah! Two posts in two days. Maybe I should admit myself?

My morning routine is pretty much the same each day: Wake up, eat, workout, bathe, eat more, feed Tina, and check my Google standing in the world. I've done a lot of work getting KH exposure in Google (among others), so we're usually in the top spots for such keywords as knitting, learn to knit, knitting videos, etc. Google also sends us about 40% of our traffic everyday! So, today was extra nice as we're sitting in the #2 slot for knitting out of 20,300,000 possible results! Not too bad (although we'll probably bump down to 3rd or 4th in a couple hours. Hence the screenshot as proof!). If only I could find a way to knock about.com's knitting page from the top. Their placement is not their based upon the quality of their content but rather the ubiquity of their about.com domain and brand. Someday I will unleash my evil monkeys upon them. Someday about.com!

•

[0] comments (1339 views) |  [0] Trackbacks   [0] Pingbacks

Work and Stuff

Well, I just got a non-spam comment to this blog (thank K) which sort of reminded me that this blog-o-thing exists and people occasionally stumble in here. I've been meaning to post something new and interesting for a while, so without further ado...

I've been getting quite absorbed in my work lately. The latest project I am working on (err, slaving away at) is Amy's fabulous web site: KnittingHelp.com. The site continues to grow in popularity and with each newbie knitter visitor I cringe. You see, the existing web site design was knocked out in a weekend in 2004. At the time it was just a pet project for Amy so I put very little forethought into the design and just created a unreasonably clean and simple design. It's a horrible design in my opinion, in both aesthetics and coding, with all sort of nasty nested tables and an atrocious image based navigation. Yuck! It such a shame to my design ideals!

Earlier in the year I set forth to create a new design, but the pressures of my day job quickly overtook that. But here we are at the cusp of a new knitting season and I decided a couple weeks ago to delve back into the new KH design as a last ditch effort to restore my dignity.



This is just a corner screen shot. I don't want to revel too much just yet. But here's some technical highlights of the new design:

• Pure CSS and XHTML design coded to web standards and fully validating. Heck Yes!


• CSS based two-tier navigation. You wouldn't believe how much work went into this part! I think I invented a new way of doing this, so I may release a tutorial when I have it cleaned up.


• Ajax enabled goodness!


• Takes advantage of some nice javascript libraries such as
  Prototype , Scriptaculous and Mootools


• Videos are (slowly) being refilmed and converted to Flash and played through a psuedo-streaming Flash player. The new videos are much larger (480 x 320) and have better quality and sound with little increase in bandwidth overhead.


• Videos are no longer displayed in a pop-up window but rather get displayed via an Ajax call through
  HighSlide JS. Very slick!


• CSS themes! Boy knitters can choose blue themes and girl knitters can choose pink :) We'll probably have 4 to 5 separate color themes.


• The new site is being build with Modx, a CMS and PHP application framework. This will make for nice an easy development and future management of the site, as well as the possibility of having other editors and contributors add content to the web site.

Well, that's it in a nutshell. As you can see the new KH is very technologically enabled and full of web 2.0 bling. At the same time, I am building the site to degrade elegantly in older browsers which might not support some of the advanced features. The goal is to make a elegant site that is accessible to everyone. The work to date has involved a lot of freshing and expanding of my skill-set as well as many nights working past 1:AM. I am thoroughly enjoying every challenge the re-design as presented and hopefully we'll be ready for phase one of the launch in a couple weeks.
•

[1] comments (1307 views) |  [0] Trackbacks   [0] Pingbacks

Happy Birthday to Me!

•

[1] comments (967 views) |  [0] Trackbacks   [0] Pingbacks