iTunes Store Album Browser Window function in HTML

Ok so I had a hard time figuring what to call this entry, so if I confuse many of you I apologize, but I did warn before that I am not a great writer. The reason for this entry is for a feature I was asked to do not to long ago and failed miserably at. The feature was to create a scroll area that was similar to iTunes album browse interface (pictured below).

Basically you have a content area that displays a certain amount of items and when you click on either the left or right arrow all the contents shift to show the new ones. This is easy to do in Flash, but I needed an HTML equivalent of it as this site was not in Flash. So first I set out to define the divs that would encompass this feature (picture below).

So what exactly is this above? Let me explain. The entire viewable area is what I defined as "frame" this will hold all the child elements such as the left and right buttons, the scrollable area ("scroller") and the content area ("scrollcontent"). Once this was set up I decided to use my favorite animation library (script.aculo.us) and javascript framework (prototype).

My first attempt I used was with the "Photoshop Masking" mentality. Basically, the scroller div would be a defined width div with overflow set as hidden and the content area would be wider child div displaying the content. The scroller div would act as the mask as I move the content area x position. This first attempt worked great on all browsers expect for GUESS WHO!? Yeap, IE. Every time I would call the animation the child div would go to the top level and the masking of the parent div would no longer be active. This only happened in IE and at the time I could not figure out why so I decided to go with another way to display the data. Of course, this drove me crazy and I needed to make it work, so eventually I ran into the "Panic - Coda" website, where they had implemented this exact feature. I needed to know how they did this, so I decided to inspect their javascript files.

I am not going to explain exactly how they did it all, instead I decided to take it to the simplest form. The example I created will allow you to go left and right with the arrows until you reach the beginning or end of which at that point the arrow that represents further scrolling will disappear (this is not available in theirs). Inspecting their files taught me the following.

• ScrollLeft: gets or sets the number of pixels that an element's content is scrolled to the left. This is what makes this possible as it can be used in divs where there is an overflow, even if it is set to hidden. There is also a ScrollTop property if you want to scroll vertically.
• The use of Robert Penner's Easing Equations, the source is in actionScript but is easily implemented as JavaScript functions/
• The use of setInterval in javascript - I had no clue, just like actionScript

Compared to my first draft, this new one actually never moves the position of the scroll content div, instead it changes the scroll position of the scroller div. This now works in all browsers! Yeah!

In the end I created 2 examples, one implemented by using part of Panic's Coda Website javascript functions (again simplified) and the second one using the Yahoo UI Library. I know I said I favored script.aculo.us but in the end I am a Coldfusion Developer and by what I heard some of the new ajax functions are using this library, so why not take it for a spin. I have to say the Yahoo UI Library is pretty freaking slick. Anyways, click below to view the example, the source files do good of explaining how everything works but if anyone needs help understanding just let me know and I will clarify.

Click to view Examples

Until next time ...

URL Rewrite FOR IIS with RegEx support and it isFREE!!!

Well, as I was learning how to do SES (Search Engine Safe) URLs with Coldfusion and IIS , I learned that CF had a built in feature that allowed you to do this. The only problem was that it still required you to have the *.cfm file in your address and your variables/values following separated by "/" rather than the default url patterns.

ie. http://mysite.com/index.cfm/myVariable/itsValue/
translates to
http://mysite.com/index.cfm?myVariable=itsValue

Honestly, this was fine for me, but I wanted to have the ability to rewrite URLs outside of Coldfusion, like Apache's mod_rewrite, which in turn would allow me to create true pretty URLS.

ie. http://mysite.com/theValue/
translates to
http://mysite.com/index.cfm?theVariable=theValue

