Starbox allows you to easily create all kinds of rating boxes using just one PNG image. The library is build on top of the Prototype javascript framework. For some extra effects you can add Scriptaculous as well. Check the demos below to see what Starbox is all about and read on for more information on how to customize your own Starboxes.
(E)2 Photo Gallery is a open source gallery built with Mootools Javascript Library the compact, modular, Object-Oriented javascript framework. Designed to allow you to upload your photos to a desired folder, tell the (E)2 Photo Gallery what folder to look at and it will automatically load the images using PHP.
MooMonth is a full calendar application written in javascript. Heavily configurable and customizable. It features smooth transitions between different views. Still in alpha stages, it will be several weeks before ready to be tested in production.
Videobox is a 6kb script, which shows your videos in the page with an overlay. It was inspired from Lightbox.v2 and uses some of the Slimbox's code. It's written for the wonderful mootools library. And used swfobject to embed flash.
Website Ribbon gives you the opportunity to create your very own ribbon and to add to your website in a matter of seconds.
If you like a site or want to support a cause online, there is no better way to do it than add a ribbon in your website or blog, linking to that page. Alternatively, if you just want to give your site a cool look or group all your sites with a single ribbon, you may just add the ribbon without making it clickable.
TohDoh is YET ANOTHER CAKEPHP AJAX TODO LIST DEMO or YACATLD, a 100% ajax threaded todo list. It’s both a showcase and an opportunity for new bakers to learn from.
Text higlighting is part of DynaCloud – where tags/keywords are automatically highlighted once they’re clicked – so I took that code and made it a stand-alone JavaScript text highlighting jQuery plugin.
The Vista-like Ajax Calendar is what the name says: a calendar based on the Vista taskbar calendar. The script runs on MooTools javascript framework, version 1.11 and uses javascript, xHTML, CSS and PHP.
I thought i would write this tutorial because most of the auto completer applications i have seen just dump the code into a zip and tell you how to use it rather than how and why it works, knowing about this enables you to customise it a lot more (this has been demonstrated with the other apps i have written here)!
hnGuestbook is a simple guestbook that uses a flat file to store the messages. That means that no SQL database is required. The guestbook uses AJAX technology, so you could view the pages, and sign the guestbook without reloading the whole page. Some of the features are a bad words filter, spam protection, and a simple admin panel to manage the messages.
The fabulous jQuery Coda-Slider, inspired by the promo site for Panic's nifty one-window web development software (which I've never used, but I hear is great). Panic apparently created their own slider from scratch, but I've used jQuery to achieve the same effect here.
lazierLoad automatically hooks itself to the page, finds all images and only loads those appearing “above the fold” resulting in faster page loads. The images not located in the viewport, are not loaded until they appear within it (viz. when the user scrolls down).
LiveValidation is a small open source javascript library built for giving users real-time validation information as they fill out forms. Not only that, but it serves as a sophisticated validation library for any validations you need to make elsewhere, it is not just limited to form fields.
Whether you're creating a trendy sticker type badge for your blog, your very web 2.0 website, or your scrapbook (both digital scrapbooks and touchable scrapbooks alike) - the creation of badges will surely be a way to freshen-up any page! We hope you enjoy this very quick and easy way to liven up any website!
Javascript accordians have been used a lot in todays web design world. There are a lot of scripts we have seen and sure you too would have seen them.
We hope our script is one of the smallest accordion script which is extremely simple and easy to integrate. Does’nt require any framework and fully cross-browser compatible.
We are again back with another interesting miniature javascript called the “df Smooth Scroll“. This script is also one of the smallest Smooth Scrolling Javascripts after our Simple Accordions.
I want to show you what you can do with a minimal effort and a little imagination. Here's a screenshoot from Windows VISTA. We'll try to reproduce that toolbar, with buttons and hover effect in cross-browser compatible CSS and HTML.
This CSS tutorial will show you how to display two double-quote images using one blockquote tag. The trick here is apply one background image to blockquote, and then apply another background to the first-letter (pseudo-element) of blockquote.
The searchhi JavaScript library is a way of automatically highlighting words on a page when that page was reached by a search engine. In essence, if you search, for example, Google for some words, and then follow a link from the search results to a searchhi enabled page, the words you searched for will be highlighted on that page. Pretty neat, huh?
Chronoscope is a visualization platform under development at Timepedia for time series datasets. Chronoscope stems from a desire for responsiveness and interactivity when navigating or authoring datasets. Ultimately we aim to bring something like the experience of Google Maps or Google Earth to time series data.
It is a drag & drop type download system where you drag an icon over another, then the download immediately starts.
I realized this would be easy with the onslaught of the prototype.js and scriptaculous frameworks. The example uses the built in Ajax drag & drop for Draggables / Droppables included in scriptaculous.
Control.TextArea provides a toolbar for textareas where users are entering text in one of these markup languages. In addition to a toolbar it provides access to a cross browser text selection and manipulation API so that creating new functionality, or integration with your custom application features is vastly easier.
A MooTools Autocompleter widget that creates a unobtrusive and customisable suggestion box for input fields from variable data sources. Try it out, it can load the suggestions from a local object or via XHR from a JSON or an XHTML source.
pass_strength.pngPassword strength meters are becoming more and more popular amongst web services. Google uses one when creating a Google account. One can argue how useful these meters really are, but non-the-less they are fairly cool for users. So how does one go about making one of these meters? Well it's fairly straight forward.
PhotoFolder scans a given folder for JPEG files with any number of thumbnail sizes per image. If the resized images do not yet exist, it will automatically create the thumbnails for you. It then returns a JSON or PHP array of sizes and dimensions for all images in the folder. The result is that your workflow for adding new images to an application built with PhotoFolder is a simple as putting named JPEG files in any directory.
It can be very frustrating when you have a form on your site which has a good and useful purpose, but almost becomes obsolete because of relentless spamming. I had this problem a few months ago with my old site, and was thus forced to find a solution that was light-weight, easy to implement, and most importantly was effective. I decided to turn toward my friend CSS to help me out.
# Flash Gallery to support both Flickr , Picasa , Fotki, Photobucket and Custom Images. # Enable / Disable 'Print Screen' ( requested by Photographers ) # Easily Customizable # Full Screen mode. ( on the Right Click - Flash Player 9) # Supports both RSS and Custom Images. # Liquid Layout - Fits to any size you specify.
Swf meets Ajax for beautiful uploads. The release of the long awaited MooTools upload widget thats allows queued multiple-file upload including progress bars. Try it out, the unobtrusive file-input replacement.
IIPImage is an Open Source light-weight client-server system for the remote viewing of very high-resolution images. It is designed to be bandwidth and memory efficient and usable even over a slow internet connection. The system is fast because the client only needs to download the portion of the whole image that is visible on the screen of the user at their current viewing resolution.
I recently worked on a web application that required a step menu (AKA wizard menu). This menu has a varying amount of steps, dependent upon the type of user accessing the application. Because of that requirement, I needed to write a CSS menu that could easily be changed from 5 steps to 4, 3, or 2 steps. Since the web is full of CSS menus, I thought one of this sort would be rather easy to find. I was wrong. I never really found a good example of one. So, for those of you who have looked and come up short, here's an example.
Let's say that you take a lot of pictures. You take pictures, but you don't want to think about how to upload them. You'd really like an application to monitor a directory for new images, and then upload them to a server. That kind of rules out the browser - it's not going to be watching a directory on your desktop for image files, and then automatically uploading them. What about Apollo though? Couldn't an Apollo application monitor a directory for me? Sure! Lets make it happen
I needed a quick gallery solution for dropping images of my new niece up, and i didn't like pixel post. too much work. i whipped this up in about 2 hours. it uses prototype, moo.fx and some rudimentary php. it needs the gd extension for php, and write permissions on the folder with the pictures.
Hello, fellow web designer! This tutorial will teach you how to create low-bandwidth tab navigation on a web page using CSS. As an extra bonus you'll also learn how to switch tabs without loading the page more than once.
* 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.
Please view source to see code. Under MIT License.
If you are a big Mac fan, you will love this CSS dock menu that I designed. It is using Jquery Javascript library and Fisheye component from Interface and some of my icons. It comes with two dock styles - top and bottom. This CSS dock menu is perfert to add on to my iTheme. Here I will show you how to implement it to your web page.
This tutorial will teach you how to create pretty looking textual buttons (with alternate pressed state) using CSS. Dynamic buttons save you heaps of time otherwise spent creating graphics and will basically make you a happier person at the end of the day. Here's what you'll get:
I thought to myself: "Ok, there is this information that we are hiding. But why not show that hidden information when the user is hovering the link?" So i opend up the "Edit CSS"-Pane from the Web Developer-Toolbar in Firefox and added some "more" CSS to achieve that.
As you may have realized, this is an image magnifier. It's a completely rewritten version of my script tjpzoom, but still is in JavaScript / DOM :). If you move your mouse over the picture, you can see a little zoom window with a magnified version of a part of the picture in it. But there is more...
DD Tab Menu is a standards compliant, 2 level tab menu. Move your mouse over a tab, and a 2nd level content appears beneath it. The script uses CSS to control all of its appearance, and plain HTML to implement the entire menu tabs and contents.
This DHTML-driven browser-based app provides viewing of photos sorted by collection. A few different CSS-driven "skins" are also available to choose from. Thumbnails are dynamically displayed allowing for quick visual searches within a collection, and XML/XSLT functionality provides for more dynamic data sources and ease of updates.
I think that for me, as well as many other web developers, the spark was lit when I saw Google Suggest for the first time. Since then, I've wanted to (re-)create that JavaScript since I think it's a perfect example of good progressive enhancement; helping the end user, but it's nothing vital that the whole web site depends on.
After researching every single modal window, lightbox, slimbox, etc out there nothing fit the bill. Granted some of them were very nice but only fit a specific purpose, others were a nightmare on the code end, and others were just hacks of another. None of them truly supported all of the features we needed and those that were close could not be easily adapted without a bottle of Prozac near by.
FlickrBox is a CSS / PHP / JavaScript based Flickr Photo gallery that lets you display your recent Flickr photos and public photosets right on your own site using the Flickr API. One of the key differences between his script and others like it is that you can view the full sized image from within your own website without having to navigate to Flickr.
When I set out to redesign this site, I had an idea: Could I make the stylesheet change based on the hour of the day? Sounds easy enough, right? So, I started searching the Internet for some code I could use. I'm a novice when it comes to javascript and php, so I was hoping to find some "plug and play" code, so to speak.
What I did to achieve this was used server-side cookies instead of JavaScript cookies. Hence, PHP. However this isn't a PHP style switcher, which is where Ajax comes in. For the extreme technical folks, no, there is no xml involved here, or even a callback response. I only say Ajax because everyone knows what 'it' means. With that said, it's the Ajax that sets the cookies 'on the fly'. Got it? Awesome!
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.
For one of my projects, i needed simple graph to represent data for a single year by months. I came up with this solution, and decided to make free version.
PlotKit is a Chart and Graph Plotting Library for Javascript. It has support for HTML Canvas and also SVG via Adobe SVG Viewer and native browser support.
Recently I was working on CSS + JavaScript Bar Charts. SVG is good, but it's not cross browser so I decided to write simple chart by myself. This is only alpha and there are a lot of work to do.
It's a basic example of how helpful a little JavaScript and CSS can be in a form. Instead of the input hints always showing and potentionally cluttering a very simple form, only the hint for the currently focused input will show. This article will show a way to do this.
(On the site) Note how the text scrolls normally, but the green background scrolls slowly, and how the clouds scroll faster than normal. That's the parallax effect.
You can make as many layers parallax as you desire, or as many as your browser can render fast enough to keep the effect alive.
FrogJS is a simple, unobtrusive javascript gallery. It is not a replacement for other thumbnail galleries such as Lightbox JS, but rather a different way of showing galleries. This type of gallery is best used in photo stories and other places where a page-by-page gallery would normally be used. Above is a small example of a FrogJS gallery. Just click the parrot thumbnail to scroll through the gallery.
A very simple tutorial explaining how to add AJAX functionality to your website with 3 easy steps. Helpful no matter what your technical expertise may be... from beginner to advanced. Take existing features on your site and modernize with this framework.
CSSFly is a web 2.0 tool for easy editing websites direct and in real-time in your browser. Simply edit the (X)HTML-code and the external Style-Sheet files : what you code is what you get! This tool is designed for developers. Use it for developing, testing or checking your web-project or take a look behind the scenerys of your favourite websites.
In turning this part of the design into something flexible on the website I saw two options; clever CSS, or Lots of Images. I decided that Lots of Images was a bad idea
This is a list boxes calendar. It isn�¿½�¬�¢t the most semantic method, but it does seem to be fairly stable and it resizes perfectly. A monospace font like Courier New must be used to ensure proper proportions and two characters must be used. Prepared with dynamic generation in mind.
It might not seem like it but styling tabular data can be a lot of fun. From a semantic point of view, there are plenty of elements to tie some style into. You have cells, rows, row groups and, of course, the table element itself. Adding CSS to a paragraph just isn't as exciting.
In this article I’ll go through the creation of a custom navigation bar with some cute Javascript effects that will certainly impress your friends. Thanks to the great Mootools library, this beauty is contained in 1.5kb. Not only that, but it’s also cross browser (tested on Internet Explorer 6, Firefox and Safari) and accessible!
Tobie Langel likes a fistful of dollars and uses them to explain how to use auto scrolling page navigation with the new $$ operator in Prototype 1.5.1 RC.
Transparent message is a new way to display information on a web page. Instead of using the ugly alert() javascript function, it shows the message in a overlay layer of your HTML page.
An AJAX addon for your site, a Mail list. An email address can be submitted without having to reload the whole page. (click on download link under Maillist).
activeCollab is an easy to use, web based, open source collaboration and project management tool. Set up an environment where you, your team and your clients can collaborate on active projects using a set of simple, functional tools. 100% free!
Yes, that's right kids, you know you love that Digg spy effect. The real time news, as it rolls in, and how cool does it look? It looks pretty cool, that's how.
I have made an example of the Gmail username style signup page. Where you enter your selected username and click Check Username the script will then check to see if the username is taken if so make some suggestions as to others like that one which are available.
I have been playing around with Ajax recently (all the cool kids are doing it these days), and had an idea for an utterly superfluous page-loading effect...
This is a script that makes elements on your page dragable by assigning them to the CSS class "dragableElement". In the demo, you can drag the menu, the images and the small text box.
Text Changer is a script that allow your user to customize a chosen text. The various choices done will be stored in the browser with the support of cookies.
ColumNav is a hierarchical menu implementation utilizing Bill Scott's Yahoo UI Carousel component. Content is loaded from an unordered list and displayed in a scrollable viewport, similar to Column View in the Mac OS X Finder.
frevvo Live Forms is (yet another) Ajax-based web form builder that has been created for business forms. It was created by developers who were getting tired of hand-coding forms for clients.
Who wants to use Excel to make a new graph each week? Using CSS and PHP you can create attractive bar graphs (yes, even the stacked kind) that are always up to date.
Image Thumbnail Viewer is a compact, unobtrusive image viewer that can be applied to any link on the page to load the desired image inside a sleek interface based on the link's "href" value. Simply give the link in question- be it a text link or image thumbnail link- a rel attribute of "thumbnail", and you're done.
Online calendars are often used in many web applications. Though popular, the logic behind creating a calendar can be scary especially for those who are new to programming. There are many web calendars in the market but some of them are quite complicated. If we are not able to understand the code, it becomes harder for us to customise the calendar to fit into our existing application. As such, we need to create a calendar that can plug itself into any system seamlessly without problems. Whether we are using Wordpress, Mambo/Joomla or Drupal, we should only need to insert one line into our code for the calendar to work.
In this article, we’ll create a drag drop system using JavaScript that will let you drag an item to its new position, and then save the new order as soon as you drop the item.
In this tutorial I will explain how to open a mysql database connection using PHP and the all popular AJAX. The purpose of this article is to demonstrate how the XMLHttpRequest object works within php and the advantages of using it. This tutorial will be the first in a series of articles leading to the development of a fully functional dynamic web events application.
You know how to use AJAX to pull rows from a database, but do you know how to create an AJAX-based system to organize the records neatly into pages? You'll know how to do that by the end of this series! This first article shows you how to build the user interface.
Ajax Cookbook is a web site devoted to publishing small, reusable snippets of JavaScript, HTML, and CSS that are generally useful to developers of Ajax web sites.
Many people may have seen this page before, but for those who havent this page contains a bunch of "activity indicators" to use on your page while processing AJAX Requests (or anything else).
Here you’ll find a list of techniques we , as web-architects, really couldn’t live without. They are essential and they indeed make our life easier. Let’s take a look at 53 CSS-based techniques you should always have ready to hand if you develop web-sites
YShout is a lightweight yet full-featured package that allows you to easily add a shoutbox to your website. Shoutboxes are a great tool to receive feedback from your visitors, and YShout allows you to chat with them in real-time!
We coninue to present some of the best CSS-techniques which web-developers can always use working on their current web-project. Recently we’ve taken a look at the best css-based forms, today we present some useful techniques for displaying information in a tabular mode.
Here you’ll find a list of resources which offer free, gorgeous and valid CSS-based templates - usually with images and full layout structure, such as headers, navigation bars, content containers, sidebars and footers.
Our article, Ten CSS tricks you may not know has proven to be such a success that we decided it was time to offer you ten more CSS tricks that you may not know.
I wanted to extend the concept of hyperlink cues a little. For links that point to external sites, what if, instead of showing a generic 'external link' icon, we showed that site's favicon?
I like the little icons next to hyperlinks that signify if that link will take me offsite, open a popup, or link to a file (as opposed to another html page). Here's how to do it in a way that's supported in IE7, Firefox, and Safari.
A javascript slideshow that shows images from Flickr.com. Specify tags and/or users to limit the slideshow. Uses the "canvas" object, works in firefox and internet explorer using the excanvas.js library. Easily integrate into any web page.
CSS Tabs are the famous menus of navigation, generally located in the top of the sites. Many sites use this type of menu to detach the main pages of a site.
Scriptaculous is a tiny (140kb) javascript framework that gives you the power of effects, several dynamic data components, and all you need to know is a little bit about HTML and how to read. If you already have your own website, it is not hard to do. Follow these steps to AJAX up your site in no time.
Take a look on the net and you'll see endless pages of AJAX Frameworks: libraries which promise to do all the trivial and dirty AJAX work for you, leaving you free to code without actually understanding how the application you're writing really works. So lets pull back the smoke and mirrors and see what AJAX is and why it's just a simple evolution of client/server tricks Javascript programmers have been doing since the web was born.
Using mootools v1.0, this javascript gallery and slideshow system allows you to have simple and smooth (cross-fading...) image galleries, slideshows, showcases and other cool stuff on your website...
This script is sooo Web 2.0(it is so Web 2.0 that I think that it is really Web 2.5). It works perfectly if there is no javascript(Graceful degradation). As a matter of fact, it works better if there is no javascript. Can you think of another Ajax app that works better if there no javascript? I can't think of one - this script is the first in that area.
This web site has hundreds of links to web design tools sorted by category and popularity. The site stores your favorites so you can reference them later. The categories on the site are: color, css, fonts, html, icons, images, inspiration, tutorials, and widgets. You can even add your own links.
The subModal works by placing a semi-transparent div over the browser, blocking access to the content below while still providing visibility. This maintains state and doesn’t make someone feel disoriented or lost by moving them completely to another page. Their frame of reference is kept while allowing them to perform a new task (usually closely associated with the content below).
Here are 113 10x10 grayscale icons in .gif format to fill up your stocking with - the next installment of my mini icon collection, which has been steadily growing over the last year.
This article is going to demonstrate how to implement web applications based on Ajax and ClientScriptCallBack as it presents a simple example. Also, the article is trying to point at the key futures of working with Ajax
Jack Slocum keeps 'em coming with his detailed post on a reusable component for resizing elements.
Jack's YAHOO.ext.Resizable component does what it says on the tin, and he shows you: Basic Resizable div ,Wrapped elements (e.g. text area inside) and heaps more!
Article covers all the pieces of code needed to create a Image scaling and offsetting widget using just HTML and JavaScript. Background is given on how to center and scale images as well as explanation of using script.aculo.us drag the image to provide center functionality.
Ok. Let's set the record straight. There is no official guide for each and every CSS shorthand property value. So let's work together and put one together shall we? Ok. Straight to the business. Anytime I've ran into a specification (besides the confusing mess at the W3C), it turns into showing off a couple of examples and you're supposed to be set on your way. Well well. Over the years, I've found quite some interesting unknown quirky facts about these shorthands, hence this Guide was born.
The "DHTML Menu For Applications" is a part of the upcomming library called "DHTML Suite for applications". This menu is particular useful in web applications because of it's features for adding, removing, showing and hiding menu items dynamically.
I feel equipped to write a beginners guide to AJAX because I am a beginner who recently learned it. I am a tad hungover while writing this so some of the writing may seem a little lazy, but I'm sure it'll still be more beneficial than posting about phonecalls I have received in my life. This guide will show you a very simple AJAX application that I wrote, and will explain clearly how it is written. Pre-Requisites are a little bit of HTML and a side portion of javascript. Lets Go
In this HOWTO I will explain how to use AjaxAgent and PHP to create an Ajax Auto-Complete box with a drill-down list of data. The UI is very simple. It consists of a TextBox to enter an Artists' Name, a selectbox to display the Albums and an unordered list to display the songs on an album.
The JavaScript is only 2k with gZip on! The entire package is nearly 300% smaller than it's nearest competitor, ColourMod. And, unlike it's competitor, the ColorJack Plugin is free to use + modify. It is a very simple + effective widget for your site.
CSS Tab Designer is a unique and easy to use software to help you design css-based lists and tabs visually and without any programming knowledge required!
This scripts add rollover effects to your table. What you have to do is to specify which table(s) you want to apply this effect to and the name of the CSS class you want to assign rows to on mouse over.
This script add sort features to your table without making any changes to the layout of the table. To apply this feature, the only thing you have to do is to call a javascript function and pass the id of your table and how the columns should be sorted.
Snap Preview Anywhere enables anyone visiting your site to get a glimpse of what other sites you're linking to, without having to leave your site. By rolling over any link, the user gets a visual preview of the site without having to go there, thus eliminating wasted "trips" to linked sites.
Timeline is a DHTML-based AJAXy widget for visualizing time-based events. It is like Google Maps for time-based information. Below is a live example that you can play with. Pan the timeline by dragging it horizontally.
Online calendars are often used in many web applications. Though popular, the logic behind creating a calendar can be scary especially for those who are new to programming. There are many web calendars in the market but some of them are quite complicated. If we are not able to understand the code, it becomes harder for us to customise the calendar to fit into our existing application. As such, we need to create a calendar that can plug itself into any system seamlessly without problems. Whether we are using Wordpress, Mambo/Joomla or Drupal, we should only need to insert one line into our code for the calendar to work.
Technique to build flexible CSS drop shadows applied to arbitrary block elements. Most of the existing techniques for creating element shadows use images, this one doesn't. IT uses plain simple CSS.
Lars Huring and team have created SWFUpload, a small JavaScript/Flash library that tries to re-make the way file uploads works on the internet.
It works by replacing the contents of a div with a small transparent flash that handles all the upload-frontend, javascript for configuration and callbacks and html/css for styling/looks.
The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. The YUI Library also includes several core CSS resources. All components in the YUI Library have been released as open source under a BSD license and are free for all uses. Download the entire library, its documentation and examples from Sourceforge.
Fonts are an essential part of design - but there are thousands of fonts out there, so knowing which ones to use can be quite daunting. Here's a roundup of some fonts that have found popularity recently.
This is a good one for all you advanced CSS users who want to add something more to your navigation or mess with the general idea of this one. Like I said for your beginners, don't be afraid of this and the code that goes with it, it might look complex but you'll understand it eventually.
This is the first in a three-part series of the top Ajax tutorials from around the web. Part one is for beginners, how to build your first ajax application, and understanding how it works. Part two will be for novices who have experience with ajax, but would like to take their skills to the next level. And part three will be for experts who want to... build their own gmail application? Why not. So we'll get started from the very beginning.
In Web 2.0 registration and feedback forms can be found everywhere. Every start-up tries to attract visitors’ attention, so web-forms are becoming more and more important for the success of еру company. In the end, exactly those web-forms are responsible for the first contact with potential customers. Let’s take a look, which modern solutions a web-developer can use, designing his/her next css-based form.
Highslide JS, formerly Vevstein Thumbnail Expander, is a piece of JavaScript that streamlines the use of thumbnail images on web pages. Free for non-commercial use.
One of the features I find it interesting in Google calendar is the possibility to create shared calendars, but also the availability of your calendar as XML or ICAL whatever it's a private or public one. As soon as we have XML of our calendar available I was wondering why not integrating Google calendar directly in website. For example a community that use the service to manage their events, or to display your future trips in your blog ?
A little floater/popup that lets you quickly rate a page. All AJAX driven of course. On pageload, the JS is executed through an onload statement inside the tag. It finds the proper div (in this case feedback_wrapper) and puts in the HTML there. Then as the person browses around the page, it hovers gently in the bottom right.
This gallery is my simplest yet. It is just an unordered list of images that are normally compressed vertically (reduction 8:1). When you hover over one of these compressed images it expands to full size. It is based on my sliding menu system and adapted to use images. No thumbnails are required and all the images are "pre-loaded".This method can be used either vertically, as shown, or horizontally.
This is a purely CSS based image gallery that displays larger versions of thumbnail images dynamically when the mouse hovers over them. A rich HTML caption can be added to the enlarged image, and every aspect of the Image Gallery exists as plain HTML on the page.
With this article I hope to show you how to produce a professional quality photograph gallery using nothing more than an unordered list of photographs and a Cascading Style Sheet (CSS).
You have a set of images on the left hand side of your screen and as you hover over them you only get a white border, but as you click each image the page background is dimmed, and the full size image is loaded right onto the screen. To get back to the images simply click the image your viewing and it will be closed. This one is a more advanced gallery and also worth looking at.
When you hover over an image you are shown the description for the image, and when you click an image you are redirected to the full size image with the description on top. It's not too complicated so this would be another good one for beginners to look at and mess around with because there's not a lot of extra code to get confused about.
Gabriel Lanzani has created a Script.aculo.us Select Box component that is meant to replace select with visual effects, a skinnable look, and autocomplete support.
Particle tree's hack of Lightbox allows other content besides images to be put into a Lightbox, but it uses AJAX to pull the content into the box. For my purposes this is overkill because an AJAX call is loading an iFrame which results in 2 HTTP requests and for forms inside a lightbox this won't function the way I want. I want the form to act separately from the current page so the user will not be redirected when the form is submitted. To me this gives the UI a smoother feel.
In the past few weeks, Jason Fried of 37signals' has reminded us that the "Yellow Fade Technique" (YFT), which they've implemented in such things as Basecamp and Ta-da Lists, is a friendly way to "highlight changes without getting in someone's way". Sufficiently inspired , I began to develop my own method. I call it the "Fade Anything Technique" (FAT) because that's just what it lets you do.
The AutoSuggest class adds a popdown 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 tab key. The values for the suggestion list are to provided as XML (by a PHP script, or similar).
Gere's a small-footprint object-encapsulated unobtrusive javascript crossfader. The constructor takes three variables: an array containing the ids of the divs to be faded, the fade time (in milliseconds), and the delay between fades (also in milliseconds).
Harness the power of Google search to create a free Custom Search Engine that reflects your knowledge and interests. Specify the websites that you want searched - and integrate the search box and results into your own website. You can also link it to your Adsense account, generating revenue from search results!
Google properties (such as Google Personalized Homepage, Google Desktop, etc.) used to be the only places you could add Google Gadgets, but not anymore! You can now easily add gadgets to your own site for free by browsing the directory of gadgets for your web page, selecting a gadget, and copying/pasting a small snippet of auto-generated HTML. For developers, this means significantly increased gadget distribution across the web, forums and blogs.
Anyone whose used Flickr to publish their photos will be familiar with the edit-in-place system used for quickly amending titles and descriptions on photographs. Hovering over an item turns its background yellow to indicate it is editable. A simple click loads the text into an edit box, right there on the page.
There's little more impressive on the web today than a appropriate touch of Ajax. Used well, Ajax brings a web interface much closer to the experience of a desktop app, and can turn a bear of an task into a pleasurable activity. But it's really hard, right? Well, the good news is that - ta - da - it doesn't have to be a headache. But man does it still look impressive. Here's how to amaze your friends.
A little editor that I built for a project. I have used HTMLArea as reference and I would recommend it if you want an editor that has a LOT of features. SimpleEditor is intended for programmers that need to make a customized editor.
For a recent project I needed JavaScript tooltip functionality for showing detail information. All tooltip libraries that I came across were too complicated and bloated, did just too much and most of the time were still not flexible enough with the tooltip. So I decided to create my own library that is based on prototype.js
Setting up a gallery layout is not exactly one of the jobs I am looking forward to doing. I assume you all are using lists by now to lay out thumbnail galleries, right? If so, you already know that those kind of semantic gallery layouts require a lot of CSS code, and not a lot of these layouts are flexible enough - at least for my taste, so I decided to give it a go and I came up with a pretty robust solution that works in all modern browsers and it's behavior resembles a what we could call a table like behavior.
A redesign of DHTMLSite is coming soon, as i think it needs another "reboot". The new design features a cleaner, more organized look, as i believe simplicity is the way to go. If any of you have any suggestions, please contact me [via the contact form], as I always appreciate feedback.
This post explains how to dynamically add captions to all pictures with a specific class applied. Text for the captions is taken from each pictures' title attribute. It also covers absolute positioning of an element relative to its container (rather than the page as a whole) and CSS opacity support in mainstream browsers. This is used to allow pictures to partially show through the background of their captions.
The WebSnapr Preview Bubble is a simple, unobtrusive script used to display an overlay bubble showing a hyperlink target thumbnail using WebSnapr. It's a snap to setup and works on all modern browsers.
Transparent custom corners and borders is a technique for creating custom corners and borders with optional alpha transparency. The technique is based on a combination of CSS and JavaScript, and gives you a lot of flexibility when creating rounded corners or special borders.
This is a compilation of what DHTMLSite thinks the best 33 FireFox Extensions for webmasters are. If you don't have FireFox, i highly recommend you download it. This is a thankyou gift for supporting DHTMLSite, despite the recent downtime. We are changing servers soon, so please hang on for awhile longer.
You've seen such a feature on other CSS based sites, now you can have it too. This is a "plug & play" style sheet switcher that lets your visitors switch between a list of alternative style sheets to apply to your site. With a change of style sheet the entire look of your site can be transformed. Persistent cookies are used to store the user's selection and automatically recall that style sheet upon his return.
SuckerTree Horizontal Menu is a CSS and DOM hybrid menu that's list based and supports multiple levels of sub menus. The trick to SuckerTree is a small adoptable piece of JavaScript that crawls the inner levels of a list menu and assigns the appropriate show/hide and positioning behavior to them. You can even have multiple SuckerTree menus on the same page.
Ramin B. has put together yet another image gallery. This time it is using jQuery as the library, and has a bunch of rich effects such as transitions, reflections, and the use of thumbnails.
This script loads content from the server and inserts it into an empty HTML element(example a DIV tag) on your page. New pages can be appended dynamically and the script will scroll down to the content of the new pages.
Using mootools (there is also a moo.fx version available), this javascript slideshow system allows you to have a simple and smooth (cross-fading...) image slideshows and/or showcases on your website.
In this introduction we will build a simple form (I know it says not to use AJAX for simple forms, but it is an easy example) that submits a user’s information to the database and confirms if the user’s email address is already in the database. We will be using a common JavaScript library by the name of prototype.js which can be downloaded at http://prototype.conio.net/.
So with all of the light/thick/whatever-box methods out there today, why would I build my own... because I wasn't all that thrilled with the other ones out there. Don't get me wrong, LITBox is not perfect, but for what I am developing at SpinWeb, it is the best fit. Probably the biggest advantage of the LITBox, is that it is a lightbox written into a class. This gives it the ability to open multiple instances of the LITBox and be able to control each one with unique settings and controls.
The carousel component manages a list of content (HTML UL and LI elements) that can be displayed horizontally or vertically. The content can be scrolled back and forth with or without animation. The content can reference static HTML content or the list items can be created dynamically on-the-fly (with or without Ajax).
Learn how to build an Asynchronous JavaScript and XML (Ajax) Really Simple Syndication (RSS) reader, as well as a Web component that you can place on any Web site to look at the articles in the RSS feeds.
I wanted a robust javascript validation library that was simple to implement and didn't require me do any extra work other than creating the form. My favourite idea for a method of doing this is to utilise the field elements' class attribute to indicate what sort of field it is and hence any validation requirements. There are a few javascript libraries that implement that idea like wForms, but, since I'm currently hell-bent on re-writing all my javascript using Prototype, I thought I'd see how difficult or easy it would be to roll my own. Turns out that this is just the sort of thing that is easy with Prototype.
The idea is pretty much like the meebo (which I love) or like instant chats on many support sites (such as raqspaces implementation), but with a twist. This would be an intrasite communication relay created using AJAX and not the applets which are commonly used for this. In this sample I will show implementation using prototype windows, prototype, and some custom JSON code.
Small collection of tools for use with text areas (or input fields). Includes resizable text area, word count, max length, and a combination of resizable area with word count.
AutoViewer is a free Flash image viewer. AutoViewer is designed to display a linear sequence of images and captions. AutoViewer is easy to use with your images (see instructions below).
A script (JavaScript) that allows you to focus the users attention on a particular portion of the screen. It creates the equivalent of a modal dialog box - this means that while the user looks at this focused part of the screen, they can't interact with the rest of the screen.
It resizes, it transitions, it fades in and out and it's not flash! The new AJAX slideshow on the homepage of my site comes to you courtesy of Scott Upton at Uptonic. This smooth, easy to use delight, is a great toolbox addition, for anyone who considers themselves part of the new breed of AJAX designers and developers.
Slightly ThickerBox is a modification of Cody Lindley's Thickbox script. I modified it for use on my Jason's Toolbox Redesign. The modifications allow the script to generate "Previous Image" and "Next Image" links. The result is that you can use Slightly ThickerBox to create image galleries. In addition, you can create groups of galleries by setting a "rel" attribute on the links. (I also moved the Caption and Close link to the top and made the script case insensitive.)
Heres how to make certain images on your page fade in when you hover the mouse over the picture and fade out when you move the mouse off the picture its great when mixed with a marquee or for when you have lots of pictures. In other words a opacity feature. Sorry, IE Only.
AJAX File Uploader is a interactive file uploading script based on Perl, PHP and AJAX, that will allow you to upload files to your server much easier. Modeled after Safari's Downloads dialog it allows you queue up multiple files for upload even while another file is currently being uploaded.
I’ve been thinking about creating an AJAX-based slideshow for a while, and today it happened! Today I wrote my first line of code in this project (probably not the last one), but for the moment I feel very content with the results. The code is probably not perfect, but I’m going more for the concept here. The tweaking options are endless.
I have had many visitors asking how they could produce a slide show or photo gallery using a mixture of portrait and landscape images. Well this is one way that it could be done
It works in a similar manner to my previous examples except that I have removed the 2x image on hover (this was a bit of a gimmick anyway) and have gone straight for a click to produce the full size image.
Zenphoto is an answer to lots of calls for an online gallery solution that just makes sense. After years of bloated software that does everything and your dishes, zenphoto just shows your photos, simply. It's got all the functionality and "features" you need, and nothing you don't. Where the old guys put in a bunch of modules and junk, we put a lot of thought. We hope you agree with our philosopy: simpler is better.
minishowcase is a small and simple php/javascript online photo gallery, powered by AJAX/JSON that lets you put easily your images in an online gallery, without having to configure databases or changing and customising code (though you may do it if you feel so) allowing to have an up-and-running gallery in a few minutes.
This is a rating bar script done with PHP and mySQL that allows users to rate things like can be done on Netflix or Amazon, all web 2.0-like with no page refresh. It is a major improvement on the previous version because it is now unobtrusive, meaning that if Javascript is off it will still work (although the page will refresh).
Reflection.js 1.6 allows you to add reflections to images on your webpages. It uses unobtrusive javascript to keep your code clean.
It works in all the major browsers - Internet Explorer 5.5+, Mozilla Firefox 1.5+, Opera 9+ and Safari. On older browsers, it'll degrade and your visitors won't notice a thing. Best of all, it's under 5KB.
More than one year has passed from the first version of Nifty Corners. While it was more of a proof of concept, and the second version presented some big improvements, there was still something missing. So here I present Nifty Corners Cube, that are simpler and more flexible than the previous versions. Let's start.
A rarely discussed advantage of CSS is the ability to layer background images, allowing them to slide over each other to create certain effects. CSS2’s current state requires a separate HTML element for each background image. In many cases, typical markup for common interface components has already provided several elements for our use. One of those cases is tabbed navigation.
CMotion Image Gallery is a versatile gallery script that uses the most intuitive input devise available, the user's mouse, to control it! The user can direct both the image scrolling direction and speed just by placing the mouse on either spectrums of the image gallery. Clicking on an image can then load a larger version of it, navigate to a page etc.
This powerful script allows you to keep certain content on your page always visible, by "docking" it. The way the script works is by detecting if the designated content is visible on the user's screen, and docking it (keeping it in view) only when it's not (including partially clipped).
Here are a list of 12 useful webmaster tools, many of them FireFox extensions. These are highly useful in helping you develop your site. Useful Extensions
This script displays a modal message at the center of the screen. All other page controls are disabled until the message is closed. You can choose between displaying static content inside the message box or content from an external file.
This is a cross browser Javascript calendar. Download the zip-file and open the js_calendar.html file in your browser. You use the displayCalendar() or displayCalendarSelectBox() function to display the calendar.
This is a stylish collapsible menu modelled after the navigational menu found on Slashdot. Session-only cookies are used to remember the menu state (whether it's expanded or not). Cool!
This is a robust, cross browser fade in slideshow script that incorporates some of your most requested features. They are the ability to display multiple slideshows on the same page, optional linking and link targeting for certain images, and the ability to randomize the display order of the images. You can also set the slideshow to pause when the mouse moves over it.
This script gives you an Image crop/resize DHTML user interface. Drag a rectangle around the area you want to crop. Click the "Crop" button and let Ajax send crop data to the server and the cropped image back to you. PHP uses ImageMagick on the server to crop and convert the image.
We are going to walk through the basics of Ajax and culminate in the building of a little Ajax powered Fading Image Gallery application. In this way it is hoped that a deeper appreciation for what Ajax is capable of is conveyed. It also should be noted that in another upcoming tutorial, we will tweak that Image Gallery widget and add some form processing capabilities to it, add some more FX, get a few glitches out of that system etc.
The purpose of this tutorial is to explain, step-by-step, how to create an AJAX desktop/homepage. The homepage we will create will have most of the capabilities of established homepages like Netvibes, PageFlakes, etc.
If you have a form where you want to allow a user to upload more than one file, you're stuck with either adding as many file input elements as the number of files you want to upload, or possibly having new ones appear magically through Javascript. By using AJAX, it is now possible to upload multiple files using a single file element.
A poller script that uses Ajax to send vote to the server and receives vote results from the server. The results are displayed in some animated graphs.
I wanted to give an example of a good use of AJAX, and at the same time keep it simple. So I thought a good example would be to build a zip code verifier. As soon as the person enters the zip code it makes a request to the server to see if the zip code is in the database, and returns the city and state.
While the web design community gradually moves away from using tables to lay out the structure of a page, tables really do have a vital use, their original use; they're for laying out tabular data. This tutorial demonstrates how AJAX can be used to sort tabular data.
This javascript class allows you to add window in a HTML page.
This class is based on Prototype. The code is inspired by the powerful script.aculo.us library. You can even use all script.aculo.us effects to show and hide windows if you include effects.js file , but it's not mandatory.
It has been tested on Safari, Camino, Firefox and IE6.
I've been meaning for some time to give a little tutorial on the live search I created for this latest design. There are a few steps involved, and I'll do my best to explain each as we go. I should also note that I'm not including all the effects that you'll find in my search. They require some special WordPress template changes that you shouldn't have to make. And I need to keep mine unique, right? Also, I'll be touching on a few steps that are WordPress specific, but the theory can be applied to any site platform.
DHTMLSite Apologizes for the recent downtime. There had been an accidental server wipe, and a lot of data was lost. We are slowly trying to recover those articles. Sorry for any inconvenience caused.
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.
In this tutorial, you'll learn how to make a cute little button expanding a textbox by a desired number of columns. This primarily involves javascript and it's pretty easy to understand. This feature can be very useful for things like forums and article writing as the content can vary in length quite a lot.
A little bit JavaScript, a little bit CSS and a little bit clairvoyance, Link Thumbnail shows users that are about to leave your site exactly where they're going. When that curious mouse pointer hovers over a link pointing to somewhere outside of your site, the script displays a small image of the destination page. It's a nice visual cue that serves a very real purpose: providing a clearer picture (no pun intended) of what's ahead.
I occasionally run into situations where it would be really great to add an ‘intellisense’ feature to a text input on a web form. That is, something along the lines of AutoComplete or Google Suggest.
A folder tree with support for drag and drop. Rearrange the nodes in the tree by dragging and dropping them like you do with folders in a file manager or in a mail program(Outlook, Thunderbird etc.). Ajax is used to send the new structure to the server.
Imagegal is a simple PHP script that will automagically create a JS/CSS/DHTML powered image gallery for you when dropped into a directory containing images.
A shortcut icon may be used to brand your site onto the viewer's address bar (when viewing your site) and favorites list. For example, Google uses a "G" as their shortcut icon. To create your own, you must have a 16x16px file, in an icon format (.ico). Upload it onto your web server, and on your pages add: between your tags. It's that simple.
A great AJAX script with MySQL integration which allows users to click on stars to vote. The vote is then counted and updated with stats without the page loading. Also includes IP logging, to only allow one vote per person.
A popup or flat DHTML calendar, suitable for selecting date and time. Supported on most browsers, it features a customizable look through CSS, keyboard navigation, multiple day selection and more!
Can you take a simple list and use different Cascading Style Sheets to create radically different list options? The Listamatic shows the power of CSS when applied to one simple list.
“DHTML” dropdown menus have notoriously involved nasty big chunks of JavaScript with numerous browser-specific hacks that render any otherwise neat, semantic HTML quite inaccessible. Oh, the dream of a lightweight, accessible, standards-compliant, cross-browser-compatible method! Enter Suckerfish Dropdowns.
This is an attractive "blue shading" image tab menu. The shade effect is created using two gradient background images, one for the overall tabs, and the other, for the currently "active" tab.
Popup Calendar script makes inputting dates into forms as easy as point-and-click. Your user simply selects the date from a popup calendar, and it's automatically entered into the designated form field.
The Octopus Engine attempts to unify techniques for rounded corners, drop shadows, custom borders and faux columns, all in one pretty package. It’s an all-in-one, one in all approach, encompassing whatever effects one needs.
The Ultimate Tabbed Menu aims to create a design and code foundation for those with web experience and is a plug and play resource for the average user. The Ultimate Tabbed Menu goes through the steps of making a tabbed menu, and provides a variety of styles and colors in the included download pack.
The method of increasing text size takes advantage of alternate stylesheets. These stylesheets can be selected by the visitor to your site as an alternative (hence the name) to the default style sheet.
Date Input Calendar is designed specifically to make entering date values into forms as easy as can be! It's different from most other similar scripts in the following two ways:
The great divide between programmers (who work with back-end applications) and Web programmers (who spend their time writing HTML, CSS, and JavaScript) is long standing. However, the Document Object Model (DOM) bridges the chasm and makes working with both XML on the back end and HTML on the front end possible and an effective tool. In this article, Brett McLaughlin introduces the Document Object Model, explains its use in Web pages, and starts to explore its usage from JavaScript.
For many Web developers, making simple requests and receiving simple responses is all they'll ever need, but for developers who want to master Ajax, a complete understanding of HTTP status codes, ready states, and the XMLHttpRequest object is required. In this article, Brett McLaughlin will show you the different status codes and demonstrate how browsers handle each and he will showcase the lesser-used HTTP requests that you can make with Ajax.
Most Web applications use a request/response model that gets an entire HTML page from the server. The result is a back-and-forth that usually involves clicking a button, waiting for the server, clicking another button, and then waiting some more. With Ajax and the XMLHttpRequest object, you can use a request/response model that never leaves users waiting for a server to respond. In this article, Brett McLaughlin shows you how to create XMLHttpRequest instances in a cross-browser way, construct and send requests, and respond to the server.
Ajax, which consists of HTML, JavaScript™ technology, DHTML, and DOM, is an outstanding approach that helps you transform clunky Web interfaces into interactive Ajax applications. The author, an Ajax expert, demonstrates how these technologies work together -- from an overview to a detailed look -- to make extremely efficient Web development an easy reality. He also unveils the central concepts of Ajax, including the XMLHttpRequest object.
Yep, I totally made tetris. Using a combination of the Event Utility and the DOM Collection utility, I was able to roll out perhaps the sweetest piece of eye candy I’ve ever built. And granted, it’s not to say that it hasn’t been done before, but with the help of YUI, this bad boy works in Firefox1.0+, Opera8+, Safari2, and IE6, and yes, it only took 2.5 days!
I have found a better way to show CSS for IE only. Normally in CSS whichever rule is specified last takes precedence. However if you use !important after a command then this CSS command will take precedence regardless of what appears after it. This is true for all browsers except IE. This method is valid CSS too!
I've changed ParticleTree's lightbox functionality to allow the use of inline div's instead of AJAX calls. Very often I find that I want the data in the lightbox to be indexable by search engines and visible to people with screen readers etc. This adaptation makes that possible. Mind you, I've completely removed the AJAX calls.
Preloading images using Javascript is very simple. This method can be used to preload images used in rollovers like the links across the top of this page.
In this tutorial, you'll learn how to make a cute little button expanding a textbox by a desired number of columns. This primarily involves javascript and it's pretty easy to understand. This feature can be very useful for things like forums and article writing as the content can vary in length quite a lot.
While researching the best way to recreate a modal window for our current project, we ran into Lokesh Dhakar’s lightbox.js and we knew we found a winner delivery container. Dhakar’s method, however, while fantastic, was a bit too specific for our purposes and so we created our own implementation that we think is a bit more flexible for extending a web site’s interface. In this tutorial, we’ll take a look at how to create a modal window using some nifty JavaScript and CSS.
This code displays a draggable image-layer when users click on links. You can display the images near the links clicked on, or in the center of the window. Or you can specify the position as offsets from each link.
A script that causes any text on the page to be typed out, one letter at a time. Simply tell the script the ID of the text's container (ie: a DIV or SPAN), and the script does the rest. HTML tags within the text to type out is supported as well.
This is a DHTML script that animates small browser windows. Use the mouse to move and resize the windows. Cookies are used in this script to remember size, positions and window state(minimized or maximized).
This is a cross browser DHTML window script with support for tabs. It kind of works like the inspectors in Adobe Photoshop. It use cookies to remember size, positions, active tab and window stack order. In the demo, try to move and resize some of the windows. Then refresh the page.
A major challenge of Asynchronous JavaScript and XML (Ajax)-driven Web sites is the lack of a Back button. We will use JavaScript to create a history stack for the Ajax photo gallery built in Part 1 of this two-part "Developing PHP the Ajax way" series. This history stack will closely mirror the history utility found in Web browsers, and it will be used to provide Back, Forward, and Reload buttons for the application.
Asynchronous JavaScript and XML (Ajax), is arguably the most popular new Web technology. In this two-part "Developing PHP the Ajax way" series, you will create a simple photo album as an online Web application, entirely in PHP and the Simple Ajax Toolkit (Sajax). You'll begin by writing a simple photo album using the standard method of PHP development and later apply Sajax to make it an active Web application.
The buzzword of 2006 is Web 2.0. What that means is hotly debated, but it appears to refer to cool dynamic Web applications. Those Web applications -- often developed in PHP -- use dynamic HTML (DHTML) to create pages that move and change without having to go back to the server for a refresh. In this article, there are 6 DHTML examples.
Upon seeing the Fluxiom intro video, I was compelled to figure out how they pulled off iPhoto-like image scaling in a browser. Leveraging the work of others, it's actually very simple.
The CSS2 text-shadow property makes it easy to add a drop shadow to a web page's text, but so far it's only supported by the Safari browser for OS X. Today we're going to create CSS drop shadows for other browsers, including Firefox.
After seeing the Hoverbox Image Gallery developed by Nathan Smith, I thought that a similar approach would work very nicely for a menu. This would allow you to create a much larger rollover image for each menu item, overlapping the neighbouring menu items and other elements on the page.
This is a very useful little script. It could be used to load a larger image if your viewer has 1024x768 resolution, or a much smaller image if your viewer is using 640x480. Just drop it anywhere on a page, and it works.
This is a specially formatted tooltip that displays changing images and optional text onmouseover of specified links or other page elements. Hover over the links and highlighted text here for demonstration and information about the tooltip.
Specify a list of images to display and this code will swap in those images at random on a timer. The code is very easy to set up. Your images can be linked if you like. Multiple sets of rotating images are supported.
This tutorial gives information about applying the wipe effects available here at Dynamic Web Coding. In case you haven't seen them yet, some examples are available from Cross-Browser Wipe Effects as well as in this tutorial.
Provide visitors to your site the the option of increasing or decreasing the size of text in your document onclick of images, buttons, or links. This code provides that option yet allows you, the page designer, to control which portions of your layout can have text size adjusted and how much.
In the first maintenance release of our Popup Calendar, we added better navigation bar styling and the ability to clear read-only input fields. In this latest release, we include new functionality that enables you to separate form elements to display any combination of a user-selected date, month and year.
Using moo.fx and prototype.lite.js, this javascript slideshow system allows you to have a simple and smooth (cross-fading...) image slideshows and/or showcases on you website.
This is a nice DHTML week planner. It used Ajax to get events/appointments from the server. This script makes it easy for you to move, resize and edit events without having to reload the page. The changes you make are instantly sent to a server so that they could be saved in your database.
Lace is a free web chat application. It takes advantage of Ajax in modern browsers, and degrades gracefully in older browsers. It works just fine in text-only browsers like Lynx.
You basically know a web form when you see one as they always look the same and they’ve kept this look over the years. Try as hard as you might but web forms can only change their appearance so much. Some may argue that this is a good usability feature and I tend to agree but there comes a time when you just need to style web forms so they look different.
Fancy tooltips with an "arrow" pointer are commonly found in desktop applications. Well, now you can add a similarly looking tooltip to your webpage! Similar in function to Cool DHTML Tooltip, the script works in IE4+, NS6+, and Opera 7+.
This is a shakeup of the Ajax Includes script to let you input a list of external pages for the script to choose and selectively include one onto the current page. Three types of inclusion are supported:
RSS is a popular format for syndicating and displaying external content on your site, such as the latest headlines from CNN. Well, with this powerful RSS ticker script, you can now easily display any RSS content on your site in a ticker fashion! This script uses a simple PHP based RSS parser called LastRSS for retrieving a RSS feed, then Ajax and DHTML to display the feed dynamically and with flare.
Pausing RSS scroller is an innovative scroller that combines PHP and external JavaScript to let you show any RSS feed on your site- and beyond! By bypassing Ajax in favour of dynamically loaded JavaScript, the scroller can be included on any site, enabling you to syndicate your feed for other sites to display, just by allowing webmasters to cut and paste the frontend portion of this script.
So here's the case: rotate ads on a website, even when the page is not reloaded. If the chances are that the visitor will spend more time on a page, it makes sense to opt-in for displaying more than one ad at one page load.
The projects and demos in this section all use a MySQL database which holds a single table contact with records from a simplified contact manager application.
I believe that one of the best uses for AJAX is preemptive form validation on fields that can't be checked with regular JavaScript. This tutorial shows you how to lookup a ZIP code and see if it is valid using AJAX. A very nice tutorial.
This tutorial will walk you through the step in order to create an AJAX driven web chat program. This will be a very simple program, but will be expanded upon in future tutorials.
This is a versatile Tab Content script that lets you organize regular DIV contents on the page into a tab interface, with the desired content appearing when a tab is clicked on. A fully unobtrusive, CSS and HTML based script, it supports much requested features such as default tab selected, persistence of the active tab (ie: when page is reloaded), and multiple Tab Contents on the same page.
Looking for a "contractible" way to display content on your page that's easy to implement as well? The Combo-box Viewer script allows users to selectively view HTML content on your page via the SELECT menu.
This is a fun, one player DHTML Phong (Ping Pong) game. Uses cos and sin to move the ball at a specified angle, and the ball's angle can be altered by moving the paddle faster and hitting it. Ball also speeds up the longer the ball is in volley.
I thought I'd share a little bit of what I've learned from noodling around with stylesheets these past few years. Here are some basic organizational practices I try to follow.
Lightbox JS 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. Updated, Version 2.
Description: This tab content script uses Ajax to let you display a selection of external content on your page inside a DIV and via CSS tabs! We got our inspiration for this script from Yahoo's new homepage, which employs such a concept to show news in an organized fashion.
This is a list based folder tree. What you have to do is to create a list. The script will then create the tree based on this list. The script uses cookies to remember state of nodes. It also includes functions for expanding/collapsing all nodes. You can add and delete nodes dynamically by right clicking on the nodes.
This scripts adds an AJAX extension to the static folder tree below. Open the demo and press down your mouse button on one of the nodes in thee tree. This will make a text box appear which makes it possible for you to rename nodes. AJAX is used to send this value to the server without reloading the page.
This is a typical tree menu. The difference between this script and a lot of other similar scripts is that this tree is based a HTML unordered list. One of the advantages of this is that the browser "knows" how to render the tree. This makes the tree very fast even when it contains hundreds and thousands of nodes.
A Javascript image puzzle game. After downloading the zip-file, the only thing you have to do is to replace the image paths in the script with your own images. You can also modify number of columns and rows to get more or fewer puzzle pieces.
DHTML version of the popular solitaire game. This script has been created by playing with absolute position divs and their parent<->child relationship.
An easy to use left panel widget. All you have to do is to use plain HTML to define the content of the panels, and then call a javascript function to initialize it.
This is a script that I made a while back but for some reason I never finished it. It's similar to the foldoutmenu except that it's a little more advanced since the submenus slide open and they have background-images to make the menu look better. This menu has a limit of 2 levels of submenus.
DHTMLSite.com has officially launched. Please help us expand our database by submitting tutorials. DHTMLSite.com aims to deliver you new tutorials everyday, to help you continually learn new skills and improve on your site.
To show CSS to Internet Explorer only, omitting Mozilla, Safari and Opera, you can apply a "Underscore Hack". The advantage is that you can write conditional CSS directly in your external stylesheet, however it doesn't work on Mac nor is this valid CSS.
Code Example: _color: green; //IE Only color: green; //Mozilla/Safari/Opera
In this article, we'll see yet another technique. Most of the existing techniques use negative margins, while I've presented almost one year ago on pro.html.it, the italian portal I write for, a really simple version wich uses relative positioning. Thought I'd share it here, with some variations.
Here's a quick number on how to produce a box with rounded corners using only one image, and off-setting that image for each corner. Feel free to view the source code to reproduce this effect on your own site.
This is a simple bar graph we developed for a tool we're releasing shortly for our client. The concept is simple, utilize the percentage width abilities of CSS to accurately portray a percentage bar graph.
This article details the construction of a menu bar like the one used on the main pages of this site. It's built from standard HTML elements using CSS to define the look and layout and JavaScript to handle the action of the drop down menus.
Tables have often been relegated to providing a primitive form of grid for page layout, at least until CSS was adopted to provide better positioning control.
This article looks at building dynamic displays that provide a window for content. These windows can manipulated dynamically by the user, either by dragging or using a set of control buttons.
ajax im ("asynchronous javascript and xml instant messenger") is a browser-based instant messaging client. It uses the XMLHTTPRequest object in JavaScript to send and receive commands to and from the server. No refreshing of the page is ever needed for this "web application" to work, as everything is updated in real-time via JavaScript.
After messing with script.aculo.us’s JS for a while I figured out just what I was looking for. A variable fixed-width layout. The specifications included
* A handle on a track which could be dragged by the user to shrink or expand the layout width. * A minimum and maximum layout width. * A way to remember the user’s settings last time they were here so they didn’t have to keep on changing the width. * A non-breaking layout.
Description: If you need a simple, elegant calendar to display the current days of the month, Basic Calendar is an excellent script for the purpose. Uses CSS to allow easy changing to its appearance, everything from calendar dimensions, colors, down to the font used to highlight the current day.
In Web applications I've seen numerous — and personally implemented a few — ways to rearrange items in a list. All of those were indirect interactions typically involving something like up/down arrows next to each item. The most heinous require server roundtrips for each modification...boo.
One of the most underestimated part of CSS are inline boxes. Probably most of you know the CSS specifications on the subject, but if you haven't read it, I suggest to look at the article on inline formatting model, by Eric Meyer, one of the most in-depth articles on CSS I've ever read for its level of detail.
When updating the old SlideMenu script I got some problems so I decided to remake the entire menu. Now the menu is much more functional and you can have unlimited levels! This menu now works on all 4.x+ browsers.
The Google AJAX Search API is an experimental API that lets you integrate a dynamic Google search module into your web pages so your users can mash up Google search results with other content on your site or add search results clippings to their own content.
AJAX |
12 Jan 2008 |
640 |
