Skip to main content

Forté Representation - Non-Flash pages added

A recently developed site, Forté Representation, was released as a pure Flash site.  To allow this site to be viewed on non-Flash enabled devices such as the iPhone, non-Flash pages were developed.  Upon visiting the site, it is determined whether you can see Flash or not.  If you can't see Flash on the device you are accessing the site with, then you will only be served non-Flash pages.

One of the key features of the site is the gallery.  To mimic the Flash version of the photo gallery, Javascript was implemented with the assistance of the JQuery library.  Combining JQuery with a plugin called EasySlider allowed for development of a sliding gallery that is visible on non-Flash devices.

In total, the site was broken up into separate HTML pages:

Home
Photographers, broken up into each artist:  Linda Mackie, Ian Sheh, and Renat Touichev.
Makeup+Hair, listing the artist Eman Aziz.
About
Connect

Clicking on any of the above links on a Flash enabled device will redirect you to the main Flash powered site.  To view the above links, you'll need to visit them on a non-Flash enabled device such as an iPhone or Blackberry.




JQuery is a great library of Javascript functions that enable such effects as fade ins and slides.  It can be found here:  http://jquery.com/

EasySlider 1.7 (found here)  is a pre-built library that enables you to slide images onto the page.  It's a great gallery viewer to use for non-Flash sites.  A customized version of EasySlider 1.7 can be found here:  http://www.hilarykerr.com
Labels:

Comments

Post a Comment

Popular posts from this blog

How To Run Chrome From Within Notepad++

If you have recently tried to Run  Chrome from within Notepad++ recently, you've probably encountered the same issue I did.  Chrome didn't run. The fix is actually really simple.  Open up the Run box in Notepad++ and browse to your installation of Chrome. ie.  C:\Program Files\Google\Chrome\Application\Chrome.exe Select the file when you find it.  Now, the trick is: Put quotation marks around the path you see in the Run  box.  Now, put 1 space after the closing quotation mark. Type this: $(FULL_CURRENT_PATH) It'll look something like this: Click Run .  If Chrome opens, click Save and set your hotkey.
15 comments
 Developers - Read More...

Developer Note: Virtuemart - Editing the Add to Cart MooTool Popup

To edit the “Add To Cart” popup that appears when you add an item to a cart in Virtuemart, there are few files that you need to know about. These are the files to know \components\com_virtuemart\themes\default\theme.js \components\com_virtuemart\js\mootools\   - contains the files for editing the appearance of the popup. To edit the appearance of the box, edit \components\com_virtuemart\js\mootools\mooPrompt.css to change the styles as well as editing the 2 images in the directory to edit how they appear as well (close box and header-background)
8 comments
 Developers - Read More...

Proper Viewport Scaling on iPad and iPhone

So, this is a little silly and I'm a little embarrassed to say that I've spent far too much of my time on this issue. I had a multi-page site that wasn't displaying correctly on my iPad.  One page would look great, but the next would have the top menu cut off on the right and everything would be slightly zoomed in. I realized that it was a scaling issue, but for all the experimenting I did with the meta viewport tag , I couldn't get it to work. Then I thought of something...some pages didn't have as much content as the others.  The longer pages were displaying great, it was the pages short on content that weren't.  So, I went ahead and set a min-height for each page of 1050px (I figured it had to be a little larger than the 1024px portrait height of an iOS device) and voila, it worked. All the pages showed correctly.  Now, I fully admit that this is most likely a hack that isn't considered the "proper way", but I am absolutely open to sugge...
1 comment
 Developers - Read More...