I’ve, as you maybe know, been working on a Silverlight flickr viewer for my fiancées blog. And now that I have finally got it all done, blogged about it and so on, it was time to actually implement it on her blog. So I took the code from my blog posts and built my services and view models, but tore out the entire view layer and replaced it with a somewhat prettier thing. It has a thumbnail view that is visible in her blog posts. It looks as small Polaroid photos scattered on her page. And then when you click one of them, it changes to a full screen view and shows a larger Polaroid picture with the pictures description an handwriting.
However, I chose to NOT use Silverlight’s own full screen mode and instead place the control inside a div and then use JavaScript and css to change that div from inline to full screen. Why not use the Silverlight full screen? I don’t really know. I guess mainly because I wanted the full screen to be transparent so it looked like the Polaroids were actually laying on her blog. So basically, when clicking the thumbnail the application calls out to a JavaScript that then modifies the css for the div. Changing it from inline to take up 100% and having position fixed. Basically taking over the entire window.
This works fine in IE. It actually looked really cool. I also have the application resizing the div it is contained inside when the list of thumbnails is loaded. That way I can show all thumbnails without scrollbar. So what I’ve done it that I listen to the SizeChanged event for the list, and when that is raised, I tell a JavaScript to change the size of the div that the plug-in is inside.
But then I published it. And when doing so, it stopped working. There was something wrong with the css. So I brought up Firefox. I love Firebug, but generally use IE for all my browsing. I don’t know why, but I just don’t feel comfortable with Firefox for some reason. But Firebug is unbeatable. The “Developer Tools” in IE 8 is a step in the right direction, but Firebug is just better… I would even dare say that Firebug and Fiddler 2 are probably the most helpful little tools you can have as a web developer. Next to .NET Reflector, but that is more general .NET development help than web development.
But lets get back on track. What happened when I pulled up Firefox, was that my application failed. When I got the css and JavaScript up and running in my applications new environment, I found a disturbing thing. Silverlight is truly cross-browser and cross-platform, but I made a serious mistake. I left Silverlight and used JavaScript and css, and all of the sudden I had left the safety of Silverlight’s cross-browser support. And that meant that my application started failing. Because, apparently Firefox reloads the plug-in when the div is modified. It worked when expanding the div, but changing it to having fixed position is apparently different. So my application loads up, the user clicks a thumbnail, the JavaScript modifies the css to take up full screen and the Firefox reloads the Silverlight application that all of the sudden has no idea what so ever that the thumbnail has been clicked. So it resets everything and shows the thumbnail list again… Thank you Firefox!!!
If I had known this from the beginning, I would probably have opted for 2 different controls. One to show the thumbnail lists in the blog posts, and a separate hidden control that show the large image. I would then have used JavaScript to show the “large image control” and to tell it what image to show… or something like that. In Silverlight 3, I could have passed information between the controls using managed code using a new feature. But I’m stuck with Silverlight 2.