Monthly Archives: May 2009

IE7 + keypresses + wmode solution found

Posted by on May 11, 2009 6 comments

The DOM is like an Ogre — it has layers… lots and lots of layers…

This way of thinking was key to the solution I found to a very interesting problem a friend of mine presented.

Problem: Integrating a Flash game that uses the up and down arrows into a new site with drop down menus. The menus need to sit on top of the flash game, so wmode=transparent must be used. As we know, Z-index does not work when a flash piece is running in the default “window” mode. Because the page is longer than the viewable area, it needed to scroll and in IE7, when hitting the up and down arrows in the game, the whole page would scroll. Essentially when the flash piece runs in wmode=transparent|opaque, IE7 captures the keystrokes along with the flash piece.

What do we want: We want the user to be able to use the up and down arrows without the page scrolling and the key presses registering in the game like it does in all other browsers.

Solution: overflow:auto

I wrapped the flash content div in a wrapper div the exact height of the flash movie and set its overflow property to auto. What this does is put the scrolling/key capturing focus on that div instead of the document when you click on the flash piece and play the game. Because the wrapper div is the exact height, there is nothing to scroll and all works well, flash registers the key presses and the screen does not move.

Sample:

<div id="gameWrapper" style="height:400px; overflow:auto">
<div id="flashContent">Flash will load here via SWFObject call. The flash movie is 400px in height and has the param.wmode set to "transparent|opaque"</div>
<div>

I was shocked I could not find this solution as easily online as I’d hoped. I did find a few examples of this after I figured it out, but the posts were very difficult to read made a simple solution look terribly difficult.

ThreeSharp and creating an empty folder

Posted by on May 5, 2009 3 comments

I’m building a web based S3 explorer/media manager for a work project as well as my DizCollect project. It is being written in .NET/C# ASP.NET MVC and I had a special need — creating empty folders for users to upload files to. Since I don’t store the files locally, I couldn’t just upload new files and have the folders build out.

I use the wonderful C# S3 library ThreeSharp.

The one thing it does not do out of the box is allow you to just create an empty folder. My behavior will be that a user clicks on a “new folder” button and is presented a text box. They enter the name of the new folder and it is created in the current location they are browsing in my S3 explorer. To get ThreeSharp to do this, you must add a content_type of  “binary/octet-stream” and specify the folder with a trailing ‘/’. The ‘/’ is very important and is the difference between a folder or a file being created.

I hope this helps someone. It took me several hours to figure this out and I could not find a good example online anywhere.

Here is my extension to the ThreeSharpWrapper class to create an empty folder

/// <summary>
/// Adds a folder (empty) to a bucket
/// </summary>
public void AddEmptyFolder(String bucketName, String keyName) {
using (ObjectAddRequest objectAddRequest = new ObjectAddRequest(bucketName, keyName))
{
objectAddRequest.QueryList.Add("content_type", "binary/octet-stream");
using (ObjectAddResponse objectAddResponse = this.service.ObjectAdd(objectAddRequest)) { }
}
}

then to call the function you would use:

wrapper.AddEmptyFolder("myBucket", "test/");  //@params: (str)bucketName, (str)folderName