I did some research online regarding ISAPI filters for IIS but most lacked Regular Expression Support unless you were willing to fork out some extra money for paid for versions. Then, Ray Camden introduced me to IIRF (Ionic's ISAPI Rewrite Filter), a small, cheap, easy to use, URL rewriting ISAPI filter that combines a good price (free!) with good features.

This product is amazing, not only because of price (I did mention it was free right?) but implementation is easy. Their directions are thorough and supply enough examples that you will be up and running in minutes. Thanks for the info Ray!

Click here to go to Ionic's Site

Until next time ...

SES Not Enabled in CF8 by Default

This is a follow up for my previous post regarding the ability to create SES (Search Engine Safe) URLs with Coldfusion. If you are using the beta version of Coldfusion 8 (aka: Scorpio), these setting are not on by default. You will have to open up your web.xml file and make uncomment the following lines;

<!-- begin SES --->
  <servlet-mapping id="coldfusion_mapping_6">
     <servlet-name>CfmServlet</servlet-name>
     <url-pattern>*.cfml/*</url-pattern>
  </servlet-mapping>
  <servlet-mapping id="coldfusion_mapping_7">
    <servlet-name>CfmServlet</servlet-name>
    <url-pattern>*.cfm/*</url-pattern>
  </servlet-mapping>
  <servlet-mapping id="coldfusion_mapping_8">
    <servlet-name>CFCServlet</servlet-name>
    <url-pattern>*.cfc/*</url-pattern>
  </servlet-mapping>
<!--- end SES -->

You will also notice that the mappings are now called "coldfusion_mapping_#" rather than "macromedia_mapping_#" as noted in the adobe tech note : ColdFusion MX 7 and Search Engine Safe (SES) URLs You can find the web.xml in one of the two places:

• Standalone Install:cf_root\wwwroot\WEB-INF
• EAR\WAR installation:application root\cfusion-ear\cfusion-war\WEB-INF

Remember you must restart your server to have the changes take place.

Until next time ...

Changing From CF8 to CF7 on the Fly with IIS

Hello again, this is a follow up to my previous post on installing CF8 on an Existing CF7 Multi Server Setup. After you implement your CF8 site and CF7 site with the "Web Server Configuration Tool", open up your IIS Manager and right click on each of the sites to open up their properties (click on sample picture below).

Once you have both sites up click on the "Home Directory" tab, go to the bottom of the panel and click on the "Configuration" button to open up the Application Settings for each site (click on sample picture below).

As you will notice in the pictures (or your own properties panel - if following along), in the Application extensions on both sites all file extensions will point to the jrun_iis6.dll in your JRun\lib\wsconfig folder. But if you notice in the bottom section for Wildcard application maps, each site will point to a separate subfolder inside your JRun\lib\wsconfig folder. Basing this on my images, my CF7 server points to 1\jrun_iis6_wildcard.dll and my CF8 server points to 2\jrun_iis6_wildcard.dll, yours may look different, if you have configured more sites.

This was something I figured out just by trying it, but if you click on Edit and change this values from 1 to 2 or vice-versa on these servers, you will automatically change what CF engine it is using. One more thing, you don't even have to restart the webserver, just make the change, OK your way out and refresh your browser and Bam! Change Done! I tested this using a simple <cfdump var="#server#" /> to see the changes.

Anyways, I though this was pretty cool if you want to jump back and forth between versions. Alternatively, you can just create 2 IIS sites that point to the same directory, with one using 7 and the other using 8 and either use host headers or different IPs to differentiate. That is how I have it setup but I still wanted to share this little simple trick I figured out.

Until next time...

SES (Search Engine Safe) URLs w/ Coldfusion

Another one of my ventures today was finally learning how to implement search engine safe URLs.  If you are a Coldfusion Developer like me, I am glad to let you know that this is an easy task to overcome. While taking some time to read Raymond Camden's BlogCFC documentation, since I saw it was using SES URLs, I took notice of the following Adobe Tech Note : "http://www.adobe.com/go/2addd247". It basically tells you how to make changes to your web.xml file to allow this. He makes note of this in case your server had problems with the BlogCFC SES URLs and needed to do the change as noted by Adobe. When I inspected my web.xml file, the required change was already done.

Now that I knew how to enable it, I needed to know how to do it. One way is to inspect Ray's work inside his parseses.cfm file or another great blog entry I found was Clint's Blog : Coldfusion SES URL. This entry pretty much sums it all up and allows you to begin your way to developing with SES URLs.

There are other ways to do this with the webserver itself. Apache has mod_rewrite, but alas I use IIS6. For IIS 3rd party ISAPI filters are available and you can find out more by clicking here (Some IIS URL Rewriting Links).  For me, I think the built in solution with CF is sufficient. I love Coldfusion!!!!

Until the next time ....