كل عام وانتم بخير وتقبل الله منا ومنكم صالح الاعمال وعسى ان يغفر لنا زنوبنا
اليوم كان اول ايام عيد الفطر وكان موجود اكتر من 5000 مصلى فى مسجد الصابرين فى العجمى مشاء الله
حقيقة المنظر تحفة واتمنى ان نتجمع فى كل صلاة بنفس المنظر الجميل عامة كل عام وانتم بخير واتمنى ان يغفر لنا الله زنوبنا واتمنى ان تبقى الامور على ما هى كما كانت فى رمضان :)
Javascript, Ajax and jQuery is used more and more these days and for a reason. These technologies can improve your web site Look & Feel, Usability and functionality significantly. There is a lot of free frameworks, examples, demos etc. available on the Internet and you will get access to some of the best in this article.
Index This article has been organized in the following sections. Use the links to get instant access to the type of scripting resource you’re looking for.
■Image Handling (Galleries, manipulation etc.) ■Tables Handling (Sorting cell editing etc.) ■Virtual Keyboard ■Forms Handling (Validation, autofill etc.) ■Windows Handling ■Color pickers ■Ajax Loaders ■Calendars ■Dynamic Menus ■Inline Text Editing ■File Uploaders ■Mobile Devices ■Libraries ■Cookies Handling Other relevant resources Please take time to read some of the other popular articles on tripwire magazine.
75+ Excellent Free Fonts For Professional Design In this article tripwire magazine presents an overview of more than 75 excellent free fonts you should consider using for your designs. Not all free Fonts are worth using but the Fonts listed in this article have all been picked out because they are better than the rest.
100+ Massive CSS Toolbox In this article tripwire magazine provides a Massive CSS Toolbox giving you access to a really large collection of CSS Tools, Tutorials, Cheat Sheets etc.
35+ very Useful And Powerful CSS techniques In this article tripwire magazine provides a list of very useful CSS Techniques that you can use freely to make your website or blog more dynamic and inprove its Look & Feel. The article will also give you an introduction to CSS and why it should be used instead of table-based layouts. hand-picked because they deserve to.
Image Handling Phatfusion Slideshow Very nice Slideshow component.
■Fade, Slide and Wipe transitions ■loops ■Play, Stop, Next and Previous controls ■Inits from array of image src’s, a list of images on the page or using the href of an a tag like the lightbox
Creating a polaroid photo viewer with CSS3 and jQuery This example is making use of CSS3 and jQuery. It really shows the effect when combining two powerful techniques. The CSS3 is injected by jQuery, keeping the CSS file clean. The result is nice looking polaroidsthat you can drag around on the page…cool!
How to add advanced tooltips for people on your photo This post demonstrates how you can use Taggify widget to enhance your blog with nice functionality showing popup tooltips for people on your photos.
Let’s add notes for 2 well-known men on the photo below so people far from IT industry do not mix them up while reading our blog. Move mouse over the image and notes below it to see how it looks in live.
Phatfusion Beautiful Mootools JavaScript framework plugins which you’ll love.
■2 optional onClick events – open & close ■href passed to onClick events ■stays open when clicked ■closes when clicked ■select item to pre-open
tjpzoom TJPzoom allows you to zoom in on particular sections of a high-resolution image. Holding down the mouse button and dragging up or down, can decrease or increase the zooming of the image magnifier tool. One way of utilizing TJPzoom is to scale high-resolution pictures down to fit a web page, and then allow the users to zoom into parts of the image using the magnifier tool.
jQuery Multimedia Portfolio Non obstrusive and accessible portfolio supporting multiple media : photos, video (flv), audio (mp3), will automatically detect the extension of each media and apply the adapted player.
Tipmage Tipmage is a javascript class aimed at creating and managing tooltips (or “notes”) over images. Tipmage makes it possible to mark rectangular portions of an image and attach a description to each one of them. The description will be shown as a tooltip when the mouse is over the right section of the image.
Slider Gallery This ‘product slider’ is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items. Simple stuff. jQuery already has the plugins to create these effects so we don’t have to go about creating them ourselves from scratch.
Instant.js Instant.js effect dynamically adds a Polaroid-like effect to your images (it tilts it and adds a border with a drop shadow), simulating this popular image technique without having to use a digital-image editing application such as Photoshop.
This can be utilized for when you’re applying this popular visual technique on multiple images and you don’t want to manually edit the pictures yourself (you can probably batch process, but that’s really only effective for simple actions such as resizing images, cropping uniformly, etc.).
iCarousel iCarousel is an open source (free) javascript tool for creating carousel like widgets.
One of the most common problems a web developer usually face is related to continuously rotate a fragment of content. It can be a presentation of headlines, small fragments of news or a list of thumbnails. The nature of the thing being rotated doesn’t matter too much here because all those kind of applications share always the same idea: Rotating. This objective can be achieve in different ways like fading and scrolling. Well here is iCarousel becomes useful. It’s a one step forward trying to generalize all those types of widgets providing a rich presentation and making the task easy to be done.
qGallery qGallery is a Prototype-based gallery script which automatically takes care of the image processing, offers multipple viewing modes and comes with a number of transition effects.
ImageFlow Inspired by iPod’s “coverflow”, ImageFlow is a simple effect that displays a collection of images that the user can scroll there using a scroll bar at the bottom of the image set. Advanced developers can probably modify the slider to spruce it up a bit more. When the user clicks on an image, it re-directs them to another web page with the image displayed, so an excellent idea would be to use this in conjunction with a modal box script to open the image instead.
Image Cross Fade Transition Image rollovers were the staple JavaScript nugget of the 90s, and for a lot of JavaScript developers I know, one of the starting places their passion for JavaScript. Today, rollovers are a no-brainer – either in CSS or with the simplest of JavaScript:
$(function () { $('img.swap').hover(function () { this.src = 'images/sad.jpg'; }, function () { this.src = 'images/happy.jpg'; }); });Today’s challenge is the rollover transition! View the working example and the source
Table / Grid Handling Phatfusion Sortabletable This scripts gives you simple sort and filter in tables.
■sort on numbers, strings, dates and currency ■filtering on columns
mooTable mooTable allows you the ability to provide sorting of table data ( without a page refresh) by utilizing the DOM instead of requesting the data again, sorted another way. Implementation is simple, and configuring the sorting of tables is a breeze. This library needs the mootools framework, which you can download here. You can also find a forum post on the mootools boards by the author of mooTable, with feedback from other mootools developers.
dhtmlxGrid :: Editable Ajax Data Grid dhtmlxGrid is an Ajax-enabled JavaScript grid control with cutting-edge functionality, powerful data binding, and excellent performance with large datasets. The gridview component is easy-to-use and provides great flexibility due to its rich client-side API. dhtmlxGrid supports different datasources, including XML, JSON, CSV, JS array, and HTML table. Since v1.6 grid data can be loaded from custom XML format.
Tablecloth Tablecloth is lightweight, easy to use, unobtrusive way to add style and behaviour to your html table elements. By simply adding 2 lines of code to your html page you will have styled and active tables that your visitors will love Try to mouseover or click on a table below.
Unobtrusive Table Actions Script An attempt at writing an unobtrusive (and fast) script that adds commonly required “actions” to data tables. Can Zebra stripe the table. And supports row hover, column hover and cell hover effects
KeyTable KeyTable is a Javascript library which provides keyboard navigation and event binding for any HTML table. With KeyTable Excel style table navigation can be employed to provide features such as editing of a table without requiring a mouse. As a further bonus, KeyTable integrates seamlessly with DataTables. It is a lighweight (~5kb) JS library.
The library provides an Excel-like navigation that can be bundled with features like on-click editing.
DataTables DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML tables. Key features:
■Variable length pagination ■On-the-fly filtering ■Multi-column sorting with data type detection ■Smart handling of column widths ■Fully internationalisable: UK, French, German, Spanish, Russian, Norwegian, Portuguese Brazilian (and more) translations provided ■It’s free!
Virtual Keyboard Customizable jQuery Virtual Keypad Plugin jQuery Keypad is a plugin for creating more secure input entry by providing a keyboard like interface. The values to be displayed can be easily set which makes it possible to show only numbers, foreign letters, etc.
Virtual Keyboard with jQuery Tutorial Tutorial on creating a virtual keyboard with jQuery (script can be downloaded).
Such virtual keyboards are generally used in bank websites or forms that require extra security. They are a step for preventing keyloggers (but may not be an absolute solution as keyloggers are getting smarter).
Virtual keyboard Virtual keyboard interfaces are generally used in websites where the highest level of security is a must like online banking applications. Virtual keyboards help us to prevent any keylogging activies and/or provide users a special keyboard which they don’t already have (like a keyboard of another language). This virtual keyboard very easy to use and already supports many languages.
Forms Handling iMask Who haven’t ever wanted to apply an input mask to an HTML form field? This very common feature in traditional GUI applications is not natively supported by web applications. iMask goal is to implement an easy way for developers to add mask into their form fields, increasing the database and software consistency with standard compliant XHTML and unobtrusive JavaScript.
iMask is an open source (free) javascript tool for creating input and textarea masking. It is built on Mootools, supports keyboard control and dynamic charset definition.
dFilter A tiny JavaScript for input masking. This script will easily allow you to add an input mask to a textbox. The mask for a phone number could look like this for example “(###) ###-####”.
Typecast – The Input Field Library Typecast is an Input Field Augmentation Library. When complete it will add autocomplete, suggest and realtime character masking ability to the standard HTML input field. And who knows, it’ll probably end up doing even more! I’m currently working on the Suggest functionality which is coming along nicely. Typecast requires no JavaScript code in the . Rather it scans the document on load and binds the appropriate Typecast Behaviours to the fields based on the information you specify in the field’s rel attribute.
Masked Input Plugin for jQuery This is a masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc).
A mask is defined by a format made up of mask literals and mask definitions. Any character not in the definitions list below is considered a mask literal. Mask literals will be automatically entered for the user as they type and will not be able to be removed by the user. The following mask definitions are predefined:
■a – Represents an alpha character (A-Z,a-z) ■9 – Represents a numeric character (0-9) ■* – Represents an alphanumeric character (A-Z,a-z,0-9)
JavaScripTools JavaScripTools is a set o JavaScript components, functions and classes to make the web developer’s life easier. Most modern browsers, like Firefox, Internet Explorer, Opera and Konqueror are supported.
Features:
■Numerous functions that performs common operations on objects, strings, arrays, form fields, events and more ■Parsers / formatters for many data types, including numbers and dates – i18n (internationalization) may be taken to JavaScript level ■A dynamic table, supporting paging, sorting and editing, fully customizable using CSS (Cascading Style Sheets) ■Masks for restricting / formatting user input on form fields
Password Field Image Mask A nice JavaScript input mask which helps displaying the password field characters as images.
Spinbox.JS An unobstrusive solution for turning input textboxes into spinboxes. It is very effortless to implement the code. Simply creating a normal textbox, giving an id to it & editing few arguments is enough. Spinbox.JS has 10 predefined skins and new ones can be created via CSS in the skin file. All you have to do is to create a normal text input on the page, give it an ID, edit a few arguments, set a skin in the initialization script and hit F5 to view the amazing transformation.
It supports multiple spinboxes on a single page, and a different skin can be used for each SpinBox on the page.
JSValidate Free library for validating forms that requires Prototype & Script.aculo.us to run. List of some of the supported validation rules:
■Required field ■Only numbers ■Only letters ■E-mail ■Credit card number format ■US zip code, phone number & state code formats
Expanding a HTML form using JavaScript In this example, what you want is that the user can give an input and dynamically expand the form. This can be achieved with the help of JavaScript and here I’ll show you how.
jQuery – Ajax Contact Form A very nice tutorial from Nettuts on creating an Ajaxed contact form with jQuery & PHP. The form has an input validation. After the message is sent in th ebackgroung a “success” message is displayed to the user. Demo
LivePipe UI LivePipe UI is a suite of high quality widgets and controls for web 2.0 applications built using the Prototype JavaScript Framework. Each control is well tested, highly extensible, fully documented and degrades gracefully for non JavaScript enabled browsers where possible. MIT licensed and actively maintained. Each script is well tested, highly extensible and unobstrusive. Suite is very well documented. You can easily reach the details of the APIs and this makes the product much more usable. Controls awailable:
Proto Form – Contact Form With Protoype A lightweight (only 4KB) & unobtrusive contact form that is built with Prototype. The fields are validated & highlighted accordingly. The e-mail message is sent via Ajax and a success result is displayed. It is a very handy form which can be installed easily.
Custom Form Elements (CFE) Ever wondered how you could style form elements like checkboxes, radiobuttons and select-fields in a way you like? You tried hard using the most ass-kicking XHTML/CSS tricks, but didn’t succeed without stuffing unnesscesary tags into your sleek sourcecode? Not to speak of the browsers and their “special abilities” in evaluating CSS.
Now this is for you! CFE finally found their way to SourceForge.net and allow you to style your forms individually!
Ajax Contact Form NB Artcile translated! This contact form uses Script.aculo.us & WForms. An unique feature of it is, it tries to connect to the server of the sender to verify that it accepts mail to the address mentioned. Message size can be limited and remaining characters are displayed in a box. Demo
LiveValidation Validating forms as users type is a nice feature for users, it lets them see when they make a mistake.
An ajax live form validation library, LiveValidation is not only a form validation library, it can also be used for other types of validations.
LightForm – Ajax / PHP Contact Form It uses FormCheck2 for validation of fields and NiceForms to style form objects.
There is a simple captcha-like validation which ask the user a sum of 2 numbers. E-mails are sent via PHP & displays user IP, user agent and referrer in the message. Demo
Phatfusion form validation Simple and easy to use form validation based on mootools.
■optional onFail function. ■optional onSuccess function which will overide the form submition, this can be used to validate an ajax form. ■onBlur validating ■shows errors next to item or in a list.
jQuery Sliding Contact Form A sliding contact form built with jQuery. Form is normally hidden at the top & slides down with the first click & up at the 2nd click.There is no form validation & mail sending code included. Demo
Validanguage
Validanguage is an inheritance-driven, open source javascript validation library designed to be the most feature-rich, user-friendly validation framework available. It has been verified to work in all major browsers, including Internet Explorer, Firefox, Safari, Opera, Konqueror and Chrome.
wForms: Easy JavaScript Form Controls For the projects that you don’t already have form controls, wForms is an open source unobtrusive JavaScript form controls library that you’ll find very useful. It includes input validation, tooltips, field synchronization controls and more.
It is pretty easy. After inserting the javaScript library to your pages you can control the field attributes with classes like:
Uni-form Uni-Form is an attempt to standardize form markup (xhtml) and css, “modularize” it, so even people with only basic knowledge of these technologies can get nice looking, well structured, highly customizable, semantic, accessible and usable forms.
Brett’s Beta Contact Form A contact form that checks the validity of the fields & sends the e-mail accordingly. It is not updated for a while but the form works ok.
dhtmlxAccordion dhtmlxAccordion allows you to organize your content in a space-saving way. This JavaScript DHTML accordion control displays multiple panels within a container. Just one of these panels is expanded at a time, while others are collapsed. If you want to see other panel’s content, just click on its header and chosen panel will open smoothly. This quite popular visual solution is built entirely in JavaScript and works correctly in all major web browsers (FF, IE, Opera, Safari).
Niceforms 2.0 Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort. So Niceforms baically is a script to beautify web forms…Try it out yourself!
The script is fully compatible and has been tested with most major browsers, with the exception of IE6.
JavaScript time picker This is a JavaScript time picker with a drag’n drop enabled clock interface.
Usage is very simple, hour and minute hands can be dragged & dropped to the desired value. Clicking to the AM-PM also enables you to switch between them. This time picker is highly configurable including the “starting hour”, sizes & images used. It requires Mootools and the document to be a XHTML doctype to run. Download package includes all the necessary resources including the PSD files.
jQuery.timepickr.js jQuery plugin that makes filling time inputs very easy. With a maximum of 2 clicks, a user can fill the form and there is also a keyboard navigation support too.
The sliding Date-Picker Due to the development of Qash.nl, a Dutch personal finance website full of cool javascript features, it’s somewhat quiet around here. But to keep you satisfied, we present the sliding date-picker. This element enables you to pick dates with a simple slider bar. By dragging the bar over the time-line, the dates change instantly.
CRIR
A combination of JavaScript & CSS that enables you to create custom checkbox and radio buttons. Behind the scenes, CRIR does it with a visual trick by hiding the original form elements (but transferring any values to them) and replacing them with images.
FancyForm Using FancyForm, which is a powerful checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements, gives very nice looking form outputs. FancyForm is very quick to setup (only two lines of markup needed), extendible and will degrade if viewed from an older browser.
Custom Checkbox with jQuery This script provides you with the ability to customize the design of checkboxes in your web forms. You can use the default skin and the Safari skin which are provided with the package.
Custom HTML Form Elements Custom HTML Form Elements is a JavaScript solution which enables you to create custom HTML form elements (radio buttons, checkboxes, etc.). In a nutshell, the JavaScript looks for any form element with class="styled" declared; hides the real element; sticks a span tag with a CSS class on it next to the element; and, finally, mouse events are added to the span that handles the stages when it is clicked.
SelectBoxReplacement.JS An unobtrusive and almost codeless way to give the ordinary HTML combobox form controls () cool looks and appeal, totally customize them, even add icons to the options in the option list, and still keep their native functionality and JavaScript events.
All you have to do is to register the runtime script, set a skin and root folder for SelectBoxReplacement.JS.
dhtmlxCombo dhtmlxCombo can be used in four modes: editable select box – the user can either select a value from the list or type a custom value; read-only select box – the user can select just one value from the associated list of choices; filter – the whole list is loaded on the client-side, and as user begins to type, the list is updated with the appropriate values (which contain or begin from the characters typed); autocomplete – the list is loaded and shown as the user types in the input box.
Like other dhtmlx components, dhtmlxCombo provides complete Javascript API to give developers enough possibilities to control its state and behavior.
Ajax Contact Form With Xajax & PHPMailer A simple and safe Ajax form. A JavaScript validation mechanism controls the fields & displays a common warning for all fields. Ajax function used is Xajax & the famous PHPMailer is used for sending the e-mail. Demo
jQuery – Ajax Contact Form This Ajaxed contact form uses jQuery & the jQuery Form plugin for input validation. Inputs are sanitized for the form being safe. A success or an error message is displayed after the form is submitted without leaving the page. Demo
jQuery Contact Form This form checks the fields to see if they are valid, displays an error if there is a problem & sends the message as an e-mail when everything is ok. E-mail is sent via a PHP file with no refresh. The script is normally an e-mail sending form which can easily be modified to turn it into a contact form.
MooTools Contact Form A contact form built with MooTools. Input is checked via JavaScript & PHP. Message field does not accept any http addresses considering most spams reach this way.
dhtmlxToolbar This free cross-browser JavaScript component enables you to create an attractive horizontal DHTML toolbar within minutes. dhtmlxToolbar is flexible, powerful, lightweight and easy to use.
You can freely define visual appearance of the toolbar by simply changing its parameters (color, font, borders, padding, position, background image, etc.). With a rich set of ready-made skins dhtmlxToolbar can match any application design. The component supports several button types (image, text button, two-state button, select box, slider, input box, and others).
dhtmlxSlider A DHTML JavaScript component that allows you to implement vertical or horizontal slider into web pages. This component is highly customizable and really easy to implement. dhtmlxSlider is delivered with a number of predefined skins, but any other custom appearance can be created without any effort. Simple but effective, this JavaScript component is a neat way of creating nice-looking slider bars.
jsProgressBarHandler Dynamic Unobtrusive Javascript Progress/Percentage Bar. jsProgressBarHandler is a Javascript based Percentage Bar / Progress Bar, inspired upon JS-code by WebAppers and CSS-code by Bare Naked App. Next to a structural rewrite of the WebAppers code, this javascript progress bar can easily be extended and tweaked just by setting a few parameters.
Phatfusion Slider Good looking and easy to use bar and slider.
■Horizontal or Vertical options ■snap to steps ■apply transitions to the slide
An Accessible Slider Slider control that allows users to choose one or a range of values on a continuum. Values on a slider can represent anything from hours on a clock to the volume on a music player to a complex, proprietary data set. In its simplest form, the slider is displayed as an axis of values with a handle to drag and select a value, or two handles for selecting a range. Because there is currently no slider element in HTML, the slider is made up of non-semantic markup (divs, spans), and requires advanced CSS (positioning, background images) and Javascript to work properly. In the absence of CSS or Javascript, the slider is unusable, and the markup is meaningless to users navigating the page with keystrokes or screen readers.
AJAX – Powered AutoComplete (for Prototype.js) The AutoComplete class adds a pulldown menu of suggested values to a text field. The user can either click directly on a suggestion to enter it into the field, or navigate the list using the up and down arrow keys, selecting a value using the enter key. The values for the suggestion list are to provided as XML, or as JSON (by a PHP, ASP, ASPX script, or similar). The results of the first request are cached on the client machine and are filtered as the user continues to type, to reduce the number of requests hitting the server.
Auto Complete Control Form auto-completing feature is seen on many websites like Gmail, Yahoo and more. Auto-completing makes inputting experience easier & faster for the user. On the other hand it is very helpful for the standardization of content, keywords, tags, etc. It may prevent a user wrongly writing Mcrsoft rather than Microsoft for example. Auto Complete Control is a javascript script which offers a simple to use solution. It is not an Ajax, dynamic-keywords script. The keywords which will be shown while filling the form are defined staticly. Auto Complete Control has some nice features like defining “delimiters” which makes it easier to use for “tag inputs”. And it can be styled so easily.
SearchField A lightweight and unobtrusive script that adds styling and static auto-suggest behaviour to your search form fields.
Auto-suggest data comes from a static data source, a JavaScript file, no data connections are necessary, updating the JavaScript with the common phrases is enough.
TextboxList Dynamic form autocomplete code, named TextboxList, is built on Mootools javascript framework and works just like the Facebook form inputs that are very functional.
Max’s AJAX Rating System Simple AJAX rating system. Supports multiple ratings on one page and no database required. Max’s AJAX Rating System is a simple, easy to install script which allows your visitors to rate any item on your page. You can put as many rating boxes on your page as you want. Vistors can rate only once. No database is required.
Windows Handling Booklaylet This is a bookmarklet wrapper code to load any other page content inside the opened window, using an overlayed div and an iframe. This code works on Firefox 1.0-3.0, Safari 2.0-3.0 and Opera 9.0. It doesn’t work on Internet Explorer 5.01-7.0 (IE6 has a limitation to 488/508 chars).
Create site tours with Amberjack Amberjack is a lightweight Open Source library, enabling webmasters to create cool site tours. By guiding your site visitors, Amberjack tours can greatly improve the usability of your website.
The Amberjack JavaScript library is lightweight (~4K), stable, LGPL licensed, browser compatible, set up in 2 minutes & super-easy to customize. Best of all, nothing must be installed or learned. Use the Tour Wizard to create great looking and helpful tours for your site or intranet application.
Phatfusion Pageloader Script that load a div from another page into a div on this page.
Phatfusion multibox Lightbox that supports images, flash, video, mp3s, html.
■supports a range of multimedia formats ■auto detects formats or you can specify the format, useful if your passing a querystring! ■html descriptions
mooSlide Based on ajax, this small widget allows to integrate many many bookmarks for every post on your blog, website etc.
By clicking the mooSocialize button, a window will appear, which lets you choose your favorite network. Having a thumbnail of each service beside the link, it’s easy to see and find the one of your liking.
But that’s not all – it doesn’t redirect you to that page, but opens up the page in a hovered layer. Convenient and easy. On top of the opened layer is a small “x”, which allows to close the window later on.
GlassBox GlassBox is a compact Javascript User Interface (UI) library, which use Prototype and Script.aculo.us for some effects. With GlassBox you can build transparent border, colorful layouts and “Flash-like” effects. Take a look at the site itself: you can use the keyboard navigation: Keys 1-8 (display page), arrows left/right (previous/next page) and arrows up/down (Scroll content).
Shadowbox.js Shadowbox is an online media viewer application that supports all of the web’s most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable. Using Shadowbox, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page.
Shadowbox supports all of the web’s most popular media publishing formats including images, QuickTime, Windows Media Player, Flash, Flash video, HTML, and even external web pages. This makes it easy to display your content without converting it to some other format.
Shadowbox ships with support for many of the world’s most-spoken languages. That means that your users will probably be able to interact with the application in their native tongue.
GreyBox GreyBox allows you to launch other websites in a modal window (like a pop-up window, but it doesn’t open another browser). This is great for when you’re linking to multiple websites and don’t want the user to navigate away from your web page or to open another browser window that might be blocked by the user’s browser. Using GreyBox is easy and involves a 3-step process outlined in the web page.
Here’s some key pages regarding GreyBox: Download page, Documentation, Examples, Installation, and Advanced Usage (for the more experienced JavaScript’ers, check this page out for tips on how you can extend the library’s functionality).
Phatfusion lightbox An inline image popup, overlays and fades out the current page. This is based on Slimbox by Christophe Beyls.
■Lightbox has the following added features compared to Slimbox ■Specify a containing div rather than just the body. ■Place the next/previous buttons in the footer. ■Add a description with html markup.
dhtmlxLayout dhtmlxLayout is a JavaScript DHTML component that provides powerful and efficient solution for building Ajax-enabled web interfaces with ease. This component allows you to programmatically define interface structure, including layout of elements and their sizes. End users can easily resize interface elements, collapse or expand them.
Since version 2.0 dhtmlxLayout provides a high level of integration with other DHTMLX components: dhtmlxGrid, dhtmlxTree, dhtmlxWindows, dhtmlxMenu, etc. The components can be integrated both globally for the application and separately for each Layout pane.
dhtmlxWindows dhtmlxWindows is a JavaScript control which enables developers to build cross-browser dialog windows. The component mimics the behaviour of operating system dialogs and provides all common functionality which is available in a desktop environment: the windows can be closed, minimized/maximized, resized, put on top, dragged, etc.
Coda Popup Bubbles Coda is one of the new web development tools for the Mac – and it’s popular amongst designers and developers I know. Panic (the developers of Coda) are also known for their sharp design. In particular, Jorge Mesa writes to ask how to re-create their ‘puff’ popup bubble shown when you mouse over the download image.
Hover Sub Tags Using jQuery to reduce the size of the tag cloud that you have on your sites, for example if you have Ajax as a tag, you can have jquery, mootools, etc… as sub-tags. A Sub Tag Cloud will appear when hovering over the main Tag links.
Mocha UI Mocha is a web applications user interface library built on the Mootools javascript framework. The Mocha GUI components are made with