I am happy to announce that yesterday, this blog hit 22 subscribers. Thanks to all of you who enjoy the blog. More awesomeness coming soon.
Statistics are provided by Google’s Feedburner API service. Chart made with jQuery and jscharts using the canvas html element (non-ie) or vml (ie).
(This post contains a static image of this blog’s stats on April 6, 2009. For stats up to today’s date, check out the stats page.)
It’s somewhat ironic that I happened to notice a paticular DOM bug today, of all days. Today, John Resig posted a blog entry called “The DOM is a Mess” in which he described–and posted a video link to–a talk he was asked to give at Yahoo recently.
As the title suggests, the talk was about how javascript is inextricably linked to the DOM, and how this entanglement has caused DOM-specific javascript to have lots of browser-specific bugs. In one of his slides, John says:
Nearly every DOM method is broken in some way, in some browser.
This is hard to believe, I know; but it’s true.
So, back to why we’re here. It just happens to be a coincidence that the day I watched John Resig’s video, I found a particularly nasty bug in IE. Now, I know I’m using the word bug loosely. I have yet to actually figure out what is causing the error. It is possible the error lies with flash. But as you will see in a moment, it is certainly very peculiar.
I noticed the bug when I was testing this very blog in IE 7. Here’s the wierd behavior:
Whenever I would refresh, leave, or close a tab in IE7 of a document which contained an <embed> element, I was receiving an “Object required” error. If that isn’t strange enough, the error seemed to always occur on “Line 53, character 3″ regardless of where the <embed> tag was in the page.
Here is my bug report page with bug isolated: http://polymath.mit.edu/projects/ieBugs/objectRequired/ieError.html.
Fortunately, I found a very simple fix. (Found here.)
<embed id="ieFixID"></embed>
<script type="text/javascript">
window.onbeforeunload = ieFix;
function ieFix() {
var ieFixElement = document.getElementById("ieFixID");
ieFixElement.parentNode.removeNode(ieFixElement);
}
</script>The idea is to use the onbeforeunload event to remove the <embed> element before you leave the page. I’m still not 100% sure why this solution works, but hey, it does. So let’s not complain.
If anyone has seen this bug before and has any insight, it would be much appreciated.
When I created the Canvas project a few months ago, many of you were wondering if a future release would exist where users could upload their own photos. Well, you’re in luck! Collage does just that.
Here are a couple of collages made with the site:
http://polymath.mit.edu/projects/collage/?photo=49704b8d5fb42 (mona lisa)
http://polymath.mit.edu/projects/collage/?photo=49704be3d73bd (barack obama)
This is an update to my previous post on this project, entitled Simple DropDowns for All.
Simple DropDowns (SDD, for short) is now out of beta (version 0.4) with a new Version 1.0 release.
Check out this screenshot of the new documentation page:
There are several new features in the new release including the much requested onmouseover (as opposed to onclick) activation of the dropdowns, and better event handling for hiding the dropdowns after use. Also, the documentation and usage has been simplified so that the title element now only used to point to a hidden div containing the dropdown menu’s contents.
The new script can be downloaded here:simpledropdowns.js (or minimized: simpledropdowns-min.js).
The homepage for the project is here: http://adam_s.scripts.mit.edu/dropdown/.
And the google code project homepage is here: http://code.google.com/p/dropdowns/.
Tonight I’ve been hard at work on a new music page. The new site utilizes two really cool javascript libraries which are brand spankin’ new.
One is called SoundManger (which has just released a much anticipated version 2), and the other is called Smartlook (from the guys over at ISSUU).
SoundManager is a javascript library which makes playing sounds on a web page really easy. I used it on my new site to turn a simple list of mp3 files into a cool-looking audio playlist.
Smartlook is a javascript library which works in conjunction with an ISSUU account. ISSUU is a great site for publishing your documents (.pdf,.doc,.xls,.ppt,etc.) online. It features a really clean flash player and uses top-notch document conversion tools. Smartlook is their newest service. After generating a key based on your ISSUU account id (you can do this by logging into ISSUU and going here) and including the smartlook.js library in you website, all of your .pdfs, .docs, .ppts, and other supported documents that your website links to become links to the issuu flash document viewer for that document.
Basically, the code allows you to skip the step of having to upload your documents to ISSUU before you embed them in your page. Smartlook automatically uploads your documents to ISSUU using you account, and redirects all of your links to documents automatically. It’s pretty sweet. Check out how I used it to display pdfs of musical scores I published here.
I was looking at Youtube the other and was noticing they use a ton of dropdown menus.
Examples of dropdown menus found at YouTube
When I looked through YouTube’s code, I had a hard time finding out how they were generating these. It turned out they had a pretty elaborate script which relied on several other youtube resources. So I decided to write a standalone version that looks just as good, performs even better, and has a tiny footprint. Here’s what I came up with:
Example Dropdown Menu: Example Dropdown Menu
Doesn’t it look great? And it’s incredibly simple to use.
How To Use
1. First, download simpledropdown.js script.
2. Next, include the following line of code in your website:
<script type="text/javascript" src="simpledropdowns.js"></script>3. Create span elements with the class set to "dropdown" and place the text you want to fill the dropdown menu
with in the title attribute, like so:
<span class="dropdown" title="Menu Text">Drop Down</span>That simple code will create this menu: Drop Down.
To create something fancier like the menu “Example Dropdown Menu” above, or to learn more about how the dropdown menu can be used in your website, check out the SimpleDropDowns project home page here. The script also has a Google Code project page here. Enjoy!
Screenshot of http://polymath.mit.edu/music/player
A few weeks ago I set out to design a new website to showcase some of the music I’ve composed and had performed over the last two years. As with any website, I wanted to make sure it would be easily update-able. So I decided to use the very popular JW (Jeroen Wijering) Flash Media Player in order to take advantage of its ability to play XSPF (XML (Extensible Markup Language) Shareable Playlist Format) playlists. (Don’t you just love it when acronyms get compounded!) I’ve used the JW Flash player before for the Vi / deo site I made last summer. However, since a new version of the player had just been released, rather than use a similar implementation to the one over at Vi / deo, I decided instead to start from scratch, in order to take advantage of three key new features in the player.
JW Flash Player New Features
I designed my own skin, based on the Modieus (or “Stylish”) skin from Jeroen. The main improvements I made to the skin were customizing the look of the playlist items, so that each would not take up much vertical space. This makes the skin more suitable for music playlists. (It was originally intended more for video playlists.) The skin I made is available at Jeroen’s site here. You can also grab it here, just be aware of the license information found at Jeroen’s new site, Longtail Video.
2. New and Improved Javascript Interaction
The way I used this will be apparent in the site itself. The main feature I use is the ability to change the page’s content (the stuff displayed on the right-hand side) based on the current song being played by the player.
I do this by adding an event listener to the player’s ITEM event.
<script type="text/javascript">
var player;
function playerReady(obj) {
player = document.getElementById(obj['id']);
player.addControllerListener('ITEM','onPlaylistItemChange');
};
function onPlaylistItemChange(event) {
//handle event
}
</script>3. Plugins
There’s a really cool audio visualization plugin called Revolt. You just have to see it. It’s awesome.
The new music player site can be found at http://polymath.mit.edu/music/player/.
The xspf playlist which drives the site is here.
The Modieus_Slim skin that I made can be found here. (zip folder containing .fla, .swf, and other supporting files)