Thursday, December 18, 2008

Top 8 modal dialogs javascript

Here is the collection of top 9 modal dialogs JavaScript to display modal dialogs. These scripts have gained widespread popularity due to its simple yet elegant style and easy implementation.

All of them works almost same way. They show a modal dialog message in center of the screen and leaves a semi-transparent layer behind. So that the modal dialog part look brighter & can make sure user go through the message.

Each of these script has it’s own benefits & drawbacks. You may need to find the best to suit your both usability & integration requirement.

Lets go through them one by one…

Lightview

Lightview

Lightview

Lightview was built to change the way you overlay content on a website.

  • Clean: Designed to compliment your content.
  • Fast: Smart image preloading.
  • Easy: Customizable without having to know CSS.
  • Rounded: Adjustable rounded corners, no PNG images required.
  • Smart: Content resizes to always fit on your screen.
  • Slideshow: One button slideshow.
  • Works on all modern browsers.

ThickBox

ThickBox

ThickBox

ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

Features:

  • ThickBox was built using the super lightweight jQuery library. Compressed, the jQuery library is 20k, uncompressed it’s 58k.
  • The ThickBox JavaScript code and CSS file only add an additional 15k (only 10k by using the thickbox-compressed.js) on top of the jQuery code. The CSS file could additionally be compressed if need be.
  • ThickBox will resize images that are bigger than the browser window.
  • ThickBox offers versatility (images, iframed content, inline content, and AJAX content).
  • ThickBox will hide form elements in Windows IE 6.
  • ThickBox will remain centered in the window even when the user scrolls the page or changes the size of the browser window. Clicking an image, the overlay, or close link will remove ThickBox.
  • ThickBox can be invoked from a link element, input element (typically a button), and the area element (image maps).

Sexy Lightbox

Sexy Lightbox

Sexy Lightbox

Sexy-lightbox is cool thick box with more add features like resizes the box based on the content width and height, rounded corners, animation on resize with ease.

LightBox

LightBox

LightBox

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

Features:

  • Image Sets: group related images and navigate through them with ease.
  • Visual Effects: fancy pants transitions.
  • Backwards Compatibility.

HighSlide JS

HighSlide JS

HighSlide JS

Highslide JS is an open source JavaScript software, offering a Web 2.0 approach to popup windows. It streamlines the use of thumbnail images and HTML popups on web pages. The library offers these features and advantages:

  • No plugins like Flash or Java required.
  • Popup blockers are no problem. The content expands within the active browser window.
  • Single click. After opening the image or HTML popup, the user can scroll further down or leave the page without closing it.
  • Compatibility and safe fallback. If the user has disabled JavaScript or is using an old browser, the browser redirects directly to the image itself or to a fallback HTML page.

SlimBox

SlimBox

SlimBox

Slimbox is a 4kb visual clone of the popular Lightbox JS v2.0 by Lokesh Dhakar, written using the ultra compact mootools framework. It was designed to be small, efficient, more convenient and 100% compatible with the original Lightbox v2.

ClearBox

ClearBox

ClearBox

ClearBox is a professional image gallery and HTML viewer program written is JavaScript. Using of ClearBox for private purpose is free. If you would like to use it on commercial pages, please contact the developer.

ModalBox

ModalBox

ModalBox

ModalBox is a JavaScript technique for creating modern (Web 2.0-style) modal dialogs or even wizards (sequences of dialogs) without using conventional popups and page reloads. It’s inspired by Mac OS X modal dialogs. And yes, it may also be useful for showing larger versions of images.

ModalBox is built with pure JavaScript and is based on Sam Stephenson’s excellent Prototype JavaScript Framework, script.aculo.us and valid XHTML/CSS. ModalBox uses AJAX to load content.

Hope you found this article useful, if I am missing anything good modal dialog resources, kindly drop the same in comments - which will be really useful for the developers who are really looking out for these kind of stuff.



source : http://www.wittysparks.com/2008/10/28/top-8-modal-dialogs-javascript/

60 best CSS directories you would die to watch!

With new technologies flooding the web,different tools are available with which a web designer can showcase his creativity and craft. But despite putting in the effort and sweat, numerous websites with fantastic creativity fail to get noticed. Also, the surge in designing is driving designers to dig for creativity, color schemes and layouts.

Keeping these aspects in mind, we came up with a compendium of best CSS directories, CSS showcase, CSS galleries that rank / grade websites (using CSS) on the basis of ‘alexa ranking’, colors, categories, tags, ratings and RSS.

If you feel that a particular site is worth to get showcased, then drop the URL’s in your comments so that they become a part of our next list.

If you found this article useful, digg it to ensure that a designer’s effort doesn’t go unnoticed.


