Modal Windows
March 10, 2010
Modal Windows are usually called pop-ups or inline pop-ups. Modal Windows are very useful in communicating a message, helping a user complete a task, showing progress, displaying a gallery of pictures etc. The point is that the content is inline with out a page blink. If you’re using Modal Windows then you’re likely designing for the user or are approaching web projects with User Centered Design in mind which is good.
Modal Windows according to Wiki:
In user interface design, a modal window is a child window that requires the user to interact with it before they can return to operating the parent application, thus preventing the workflow on the application main window. Modal windows are often called heavy windows or modal dialogs because the window is often used to display a dialog box
I think the biggest hurdle in using Modal Windows effectively is choosing the right flavor. There are a lot of flavors and not much time in a day to rate them all. Me not being a JS programmer am predisposed to choose designer friendly frameworks.
Below I have created a short list of Modal Window frame works that can be very helpful. At this point I really like Colorbox. Please feel free to add your own.
- colorbox – A light-weight, customizable lightbox plugin for jQuery 1.3 and 1.4
- jQueryUI Dialog – The jQuery UI Dialog plugin uses the jQuery UI CSS Framework to style its look and feel
- fancybox – FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page.
- DOM window – jQuery plugin (jquery.DOMwindow.js) used to create DOM windows.
- shadowbox.js – Shadowbox is a web-based media viewer application that supports all of the web’s most popular media publishing formats.
- GreyBox - GreyBox can be used to display websites, images and other content in a beautiful way.
- ThickBox (No Longer Supported) – ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library.
- ModalBox – ModalBox is a JavaScript technique for creating modern (Web 2.0-style) modal dialogs or even wizards (sequences of dialogs) without using conventional windows.
- Prototype Window – This javascript class allows you to add window in a HTML page.
- Simple Modal – SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development.
- JQModal – jqModal is a plugin for jQuery to help you display notices, dialogs, and modal windows in a web browser.
- LivePipe UI – LivePipe UI is a suite of high quality widgets and controls for web 2.0 applications built using the Prototype JavaScript Framework.
PNG Transparency
March 9, 2010
As Web Design online becomes more sophisticated and IE becomes nicer we Designers are able to do cooler and cooler things.
So let’s talk Transparency.
I remember there was a time I depended solely on GIF files for my transparency. I was left unsatisfied because the edges were always rough and while it did have value in terms of being an arrow in the Web Design quiver, using GIF for cool stuff just didn’t make sense.
Enter PNG
PNG (pronounced ping) files are a really useful alternative to GIF and you can do alot with PNGs for you transparency needs.
According to Wiki
Portable Network Graphics (PNG) is a bitmapped image format that employs lossless data compression. PNG was created to improve upon and replace GIF (Graphics Interchange Format) as an image-file format not requiring a patent license. It is pronounced /ˈpɪŋ/ [1] or spelled out as P-N-G. The PNG acronym is optionally recursive, unofficially standing for “PNG’s Not GIF”.[2]
PNG supports palette-based (palettes of 24-bit RGB or 32-bit RGBA colors), greyscale, RGB, or RGBA images. PNG was designed for transferring images on the Internet, not professional graphics, and so does not support other color spaces (such as CMYK).
PNG files nearly always use file extension “PNG” or “png” and are assigned MIME media type “image/png”; it was approved for this use by The Internet Engineering Steering Group on October 14, 1996.[3]
The Fly in the Transparent Ointment
As always in Web Design there are at times problems especially implementing technologies into your “rad” design – PNG is no different. Yes, I just said rad. The problem is IE. No surprise. So in order to get PNGs to work you need to add some lines of code to your design in order to get it to work.
According to microsoft
If you browse to a Web page that contains an image that has a transparent background in Portable Network Graphics (PNG) format, the image background may appear to be gray rather than transparent. Web developers who work with PNG files can use the AlphaImageLoader filter…
Below I have gathered links that would be useful to your PNG journey. Please leave me a line if I left any out. I prefer Twin Helix.
- PNG transparency test
Examine the test images in the left column below. To determine how your browser handles PNG transparency, find the images on the … - IE PNG Fix – TwinHelix
This script adds near-native PNG support with alpha opacity to IE 5.5 and 6. Now you can have full translucency and no more ugly grey borders! … - Digital Web Magazine – Creative Use of PNG Transparency in Web Design
May 28, 2007 … Using PNG’s transparency alpha channel, we can emulate Wilson’s style …. Creating an image in Photoshop for use as a transparent PNG mask … - PNG in Windows IE
This site is all about a JavaScript-based PNG fix for Internet Explorer 5.5 and 6 on Windows. The fix allows IE to properly render PNG alpha transparency. … - Fun with Transparent PNG Images
Transparent PNG images have been always been a great tease to web designers. This tutorial will show you a few tricks to working with transparent PNG files. … - PNG Files Do Not Show Transparency in Internet Explorer
If you browse to a Web page that contains an image that has a transparent background in Portable Network Graphics (PNG) format, the image background may … - PNG Transparency in Internet Explorer – Solutions by PC Magazine
It didn’t work out of the box, but Microsoft created a work-around. Here’s a technique to simplify it. - GIF, JPEG or PNG?
You make a lovely transparent PNG or GIF image for your website, and you go along … Save it as a transparent PNG (one color transparency) and set the … - PNG-24 Alpha Transparency
A PHP solution to fixing the display of PNG-24 images with alpha transparency in Microsoft Internet Explorer. - PNG Behavior (WebFX)
It is of course our all beloved PNG format I am talking about. This format can have an 8 bit alpha channel which allows the images to be semi transparent. …
Hire Us!
There are some projects that go beyond demanding into almost impossible...If you have a project that requires attention to detail, versatile creative skill-set, fast turn around, and yet still affordable contact me to get started building your web page. Get started today!
