I was playing with Dreamweaver the other day, just to see what kind of non Flash platform technologies are available these days, when something caught my eye. That “something” was the Collapsible Panel widget – part of the Spry/ajax framework that comes with Dreamweaver. It seemed to me that with just a minimal amount of ajax style javascript, one could add new content to the panel on the fly – even from a Flash or Flex built .swf file. So after a little bit of playing around, this here is what I came up. While I don’t intend on writing a full fledged tutorial, I thought I’d share how it was done. Bear in mind that although I put together a simple image gallery, you could also use the Collapsible Panel to display .pdf files, .doc files, maps, etc. Essentially, anything you would normally display in popup window can, instead, be kept tucked away in the same html page eliminating the need for those annoying popups.
To get started, let’s take a look at the generic .html document created by Dreamweaver when you insert a Collapsible Panel into a blank page (I’ll call it index.html from here out). It should look something like this:
Untitled Document
TabContent
The first thing we want to do is customize the file a little bit. Give the document a decent title. In addition, give the Collapsible Panel a meaningful instance name. Since I was using mine to display image files, I called it “imagePanel”. This has to be changed towards the bottom of the html file in the line that instantiates the panel (both the var name and the argument passed to the class) and also in the id attribute of the div immediately following the opening body tag. Also, add some meaningful content to the CollapsiblePanelTab and CollapsiblePanelContent divs (e.g. for mine I used “- Click here to display/hide selected image -” and “This text will be replaced by selected image” – okay, so maybe the second item wasn’t that meaningful, but you can add what you want). Finally, and perhaps most importantly, add an id attribute to the “CollapsiblePanelContent” div. I just used the simple id “panelContent”. This is what we’ll be using to add content to the div later, so it’s a step you really don’t want to overlook if you’re playing along at home. After these changes your index.html should look something similar to this:
My Title
-Click here to display/hide selected image-This text will be replaced by selected image.
Since we already have the html file open, let’s go ahead and write the markup to add a .swf file. I used SWFObject 2.0 to embed my .swf (when using SWFObject, don’t forget to copy the swfobject.js file to the correct directory!), so that’s the method I’ll be showing here. I knew in advance I’d call the .swf “main.swf” and also knew I’d be targetting the version 9 Flash Player. Also, it’s always good to throw in a little bit of CSS styling to get rid of unwanted padding around your content – nothing too fancy or new to most folks here. My final index.html file wound up looking like this:
Flash + Spry = Fly | another fine mess from onebyonedesign.com
- Click here to display/hide selected image -This text will be replaced by selected image. This content requires a more up to date Flash Player and javascript.