SiteAlexa RankColorsCategoriesTagsRatingsRSS
www.cssbeauty.com10,432NoYesYesNoUrl
www.cssdrive.com14,303NoYesYesYesThumbnail
www.stylegala.com15,819NoNoNoYesThumbnail
www.cssmania.com22,686YesYesNoYesThumbnail
www.cssremix.com23,294NoNoNoYesFull Image
www.alvit.de/css-showcase/26,557NoYesNoNoUrl
www.cssvault.com27,285NoNoNoYesThumbnail
www.w3csites.com28,078NoNoNoNoUrl
www.bestwebgallery.com30,382NoYesNoNoThumbnail
www.csselite.com33,948NoYesNoNoThumbnail
www.screenalicious.com36,114YesNoNoYesThumbnail
www.unmatchedstyle.com42,269NoYesYesYesFull Image
www.designlinkdatabase.net48,086YesYesYesYesThumbnail
www.screenfluent.com51,014NoNoNoNoThumbnail
www.designsnack.com51,904NoYesNoYesUrl
www.cssheaven.com53,491NoYesNoYesThumbnail
www.cssimport.com57,960NoNoNoYesThumbnail
www.cssglobe.com65,660NoNoNoNoUrl
www.cssreboot.com67,768NoNoYesYesUrl
www.mostinspired.com68,025NoNoNoNoThumbnail
www.thebestdesigns.com68,614NoYesYesNoNo
http://thesis.veracon.net76,844NoNoNoNoThumbnail
www.cssbloom.com79,672YesYesYesYesThumbnail
www.csscollection.com92,579     
www.csstux.com98,129NoNoNoNoNo
www.cssbased.com101,834NoYesYesYesUrl
www.css-website.com102,923YesYesYesYesThumbnail
www.designshack.co.uk109,656NoNoNoNoThumbnail
www.ceeses.com124,001NoNoNoYesUrl
http://anjo.dekiteharu.jp135,146NoYesNoNoNo
www.cssclip.com135,730YesYesYesYesUrl
www.my3w.org151,235NoYesYesYesThumbnail
www.csshazard.com167,525NoYesYesNoFull Image
www.artnetz.de173,234NoYesYesNoThumbnail
www.css-design-yorkshire.com177,077NoNoNoNoNo
www.css11.com182,520NoNoYesYesNo
www.cssimpress.com188,219NoYesYesYesThumbnail
www.e-motionaldesign.com202,826NoYesNoYesThumbnail
www.cssprincess.com210,811NoYesYesYesNo
www.cssgaleri.com220,224NoYesNoNoThumbnail
www.cssblast.ru224,048NoNoNoNoUrl
www.creative-pakistan.com233,247NoYesNoYesThumbnail
www.netzfruehling.de237,645NoNoNoNoNo
www.najdizajn.com256,885NoYesNoYesThumbnail
www.edustyle.net274,750NoNoNoYesNo
www.csssmoothoperator.com290,827NoNoNoNoThumbnail
www.coolsitecollection.com313,655NoYesNoNoThumbnail
www.cssgalaxy.com348,352NoYesNoNoThumbnail
www.per.fectio.net357,030NoNoNoYesNo
www.cssflavor.com364,755NoNoNoNoThumbnail
www.onepixelarmy.com369,312NoYesNoNoUrl
www.piepmatzel.de418,803NoNoNoNoUrl
www.cssbrain.hu438,074NoYesNoNoThumbnail
www.w3c-compliance.com461,674NoNoNoNoNo
www.stylegrind.com484,645NoNoNoNoUrl
www.submitcss.com523,147     
http://inspirace.dobrestranky.com549,529NoYesYesYesFull Image
www.cssgallery.ro553,463NoYesNoYesUrl
www.cssgreen.com600,815NoYesNoNoNo

Updated: 22nd December 2007

Updated with new links based on the comments received.

SiteAlexa RankColorsCategoriesTagsRatingsRSS
www.csszengarden.com13,878NoNoNoNoUrl
www.webcreme.com21,564YesNoNoNoThumbnail
www.prowebart.net324,625NoYesYesNoFull Image
www.designexpanse.com340,762NoYesYesYesThumbnail
www.csssnap.com360,300NoYesNoYesThumbnail
www.menthe-fresh.fr427,757YesNoNoYesThumbnail
www.csscoosite.com548,693NoYesYesYesUrl
www.csscool.cn681,511NoYesYesNoThumbnail
www.morpheed.com/css2,313,992NoNoNoNoThumbnail
www.csstown.com3,463,368NoNoNoYesNo




source :http://www.wittysparks.com/2007/04/22/60-best-css-directories-you-would-die-to-watch/